Calm, high-contrast,
Thai-first, clinical-dense.
Material Indigo + Zinc + Emerald + IBM Plex Sans Thai + 14px clinical base.
3-layer token architecture (primitive → semantic → component) extracted from production
_aegisx-tokens.scss. Every pair meets WCAG 2.1 AA minimum.
01Color · Primitive palette
Layer 1. Raw hue ladders — Zinc, Gray, Material Indigo, Emerald, Amber, Red, Blue, Cyan, Purple, Pink.
Use via --ax-color-{hue}-{step}. Avoid in UI code; prefer semantic tokens below.
Click any swatch to copy its hex.
02Color · Semantic roles
Layer 2. Role-based aliases. Use these in UI code — they flip between light and dark theme automatically.
Each role has six variants: faint · muted · subtle · default · emphasis · inverted.
Surfaces · background + border
Text hierarchy
03Typography
Untitled UI scale. Body xs → xl + Display xs → lg. Base body is text-sm (14px) for clinical density.
Font stack: IBM Plex Sans Thai.
Body
Display
04Spacing
4px grid. Base 2xs → 4xl. Semantic aliases component.* · layout.* · inset.* · stack.* in dtcg/spacing.json.
05Radius
Border radius scale. md: 6px is default for buttons/inputs/cards.
06Elevation · Shadow
Soft shadows tuned for light + dark. sm for cards, md for raised panels, lg for modals/dropdowns.
07Motion
Durations fast · normal · slow · slower + M3 easing standard · emphasized.
Respects prefers-reduced-motion.
08Breakpoints & Grid
Material-style breakpoints xs → 2xl. 12-column grid with 24px gutter.