Design Token
An internal visual reference for every current token in src/app/globals.css. Colors are rendered side-by-side in their light and dark contexts, and all remaining tokens are grouped below.
Semantic colors
Every color token from globals.css, resolved on its own light or dark surface.
--background through --success-border
light
data-theme="light"Core surfaces and content
The semantic colors used across the main interface.
--backgroundoklch(0.98 0 0)--foregroundoklch(0.18 0 0)--cardoklch(1 0 0)--card-foregroundoklch(0.27 0 0)--popoveroklch(1 0 0)--popover-foregroundoklch(0.27 0 0)--primaryoklch(0.54 0.15 250)--primary-foregroundoklch(1 0 0)--neutraloklch(0.22 0 0)--neutral-foregroundoklch(0.98 0 0)--secondaryoklch(0.95 0 0)--secondary-foregroundoklch(0.32 0 0)--mutedoklch(0.95 0 0)--muted-foregroundoklch(0.5 0 0)--accentoklch(0.91 0 0)--accent-foregroundoklch(0.22 0 0)--destructiveoklch(0.53 0.19 25)--destructive-foregroundoklch(0.98 0 0)--borderoklch(0 0 0 / 8%)--inputoklch(0.95 0 0)--ringoklch(0.55 0.2 250)--scrollbaroklch(0.87 0 0)Sidebar
A dedicated semantic set for documentation and application navigation.
--sidebaroklch(0.98 0 0)--sidebar-foregroundoklch(0.22 0 0)--sidebar-primaryoklch(0.28 0 0)--sidebar-primary-foregroundoklch(0.97 0 0)--sidebar-accentoklch(0.92 0 0)--sidebar-accent-foregroundoklch(0.28 0 0)--sidebar-borderoklch(0.9 0 0)--sidebar-ringoklch(0.65 0 0)Tabs
Dedicated surface and selected-item tokens for capsule-style tabs.
--tabs-surfaceoklch(0.93 0.01 250)--tabs-indicatoroklch(1 0 0)--tabs-indicator-borderoklch(0.86 0.01 250)Status
Feedback surfaces, readable content, and their supporting borders.
--dangeroklch(0.5892 0.2014 28.97)--danger-foregroundoklch(0.98 0 0)--danger-borderoklch(0.49 0.17 28.97)--warningoklch(0.98 0.02 85)--warning-foregroundoklch(0.52 0.105 85)--warning-borderoklch(0.92 0.08 85)--infooklch(0.5635 0.2408 260.82)--info-foregroundoklch(0.98 0 0)--info-borderoklch(0.46 0.19 260.82)--successoklch(0.6922 0.2319 142.96)--success-foregroundoklch(0.2 0.03 143)--success-borderoklch(0.57 0.19 142.96)dark
data-theme="dark"Core surfaces and content
The semantic colors used across the main interface.
--backgroundoklch(0.19 0 0)--foregroundoklch(0.94 0 0)--cardoklch(0.21 0 0)--card-foregroundoklch(0.94 0 0)--popoveroklch(0.21 0 0)--popover-foregroundoklch(0.94 0 0)--primaryoklch(0.54 0.15 250)--primary-foregroundoklch(1 0 0)--neutraloklch(0.95 0 0)--neutral-foregroundoklch(0.13 0 0)--secondaryoklch(0.28 0 0)--secondary-foregroundoklch(0.94 0 0)--mutedoklch(0.26 0 0)--muted-foregroundoklch(0.73 0 0)--accentoklch(0.31 0 0)--accent-foregroundoklch(0.95 0 0)--destructiveoklch(0.5 0.2 25)--destructive-foregroundoklch(1 0 0)--borderoklch(1 0 0 / 10%)--inputoklch(1 0 0 / 15%)--ringoklch(0.55 0.2 250)--scrollbaroklch(0.7 0 0)Sidebar
A dedicated semantic set for documentation and application navigation.
--sidebaroklch(0.19 0 0)--sidebar-foregroundoklch(0.88 0 0)--sidebar-primaryoklch(0.95 0 0)--sidebar-primary-foregroundoklch(0.13 0 0)--sidebar-accentoklch(0.19 0 0)--sidebar-accent-foregroundoklch(0.95 0 0)--sidebar-borderoklch(0.28 0 0)--sidebar-ringoklch(0.83 0 0)Tabs
Dedicated surface and selected-item tokens for capsule-style tabs.
--tabs-surfaceoklch(0.25 0.01 250)--tabs-indicatoroklch(0.32 0.01 250)--tabs-indicator-borderoklch(0.38 0.01 250)Status
Feedback surfaces, readable content, and their supporting borders.
--dangeroklch(0.58 0.1782 28.13)--danger-foregroundoklch(0.98 0 0)--danger-borderoklch(0.7 0.14 28.13)--warningoklch(0.28 0.06 85)--warning-foregroundoklch(0.78 0.12 85)--warning-borderoklch(0.38 0.09 85)--infooklch(0.5587 0.2213 260.15)--info-foregroundoklch(0.98 0 0)--info-borderoklch(0.68 0.16 260.15)--successoklch(0.667165 0.219713 143.1724)--success-foregroundoklch(0.18 0.03 143)--success-borderoklch(0.78 0.16 143.172)Primary typography
The primary interface face, shown at practical editorial and UI sizes.
--text-tiny · 0.525rem
Sona UI makes expressive interfaces feel intentional.
The system should be easy to inspect, not difficult to decode.
The default typeface carries interface labels, readable documentation, and the visual rhythm of the component library. Scale, weight, and leading create hierarchy without a separate typographic style for every surface.
Theme aliases
The Tailwind-facing aliases exposed from the semantic tokens.
Tailwind color aliases
The generated color names used by utility classes. Each aliases a semantic CSS variable above.
--color-background→ --background · Loading…--color-foreground→ --foreground · Loading…--color-ring→ --ring · Loading…--color-input→ --input · Loading…--color-border→ --border · Loading…--color-destructive→ --destructive · Loading…--color-destructive-foreground→ --destructive-foreground · Loading…--color-accent→ --accent · Loading…--color-accent-foreground→ --accent-foreground · Loading…--color-muted→ --muted · Loading…--color-muted-foreground→ --muted-foreground · Loading…--color-secondary→ --secondary · Loading…--color-secondary-foreground→ --secondary-foreground · Loading…--color-primary→ --primary · Loading…--color-primary-foreground→ --primary-foreground · Loading…--color-neutral→ --neutral · Loading…--color-neutral-foreground→ --neutral-foreground · Loading…--color-popover→ --popover · Loading…--color-popover-foreground→ --popover-foreground · Loading…--color-card→ --card · Loading…--color-card-foreground→ --card-foreground · Loading…--color-scrollbar→ --scrollbar · Loading…--color-success→ --success · Loading…--color-success-foreground→ --success-foreground · Loading…--color-success-border→ --success-border · Loading…--color-info→ --info · Loading…--color-info-foreground→ --info-foreground · Loading…--color-info-border→ --info-border · Loading…--color-warning→ --warning · Loading…--color-warning-foreground→ --warning-foreground · Loading…--color-warning-border→ --warning-border · Loading…--color-danger→ --danger · Loading…--color-danger-foreground→ --danger-foreground · Loading…--color-danger-border→ --danger-border · Loading…--color-sidebar→ --sidebar · Loading…--color-sidebar-foreground→ --sidebar-foreground · Loading…--color-sidebar-primary→ --sidebar-primary · Loading…--color-sidebar-primary-foreground→ --sidebar-primary-foreground · Loading…--color-sidebar-accent→ --sidebar-accent · Loading…--color-sidebar-accent-foreground→ --sidebar-accent-foreground · Loading…--color-sidebar-border→ --sidebar-border · Loading…--color-sidebar-ring→ --sidebar-ring · Loading…Foundations
Every non-color token currently declared in globals.css.
Typography
The primary type system is shown below; these are the exposed font and size tokens.
--font-sansLoading…--font-monoLoading…--font-rubikLoading…--font-clash-displayLoading…--text-tinyLoading…Layout and sizing
Shared dimensions that keep the documentation shell and its responsive layout consistent.
--radiusLoading…--sidebar-widthLoading…--spacing-header-heightLoading…--spacing-sidebar-widthLoading…--spacing-mobile-sidebar-heightLoading…--breakpoint-xsLoading…--docs-flowLoading…Motion
Named easing curves and animation recipes. They are reference values, not an instruction to animate every interaction.
--ease-in-cubicLoading…--ease-out-cubicLoading…--ease-in-out-cubicLoading…--animate-fade-in-upLoading…--animate-floatLoading…