# Strapi Design System

> A structured developer canvas where deep indigo logic meets clean, high-contrast white space.

**Source:** https://strapi.io | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Strapi utilizes a high-contrast "monochrome" base of pure white (#ffffff) and deep charcoal (#32324d), punctuated by a vibrant electric purple primary accent (#4945ff). The system is built on Poppins, using heavy weights (700) for display headers and medium weights (500-600) for interactive labels. Componentry is characterized by soft, rounded geometry (8px to 10px radii) and subtle, multi-layered shadows that provide depth without visual clutter. The layout is generous, often utilizing 80px to 96px vertical rhythms to separate dense technical content.

## Signature DNA
1. **Electric Indigo Accents** (#4945ff used for primary CTAs, active states, and brand-critical borders against a neutral foundation).
2. **Soft-Elevation Cards** (White surfaces elevated by subtle shadows like `rgba(0, 0, 0, 0.08) 0px 6px 10px 0px` and 10px rounded corners).
3. **Geometric Sans Display** (Poppins at weight 700 for all major headings, creating a friendly but authoritative developer-first aesthetic).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, card surfaces, primary button text | 75 | 1.0 | Computed Style |
| `{color.charcoal}` | `#32324d` | Primary text, secondary button borders | 8 | 0.6 | Computed Style |
| `{color.neutral.light}` | `#f6f6f9` | Section backgrounds, secondary surfaces | 10 | 0.6 | Pricing Page |
| `{color.neutral.border}` | `#dcdce4` | Default dividers and UI borders | 6 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#4945ff` | Primary CTAs, brand links, active indicators | 23 | 1.0 | Brand Page |
| `{color.indigo.dark}` | `#1d1b84` | Hero text, deep emphasis | 73 | 0.8 | Computed Style |
| `{color.indigo.muted}` | `#292875` | Secondary text, button labels | 69 | 0.8 | Computed Style |
| `{color.purple.light}` | `#ac56f5` | Decorative accents, secondary surfaces | 10 | 0.6 | Computed Style |
| `{color.success}` | `#13bb70` | Success indicators, positive metrics | 6 | 0.6 | Homepage |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Poppins | 400, 500, 600, 700 | Heading & Body | Poppins (Google Fonts) | SIL Open Font |
| Monaco | 400 | Code blocks | Cascadia Code | Proprietary |
| monospace | 400 | Technical fallbacks | JetBrains Mono | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.lg}` | 53px | 71px | normal | 700 | Main Hero H1 | `h1.typography_Title__Axpg_` |
| `{type.display.md}` | 43px | 51px | normal | 700 | Section Heroes | `h1.styles_title__AZEai` |
| `{type.heading.lg}` | 33px | 49px | normal | 700 | Feature Titles | `p.styles_whiteCardTitle__hQZNy` |
| `{type.heading.sm}` | 21px | 31px | normal | 600 | Card Titles | `p.styles_featureTitle__8gLOB` |
| `{type.body.lg}` | 19px | 30px | normal | 400 | Intro Paragraphs | `p` |
| `{type.body.md}` | 17px | 28px | normal | 400 | Standard Prose | `h2.styles_RichText__neCge` |
| `{type.body.sm}` | 15px | 22px | normal | 500 | UI Labels/Links | `a.styles_buttonLink__LImRE` |
| `{type.caption}` | 13px | 19px | normal | 400 | Small Metadata | `p.typography_smaller__E7EA3` |

### Principles
1. **Header Boldness:** All major headings (H1-H3) must use Poppins at weight 700.
2. **Tight UI Tracking:** Letter spacing is kept at `normal` or `0.4px` for display; never condensed.
3. **Line Height Generosity:** Body text maintains a 1.5x to 1.6x ratio (e.g., 19px size / 30px height) for readability.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 30 |
| `{space.sm}` | 12px | 57 |
| `{space.md}` | 16px | 12 |
| `{space.lg}` | 24px | 26 |
| `{space.xl}` | 32px | 9 |
| `{space.section}` | 80px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sm}` | 6px | Form inputs | 6px observed on pricing inputs |
| `{radius.md}` | 8px | Secondary cards, buttons | 8px observed on primary CTAs |
| `{radius.lg}` | 10px | Feature cards, Pricing tiers | 10px observed on main content cards |
| `{radius.full}` | 50px | Pill badges, tags | 50px observed on "Best Value" tags |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.subtle}` | `rgba(26, 26, 67, 0.1) 0px 1px 4px 0px` | Flat cards, small buttons | 13 occurrences |
| `{shadow.medium}` | `rgba(0, 0, 0, 0.08) 0px 6px 10px 0px` | Feature cards, hover states | 15 occurrences |
| `{shadow.deep}` | `rgba(41, 40, 117, 0.08) 0px 4px 12px 0px` | Modals, dropdowns | 12 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Get Started", "Request Demo")
**Pages observed:** Homepage, Pricing, About
**Spec:** Background: `#4945ff` | Text: `#ffffff` | Radius: `8px` | Padding: `12px 24px` | Typography: Poppins 600
**States observed:** Default: Captured | Hover: Not captured | Active: Captured

