Foundations
Askara Design System 3.0 — Type, Spacing & Motion Tokens
Askara Design System 3.0 — Type, Spacing & Motion Tokens
Eleven tokens covering the full Askara surface — from a status pill to a marketing hero. Aligned with Tailwind's default text scale so this hub and askara-web speak the same language. Base body size is --text-base (1rem / 16px). --text-2xs is Askara-specific (sub-Tailwind) for the 10px Plex Mono micro-labels. Decorative ::before icon glyphs (chevrons, etc.) are exempt.
| Token | Value | Use |
|---|---|---|
--text-2xs | 0.625rem (10px) | Plex Mono uppercase micro-labels (Askara-specific) |
--text-xs | 0.75rem (12px) | Code, buttons, small mono labels, nav |
--text-sm | 0.875rem (14px) | Small body, callout titles, section intros |
--text-base | 1rem (16px) | Body default |
--text-lg | 1.125rem (18px) | Emphasized body, sub-headings (h3) |
--text-xl | 1.25rem (20px) | Large headings |
--text-2xl | 1.5rem (24px) | H2 (small) / page-title, h3 (large) |
--text-3xl | 1.875rem (30px) | H2 medium, KPI display |
--text-4xl | 2.25rem (36px) | H2 large |
--text-5xl | 3rem (48px) | H1 medium |
--text-6xl | 3.75rem (60px) | H1 hero / display |
Chevron and dingbat icons in ::before pseudo-elements (e.g. the ▶ in <details> twisties) may use raw rem values and are intentionally outside this scale. They are icons, not text — applying the scale would visibly enlarge them.
A 4px-base rem ladder. Use these tokens for every margin and padding in component styles. Email-signature HTML templates are exempt — email clients require px.
--space-3xs--space-2xs--space-xs--space-sm--space-md--space-lg--space-xl--space-2xl--space-3xl--space-4xlThree duration tokens cover every transition in the system. Easing is the CSS ease keyword by default. The site respects prefers-reduced-motion — transitions collapse to 0.01ms when the user has enabled OS-level reduced motion.
--duration-fast--duration-emphasis--duration-slow| Token | Value | Use |
|---|---|---|
--duration-fast | 0.18s | Hover and focus on interactive elements |
--duration-emphasis | 0.25s | State changes that should be noticed (shadows, surface lifts) |
--duration-slow | 0.3s | Longer fades — toast-style messages, copy feedback |
The stylesheet ships with a @media (prefers-reduced-motion: reduce) block at the bottom of brand.css. Transitions and animations collapse to 0.01ms — preserving end-state without flicker — when the user has enabled the OS-level setting.