Designer specimen

AI-first brand system

Curated visual reference for designers. Each item shows the rendered result, token name, suggested Figma variable name, and intended usage.

Color roles

Use color by job, not decoration.

Page background

Primary dark field for AI-first pages.

Token: color.field.primary
CSS: --ai-color-field-primary
Figma: color/field/primary

Plate surface

Cards, panels, grouped content.

Token: color.field.plate
CSS: --ai-color-field-plate
Figma: color/field/plate

Signal green

Proof, active states, important signal. Not generic decoration.

Token: color.signal.green
CSS: --ai-color-signal-green
Figma: color/signal/green

Primary text

Main high-contrast foreground.

Token: color.voice.primary
CSS: --ai-color-voice-primary
Figma: color/voice/primary

Cream text

Warmer editorial foreground.

Token: color.voice.cream
CSS: --ai-color-voice-cream
Figma: color/voice/cream

Subtle border

Separators and card outlines.

Token: color.border.subtle
CSS: --ai-color-border-subtle
Figma: color/border/subtle

Typography

Hierarchy and scale.

Hero display
Token: typography.display.hero / Figma: typography/display/hero
Section display
Token: typography.display.section / Figma: typography/display/section
Large body: explanatory lead copy.
Token: typography.body.large / Figma: typography/body/large
Eyebrow label
Token: typography.body.eyebrow / Figma: typography/body/eyebrow

Spacing

Spacing scale used by page primitives.

Section Y
Token: spacing.sectionY / Figma: spacing/section-y
Plate padding
Token: spacing.platePadding / Figma: spacing/plate-padding
Gap
Token: spacing.gap / Figma: spacing/gap
Gap small
Token: spacing.gapSmall / Figma: spacing/gap-small

Radius and elevation

Shape language.

Token: radius.small / Figma: radius/small
Token: radius.card / Figma: radius/card
Token: radius.plate + shadow.plate / Figma: radius/plate + shadow/plate

Components

Reusable AI-first primitives.

Button

Primary and secondary action treatments.

Classes: .ai-btn .ai-btn--primary/.ai-btn--secondary
Uses: button.*, radius.pill, signal.green

Product Lens

Decision block: intent, answer, proof, action.

IntentUser decision input.
ProofEvidence behind claim.
Classes: .ai-product-lens, .ai-lens-grid, .ai-lens-card

Proof Stat

Evidence item inside proof rail.

40MLabel

Short explanation.

Classes: .ai-proof-stat, .ai-proof-stat-value

Step Card

Ordered process / how-to pattern.

01

Step

Short explanation.

Classes: .ai-step-card, .ai-step-card-title

App Shelf

Grid for app/tool/product cards from the simulator app shelf pattern.

App cardShort description.
App cardShort description.
Classes: .ai-app-shelf, .ai-app-card