BetaPublic beta — Read the release notes
Solidiom
Get Started
Documentation

Forest Theme

An earthy green palette with warm undertones.

Status
published

Preview

Light

Palette

border

border#B5C4A6
border-active#3E6B24
border-muted#D4DECB

intent

destructive#B91C1C

focus

focus-ring#3E6B24
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#1A2E05
foreground-inverse#FAFAF5
foreground-muted#4A5D3A
foreground-subtle#6B7F5E
line-height-base1.25rem
line-height-lg1.5rem
line-height-md1.5rem
line-height-sm1.25rem
line-height-xl2.25rem
line-height-xs1rem
primary#3E6B24
primary-foreground#FFFFFF
primary-hover#33581C

radius

radius12px
radius-full999px
radius-lg16px
radius-sm8px
secondary#5B8C3E
success#2D7A2D

surface

surface#FAFAF5
surface-overlay#FFFFFF
surface-raised#FFFFFF
surface-sunken#F0F0E8
warning#B45309

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#2D4A22
border-active#86EFAC
border-muted#1A2E14

intent

destructive#F87171

focus

focus-ring#86EFAC
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#E8F0E0
foreground-inverse#0F1A0A
foreground-muted#9DB490
foreground-subtle#6B7F5E
line-height-base1.25rem
line-height-lg1.5rem
line-height-md1.5rem
line-height-sm1.25rem
line-height-xl2.25rem
line-height-xs1rem
primary#86EFAC
primary-foreground#0F1A0A
primary-hover#BBF7D0

radius

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

surface

surface#0F1A0A
surface-overlay#1A2E14
surface-raised#1A2E14
surface-sunken#080F05
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%

An earthy green palette with warm undertones.

Overview

Forest 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

Forest 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

Forest 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

Forest 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.