SYS Styling system — living demo
Every layer, on one page.
If this page looks right in both themes, the system works: reset → tokens → base → composition → components → utilities.
01 Tokens
--color-bg
--color-surface
--color-text
--color-text-2
--color-faint
--color-border
--color-signal
--color-signal-fill
02 Type + furniture
Step 4 — H1 visual treatment
Step 3 — an H2
Step 2 — an H3
Body text with signal emphasis, strong, and inline code.