#### Secondary Button
**Role:** Ghost or outline actions
**Pages observed:** Homepage, Pricing
**Spec:** Background: `transparent` | Text: `#4945ff` | Border: `1px solid #4945ff` | Radius: `8px`
**States observed:** Default: Captured | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying product capabilities in a grid
**Pages observed:** Homepage, About
**Spec:** Background: `#ffffff` | Radius: `10px` | Shadow: `rgba(0, 0, 0, 0.08) 0px 6px 10px 0px` | Padding: `24px`
**States observed:** Default: Captured

#### Pricing Tier Card
**Role:** Highlighting specific plan details
**Pages observed:** Pricing
**Spec:** Background: `#ffffff` | Border: `1px solid #dcdce4` | Radius: `10px` | Padding: `32px 24px`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Code Snippet Block
**Role:** Technical documentation and CLI examples
**Pages observed:** Homepage
**Spec:** Background: `#1d1b84` (dark indigo) | Text: `#ffffff` | Font: Monaco | Radius: `8px`
**States observed:** Default: Captured

#### FAQ Accordion
**Role:** Collapsible information on pricing/technical details
**Pages observed:** Pricing
**Spec:** Background: `#f6f6f9` | Border: `1px solid #eaeaef` | Radius: `10px` | Text: `#32324d`
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Vertical Padding | 80px - 169px |
| Grid Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Hero H1 scales to ~43px; Padding reduces to 16px. |
| Desktop | 1440px | 12-column grid active; 80px section spacing. |

## Imagery & decoration
Strapi uses abstract geometric patterns (circles and squares) in deep indigo (#1d1b84) as background motifs. Product UI is represented through high-fidelity screenshots with 10px rounded corners and subtle shadows. Avoids generic stock photography in favor of technical illustrations and logos of partner brands (Airbus, Toyota).

## Do's
- Use Poppins 700 for all section titles to maintain brand authority.
- Apply `#4945ff` for the primary action on every page.
- Use 10px border radius for all primary content containers.
- Maintain high contrast: use `#32324d` for text on white backgrounds.
- Ensure code snippets use a dark indigo background (#1d1b84) to differentiate from UI.

## Don'ts
- Do not use pure black (#000000) for body text; use charcoal (#32324d).
- Do not use sharp corners (0px) for buttons or cards.
- Do not use the primary purple (#4945ff) for large background surfaces; keep it for accents.
- Do not mix Poppins with other sans-serif fonts in UI components.

## Similar brands
- Vercel (clean, developer-focused, high contrast)
- Supabase (technical, card-based, structured)
- Contentful (enterprise CMS, indigo/blue palette)

## Quick start

### CSS Variables
```css
:root {
  --strapi-primary: #4945ff;
  --strapi-charcoal: #32324d;
  --strapi-white: #ffffff;
  --strapi-border: #dcdce4;
  --strapi-radius-lg: 10px;
  --strapi-shadow-md: 0px 6px 10px 0px rgba(0, 0, 0, 0.08);
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #4945ff;
  --color-charcoal: #32324d;
  --font-display: "Poppins", sans-serif;
  --radius-card: 10px;
  --shadow-feature: 0 6px 10px 0 rgba(0, 0, 0, 0.08);
}
```

## Agent prompt examples
- "Create a feature card for Strapi using a white background, 10px border radius, and the standard Strapi shadow (rgba(0,0,0,0.08) 0px 6px 10px). Use Poppins 600 for the title."
- "Generate a primary CTA button using hex #4945ff with white text and 8px border radius."
- "Design a pricing table row with a 1px border in #dcdce4 and text in #32324d."

## Known gaps
- Hover and focus states for buttons were not explicitly captured in the static evidence.
- Mobile-specific menu transition logic was not sampled.
- Error state colors (reds/oranges) were not present in the analyzed marketing pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://strapi.io | 1440px | 2026-06-06 |
| Pricing | https://strapi.io/pricing | 1440px | 2026-06-06 |
| About | https://strapi.io/about | 1440px | 2026-06-06 |