Spectra — Docs

Fundamentals

Priority 1 foundation docs

Color

Semantic color tokens and surface roles.

Type

Type scale, families, and readable rhythm.

Shape

Radius and border rules.

Spacing

Space scale and component rhythm.

Motion

Duration and easing tokens.

Shadows

Elevation tokens and when to use them.

Breakpoints

Responsive thresholds and layout shifts.

Layers

Overlay stacking and z-index guidance.

Patterns & shell

Layout contracts and app frame pieces

Layout

Containers, reading widths, and stack rhythm.

Shell

Brand, nav, header, hero, and footer pieces.

Components

Priority 1 and Priority 2 component docs

Forms

Inputs, controls, and toggles.

Buttons

Button variants and state behavior.

Cards

Surface containers for grouped content.

Badge

Tiny inline state and version markers.

Drawer

Overlay panels with placement and backdrop.

Tabs

Minimal tab shell with app-owned state.

Toast

Lightweight feedback surfaces for transient messages.

Helpers & utilities

Docs-facing helpers and tiny escape hatches

Color helpers

Swatches, shadow chips, and link previews for docs/demo use.

Utilities overview

Visibility, text, spacing, layout, code, position, and helper classes.

Current coverage

This docs pass is now covering the core foundation, shell patterns, and the first helper-heavy component set. The next sync pass can trim overlap, tighten naming, and add deeper demos.

A few pages still need cleanup where older wording overlaps newer docs, but the map now matches the site much more closely.

Build with tokens. Compose with components.

Quick start