---
name: Strapi
description: "Excellent example of developer-focused design that balances technical credibility with premium polish through careful typography and spacing"
version: alpha

colors:
  background: "#0F0F23"
  primary: "#FFFFFF"
  secondary: "#3E3E5C"
  tertiary: "#4F46E5"
  neutral: "#5E709D"
  bg-soft: "#F7F8FC"
  bg-quiet: "#E7EDF1"
  muted-soft: "#666687"
  line: "rgba(94,112,157,0.2)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 72px
    lineHeight: 1.05
    fontWeight: 700
    letterSpacing: "-1.5px"
  h2:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.15
    fontWeight: 700
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 15px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

The open-source headless CMS for AI-powered websites and apps

*A developer-first content platform that balances technical utility with premium polish*

## Colors

High contrast dark/light sections with indigo accent for CTAs

- **Background (`#0F0F23`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#3E3E5C`)** — uses `ink-soft` token
- **Accent (`#4F46E5`)** — uses `accent` token
- **Muted (`#5E709D`)** — uses `muted` token
- **Borders (`rgba(94,112,157,0.2)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Use Poppins for display and headings
- Use Inter for body text and UI elements
- Maintain generous line height for readability on dark backgrounds

## Layout

Centered content with generous whitespace, full-width dark hero section

*Rhythm:* 8px base unit with consistent vertical rhythm

## Elevation & Depth

- rgba(26,26,67,0.1) 0px 1px 4px 0px
- rgba(0,0,0,0.1) 0px 4px 12px 0px
- rgba(0,0,0,0.08) 0px 6px 10px 0px
- Borders: 1px solid rgba(94,112,157,0.2)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 15px
- `pill`: 999px

## Components

- **button:** Solid rounded buttons with 15px radius, indigo primary, outlined secondary
- **card:** Light background with subtle shadow and 15px radius
- **chip:** Inline badges with pill shape and semi-transparent backgrounds
- **input:** Code blocks with monospace font and copy action
- **hero:** Full-width dark section with centered content and decorative geometric patterns

## Do's and Don'ts

**Don't:**
- Don't use muted colors on interactive elements — screenshot shows vibrant indigo (#4F46E5) for CTAs
- Don't center-align long-form body copy — screenshot shows left-aligned paragraphs in content sections
- Don't use small font sizes for technical commands — screenshot shows generous sizing for code snippets
- Don't apply heavy shadows everywhere — screenshot uses subtle, layered shadows sparingly
- Don't use round borders on all containers — screenshot shows 15px radius on buttons/cards but square edges elsewhere
- Don't mix decorative patterns with busy content — screenshot keeps geometric patterns to dark hero section only

---

## System Prompt (paste into AI agent)

```
Strapi's design system targets developers building AI-powered applications, using a dark/light dual-section approach. Primary colors include deep navy (#0F0F23) for hero sections, white (#FFFFFF) for content areas, and indigo (#4F46E5) for action CTAs. Typography uses geometric Poppins for display/headings and humanist Inter for body text, maintaining clear hierarchy. Critical donts: avoid muted colors on interactive elements (vibrant indigo is standard), don't center long-form copy, maintain generous sizing for code snippets. The system emphasizes technical credibility with clean layouts, subtle shadows, and purposeful whitespace. Focus on clear value propositions and developer-friendly patterns like copyable code blocks and direct CTAs.
```