Design Tokens — Aster Design System

Token Architecture & Precedence

Aster organizes design tokens into a disciplined 3-tier hierarchy: Primitives (raw atomic values), Semantic Tokens (purpose-driven roles that adapt across light and dark themes), and Density Metrics (standard control and table dimensions).

Strict Semantic Token Precedence Rule

Components and layouts must bind strictly to semantic tokens (--as-semantic-color-*), density tokens (--as-density-*), and structural foundation tokens. Never reference primitive colors (--as-color-primitive-*) in component markup.

CSS Custom Property Usage

/* Correct: Theme-agnostic semantic binding */
.my-card {
  background-color: var(--as-semantic-color-surface-card);
  color: var(--as-semantic-color-text-default);
  border-radius: var(--as-radius-md);
  box-shadow: 0 0 1px 0px var(--as-semantic-color-border-subtle), inset 0 0 1px 0px var(--as-semantic-color-border-subtle);
}

Semantic Color Tokens

Semantic colors define the exact role of an element. Click any token badge to instantly copy its CSS custom property.

1. Surface Roles

Background layers, elevated cards, and status surfaces.

Light	Dark	Purpose & Role
`#FFFFFF`	`#121212`	Primary background canvas baseline (Shade-DS Surface 1)
`#F5F5F5`	`#1E1E1E`	Elevated container card surface (Shade-DS Surface 2)
`#EEEEEE`	`#333333`	Secondary grouping and table header fill (Shade-DS Surface 3)
`#EEEEEE`	`#333333`	Disabled and recessed background surface
`#E6F4EA`	`#032A1D`	Positive alert, toast, and badge surface
`#FFF8E1`	`#2C1F04`	Caution alert and notice surface
`#FBEAEB`	`#281718`	Destructive error surface and callout fill
`#E3F2FD`	`#0D1B2A`	Informational banner and focus highlight surface
`#F3E5F5`	`#1C062E`	Blueprint callouts and active layout container fill

2. Text & Content Roles

Typography ink with guaranteed WCAG 2.2 AA / AAA contrast.

Light	Dark	Contrast & Role
`#121212`	`#E0E0E0`	High-contrast primary body and title text (>= 14:1 AAA)
`#555555`	`#AAAAAA`	Secondary descriptions, helper text, and metadata (>= 7:1 AAA)
`#FFFFFF`	`#0F0F0F`	High-contrast text atop primary monochrome fills (19.25:1 AAA)

3. Border & Focus Roles

Hairlines, 3:1 non-text control boundaries, and keyboard rings.

Light	Dark	Boundary Purpose
`#EEEEEE`	`#333333`	Structural hairlines, table cell dividers, and soft borders
`#777777`	`#777777`	Form control non-text contrast boundary (>= 3:1 non-text AA)
`#1565C0`	`#64B5F6`	High-visibility accessible focus ring indicator (>= 5:1 AA)

4. Interactive & Primary Action Roles

Monochrome primary action buttons and hyperlinks.

Light	Dark	Interaction Role
`#0F0F0F`	`#FFFFFF`	Primary interactive action fill (monochrome inverted)
`#333333`	`#E0E0E0`	Hover state for primary interactive buttons
`#FFFFFF`	`#0F0F0F`	Label text inside primary buttons (19.25:1 AAA)
`#0F0F0F`	`#FFFFFF`	Inline interactive hyperlink text

5. Status & Feedback Roles

Positive, warning, error, info, and active feedback message text and icons.

Light	Dark	Status Message Application
`#167a35`	`#6DD78C`	Accessible positive status message text and icon fill
`#B05A00`	`#FF9800`	Accessible caution status message text and icon fill
`#B91F1C`	`#FF453A`	Accessible error text and 12px circular red dot dismiss
`#1565C0`	`#64B5F6`	Accessible info/focus message text and icon fill
`#6A1B9A`	`#D9A7F7`	Active accent layout text and blueprint badge ink

Typography Tokens

Aster defines four distinct typeface roles and a typographic scale calibrated for legibility.

Font Families

CSS Custom Property	Font Family Stack	Role & Context
	`'Bebas Neue', Impact, 'Arial Narrow', sans-serif`	Display and hero headlines (Shade-DS Expressive)
	`'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`	Primary interface, body, and UI control stack
	`'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace`	Technical measurements, tokens, and code snippets
	`'Merriweather', Georgia, Cambria, 'Times New Roman', serif`	Editorial quotes and long-form callouts

