Primitive tokens

A system-first fallback chain keeps scripts legible when Inter lacks a glyph.

Use: Default interface and reading text.

Platform monospace faces avoid a download for technical strings.

Use: Tokens, code, identifiers, and diagnostics only.

Regular weight supports sustained reading.

Use: Body and supporting copy.

One emphasis step remains distinct across platform fonts.

Use: Labels, controls, and compact titles.

Bold creates hierarchy without ultra-heavy shapes.

Use: Headings and critical emphasis.

Twelve pixels at the default root is the minimum auxiliary size.

Use: Metadata only; never primary instructions.

Fourteen pixels supports compact controls while remaining readable.

Use: Labels and secondary copy.

Browser-default scale respects user text settings.

Use: Default body and input text.

A modest step gives lead text readable emphasis.

Use: Lead paragraphs.

Provides a compact title tier.

Use: Card and section titles.

Creates a clear subsection break.

Use: Level-three headings.

Balances hierarchy with mobile fit.

Use: Level-two headings.

Maintains an obvious page-title tier.

Use: Level-one headings.

Large display text remains usable in translated headings.

Use: Display text with fluid sizing.

Tight leading groups large display lines.

Use: Display and large headings only.

Heading leading preserves hierarchy across wraps.

Use: Headings and titles.

One-and-a-half line spacing supports comprehension and text zoom.

Use: Body copy and form guidance.

Relaxed leading improves long-form scanning.

Use: Documentation and long explanations.

Slight tightening keeps large Latin headings cohesive.

Use: Large Latin headings; reset where script shaping requires.

Neutral tracking is safest across scripts.

Use: Body, controls, and localized content.

Explicit zero avoids magic values.

Use: Intentional edge removal.

Four-pixel base unit supports fine alignment.

Use: Tight icon and text relationships.

Two units create compact internal rhythm.

Use: Compact gaps.

Three units bridge compact and default density.

Use: Control internals.

Sixteen pixels is the default component rhythm.

Use: Default gaps and padding.

Supports comfortable content groups.

Use: Compact surface padding.

Separates related sections without fragmentation.

Use: Default surface padding.

Creates a clear section boundary.

Use: Section and layout gaps.

Provides medium layout separation.

Use: Page regions.

Supports large responsive sections.

Use: Page section padding.

Creates strong page hierarchy.

Use: Large-screen section breaks.

Largest standard tier prevents arbitrary gaps.

Use: Hero and major page regions.

Thirty-two pixels supports dense pointer-led contexts.

Use: Dense desktop only; preserve a 44px hit target.

Forty-four pixels meets the pointer-target baseline.

Use: Default interactive control height.

Forty-eight pixels supports primary and touch-heavy actions.

Use: Prominent controls and mobile.

Sixteen pixels fits supportive inline icons.

Use: Decoration; not standalone controls.

Twenty pixels balances clarity and density.

Use: Default control and status icons.

Twenty-four pixels supports standalone recognition.

Use: Navigation and large controls.

Limits prose to a comfortable line length.

Use: Long-form reading regions.

Bounds wide shells on large screens.

Use: Maximum application canvas.

Separates narrow phones from larger compact layouts.

Use: Content-led progressive enhancement.

Supports common split-layout transitions.

Use: Two-column and navigation changes.

Introduces persistent structure when space permits.

Use: Side navigation and multi-column layouts.

Bounds wide grids without assuming a device.

Use: Large content canvases.

Four columns make narrow composition predictable.

Use: Compact layout planning.

Eight columns support medium composition.

Use: Medium layout planning.

Twelve columns support flexible desktop division.

Use: Expanded layout planning.

Protects content from narrow viewport edges.

Use: Compact page gutters.

Adds breathing room as width grows.

Use: Medium page gutters.

Keeps desktop content aligned without waste.

Use: Expanded page gutters.

Supports flush structural edges.

Use: Tables and attached surfaces.

Small rounding softens compact controls.

Use: Tags and compact fields.

Default radius is approachable without decoration.

Use: Controls and small surfaces.

Large surfaces need proportionate rounding.

Use: Cards and panels.

Creates a distinct elevated-container tier.

Use: Dialogs and feature surfaces.

A capsule value accommodates dynamic dimensions.

Use: Pills, avatars, circular controls.

One-pixel borders separate adjacent surfaces.

Use: Default boundaries.

Two pixels makes selected and invalid boundaries perceivable.

Use: Emphasis and state boundaries.

Flat surfaces preserve hierarchy by default.

Use: Canvas and embedded surfaces.

Low shadow distinguishes a raised card.

Use: Cards and sticky controls.

Medium shadow separates anchored surfaces.

Use: Menus, popovers, and drawers.

Highest shadow supports modal depth.

Use: Dialogs and modal surfaces only.

A consistent tier distinguishes unavailable decoration.

Use: Never the sole disabled-state cue.

Muted imagery remains visible without competing.

Use: Decorative media and illustration layers.

Explicit full opacity completes the scale.

Use: Default content.

Defines normal stacking.

Use: Page content.

Sticky chrome sits above page content.

Use: Headers and sticky controls.

Anchored surfaces clear sticky content.

Use: Menus and popovers.

Modal surfaces establish an interaction layer.

Use: Scrims, dialogs, sheets, drawers.

Time-sensitive status remains visible above modals.

Use: Toasts only.

Provides a tokenized no-motion path.

Use: Reduced motion and immediate changes.

Fast feedback makes manipulation feel immediate.

Use: Hover, press, and focus feedback.

Standard transitions remain noticeable without delay.

Use: Small reveals and state transitions.

Large spatial changes need time to track.

Use: Drawers, sheets, layout transitions.

The capped slow tier prevents ornamental motion.

Use: Rare large-stage transitions.

A decelerating curve gives changes a natural stop.

Use: Default property transitions.

Entering content settles gently.

Use: Content entering the viewport.

Exiting content clears quickly.

Use: Content leaving the viewport.

Four-pixel travel communicates relation without disorientation.

Use: Menus and subtle reveals.

Twelve-pixel travel supports larger surfaces.

Use: Drawers and sheets; never looping decoration.

Three pixels remains visible near component borders.

Use: Keyboard focus-visible indicator.

Offset separates focus from component state rings.

Use: Default focus-visible outline offset.

Forty-four pixels is the NexWell minimum pointer target.

Use: All primary interactive hit areas.