BetaPublic beta — Read the release notes
Solidiom
Get Started
Documentation

Slate Theme

A neutral monochrome palette with stone tones.

Status
published

Preview

Light

Palette

border

border#94A3B8
border-active#475569
border-muted#CBD5E1

intent

destructive#DC2626

focus

focus-ring#475569
focus-ring-width2px

typography

font-size-base0.875rem
font-size-lg1.25rem
font-size-md1.125rem
font-size-sm0.875rem
font-size-xl1.875rem
font-size-xs0.75rem

foreground

foreground#0F172A
foreground-inverse#F8FAFC
foreground-muted#334155
foreground-subtle#64748B
line-height-base1.25rem
line-height-lg1.5rem
line-height-md1.5rem
line-height-sm1.25rem
line-height-xl2.25rem
line-height-xs1rem
primary#475569
primary-foreground#FFFFFF
primary-hover#374151

radius

radius12px
radius-full999px
radius-lg16px
radius-sm8px
secondary#64748B
success#16A34A

surface

surface#F8FAFC
surface-overlay#FFFFFF
surface-raised#FFFFFF
surface-sunken#F1F5F9
warning#CA8A04

UI Preview

DefaultSuccessWarningError

Card Title

This card uses theme tokens.

Every color, border, and radius is driven by CSS custom properties from this theme.
ℹInfo message.
✔Changes saved.
⚠Session expiring soon.
✖Failed to save.
60%
Dark

Palette

border

border#334155
border-active#94A3B8
border-muted#1E293B

intent

destructive#F87171

focus

focus-ring#94A3B8
focus-ring-width2px

typography

font-size-base0.875rem
font-size-lg1.25rem
font-size-md1.125rem
font-size-sm0.875rem
font-size-xl1.875rem
font-size-xs0.75rem

foreground

foreground#F1F5F9
foreground-inverse#0F172A
foreground-muted#94A3B8
foreground-subtle#64748B
line-height-base1.25rem
line-height-lg1.5rem
line-height-md1.5rem
line-height-sm1.25rem
line-height-xl2.25rem
line-height-xs1rem
primary#94A3B8
primary-foreground#0F172A
primary-hover#CBD5E1

radius

radius12px
radius-full999px
radius-lg16px
radius-sm8px
secondary#64748B
success#4ADE80

surface

surface#0F172A
surface-overlay#1E293B
surface-raised#1E293B
surface-sunken#020617
warning#FBBF24

UI Preview

DefaultSuccessWarningError

Card Title

This card uses theme tokens.

Every color, border, and radius is driven by CSS custom properties from this theme.
ℹInfo message.
✔Changes saved.
⚠Session expiring soon.
✖Failed to save.
60%

A neutral monochrome palette with stone tones.

Overview

Slate is a preset theme that provides a complete set of design tokens for css, tailwind styling profiles. It includes light and dark mode palettes, typography scales, spacing, and interactive states.

Palette

Slate defines a full semantic color palette including surface layers, foreground colors, primary/secondary actions, and semantic states (success, warning, destructive). The palette is designed for WCAG AA contrast compliance in both light and dark modes.

Typography

The theme inherits the project’s font configuration and applies a six-step type scale (xs, sm, base, md, lg, xl) with paired line-heights. Heading and body text follow the Solidiom typeset conventions.

Tokens

Slate exposes semantic tokens through CSS custom properties:

  • Surface: --sol-surface, --sol-surface-raised, --sol-surface-overlay, --sol-surface-sunken
  • Foreground: --sol-foreground, --sol-foreground-muted, --sol-foreground-subtle
  • Primary: --sol-primary, --sol-primary-hover, --sol-primary-foreground
  • States: --sol-success, --sol-warning, --sol-destructive
  • Radius: --sol-radius-sm, --sol-radius, --sol-radius-lg, --sol-radius-full

Outputs

Slate ships in the following output formats:

  • css — CSS custom properties stylesheet
  • tailwind — Tailwind CSS configuration mapping

Installation

pnpm add @solidiom/themes

Import the theme in your project’s entry point and apply it through your chosen styling profile. The theme can be used standalone or extended to create a custom theme.