GrowthBook

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/growthbook.io -->
<!-- Extracted: 2026-09-21T15:59:45.949Z | Schema: v1 | Quality: 65/100 -->
---
version: alpha
name: "GrowthBook"
description: "GrowthBook | Experimentation, Feature Flags & Product Analytics Platform presents a professional web presence."
colors:
  primary: "#6e56cf"
  tertiary: "#5643b8"
  neutral: "#151e3d"
  surface: "#ffffff"
  on-surface: "#151e3d"
  on-surface-secondary: "#151e3d"
  border: "#ffffff"
  error: "#ff3c3c"
  success: "#64b513"
  surface-dark: "#6e56cf"
typography:
  display-lg:
    fontFamily: "Inter"
    fontSize: "68px"
    fontWeight: "400"
    lineHeight: "74.8px"
  headline-lg:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "26.4px"
  headline-md:
    fontFamily: "Inter"
    fontSize: "56px"
    fontWeight: "400"
    lineHeight: "67.2px"
  body-md:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "26.4px"
rounded:
  sm: "8px"
  lg: "18px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-outline:
    textColor: "#ffffff"
    rounded: "0px"
    padding: "0px"
    fontSize: "14px"
    fontWeight: "400"
    borderColor: "#ffffff"
    borderWidth: "0px 0px 1px"
  button-secondary:
    backgroundColor: "#fafafa"
    textColor: "#151e3d"
    rounded: "8px"
    padding: "16px"
    fontSize: "10px"
    fontWeight: "400"
    borderColor: "#151e3d"
  button-ghost:
    textColor: "#151e3d"
    rounded: "0px"
    padding: "8px"
    fontSize: "14px"
    fontWeight: "400"
    borderColor: "#151e3d"
  button-primary:
    backgroundColor: "#6e56cf"
    textColor: "#ffffff"
    rounded: "8px"
    padding: "12px"
    fontSize: "14px"
    fontWeight: "400"
    borderColor: "#6e56cf"
    borderWidth: "1px"
---

# GrowthBook — Design System

## Overview

GrowthBook | Experimentation, Feature Flags & Product Analytics Platform presents a professional web presence.

Key characteristics: professional.

**Key characteristics:**

- Vibe — professional
- Design era — contemporary
- Emotional tone — professional
- Target audience — general audience
- Visual energy — 5/10 (moderate)

## Colors

The palette draws on 33 distinct colors observed across the site, organized into semantic roles below.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#6e56cf` | Slate Blue |
| accent / tertiary | `#5643b8` | Rebecca Purple |
| surface | `#ffffff` | White |
| background | `#fafafa` | Off-White |
| text | `#151e3d` | Near-Black |
| secondary text | `#151e3d` | Near-Black |
| border | `#ffffff` | White |
| muted | `#151e3d` | Near-Black |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#6e56cf` | Slate Blue |

### Semantic

| Role | Hex | Use |
|------|-----|-----|
| success | `#64b513` | Confirmations, positive states |
| error | `#ff3c3c` | Failures, destructive actions |

## Typography

Type is set in Inter, Inter, monospace, with hierarchy expressed through size and weight contrast rather than family-switching.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Inter | body | self-hosted | 400 |
| Inter | heading | self-hosted | 400 |
| monospace | mono | system | 400 |
| IBM Plex Mono | body | self-hosted | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Inter | 68px | 400 | 74.8px | — |
| Heading 2 | Inter | 16px | 400 | 26.4px | — |
| Heading 3 | Inter | 56px | 400 | 67.2px | — |
| Body | Inter | 16px | 400 | 26.4px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 26.4px
- Monospace — monospace

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| card | `rgba(0, 0, 0, 0.04) 0px 4px 20px 0px` |
| button | `rgba(80, 80, 80, 0.05) 0px 4px 20px 0px` |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0), rgb(255, 255, 255))`
- `linear-gradient(156deg, rgb(110, 86, 207), rgb(21, 30, 61))`
- `linear-gradient(rgba(0, 0, 0, 0) 36%, rgba(39, 176, 139, 0.16))`
- `linear-gradient(137deg, rgb(31, 45, 92), rgb(21, 30, 61))`
- `linear-gradient(rgb(21, 30, 61), rgb(110, 86, 207) 10%, rgb(138, 120, 219) 19%, rgb(255, 255, 255) 30%, rgb(226, 224, 248) 40%, rgb(40, 119, 249) 50%, rgb(21, 30, 61) 60%, rgb(24, 24, 63) 71%, rgb(23, 99, 78) 80%, rgb(161, 222, 210) 89%, rgb(232, 251, 247))`
- `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))`

## Shapes

Border-radius scale:

- `sm` — 8px
- `lg` — 18px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Outline**

- Text — `#ffffff`
- Radius — `0px`
- Padding — `0px`
- Font size — `14px`
- Font weight — `400`
- Border — `0px 0px 1px solid #ffffff`
- Sample copy — "Choose Your Date"

**Secondary**

- Background — `#fafafa`
- Text — `#151e3d`
- Radius — `8px`
- Padding — `16px`
- Font size — `10px`
- Font weight — `400`
- Border — ` solid #151e3d`
- Sample copy — "GrowthBook 5.0: Build, ship, and improve at scale"

**Ghost**

- Text — `#151e3d`
- Radius — `0px`
- Padding — `8px`
- Font size — `14px`
- Font weight — `400`
- Border — ` solid #151e3d`
- Sample copy — "Pricing"

**Primary**

- Background — `#6e56cf`
- Text — `#ffffff`
- Radius — `8px`
- Padding — `12px`
- Font size — `14px`
- Font weight — `400`
- Border — `1px solid #6e56cf`
- Sample copy — "Start for Free"

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 5/10 | balanced |
| Playful ↔ Serious | 5/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 3/10 | respectful |
| Technical ↔ Accessible | 5/10 | balanced |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/growthbook.io) | 100% |
| favicon | — | ico | [link](brands/growthbook.io/logo-0.ico) | 95% |
| favicon | — | png | [link](brands/growthbook.io/logo-1.png) | 95% |
| primary | color | svg | [link](brands/growthbook.io/logo-2.svg) | 85% |
| primary | color | svg | [link](brands/growthbook.io/logo-3.svg) | 85% |
| primary | color | svg | [link](brands/growthbook.io/logo-4.svg) | 85% |
| primary | color | svg | [link](brands/growthbook.io/logo-5.svg) | 85% |
| primary | color | svg | [link](brands/growthbook.io/logo-6.svg) | 85% |
| primary | color | svg | [link](brands/growthbook.io/logo-7.svg) | 85% |
| primary | color | svg | [link](brands/growthbook.io/logo-8.svg) | 85% |
| primary | color | svg | [link](brands/growthbook.io/logo-9.svg) | 85% |
| primary | color | svg | [link](brands/growthbook.io/logo-10.svg) | 85% |

## Sources

- Official brand guidelines — https://prnews.io/blog/media-kit.html
- Live brand page — https://extractvibe.com/brand/growthbook.io
- Raw JSON — https://extractvibe.com/api/brand/growthbook.io
- DESIGN.md (this file) — https://extractvibe.com/api/brand/growthbook.io/design.md
- Extracted — 2026-09-21T15:59:45.949Z
- Generator — ExtractVibe vv1
- Quality score — 65/100

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md