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.6532 0.2328 25.89)--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.6532 0.2328 25.89)--danger-foregroundoklch(0.98 0 0)--danger-borderoklch(0.49 0.17 28.97)--warningoklch(0.8652 0.1768 90.38)--warning-foregroundoklch(0.52 0.105 85)--warning-borderoklch(0.92 0.08 85)--infooklch(0.6321 0.2018 254.09)--info-foregroundoklch(0.98 0 0)--info-borderoklch(0.46 0.19 260.82)--successoklch(0.7292 0.195 147.36)--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.6623 0.2243 25.06)--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.6623 0.2243 25.06)--danger-foregroundoklch(0.98 0 0)--danger-borderoklch(0.7 0.14 28.13)--warningoklch(0.8818 0.1808 94.24)--warning-foregroundoklch(0.78 0.12 85)--warning-borderoklch(0.38 0.09 85)--infooklch(0.6504 0.1925 251.63)--info-foregroundoklch(0.98 0 0)--info-borderoklch(0.68 0.16 260.15)--successoklch(0.7553 0.2099 146.91)--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…