# Simpu Design System

> High-contrast utility canvas anchored by a vivid electric blue and geometric Pro-weight typography.

**Source:** https://simpu.co | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Simpu utilizes a high-contrast monochrome foundation of pure white (#ffffff) and deep obsidian (#000000) punctuated by a single high-voltage primary blue (#0065eb). The system relies on **CerebriSansPro** for all typographic layers, using bold 700 weights for display and semi-bold 600 weights for interactive elements. Layouts are structured with generous vertical breathing room (up to 128px) and a consistent 8px base unit. Component geometry is strictly defined by two poles: a soft 6px-8px radius for containers and a full 9999px pill for high-priority actions and status indicators.

## Signature DNA
1. **The Simpu Blue Anchor** (#0065eb used as the exclusive chromatic driver for CTAs and category labels across all pages).
2. **Geometric Pill Hierarchy** (9999px radii are reserved strictly for primary buttons and decorative UI tags to contrast against 6px-8px functional cards).
3. **High-Contrast Sectioning** (Alternating between pure white #ffffff and soft-gray #f8f8fa surfaces to define content boundaries without heavy borders).

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Page background, primary surface | 6 | 1.0 | Computed Style |
| `{color.black}` | `#000000` | Primary text, headings | 32 | 0.8 | Computed Style |
| `{color.off-white}` | `#f8f8fa` | Secondary section backgrounds, cards | 16 | 0.8 | Computed Style |
| `{color.dark-gray}` | `#1d1d1f` | Footer background, dark-mode surfaces | 10 | 0.6 | Computed Style |
| `{color.medium-gray}` | `#4d4d4d` | Secondary body text | 6 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#0065eb` | Primary CTAs, active links, labels | 12 | 0.8 | Computed Style |
| `{color.accent-gray}` | `#9598a0` | Decorative UI elements | 4 | 0.6 | Computed Style |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{color.info}` | `#3b82f6` | Focus rings, interactive states |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|---|
| CerebriSansPro | 400, 500, 600, 700 | All-purpose (Display, Body, UI) | Inter | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|---|
| `{text.display}` | 48px | 48px | normal | 700 | Hero H1 | `h1.mt-4.font-bold` |
| `{text.heading-sm}` | 20px | 40px | normal | 600 | Section subheads | `p.font-semibold.text-xl` |
| `{text.body-lg}` | 18px | 28px | normal | 400 | Intro paragraphs | `p.text-simpuGray.text-lg` |
| `{text.body}` | 16px | 24px | normal | 400 | Default copy | `div#simpu-text` |
| `{text.ui-bold}` | 16px | 24px | normal | 600 | Nav links, buttons | `a.flex.items-center` |
| `{text.label-caps}` | 14px | 20px | normal | 500 | Uppercase labels | `p.uppercase.text-simpuBlue` |

### Principles
1. **Bold Display Hierarchy:** Hero headers must use weight 700 with 1:1 size-to-line-height ratio.
2. **Functional Semibold:** All interactive elements (buttons, nav) use weight 600 for immediate legibility.
3. **Generous Body Leading:** Body text (16px) maintains a 1.5x line-height (24px) for readability.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 8 |
| `{space.sm}` | 16px | 14 |
| `{space.md}` | 24px | 6 |
| `{space.lg}` | 48px | 6 |
| `{space.section}` | 128px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Full-width sections | 26 occurrences |
| `{radius.sm}` | 6px | Feature cards, inputs | 16 occurrences |
| `{radius.md}` | 8px | UI panels, secondary cards | 6 occurrences |
| `{radius.pill}` | 9999px | Primary buttons, status tags | 10 occurrences |

## Elevation
*Not captured in source. The system uses flat design with color-based depth.*

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action
**Pages observed:** https://simpu.co, https://simpu.co/pricing
**Spec:** Background `#0065eb` / Text `#ffffff` / Radius `9999px` / Padding `0px 16px` / Typography `16px 600`
**States observed:** Default: captured | Hover: not captured

#### Feature Card
**Role:** Content grouping on light surfaces
**Pages observed:** https://simpu.co, https://simpu.co/pricing
**Spec:** Background `#f8f8fa` / Text `#000000` / Radius `6px` / Padding `128px 48px`
**States observed:** Default: captured

### Tier 2: Patterns

#### Navigation Bar
**Role:** Global header
**Pages observed:** https://simpu.co, https://simpu.co/pricing
**Spec:** Background `rgba(0,0,0,0)` / Text `#000000` / Border `4px` (bottom) / Radius `0px`
**States observed:** Default: captured

#### Pricing Tier Card
**Role:** Product selection
**Pages observed:** https://simpu.co/pricing
**Spec:** Background `#1d1d1f` / Text `#ffffff` / Radius `8px` / Padding `12px 8px 8px`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Status Badge
**Role:** Decorative UI indicators
**Pages observed:** https://simpu.co
**Spec:** Background `#9598a0` / Text `#000000` / Radius `8px` / Padding `8px`
**States observed:** Default: captured

#### Category Label
**Role:** Small uppercase section markers
**Pages observed:** https://simpu.co
**Spec:** Background `transparent` / Text `#0065eb` / Typography `14px 500 uppercase`
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1440px |
| Section Vertical Gap | 128px |
| Feature Grid Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Stacked feature cards, center-aligned typography |
| Desktop | 1440px | Multi-column grids, 128px section padding |

## Imagery & decoration
Simpu uses high-fidelity product screenshots with soft shadows and rounded corners (6px-8px) to demonstrate the UI. It avoids abstract illustrations in favor of literal software representations.

## Do's
- Use `#0065eb` for all primary actions.
- Maintain `128px` vertical spacing between major homepage sections.
- Apply `9999px` radius to all interactive buttons.
- Use `CerebriSansPro` weight 700 for all H1 and H2 headings.
- Set body text to `#4d4d4d` on white backgrounds for soft contrast.

## Don'ts
- **Wrong:** Using `#3b82f6` (system ring color) as a primary button fill. **Right:** Use `#0065eb`. **Reason:** Brand consistency.
- Do not use sharp corners (0px) for internal UI cards; use `{radius.sm}` (6px).
- Do not use weight 400 for buttons; interactive text must be weight 600.
- Do not exceed `18px` for standard body copy paragraphs.

## Similar brands
- Linear
- Intercom
- Resend

## Quick start

### CSS Custom Properties
```css
:root {
  --simpu-blue: #0065eb;
  --simpu-black: #000000;
  --simpu-white: #ffffff;
  --simpu-gray-light: #f8f8fa;
  --simpu-gray-dark: #1d1d1f;
  --font-main: 'CerebriSansPro', sans-serif;
  --radius-pill: 9999px;
  --radius-card: 6px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #0065eb;
  --color-surface-soft: #f8f8fa;
  --font-sans: 'CerebriSansPro';
  --radius-pill: 9999px;
  --spacing-section: 128px;
}
```

## Agent prompt examples
- "Create a primary CTA button using Simpu Blue #0065eb with a 9999px pill radius and 16px semibold CerebriSansPro text."
- "Design a feature section with a #f8f8fa background, 128px top/bottom padding, and a 6px rounded image container."
- "Generate a pricing card using #1d1d1f background, white text, and 8px border radius."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static evidence.
- Mobile navigation transition (hamburger menu behavior) was not sampled.
- Shadow tokens were not declared in the source CSS variables.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://simpu.co | 1440x900 | 2026-06-06 |
| Pricing | https://simpu.co/pricing | 1440x900 | 2026-06-06 |
| Mobile Home | https://simpu.co | 390x844 | 2026-06-06 |