Design tokens

Stable Available in release assets

The semantic token and theme contract defines the complete public design vocabulary shared by every Thin-Sky theme.

Design tokens primary example

<section data-theme="thin-sky">
  <h2>Theme-contract content</h2>
  <p>Semantic color, type, spacing, shape, focus, and motion roles come from the selected complete theme.</p>
</section>

Show code

<section data-theme="thin-sky">
  <h2>Theme-contract content</h2>
  <p>Semantic color, type, spacing, shape, focus, and motion roles come from the selected complete theme.</p>
</section>

Anatomy

43 named semantic custom properties
7 complete theme mappings
Generated CSS and DTCG-oriented JSON outputs

Variants and sizes

Neutral
Thin-Sky
Paper
Market
Night Signal
Blueprint
High Contrast

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Light and dark color schemes
Forced colors
Reduced motion
Fluid type and spacing

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Theme selection changes presentation only; controls and content keep native behavior.

Accessibility

Every theme supplies readable semantic foreground, surface, focus, status, motion, and control-density roles; High Contrast uses system colors in forced-colors mode.

Contract: PLATFORM
Basis: Native CSS layout and document defaults over semantic HTML; no APG widget

API

Consume the public --thin-* custom properties. Select a complete mapping with data-theme; do not depend on theme implementation values.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Semantic HTML and browser defaults remain readable if theme assets are unavailable.

Assets and dependencies

/themes.css
/foundation.css

Dependencies: None

Source: packages/ui/src/tokens/index.ts

Stability evidence

Canonical public API and complete documentation: test:tests/unit/release/stability.test.ts
Production-asset difficult-content fixture: test:tests/unit/release/stability.test.ts
Recorded cross-theme and environmental review protocol: review:site/src/pages/quality/foundation-layout.astro#review-protocol