framer
A confident dark-canvas builder marketing site that treats the page like a working artboard — pure black surfaces, white display type set in GT Walsheim Medium with aggressive negative tracking, and a single confident blue (#0099ff) reserved for hyperlinks and selection states. T
colors
#ffffff #000000 typography
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog — body text at reading size.
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog — body text at reading size.
design.md source
---
version: alpha
name: Framer-design-analysis
description: "A confident dark-canvas builder marketing site that treats the page like a working artboard — pure black surfaces, white display type set in GT Walsheim Medium with aggressive negative tracking, and a single confident blue (#0099ff) reserved for hyperlinks and selection states. The page rhythm is broken by oversized vibrant gradient atmosphere panels — magenta, violet, orange spotlights — that act as living showcase tiles, not decoration. Every CTA is a white pill on dark; every card is a translucent or charcoal surface; every section title pulls letter-spacing tight enough to feel like a poster."
colors:
primary: "#ffffff"
on-primary: "#000000"
accent-blue: "#0099ff"
ink: "#ffffff"
ink-muted: "#999999"
canvas: "#090909"
surface-1: "#141414"
surface-2: "#1c1c1c"
hairline: "#262626"
hairline-soft: "#1a1a1a"
inverse-canvas: "#ffffff"
inverse-ink: "#000000"
gradient-magenta: "#d44df0"
gradient-violet: "#6a4cf5"
gradient-orange: "#ff7a3d"
gradient-coral: "#ff5577"
semantic-success: "#22c55e"
typography:
display-xxl:
fontFamily: GT Walsheim Framer Medium
fontSize: 110px
fontWeight: 500
lineHeight: 0.85
letterSpacing: -5.5px
display-xl:
fontFamily: GT Walsheim Medium
fontSize: 85px
fontWeight: 500
lineHeight: 0.95
letterSpacing: -4.25px
fontFeature: ss02
display-lg:
fontFamily: GT Walsheim Medium
fontSize: 62px
fontWeight: 500
lineHeight: 1.00
letterSpacing: -3.1px
fontFeature: ss02
display-md:
fontFamily: GT Walsheim Medium
fontSize: 32px
fontWeight: 500
lineHeight: 1.13
letterSpacing: -1.0px
headline:
fontFamily: Inter
fontSize: 22px
fontWeight: 700
lineHeight: 1.20
letterSpacing: -0.8px
fontFeature: cv05
subhead:
fontFamily: Inter Variable
fontSize: 24px
fontWeight: 400
lineHeight: 1.30
letterSpacing: -0.01px
fontFeature: cv11
body-lg:
fontFamily: Inter Variable
fontSize: 18px
fontWeight: 400
lineHeight: 1.30
letterSpacing: -0.18px
fontFeature: cv11
body:
fontFamily: Inter Variable
fontSize: 15px
fontWeight: 400
lineHeight: 1.30
letterSpacing: -0.15px
fontFeature: cv11
body-sm:
… components
display headline
body copy from framer tokens — the default reading size for paragraphs and ui descriptions.
feature headline
a sample card surface with heading and body copy styled from component tokens.
what is in this design system?
colors, typography, spacing, and component patterns sourced from publicly visible brand tokens.
const theme = {
primary: "#ffffff",
font: ""Inter Variable", system-ui, sans-serif",
};extracted from publicly visible design tokens. sourced via VoltAgent/awesome-design-md. no ownership claim on framer's visual identity.