Remixes of www.growthbook.io
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Growthbook
description: |
GrowthBook's design system embodies a modern, professional aesthetic centered
on clarity and intelligence. The visual identity balances a vibrant purple
brand accent with a sophisticated neutral palette spanning light canvas
backgrounds to deep navy surfaces. Rich gradients and layered color schemes
create visual depth and guide the eye through complex product interfaces. The
typography is clean and spacious, built on the humanist Inter typeface for
body copy and IBM Plex Mono for code, reinforcing the platform's position as a
technical yet accessible tool for data-driven product teams. The system
prioritizes legibility and hierarchy through generous whitespace and a
structured spacing scale, while decorative gradients on hero sections convey
motion, innovation, and trust.
source:
url: "https://www.growthbook.io/"
pagesAnalyzed: 6
extractedAt: 2026-10-16
tokensMeasured: true
colors:
primary: "#6E56CF"
canvas: "#FAFAFA"
surface: "#1A1238"
surface-alt: "#151E3D"
ink: "#151E3D"
body: "#222222"
muted: "#303052"
faint: "#494966"
hairline: "#D2D2DB"
accent-1: "#8B8B9C"
neutral-1: "#F1F0FC"
typography:
display-xl:
fontFamily: Inter
fontSize: 68px
fontWeight: 400
lineHeight: 1.1
letterSpacing: 0px
display-lg:
fontFamily: Inter
fontSize: 56px
fontWeight: 400
lineHeight: 1.2
letterSpacing: 0px
display-md:
fontFamily: Inter
fontSize: 48px
fontWeight: 400
lineHeight: 1.2
letterSpacing: 0px
display-sm:
fontFamily: Inter
fontSize: 40px
fontWeight: 400
lineHeight: 1.3
letterSpacing: 0px
heading-md:
fontFamily: Inter
fontSize: 32px
fontWeight: 400
lineHeight: 1.3
letterSpacing: 0px
heading-sm:
fontFamily: Inter
fontSize: 20px
fontWeight: 500
lineHeight: 1
letterSpacing: 0px
heading-xs:
fontFamily: Inter
fontSize: 18px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0px
body-xl:
fontFamily: Inter
fontSize: 20px
fontWeight: 400
lineHeight: 1.75
letterSpacing: 0px
body-lg:
fontFamily: Inter
fontSize: 18px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-md:
fontFamily: Inter
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-md-strong:
fontFamily: Inter
fontSize: 16px
fontWeight: 500
lineHeight: 1.65
letterSpacing: 0px
body-sm:
fontFamily: Inter
fontSize: 14px
fontWeight: 400
lineHeight: 1.75
letterSpacing: 0px
body-sm-tight:
fontFamily: Inter
fontSize: 14px
fontWeight: 400
lineHeight: 1.1
letterSpacing: 0px
button:
fontFamily: Inter
fontSize: 14px
fontWeight: 400
lineHeight: 1.65
letterSpacing: 0px
caption-sm:
fontFamily: Inter
fontSize: 12px
fontWeight: 400
lineHeight: 1.65
letterSpacing: 0px
caption-xs:
fontFamily: Inter
fontSize: 10px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 1.5px
textTransform: uppercase
code-lg:
fontFamily: "IBM Plex Mono"
fontSize: 16px
fontWeight: 400
lineHeight: 1.65
letterSpacing: 0px
code-lg-tight:
fontFamily: "IBM Plex Mono"
fontSize: 16px
fontWeight: 400
lineHeight: 1.65
letterSpacing: -0.32px
code-lg-strong:
fontFamily: "IBM Plex Mono"
fontSize: 16px
fontWeight: 500
lineHeight: 1.7
letterSpacing: 0px
code-md:
fontFamily: "IBM Plex Mono"
fontSize: 14px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
code-sm:
fontFamily: "IBM Plex Mono"
fontSize: 12px
fontWeight: 400
lineHeight: 1.65
letterSpacing: 0px
code-xs:
fontFamily: "IBM Plex Mono"
fontSize: 10px
fontWeight: 400
lineHeight: 1.65
letterSpacing: 0px
rounded:
none: 0px
xs: 3px
sm: 8px
md: 12px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 40px
section: 48px
band: 64px
borderWidths:
thin: 1px
shadows:
sm: "rgba(0, 0, 0, 0.04) 0px 4px 20px 0px"
elevationStrategy: single-tier
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FAFAFA"
surface: "#1A1238"
surfaceRaised: "#1A1238"
text: "#151E3D"
textMuted: "#222222"
border: "#D2D2DB"
accent: "#6E56CF"
accentFg: "#FFFFFF"
focusRing: "#6E56CF"
elevation: shadow
dark:
bg: "#0D0C12"
surface: "#1C1B20"
surfaceRaised: "#28272C"
text: "#F9F8FD"
textMuted: "#9F9EA4"
border: "#343338"
accent: "#8976D8"
accentFg: "#0B0B0C"
focusRing: "#6E56CF"
elevation: "border+surface"
contrastFailures:
- "light: text on surface = 1.08:1 (needs 4.5:1)"
gradients:
- context: section
kind: linear
value: "linear-gradient(rgba(0, 0, 0, 0), rgb(255, 255, 255))"
- context: hero
kind: linear
value: "linear-gradient(rgb(246, 242, 253), rgba(0, 0, 0, 0) 30%)"
- context: section
kind: linear
value: "linear-gradient(rgb(21, 30, 61), rgb(110, 86, 207) 9%, rgb(138, 120, 219) 16%, rgb(255, 255, 255) 25%, rgb(226, 224, 248) 34%, rgb(207, 239, 252) 43%, rgb(40, 119, 249) 53%, rgb(21, 30, 61) 63%, rgb(24, 24, 63) 73%, rgb(23, 99, 78) 83%, rgb(161, 222, 210) 92%, rgb(232, 251, 247))"
- context: hero
kind: radial
value: "radial-gradient(circle at 50% 0px, rgba(44, 44, 103, 0.54), rgb(21, 30, 61) 55%)"
- context: section
kind: linear
value: "linear-gradient(rgb(250, 250, 250) 19%, rgb(246, 242, 253))"
- context: section
kind: linear
value: "linear-gradient(rgb(246, 242, 253), rgb(250, 250, 250))"
components:
button-primary:
textColor: "rgb(255, 255, 255)"
border: "1px solid {colors.primary}"
height: 58px
padding: "16px 16px 16px 16px"
fontSize: 14px
fontFamily: Inter
fontWeight: 400
lineHeight: 1
rounded: "{rounded.sm}"
backgroundColor: "{colors.primary}"
button-filled:
textColor: "{colors.body}"
border: "1px solid {colors.hairline}"
height: 67.3906px
padding: "20px 20px 20px 20px"
fontSize: 16px
fontFamily: Inter
fontWeight: 400
lineHeight: 1.65
backgroundColor: "rgb(255, 255, 255)"
button-filled-sm:
typography: "{typography.caption-sm}"
textColor: "rgb(255, 255, 255)"
height: 48px
padding: "12px 16px 12px 16px"
rounded: 100px
backgroundColor: "rgba(255, 255, 255, 0.1)"
button-outline:
textColor: "{colors.ink}"
border: "1px solid rgb(177, 177, 190)"
height: 58px
padding: "16px 16px 16px 16px"
fontSize: 14px
fontFamily: Inter
fontWeight: 400
lineHeight: 1
rounded: "{rounded.sm}"
card-featured:
textColor: "{colors.canvas}"
padding: "36px 0px 24px 0px"
fontSize: 16px
boxShadow: "rgba(0, 0, 0, 0.04) 0px 4px 20px 0px"
fontFamily: Inter
fontWeight: 400
lineHeight: 1.65
rounded: "{rounded.md}"
backgroundColor: "{colors.surface}"
card:
textColor: "{colors.ink}"
padding: "56px 56px 56px 56px"
fontSize: 16px
fontFamily: Inter
fontWeight: 400
lineHeight: 1.2
rounded: "{rounded.md}"
backgroundColor: "rgb(255, 255, 255)"
card-lg:
textColor: "{colors.ink}"
padding: "20px 20px 20px 20px"
fontSize: 16px
fontFamily: Inter
fontWeight: 400
lineHeight: 1.65
backgroundColor: "rgb(255, 255, 255)"
badge-primary:
typography: "{typography.caption-xs}"
textColor: "rgb(255, 255, 255)"
height: 19px
padding: "2px 4px 2px 5px"
rounded: "{rounded.xs}"
backgroundColor: "{colors.primary}"
badge-text:
textColor: "{colors.ink}"
height: 36px
fontSize: 16px
fontFamily: Inter
fontWeight: 400
lineHeight: 1.65
navigation:
textColor: "{colors.ink}"
height: 39.0938px
fontSize: 16px
fontFamily: Inter
fontWeight: 400
lineHeight: 1.65
footer:
textColor: "rgb(255, 255, 255)"
padding: "60px 32px 60px 32px"
fontSize: 16px
fontFamily: Inter
fontWeight: 400
lineHeight: 1.65
backgroundColor: "{colors.surface-alt}"
link:
textColor: "rgb(255, 255, 255)"
padding: "24px 24px 24px 24px"
fontSize: 16px
fontFamily: Inter
fontWeight: 400
lineHeight: 1.65
rounded: "{rounded.sm}"
link-sm:
textColor: "{colors.body}"
border: "1px solid {colors.hairline}"
padding: "20px 20px 20px 8px"
fontSize: 16px
fontFamily: Inter
fontWeight: 400
lineHeight: 1.65
states:
other-focus:
target: other
state: focus
outline: none
input-focus:
target: input
state: focus
borderColor: "rgb(56, 152, 236)"
other-hover:
target: other
state: hover
opacity: 1
button-hover:
target: button
state: hover
borderColor: "rgba(0, 0, 0, 0)"
backgroundColor: "rgba(0, 0, 0, 0)"
link-hover:
target: link
state: hover
backgroundColor: "rgb(246, 242, 253)"
input-hover:
target: input
state: hover
borderColor: "rgba(5, 5, 73, 0.8)"
card-hover:
target: card
state: hover
boxShadow: "rgba(0, 0, 0, 0.09) 0px 4px 8px"
other-focus-visible:
target: other
state: focus-visible
borderColor: "rgb(204, 204, 204)"
other-active:
target: other
state: active
boxShadow: "rgba(0, 0, 0, 0) 0px 2px 5px"
input-active:
target: input
state: active
borderWidth: 1px
input-focus-visible:
target: input
state: focus-visible
borderColor: "rgb(204, 204, 204)"
borderWidth: 1px
breakpoints:
- width: 375
containerWidth: 343
gridColumns: 1
navLinksVisible: 3
menuToggleVisible: true
headingPx: 44
bodyPx: 16
sectionPaddingX: 16
- width: 768
containerWidth: 720
gridColumns: 1
navLinksVisible: 3
menuToggleVisible: true
headingPx: 60
bodyPx: 16
sectionPaddingX: 24
- width: 1024
containerWidth: 960
gridColumns: 3
navLinksVisible: 2
menuToggleVisible: false
headingPx: 68
bodyPx: 16
sectionPaddingX: 32
- width: 1280
containerWidth: 1216
gridColumns: 3
navLinksVisible: 2
menuToggleVisible: false
headingPx: 68
bodyPx: 16
sectionPaddingX: 32
- width: 1440
containerWidth: 1280
gridColumns: 3
navLinksVisible: 2
menuToggleVisible: false
headingPx: 68
bodyPx: 16
sectionPaddingX: 32
coverage:
statesFound: 63
gradientsFound: 10
rolesUnassigned: 2
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
GrowthBook's design system embodies a modern, professional aesthetic centered on clarity and intelligence. The visual identity balances a vibrant purple brand accent with a sophisticated neutral palette spanning light canvas backgrounds to deep navy surfaces. Rich gradients and layered color schemes create visual depth and guide the eye through complex product interfaces. The typography is clean and spacious, built on the humanist Inter typeface for body copy and IBM Plex Mono for code, reinforcing the platform's position as a technical yet accessible tool for data-driven product teams. The system prioritizes legibility and hierarchy through generous whitespace and a structured spacing scale, while decorative gradients on hero sections convey motion, innovation, and trust.
Key Characteristics
#6E56CF) as the primary brand accent driving call-to-action buttons and interactive states#FAFAFA) for hero and content areas; deep navy (#151E3D, #1A1238) for feature sections and cards{rounded.full}) contrasting with square-cornered interface elements ({rounded.sm} buttons, {rounded.md} cards){colors.primary} — #6E56CF): Primary call-to-action buttons, brand mark, active interactive states, and accent highlights. The anchor of the entire visual system.{colors.accent-1} — #8B8B9C): Unassigned role with no measured usage evidence; reserved for decorative purposes such as dividers or subtle background elements.#3898EC): Input focus ring color for accessible form states.{colors.canvas} — #FAFAFA): Default page background; light neutral surface for primary content hierarchy.{colors.surface-alt} — #151E3D): Alternating section band background; primary text color for headings in light contexts.{colors.body} — #222222): Body copy text color; primary reading color for standard paragraphs.{colors.muted} — #303052): Secondary text; captions, metadata, and supporting labels.{colors.faint} — #494966): Tertiary text; placeholder text in forms and hints.{colors.surface} — #1A1238): Card and panel background in dark sections; provides strong contrast for light text overlays.{colors.hairline} — #D2D2DB): 1px borders, dividers, and subtle stroke rules.{colors.neutral-1} — #F1F0FC): Light neutral tone with no measured role; reserved for future subtle backgrounds or overlay tints.Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)'IBM Plex Mono', 'Courier New', monospace)| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | Inter | 68px | 400 | 1.1 (74.8px) | 0px | Hero-scale heading; maximum visual impact |
| Display LG | Inter | 56px | 400 | 1.2 (67.2px) | 0px | Large section heading |
| Display MD | Inter | 48px | 400 | 1.2 (57.6px) | 0px | Medium display heading |
| Display SM | Inter | 40px | 400 | 1.3 (52px) | 0px | Small display heading |
| Heading MD | Inter | 32px | 400 | 1.3 (41.6px) | 0px | Section title; card headline |
| Heading SM | Inter | 20px | 500 | 1.0 (20px) | 0px | Subsection title; button label |
| Heading XS | Inter | 18px | 500 | 1.5 (27px) | 0px | Small heading; button variant |
| Body XL | Inter | 20px | 400 | 1.75 (35px) | 0px | Large body copy; hero description |
| Body LG | Inter | 18px | 400 | 1.5 (27px) | 0px | Large body text; card copy |
| Body MD | Inter | 16px | 400 | 1.5 (24px) | 0px | Standard body copy |
| Body MD Strong | Inter | 16px | 500 | 1.65 (26.4px) | 0px | Emphasized body; labels |
| Body SM | Inter | 14px | 400 | 1.75 (24.5px) | 0px | Small body text; secondary copy |
| Body SM Tight | Inter | 14px | 400 | 1.1 (15.4px) | 0px | Compact link text |
| Button | Inter | 14px | 400 | 1.65 (23.1px) | 0px | Button text; call-to-action labels |
| Caption SM | Inter | 12px | 400 | 1.65 (19.8px) | 0px | Small caption; metadata |
| Caption XS | Inter | 10px | 700 | 1.5 (15px) | 1.5px | Uppercase badge/tag text with letter-spacing |
| Code LG | IBM Plex Mono | 16px | 400 | 1.65 (26.4px) | 0px | Large code block |
| Code LG Strong | IBM Plex Mono | 16px | 500 | 1.7 (27.2px) | 0px | Emphasized code |
| Code LG Tight | IBM Plex Mono | 16px | 400 | 1.65 (26.4px) | −0.32px | Compact code with negative tracking |
| Code MD | IBM Plex Mono | 14px | 400 | 1.0 (14px) | 0px | Medium code; inline snippets |
| Code SM | IBM Plex Mono | 12px | 400 | 1.65 (19.8px) | 0px | Small code text |
| Code XS | IBM Plex Mono | 10px | 400 | 1.65 (16.5px) | 0px | Extra-small code; inline code |
1.5px) for emphasis; code uses negative tracking (−0.32px) for compact presentation.Primary Button
{colors.primary} (#6E56CF)#FFFFFF{typography.button} (14px){spacing.md} (16px) all sides{rounded.sm} (8px){colors.primary} (#6E56CF)Secondary Button (Outline)
rgba(0, 0, 0, 0)){colors.surface-alt} (#151E3D){typography.button} (14px){spacing.md} (16px) all sides{rounded.sm} (8px)#B1B1BEGhost Button (Filled)
#FFFFFF{colors.body} (#222222){typography.body-md} (16px){spacing.lg} (20px) all sides{rounded.none} (0px){colors.hairline} (#D2D2DB)Pill Button (Filled Small)
rgba(255, 255, 255, 0.1)#FFFFFF{typography.caption-sm} (12px){spacing.sm} (12px) vertical, {spacing.md} (16px) horizontal{rounded.full} (9999px)Featured Card (Dark)
{colors.surface} (#1A1238){colors.canvas} (#FAFAFA){typography.body-md} (16px){rounded.md} (12px)rgba(0, 0, 0, 0.04) 0px 4px 20px 0pxDefault Card (Light)
#FFFFFF{colors.surface-alt} (#151E3D){typography.body-md} (16px){spacing.xxxl} (40px) but measured as 56px in component data{rounded.md} (12px)Large Card Variant
#FFFFFF{colors.surface-alt} (#151E3D){typography.body-md} (16px){spacing.lg} (20px) all sides{rounded.none} (0px)Text Input (Focus State)
#3898EC (focus indicator){typography.body-md} (16px)Input Hover State
rgba(5, 5, 73, 0.8) (semi-transparent dark)Default Navigation
{colors.surface-alt} (#151E3D){typography.body-md} (16px){rounded.none} (0px)Primary Badge
{colors.primary} (#6E56CF)#FFFFFF{typography.caption-xs} (10px){rounded.xs} (3px)Text Badge
{colors.surface-alt} (#151E3D){typography.body-md} (16px){rounded.none} (0px)Default Link
#FFFFFF (in dark sections){typography.body-md} (16px){spacing.md} (16px) all sides{rounded.sm} (8px)Link Small Variant
{colors.body} (#222222){typography.body-md} (16px){colors.hairline} (#D2D2DB){rounded.none} (0px)Default Footer
{colors.surface-alt} (#151E3D)#FFFFFF{typography.body-md} (16px){rounded.none} (0px)The spacing system is built on a base unit of {spacing.xxs} (4px), scaling by multiples:
{spacing.xxs} = 4px — micro adjustments, badge padding{spacing.xs} = 8px — tight spacing between inline elements{spacing.sm} = 12px — button padding, compact sections{spacing.md} = 16px — standard padding, form fields, button interiors{spacing.lg} = 20px — card padding, section margins{spacing.xl} = 24px — generous spacing between content blocks{spacing.xxl} = 32px — section horizontal padding{spacing.xxxl} = 40px — card interior padding{spacing.section} = 48px — large content sections{spacing.band} = 64px — full-width section spacingUsage Context:
{spacing.xxxl} (32px) at desktop, {spacing.xl} (24px) at tablet, {spacing.md} (16px) at mobile. Card grids use consistent {spacing.lg} (20px) gaps.GrowthBook prioritizes generous whitespace to reduce cognitive load and guide attention. Vertical rhythm is achieved through consistent line-height multiples (1.0–1.75 depending on role); horizontal margins scale with viewport. Large display headings breathe at 1.1–1.2 line height, while body copy sits at 1.5–1.75 for sustained readability. Section padding increases at larger viewports (16px mobile → 32px desktop), creating a responsive visual hierarchy that expands gracefully rather than compressing.
{rounded.none} = 0px — sharp corners on large cards, buttons, and legacy layout elements{rounded.xs} = 3px — subtle rounding on badges and small accents{rounded.sm} = 8px — standard rounding on buttons, small modals, and interactive elements{rounded.md} = 12px — card and container corners; primary card geometry{rounded.full} = 9999px — pill-shaped badges and button variantsComponent Application:
{rounded.sm} (8px) for primary and secondary; {rounded.full} (9999px) for pill-style ghost buttons{rounded.md} (12px) for featured and default; {rounded.none} (0px) for large variants{rounded.xs} (3px) for primary; {rounded.full} (9999px) for decorative pill badges| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow; color-blocking only | Default cards, hero sections, background surfaces |
| Lifted | rgba(0, 0, 0, 0.04) 0px 4px 20px 0px | Featured cards, modal overlays, hover-elevated components |
Shadow Philosophy:
GrowthBook employs a single-tier shadow strategy emphasizing color-blocking over layered shadows. Depth is conveyed primarily through surface color transitions—light backgrounds (#FAFAFA) for hero content, navy (#151E3D) for feature sections, dark (#1A1238) for cards. The one measured shadow is extremely subtle (rgba(0, 0, 0, 0.04)) with a 20px blur, providing barely-perceptible lift for featured cards and interactive surfaces. This restraint maintains the clean, modern aesthetic while preserving visual hierarchy through color contrast.
Common Applications:
rgba(255, 255, 255, 0.1) for ghost button backgroundsrgba(5, 5, 73, 0.8) for hover statesrgba(0, 0, 0, 0.75) for darkened backgrounds| Stacking Context | Z-Index | Use |
|---|---|---|
| Base | 1–3 | Default card and content stacking |
| Dropdown | 10–21 | Navigation dropdowns, tooltips, popovers |
| Sticky | 900 | Sticky headers, floating navigation |
Stacking Order: Base content occupies z-index 1–3; dropdowns and ephemeral UI sit at 10–21; sticky/persistent elements (navigation bar, floating CTAs) occupy the 900 layer to remain visible above all transient content.
{colors.primary} (#6E56CF) for all primary call-to-action buttons and interactive accents—it is the strongest affordance signal in the system.{spacing.section} (48px) or {spacing.band} (64px) to separate major content blocks.{rounded.sm} (8px) to interactive elements (buttons, small inputs) and {rounded.md} (12px) to larger containers (cards, modals) for visual consistency.{typography.display-xl} (68px) for hero headings on desktop; scale down to {typography.display-md} (48px) or {typography.display-sm} (40px) on tablet and mobile.#FAFAFA vs. dark #151E3D backgrounds) as your primary depth cue; avoid stacking multiple shadows.{typography.caption-xs} (10px, 700 weight) for badges and metadata; the uppercase letter-spacing (1.5px) creates emphasis without size inflation.#3898EC for the focus ring color.{rounded.full}) sparingly for decorative badges; square-cornered buttons maintain professional intent.{colors.primary} with secondary button styles; primary calls-to-action must use the full purple fill, not just an outline.rgba(0, 0, 0, 0.04) 0px 4px 20px 0px), and overuse flattens the visual intent.{colors.body}, {colors.surface-alt}, {colors.muted}, {colors.faint}); ensure adequate contrast against backgrounds.{rounded.sm} for buttons, {rounded.md} for cards, and {rounded.none} for full-width sections.| Breakpoint | Viewport Width | Content Width | Grid Columns | Nav Links Visible | Largest Heading | Body Text | Section Padding-X |
|---|---|---|---|---|---|---|---|
| Mobile | 375px | 343px | 1 | 3 (plus menu toggle) | {typography.display-sm} (44px) | {typography.body-md} (16px) | {spacing.md} (16px) |
| Tablet | 768px | 720px | 1 | 3 (plus menu toggle) | {typography.display-md} (60px) | {typography.body-md} (16px) | {spacing.xl} (24px) |
| Desktop | 1024px+ | 960px+ | 3 | 2 (no toggle) | {typography.display-xl} (68px) | {typography.body-md} (16px) | {spacing.xxxl} (32px) |
| Large Desktop | 1280px+ | 1216px+ | 3 | 2 (no toggle) | {typography.display-xl} (68px) | {typography.body-md} (16px) | {spacing.xxxl} (32px) |
| Extra Large | 1440px+ | 1280px | 3 | 2 (no toggle) | {typography.display-xl} (68px) | {typography.body-md} (16px) | {spacing.xxxl} (32px) |
Key Transitions:
{spacing.md} to {spacing.xl} and hero heading scales to {typography.display-md} (60px).{typography.display-xl} (68px); content width expands to 960px.{spacing.md} (16px) vertical and horizontal for comfortable touch interaction{spacing.xs} (8px) to avoid accidental adjacent tapsImplementation: Primary buttons measure 58px height; secondary and outline buttons match at 58px; pill variants are 48px. Form inputs and navigation items maintain at least 39px height for ergonomic touch.
{typography.display-sm} (44px)–{typography.display-md} (60px); card grids stack vertically with full width minus padding.{spacing.xl} = 24px); features section heading scales to {typography.display-md} (60px).{typography.display-xl} (68px); section padding increases to {spacing.xxxl} (32px); navigation menu toggle disappears and nav links display inline.{spacing.md} (16px), tablet uses {spacing.xl} (24px), desktop uses {spacing.xxxl} (32px).{colors.primary} — #6E56CF){colors.canvas} — #FAFAFA){colors.surface} — #1A1238)#FFFFFF){colors.surface-alt} — #151E3D){colors.body} — #222222){colors.muted} — #303052){colors.faint} — #494966){colors.hairline} — #D2D2DB)#3898EC)Primary buttons always use {colors.primary} (#6E56CF) with white text, {typography.button} size, and {rounded.sm} radius. Secondary buttons use white or light backgrounds with outline strokes ({colors.hairline}). Never mix primary and secondary styling.
Headings follow a strict hierarchy: Display sizes (40–68px) for page and section titles; heading sizes (18–32px) for subsections and emphasis. Always use weight 400 for display and weight 500 for small headings; never exceed weight 700.
Body copy is set to {typography.body-md} (16px, 400 weight, 1.5 line height) by default. Smaller secondary text uses {typography.body-sm} (14px). Captions use {typography.caption-sm} (12px). Code uses monospace at consistent sizes ({typography.code-md} 14px, {typography.code-lg} 16px).
Spacing is scalar: Use {spacing.md} (16px) for standard padding; {spacing.lg} (20px)–{spacing.xl} (24px) for breathing room; {spacing.xxxl} (40px)–{spacing.section} (48px) for major sections. Never guess intermediate values.
Depth comes from color-blocking, not shadows. Light sections (#FAFAFA) transition to dark (#151E3D) or navy (#1A1238). Apply the one measured shadow (rgba(0, 0, 0, 0.04) 0px 4px 20px 0px) only to featured cards and hover states.
Border radius is component-specific: Buttons and small inputs use {rounded.sm} (8px); cards use {rounded.md} (12px); badges use {rounded.xs} (3px) or {rounded.full} (9999px) for pills. Never apply {rounded.sm} to cards or {rounded.md} to buttons.
Input focus must show clear affordance: Apply #3898EC as the focus ring color or border; maintain 1px stroke width. Remove default browser outlines but provide explicit focus styling.
Responsive strategy: At 375px, use {typography.display-sm} (40px) headings and {spacing.md} (16px) padding. At 768px, scale to {typography.display-md} (60px) and {spacing.xl} (24px). At 1024px+, use full {typography.display-xl} (68px) and {spacing.xxxl} (32px).
Gradients are decorative only: Use the multi-stop purple-to-teal gradients (linear-gradient(rgb(21, 30, 61), rgb(110, 86, 207) 9%, ...)) for hero sections and background bands. Do not apply gradients to functional UI elements like buttons or form controls.
Opacity rules: Button hover states may use 0.5–0.75 opacity; input borders use rgba(5, 5, 73, 0.8) for hover; overlays use rgba(0, 0, 0, 0.75) for dark scrim effects. Match measured opacity values exactly; do not estimate intermediate values.
Semantic Color Ramp (Error/Success/Warning): The site does not declare error, success, or warning states in its markup or stylesheets. No semantic status colours are present; this document does not invent them. If your implementation requires status colours, they are out of scope for this system.
Unassigned Colour Roles: {colors.accent-1} (#8B8B9C) and {colors.neutral-1} (#F1F0FC) have no measured usage; they are described as decorative. Their intended purpose is unclear from the extraction.
Interaction State Coverage: The extraction captured :hover, :focus, and :active states from stylesheets, but not all possible states may have been observed. Disabled states (:disabled), visited states (:visited on links), and loading states are not explicitly measured and should follow platform conventions if not explicitly defined.
Dark Mode / Theme Variants: The extraction analyzed a single light/dark theme pair, but only one theme is presented as the primary measured system. Derived theme data (if present) was not treated as a first-class design surface; if dark mode is critical to your use case, it is not fully specified here.
Animation / Transition Timing: The extraction does not include keyframe animations or transition-duration/easing values. CSS transitions and transforms are observed (e.g., transform: translateY(-0.25rem) on hover), but their timing (duration, ease function) is not captured. Follow platform best practices for animation duration (150–300ms for micro-interactions).
Surfaces Behind Authentication: The analysis covered 6 public pages. Authenticated user flows, onboarding sequences, and dashboard screens were not visited, so those surfaces may have additional colour roles, component patterns, or typography variants not documented here.
Cross-Origin Stylesheet Access: Some stylesheets may have been blocked by CORS policies, so fine-grained CSS details (e.g., certain pseudo-class states or vendor-prefixed properties) may be incomplete. The most common and visible properties are captured; edge cases may require manual review.
Hover State Variability: Hover states differ by component and context (buttons hover differently than links; cards hover differently than form inputs). The extraction logs many context-specific hover rules; apply the specific rule for each component type rather than generalizing a single "hover" behaviour across all interactive elements.
Three-Dimensional / Layered Effects: No measured 3D transforms, skews, or complex layered effects are present in the extracted data. Decorative gradients and simple opacity/transform effects are the only depth treatments.
Extracted from: https://www.growthbook.io/
Pages Analyzed: 6 (public marketing and pricing pages)
System Confidence: High for visual surfaces; medium for behavioural interactions (hover/focus states inferred from limited page sample)
Last Verified: Token set derived from captured screenshots and stylesheet analysis.