---
name: Storyblok
description: "Excellent example of developer-focused SaaS design that balances technical credibility with approachable, joyful branding."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1F1F1F"
  secondary: "#44474A"
  tertiary: "#7530F7"
  neutral: "#808080"
  line: "rgba(31,31,31,0.12)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.05
    fontWeight: 900
    letterSpacing: "-0.02em"
  heading:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 900
    letterSpacing: "-0.01em"
  subheading:
    fontFamily: geometric-sans
    fontSize: 36px
    lineHeight: 1.15
    fontWeight: 700
    letterSpacing: "-0.01em"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  small:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 8px
  md: 12px
  lg: 24px
  pill: 999px

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

---

## Overview

Enterprise headless CMS designed for modern frameworks with a clean, joyful aesthetic

*A developer-friendly content platform that feels polished yet approachable*

## Colors

High contrast neutrals with a single vibrant purple accent and strategic blue highlights

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1F1F1F`)** — uses `ink` token
- **Secondary text (`#44474A`)** — uses `ink-soft` token
- **Accent (`#7530F7`)** — uses `accent` token
- **Muted (`#808080`)** — uses `muted` token
- **Borders (`rgba(31,31,31,0.12)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans

- Headlines use weight 900 with tight tracking
- Body text maintains generous line height for readability
- Button text is weight 500 at 16px
- Accent color is used selectively on key phrases in hero

## Layout

Centered single-column hero with full-width content sections below

*Rhythm:* Consistent 24px gutter with generous section padding of 48-96px

## Elevation & Depth

- 0 2px 8px rgba(31,31,31,0.08)
- 0 4px 16px rgba(31,31,31,0.12)
- Borders: 1-2px solid with muted borders on cards and inputs

## Shapes

- `sm`: 8px
- `md`: 12px
- `lg`: 24px
- `pill`: 999px

## Components

- **button:** Solid dark fill with white text for primary, bordered outline for secondary, rounded corners
- **card:** Clean bordered containers with consistent padding
- **input:** Standard text inputs with subtle borders
- **hero:** Large bold typography with blue accent text on light background, centered layout

## Do's and Don'ts

**Don't:**
- don't use multiple accent colors — screenshot shows purple and blue used sparingly with clear hierarchy
- don't apply heavy shadows — screenshot shows minimal, subtle elevation
- don't use decorative fonts — screenshot shows geometric sans-serif throughout
- don't clutter the interface — screenshot maintains generous whitespace and breathing room
- don't use aggressive CTAs — screenshot shows calm, clear button labels
- don't mix visual styles — screenshot maintains consistent rounded corners and typography

---

## System Prompt (paste into AI agent)

```
This is a developer-focused SaaS platform for headless CMS. The design balances technical credibility with approachable warmth. Primary colors are white backgrounds with near-black text (#1F1F1F) and purple accent (#7530F7). Blue highlights (#3B82F6) appear in hero text. Typography uses geometric sans-serif at weight 900 for headlines with tight tracking. Don't use multiple competing accents. Don't apply heavy shadows or gradients. Don't use decorative serif fonts. Layout centers content with generous spacing. Buttons use dark fills for primary actions with rounded corners. The interface feels clean and modern without being sterile.
```