Type Scale Hierarchy

Pixels	Rem	Target Application
`11px`	`0.6875rem`	Micro metadata label (exception-only)
`12px`	`0.75rem`	Captions, badges, code, compact data
`14px`	`0.875rem`	Standard interface label and secondary body
`14px`	`0.875rem`	Default control and body copy text
`16px`	`1.0rem`	Large body copy and prominent card titles
`22px`	`1.375rem`	Section headers and modal titles
`24px`	`1.5rem`	Small expressive headlines and quote copy
`28px`	`1.75rem`	Medium expressive headlines
`32px`	`2.0rem`	Large expressive section titles
`36px`	`2.25rem`	Small hero display headers
`40px`	`2.5rem`	Medium hero display headers
`52px`	`3.25rem`	Primary hero display headlines

Spacing Scale (4px Base Unit)

A rigorous 4px spacing scale provides rhythm and consistent layout banding across all components.

CSS Custom Property	Value	Visual Scale	Recommended Usage
	`0px`		Reset / zero spacing
	`4px`		Micro spacing, icon-to-label gaps, badge padding
	`8px`		Compact form gaps, button internal icon spacing
	`12px`		Compact padding, alert inner spacing
	`16px`		Standard input horizontal padding, card inner gutter
	`20px`		Intermediate container padding and modal margins
	`24px`		Button horizontal padding (24px left/right), card padding
	`32px`		Major section spacing and component groupings
	`40px`		Layout banding and content block divisions
	`48px`		Macro layout divisions and page header margins
	`64px`		Hero sections and full-bleed layout margins

Corner Geometry & Radii

Aster enforces a minimum component corner radius of 4px and a default radius of 8px. 2px radii are strictly prohibited.

CSS Custom Property	Radius	Visual Preview	Component Implementation Policy
	`0px`		Sharp corners for flush table row dividers and full-bleed grids
	`4px`		Minimum component radius: inputs, selects, textareas, checkboxes
	`8px`		Default component radius: alerts, toasts, cards, dropdowns
	`12px`		Elevated containers: dialogs, drawers, popovers, panels
	`9999px`		Full pill radius: buttons, badges, avatars, switches, sliders

Elevation, Hairlines & Motion

Signature Shade-DS double 1px glass glow boundaries and calibrated spring physics.

Elevation & Shadows

CSS Custom Property	Value	Structural Elevation Role
	`1px`	Double 1px glass glow structural boundary rule
	`2px`	High-visibility keyboard focus indicator ring
	`none`	Zero elevation shadow for flat surfaces
	`0 2px 4px rgba(0, 0, 0, 0.04)`	Subtle ambient lift for small dropdown menus
	`0 8px 24px rgba(0, 0, 0, 0.12)`	Floating overlay shadow for modals and dialogs

Motion Timing & Physics Curves

All motion collapses under @media (prefers-reduced-motion: reduce) for vestibular accessibility.

CSS Custom Property	Timing / Curve	Interaction Application
	`80ms`	Tactile button and interactive control press timing
	`200ms`	Standard interaction transition duration
	`300ms`	Slide-over drawers, dialog transitions, accordion expand
	`500ms`	Hero entry and macro layout reveals
	`cubic-bezier(0.22, 1, 0.36, 1)`	Decelerating exit and entry curve
	`cubic-bezier(0.4, 0, 0.2, 1)`	Standard smooth symmetric acceleration/deceleration
	`cubic-bezier(0.22, 1.15, 0.36, 1)`	Snappy micro-interaction hover response
	`cubic-bezier(0.34, 1.56, 0.64, 1)`	Bouncy kinetic spring for buttons and toggles

Density Scale (Single Standard Scale)

Aster adheres strictly to a single standard density scale. Standard control heights are 48px for buttons and 44px for inputs/selects to ensure touch ergonomics.

CSS Custom Property	Value	Ergonomic Metric & Hit Target
	`40px`	Standard control height (table headers, icon buttons)
	`16px`	Standard form input horizontal padding
	`8px`	Standard control vertical padding
	`48px`	Standard data table row height
	`16px`	Standard data table horizontal cell padding
	`12px`	Standard data table vertical cell padding