Design System Extractor · live computed styles

Design System
Analysis of Framer

A reverse-engineered design system: a true-black canvas, GT Walsheim display type over Inter body, and one electric #0099ff accent carried by a signature blue glow.

Display type rendered in Hanken Grotesk — the nearest Google substitute for Framer's licensed GT Walsheim.

01 — Foundations

Colour Palette

02 — Foundations

Typography

Display & headings in GT Walsheim Medium (shown as Hanken Grotesk, the nearest Google substitute); all body text in Inter. Hierarchy is built from family and size far more than weight.

03 — Components

Button Variants

button-primary
Brand-blue fill with a soft blue glow. Reserved for key actions and accents.
button-light
The actual homepage hero CTA — a white pill with near-black text.
button-secondary
Translucent white over dark; a quiet secondary action.
button-pill
Surface-alt pill for tags, filters, and toggles.
link · inline
MarketplaceAcademy
White ink with an underline; hover shifts to brand blue.
04 — Components

Cards & Surfaces

Cards sit on #1e1e1e surfaces with hairline borders and 15px radii, lifting on hover with a soft shadow and a faint blue wash in the media.

05 — Components

Form Elements

text-input
textarea · agent prompt
06 — Foundations

Spacing Scale

A 4px base unit on an 8 / 12 / 16 / 24 / 32 / 48 rhythm.

07 — Foundations

Border Radius

An 8px workhorse radius dominates; media and panels step up to 15–25px; pills and avatars go fully round.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. Most cards rest flat; depth is implied by the border.
Level 1 — 0 2px 6px rgba(0,0,0,.2). Card hover lift.
Level 2 — 0 26px 42px rgba(0,0,0,.2). Floating panels & popovers.
Signature glow — 0 5px 24px rgba(0,153,255,.22). The brand's expressive depth cue.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxSingle column; hero display drops to ~40px; nav collapses to a menu.
Tablet768–1023pxFeature & card grids go to two columns; pricing stacks.
Laptop1024–1279pxFull multi-column grids return; mockups scale within the 1200px frame.
Desktop≥ 1280px1200px max content width, centered, with generous section padding.

Layout is a long, modular scroll of full-width dark sections separated by hairlines, each pairing a Walsheim headline with an interactive product mockup.

Pricing Tiers

Dark plan cards with a hairline border; the featured tier is lifted by a blue wash, blue border, and the signature glow.

Free
$0/mo
For exploring Framer and personal projects.
  • framer.app subdomain
  • Unlimited blocks
  • 1 editor seat
  • Framer banner
Basic● Most popular
$15/mo
For a simple site with a custom domain.
  • Custom domain
  • 1,000 CMS items
  • Remove Framer banner
  • Basic analytics
  • 100 GB bandwidth
Pro
$30/mo
For growing sites that need more power.
  • 10,000 CMS items
  • A/B testing
  • Advanced analytics
  • CMS API access
  • Localization

Data Table

A CMS collection view — hairline rows on a dark surface, status as a tinted pill, a soft band for the header and footer.

IDTitleCategoryStatusWhen
#A-320Designing calmer interfaces inspired by natureInspirationLive2d
#A-318Organic shapes and natural motion in modern UIProductLive4d
#A-316Earthy colour palettes inspired by the natural worldInspirationLive1w
#A-315From forests to pixels: textures rooted in natureDesignDraft1w
#A-311Designing with growth: how nature shapes UXGuideLive2w
1–5 of 412
‹123›

Auth Forms

Sign-in surfaces inherit the dark card system: hairline borders, 20px radius, focus rings in brand blue.

Sign in

Welcome back

OR
Create account

Start building

OR