BetaPublic beta — Read the release notes
Solidiom
Get Started
Documentation

Aurora Theme

A vibrant purple and pink gradient palette.

Status
published

Preview

Light

Palette

border

border#C4B5FD
border-active#7C3AED
border-muted#DDD6FE

intent

destructive#DC2626

focus

focus-ring#7C3AED
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#1E1B4B
foreground-inverse#FAFAFE
foreground-muted#4C1D95
foreground-subtle#7C3AED
line-height-base1.25rem
line-height-lg1.5rem
line-height-md1.5rem
line-height-sm1.25rem
line-height-xl2.25rem
line-height-xs1rem
primary#7C3AED
primary-foreground#FFFFFF
primary-hover#6D28D9

radius

radius12px
radius-full999px
radius-lg16px
radius-sm8px
secondary#8B5CF6
success#059669

surface

surface#FAFAFE
surface-overlay#FFFFFF
surface-raised#FFFFFF
surface-sunken#F3F0FF
warning#D97706

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#4C1D95
border-active#C084FC
border-muted#2D1B69

intent

destructive#F87171

focus

focus-ring#C084FC
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#EDE9FE
foreground-inverse#1A1033
foreground-muted#A78BFA
foreground-subtle#7C3AED
line-height-base1.25rem
line-height-lg1.5rem
line-height-md1.5rem
line-height-sm1.25rem
line-height-xl2.25rem
line-height-xs1rem
primary#C084FC
primary-foreground#1A1033
primary-hover#D8B4FE

radius

radius12px
radius-full999px
radius-lg16px
radius-sm8px
secondary#A855F7
success#34D399

surface

surface#1A1033
surface-overlay#2D1B69
surface-raised#2D1B69
surface-sunken#0D0A1F
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 vibrant purple and pink gradient palette.

Overview

Aurora 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

Aurora 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

Aurora 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

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