Design System Preview:
Figma

Auto-generated design token catalog from DESIGN.md

01 / COLOR PALETTE

Color Palette & Roles

Primary

Pure Black
#000000
All text, solid buttons, all borders. The sole interface color.
Pure White
#ffffff
All backgrounds, white buttons, text on dark surfaces.

Surface & Glass

Glass Black
rgba(0,0,0,0.08)
Secondary circular buttons, glass overlays on light surfaces.
Glass White
rgba(255,255,255,0.16)
Frosted glass overlay for buttons on dark or colored surfaces.

Gradient System

Hero Gradient -- Electric Green, Purple, Orange, Pink, Cyan

Color exists only in hero gradients and product showcases. The interface layer remains strictly monochrome.

02 / TYPOGRAPHY SCALE

Typography Rules

Variable Weight Spectrum
The quick brown fox jumps Weight 320
The quick brown fox jumps Weight 330
The quick brown fox jumps Weight 340
The quick brown fox jumps Weight 400
The quick brown fox jumps Weight 450
The quick brown fox jumps Weight 480
The quick brown fox jumps Weight 540
The quick brown fox jumps Weight 700
Display Hero
Display / Hero -- 86px / wt 400 / lh 1.00 / ls -1.72px -- figmaSans
Section Heading
Section Heading -- 64px / wt 400 / lh 1.10 / ls -0.96px -- figmaSans
Sub-heading Medium
Sub-heading -- 26px / wt 540 / lh 1.35 / ls -0.26px -- figmaSans
Sub-heading Light
Sub-heading Light -- 26px / wt 340 / lh 1.35 / ls -0.26px -- figmaSans
Feature Title Bold
Feature Title -- 24px / wt 700 / lh 1.45 / ls normal -- figmaSans
Body large text for descriptions and introductions. The light weight creates an airy, ethereal reading experience that matches the design-tool aesthetic.
Body Large -- 20px / wt 330 / lh 1.40 / ls -0.14px -- figmaSans
Body light text at the lightest variable weight. Nearly imperceptible thinness for secondary content and delicate UI copy.
Body Light -- 18px / wt 320 / lh 1.45 / ls -0.26px -- figmaSans
Standard body text for paragraphs, navigation links, and button labels. The default reading weight for all UI copy.
Body / Button -- 16px / wt 400 / lh 1.45 / ls -0.14px -- figmaSans
MONO SECTION LABEL
Mono Label -- 18px / wt 400 / lh 1.30 / ls 0.54px / uppercase -- figmaMono
MONO SMALL TAG
Mono Small -- 12px / wt 400 / lh 1.00 / ls 0.6px / uppercase -- figmaMono
03 / BUTTON VARIANTS

Buttons

Black Pill CTA
White Pill
Black Circle
Glass Dark
Glass Light
Dashed Focus Indicator

All interactive elements use dashed 2px outline on focus, echoing the selection handles in the Figma editor.

04 / CARD EXAMPLES

Cards & Containers

STANDARD CARD

Minimal Border

Standard content card with subtle border and 8px radius. The default container for features and content sections on the white gallery surface.

ELEVATED CARD

Subtle Shadow

Floating card with subtle shadow elevation. Used for product showcases and hover states where the card lifts off the surface.

GLASS SURFACE

Glass Overlay

Glass-effect card using rgba(0,0,0,0.08) background. Secondary containers and grouped content areas with a translucent feel.

05 / SPACING SCALE

Spacing System

Base unit: 8px. Scale from 1px to 50px.

1px
2px
4px
8px
10px
12px
16px
18px
24px
32px
40px
48px
50px
06 / BORDER RADIUS SCALE

Border Radius

2px
Small links
6px
Small containers
8px
Cards, images
50px
Pill buttons
50%
Circle / Icon
07 / ELEVATION & DEPTH

Depth & Elevation

Flat
No shadow. Page background and most text. The default surface.
Level 0
Surface
White card on gradient or dark section. Primary depth through background contrast.
Level 1
Elevated
Subtle shadow for floating cards and hover states. Sparingly applied.
Level 2