Subframe

A stark, near-monochrome product-marketing surface for an AI-native design tool — light-gray canvas, oversized black Inter headlines with aggressive negative tracking, soft 24px cards with no shadow, and a single glossy dark \"device\" pill as the hero artifact. The voice is engineered-minimal: nearly all type and chrome is grayscale, the only true color is a blue focus ring, and brand voltage comes from scale (a 96px headline) and from one photoreal dark hardware-style hero element rather than from accent color.

subframe.com

Works with Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit

↓ .md ↓ All files

loading…

Color Palette

Accent

Neutrals

Typography

display 96px · 700 · 1.0

The quick brown fox jumps

subhead 48px · 500 · 1.125

The quick brown fox jumps

heading 24px · 700 · 1.167

The quick brown fox jumps

label 12px · 500 · 1.333

The quick brown fox jumps

button 12px · 500 · 1.333

The quick brown fox jumps

Spacing & Shape

Spacing

Name	Value	Preview
xxs	4px
micro	6px
xs	8px
s	12px
sm	16px
ml	20px
md	24px
lg	32px
xl	48px
xxl	64px
huge	96px
section	128px
section-xl	192px

Border Radius

Name	Value	Preview
xs	3px
sm	4px
lg	16px
xl	24px
pill	9999px

FAQ

What colors does Subframe use?: Subframe's core palette includes #000000, #000000, #171717, #1c1c1c, #242424. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Subframe DESIGN.md.
What font does Subframe use?: Subframe's primary typeface is Inter. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
What is the Subframe design system?: A stark, near-monochrome product-marketing surface for an AI-native design tool — light-gray canvas, oversized black Inter headlines with aggressive negative tracking, soft 24px cards with no shadow,…

More like this

↓ .md ↓ All files

loading…