# Warpcast · Design system migration spec

> Source: https://warpcast.com  ·  Curated by OpenDesign  ·  en

> This site is a prime example of a modern, dark-mode-first consumer app interface that prioritizes readability and a calm user experience.

## 1. Identity DNA

Warpcast's design system begins with a singular architectural principle: creating a calm, dark portal into a decentralized social universe. Every token, component, and pattern is constructed to serve this core identity of ownership, community, and focused building.

**One-liner:** A decentralized social network with a calm, dark-mode-first interface focused on ownership and building.
**Keywords:** Decentralized · Social · Identity · Building · Community
**Analogy:** A dark, serene portal to a decentralized social universe

## 2. Color

The color system establishes a clear hierarchy through a deep charcoal background and high-contrast white text, with a single vibrant purple accent defining all primary actions.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#121212` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `rgba(255,255,255,0.8)` | secondary text |
| `--muted` | `rgba(255,255,255,0.5)` | placeholder |
| `--accent` | `#7959FF` | single accent |
| `--line` | `rgba(255,255,255,0.1)` | divider |

**Color principle:** Deep, dark backgrounds with high-contrast white text and a vibrant purple accent for primary actions

This strict three-role palette ensures visual clarity and reinforces the platform's calm, dark-mode-first identity.

## 3. Typography

Typographic voice is clean and modern, using humanist sans-serif fonts like Inter to maintain readability and a straightforward tone. The scale is minimal, reserved for impactful hero headlines and clear body text, reflecting a system built for substance over decoration.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 42px | 1.0 | 400 | -0.5px | Hero headline |
| body | 16px | 1.5 | 400 | 0px | Body text and UI |

## 4. Spacing

All spacing is governed by a consistent 4px grid, creating a predictable and harmonious rhythm across every interface element.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px grid-based spacing

## 5. Surfaces

Depth is communicated through subtlety, using thin, semi-transparent white borders rather than heavy shadows to define surfaces. This approach maintains the interface's flat, serene quality while providing necessary visual separation.

- **Radius:** sm 4px · md 8px · lg 12px · pill 300px
- **Borders:** 1px solid rgba(255,255,255,0.1)

## 6. Layout

The core layout follows a spacious split-hero skeleton, balancing an app mockup with direct, empowering copy. This structure establishes a clean, focused entry point that prioritizes clarity and immediate understanding.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Split hero with phone mockup on left, content on right

## 7. Motion & Interaction

Motion philosophy is functional and unobtrusive, using smooth transitions on all interactive elements to create a responsive feel. The goal is to guide user attention without distraction, reinforcing the system's calm demeanor.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Transition on all interactive elements

- **Hover:** Subtle color shift on primary buttons
- **Click:** Immediate response
- **Transition:** All properties transition smoothly
- **Keyboard:** Standard focus rings

## 8. Voice & Don'ts

The editorial voice is direct, empowering, and calm, employing short, period-separated phrases for headlines and clear calls-to-action. This tone avoids exclamation marks and aggressive language, speaking to users as builders within a thoughtful community.

- **Tone:** Direct, empowering, and calm
- **Headline style:** Short, punchy, period-separated phrases
- **CTA style:** Clear and action-oriented
- **Avoid:** Exclamation marks / Aggressive language / Jargon

### Don'ts
- ❌ Don't use light backgrounds — screenshot shows a deep dark mode interface
- ❌ Don't use sharp corners on primary buttons — screenshot shows pill-shaped buttons
- ❌ Don't use low-contrast text — screenshot shows high-contrast white on dark
- ❌ Don't use complex gradients on UI elements — screenshot shows flat or very subtle gradients
- ❌ Don't use a cluttered layout — screenshot shows a clean, spacious split-hero design
- ❌ Don't use red or orange as primary accents — screenshot shows purple as the single dominant accent

The system deliberately excludes light backgrounds, sharp corners on primary buttons, low-contrast text, and vibrant non-purple accents, defining itself as much by what it refuses to be.

## System Prompt (paste into AI tool)

```
Farcaster (Warpcast) is a decentralized social network positioned as a calm, dark-mode-first platform for building and community. The key colors are a deep charcoal background (#121212), white primary text (#FFFFFF), and a vibrant purple accent (#7959FF) for primary actions like signing up. Typography uses clean humanist-sans-serif fonts (Inter/SeasonMix) for a modern, readable feel. Critical donts include: never use light or white backgrounds as the core interface is dark; avoid sharp corners on primary buttons which are distinctly pill-shaped; and never use low-contrast text which would violate the high-accessibility dark theme. The layout is spacious and focused, often using a split hero with an app mockup. The voice is direct and empowering.
```
