Design System Audit

subframe.com
Visual Language

Complete design system extracted from www.subframe.com — every token, component, interaction pattern, and accessibility note, all from real values.

8Color tokens
5Type styles
5Breakpoints
InterPrimary font
01 — Foundations

Color Palette

All color values extracted from the live stylesheet. Contrast ratios per WCAG 2.1.

black

#000000

Dominant — text

20.47:1 on page bg #fcfcfc · AAA ✓

canvas

#fcfcfc

Dominant — background

20.47:1 on black · AAA ✓

primary

#fafafa

Major — background

20.12:1 on black · AAA ✓

white

#ffffff

Major — background, text

1.03:1 on page bg #fcfcfc · fails AA

accent

#dadada

Accent — background

15.02:1 on black · AAA ✓

ink-deepest

#171717

Accent — text

17.47:1 on page bg #fcfcfc · AAA ✓

ink-deepest-2

#242424

Accent — background

15.52:1 on white · AAA ✓

text-secondary

#a3a3a3

Accent — text

2.46:1 on page bg #fcfcfc · fails AA
02 — Foundations

Typography

Single font family: Inter — used across all roles. Font files loaded by the site: Inter (100, 200, 300, 400, 500, 600, 700, 800, 900) · Instrument Serif (400) · Fragment Mono (400).

RoleSpecsSampleUsed on
Micro
Inter
12px / 500
lh 1.33
Ship what you design.The AI-native design tool built for code.Start buildingWatch demo
BODY element · 34 uses · real site copy
Body
Inter
18px / 500
lh 1.33
Start building
SPAN element · 4 uses · real site copy
Body
Inter
16px / 400
lh 1.50
The quick brown fox jumps over the lazy dog
HTML element · 1 uses
Display Hero
Inter
96px / 700
lh 1.00
Ship what you design.
H1 element · 1 uses · real site copy
Subheading
Inter
48px / 500
lh 1.13
The AI-native design tool built for code.
P element · 1 uses · real site copy
03 — Components

Navigation

Nav demo using extracted colors, font, real link labels and the site's real logo.

nav · demo using extracted tokens & real links
subframe.com logo subframe.com
PricingDocsBlog
Extracted nav tokens
Background#1a1a1a
Text color#ffffff
Font familyInter
Links (extracted)Pricing · Docs · Blog

Layout values (height, padding, link states) are demo styling — not extracted from the site.

04 — Components

Button Variants

Color and radius tokens extracted from the scrape; variants are representative demos. Border-radius: 24px · fill type: solid · padding density: normal.

btn-primary · token demo

bg #fafafa · color #1a1a1a · radius: 24px

btn-secondary · outlined demo

Demo variant — outlined treatment of the extracted primary color #fafafa.

btn-ghost · text-only demo

Demo variant — text-only treatment of the extracted primary color.

btn-disabled · demo state

Generic disabled-state demo — not extracted from the site.

05 — Components

Cards & Surfaces

Depth communicated through shadows and background contrast.

section surface

bg #ffffff · text #000000

page canvas

bg #fcfcfc · text #000000

card surface

bg #fafafa · text #000000

card surface

bg #dadada · text #000000

07 — Components

Form Elements

Representative form patterns styled with extracted color and radius tokens. Input border-radius: not detected in scrape.

Contact form — site-styled demo

subframe.com
Get in Touch

support@subframe.com (extracted from site)

Input states
input · default

radius: not detected · demo border/background styling

input · focus state demo

Demo focus treatment using extracted primary color #fafafa.

select · dropdown
08 — Foundations

Spacing Scale

Spacing values observed in the live layout. Values extracted from stylesheet padding, margin, and gap declarations.

8px
sm
12px
md
24px
lg
96px
section
09 — Foundations

Border Radius

Corner radius tokens observed across components. All values extracted from live stylesheet.

16px
lg
16px
24px
xl
24px
10 — Foundations

Elevation & Depth

Box-shadow tokens extracted from CSS variables. Shadow values represent real usage.

Observed element shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px

Observed element shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.25) 0px 4px 4px -2px inset, rgba(0, 0, 0, 0.25) 0px -4px 4px -2px inset, rgba(255, 255, 255, 0.1) -2px 0px 2px -2px inset, rgba(255, 255, 255, 0.1) -2px 0px 2px -2px inset

11 — Interactions

Motion

Transition and animation values extracted from the scraped stylesheets, with real occurrence counts.

hover demo · using extracted tokens

Demo transitions use the fastest extracted duration (0.15s cubic-bezier(.4,0,.2,1)).

idle vs hover · frozen demo states

Demo hover treatment — fill with extracted primary color. Real hover styles are not scraped.

Motion tokens (extracted)
TokenValueOccurrences
duration-fast0.15s12× in stylesheet
duration-base0.2s15× in stylesheet
duration-slow0.3s2× in stylesheet
duration-slower0.4s6× in stylesheet
duration-slowest2s4× in stylesheet
easing-1cubic-bezier(.4,0,.2,1)12× in stylesheet
easing-2linear8× in stylesheet
easing-3ease-out4× in stylesheet
12 — Responsive

Responsive Behavior

Breakpoint boundaries detected in the scraped stylesheet media queries, with real rule counts.

BreakpointBoundaryUsage
Tablet640px3 @media rules
Tablet-2768px7 @media rules
Tablet-3769px5 @media rules
Desktop1024px3 @media rules
Wide1280px2 @media rules
640px
768px
769px
1024px
1280px

Extracted from https://www.subframe.com/ stylesheets.

13 — Assets

Iconography & Brand Assets

Assets and links extracted from the scraped pages.

Brand mark — extracted asset
subframe.com logo

https://res.cloudinary.com/subframe/image/upload/v1770085585/uploads/302/gjitumzrksd9ud8ruu0h.svg

Brand asset — ydowdxfcuaktbiclctyx
ydowdxfcuaktbiclctyx

https://res.cloudinary.com/subframe/image/upload/v1770320727/uploads/302/ydowdxfcuaktbiclctyx.svg

Social links found on site
YouTube ↗
Icon system

No icon library (Phosphor, Feather, Heroicons, Font Awesome…) detected in the scraped pages.