Colors
OKLCH tokens in two themes (data-theme="dark|light") and two palettes (data-palette="gold|tamam"). Components read tokens only, so switching the attribute restyles everything. Both themes are shown below at once.
Surfaces
Page, cards and popups. Cards are translucent layers over the page color; popups and modals are opaque.
dark--zg-bgPage background
--zg-s1Card layer
--zg-s2Inputs, hover, nested blocks
--zg-s3Pressed, strong layer
--zg-popMenus, selects, calendars, modals (opaque)
--zg-glassFrosted bars
--zg-strokeHairlines and dividers
light--zg-bgPage background
--zg-s1Card layer
--zg-s2Inputs, hover, nested blocks
--zg-s3Pressed, strong layer
--zg-popMenus, selects, calendars, modals (opaque)
--zg-glassFrosted bars
--zg-strokeHairlines and dividers
Text
Three levels. text-3 is for hints only; all three pass AA on bg in both themes.
dark--zg-text-1Primary text and headings
--zg-text-2Secondary text, descriptions
--zg-text-3Hints, captions, disabled
--zg-brand-textBrand colored text and links
--zg-sky-textInfo colored text
light--zg-text-1Primary text and headings
--zg-text-2Secondary text, descriptions
--zg-text-3Hints, captions, disabled
--zg-brand-textBrand colored text and links
--zg-sky-textInfo colored text
Brand
Switches with data-palette: gold (default) or tamam. Use the brand fill for ONE hero element per view.
dark--zg-brandPrimary actions, active states
--zg-brand-hoverHover of brand fills
--zg-brand-softTinted backgrounds, selected rows
--zg-brand-glowGlow shadow under primary buttons
--zg-on-brandText on brand fills
light--zg-brandPrimary actions, active states
--zg-brand-hoverHover of brand fills
--zg-brand-softTinted backgrounds, selected rows
--zg-brand-glowGlow shadow under primary buttons
--zg-on-brandText on brand fills
Status
Success, warning, danger, info. Use the text variants on light surfaces.
dark--zg-greenSuccess
--zg-amberWarning
--zg-redDanger
--zg-skyInfo
light--zg-greenSuccess
--zg-amberWarning
--zg-redDanger
--zg-skyInfo
Inverse
A surface that is dark in light theme and light in dark theme, for tooltips and the inverse button.
dark--zg-inv-bgInverse background
--zg-inv-fgInverse text
light--zg-inv-bgInverse background
--zg-inv-fgInverse text
Palettes
Only the brand and sky tokens change between palettes.
gold--zg-brand
--zg-brand-hover
--zg-brand-soft
--zg-brand-text
--zg-sky
tamam--zg-brand
--zg-brand-hover
--zg-brand-soft
--zg-brand-text
--zg-sky
Rules of thumb
- Use tokens, never raw hex. A raw color will not follow the theme or the palette.
- Put ONE brand-filled element per view (the main call to action or the hero tile).
- On light theme cards separate from the page by a hairline and a soft shadow. Keep cards on
--zg-bg or a --zg-s1 layer; do not place a card on another card of the same color. - For an always-dark surface (hero, code, media) use
UiCard variant="inverse". It re-scopes the tokens to dark inside, so text and charts stay readable in light theme. - Status color alone is not enough: pair it with an icon or a label.
ziyarago/ui