--color-backgroundCore & Design System
An automatically maintained reference for design, global components, and shared code.
RangeSlider
Tabs
Underlined tabs switch locally between content panels without navigation.
The real global components rendered with meaningful example props.
Colors & Tokens
Rendered directly from packages/ui/src/styles/variables.css. Changes appear here immediately.
--color-background-soft--color-surface--color-surface-elevated--color-primary--color-accent-purple--color-accent-blue--color-accent-cyan--color-accent-green--color-accent-yellow--color-accent-orange--color-accent-redTypography
Heading One
Heading Two
Heading Three
A normal paragraph for longer content. Good readability, clear hierarchy, and calm contrast form the standard.
“A design system makes decisions visible and repeatable.”
const design = "consistent";Forms
Lists, Tables & Status
Standard list
- Project-neutral
- Reusable
- Documented
Status
InfoSuccessWarningError
| Element | Status | Area |
|---|---|---|
| Button | Stable | Components |
| Vector | Tested | Core |
| Input | Design default | UI |