Frontier Primitives

Production UI components using Frontier design tokens. Ink background, paper text, glass morphism, and minimalist button styling.

Glass Morphism

White opacity gradients create depth without color decoration. Five variants from subtle to heavy.

subtle

Minimal glass effect

standard

Balanced visibility

input

Form input styling

heavy

Maximum frosting

Buttons

Paper-on-ink solid buttons (not gradients). Solid and ghost variants with enabled/disabled/loading states.

Solid Variant

Default (enabled)

Disabled state

Loading state

Ghost Variant

Default (enabled)

Disabled state

Multiple actions

Typography

Four text color variants for hierarchy: primary (paper), secondary, muted (silver), and subtle.

Primary Text (Paper)

Used for headings and primary content — #F2EDE5

Secondary Text

Used for subheadings and important content

Muted Text (Silver)

Used for body text and descriptions — #6A6A68

Subtle Text

Used for hints, captions, and low-emphasis content

Motion Card

FrontierMotionCard supports full Framer Motion props for advanced animations.
Hover ScaleTry interacting with this card
Hover RotateTry interacting with this card
Tap FeedbackTry interacting with this card

Composition Example

Real-world example combining glass cards, typography, buttons, and dividers.

Coherence Check

7-factor calibration ritual to assess your current state

StabilityRate your sense of stability today
ClarityRate your sense of clarity today
ConnectionRate your sense of connection today
Takes 2 minutes

Interactive Demo

Select a glass variant to see it in action with the composition example above.

Glass Variant: standard

Current glass properties:

• background: white 5%

• border: white 10% (1px)

• backdrop-filter: blur(12px)

Design Principles

Color = DataColor is reserved for meaning (coherence states, factors). UI chrome uses ink/paper/silver only.
Glass, Not GradientsDepth comes from white opacity overlays, not colored gradients. Keeps focus on content.
Solid ButtonsPaper-on-ink solid fills for clarity. No gradients, shadows, or 3D effects.
Typography HierarchyFour text variants (primary, secondary, muted, subtle) create clear information hierarchy.
Production components from @/components/ui/frontier-primitives