# Farcaster · Design system migration spec

> Source: https://www.farcaster.xyz  ·  Curated by OpenDesign  ·  en

> A strong example of a modern, focused SaaS landing page for a decentralized protocol.

## 1. Identity DNA

Farcaster’s design system is built like a protocol itself—modular, functional, and designed for builders. It establishes a decentralized social layer not through ornamental flourish, but through a clean, confident visual structure that prioritizes clarity and utility.

**One-liner:** Build. Share. Grow.
**Keywords:** Decentralized · Social · Developer · Open · Protocol
**Analogy:** A decentralized social protocol for builders.

## 2. Color

The system’s foundation is a high-contrast scheme: a deep indigo field paired with crisp white text for maximum legibility. A vibrant purple accent provides focused emphasis without cluttering the interface.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#361AAC` | 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.25)` | divider |

**Color principle:** Deep indigo background with white text for high contrast.

This palette reinforces a core principle: visual hierarchy is achieved through stark contrast, not decorative complexity.

## 3. Typography

Typography is handled with a clean, humanist sans-serif, leveraging Inter for its technical clarity and warm geometry. The scale prioritizes bold and medium weights for direct communication, avoiding thin forms that could dilute its confident, developer-focused voice.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 28px | 1.2 | 600 | -0.5px | Hero headline |

## 4. Spacing

A standard 4px base grid provides the foundational rhythm, creating a consistent and predictable structure for all interface elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px base grid.

## 5. Surfaces

Surfaces are defined by depth and separation through background contrast alone, not by decorative borders or heavy shadows. The system relies on color blocks and subtle glass effects to establish visual hierarchy and focus.

- **Radius:** sm 4px · md 8px · lg 12px · pill 300px
- **Borders:** None, relies on background contrast.

## 6. Layout

The layout follows a mobile-first, standard web skeleton, exemplified by a split hero that cleanly separates a phone mockup from a direct call-to-action. This structure prioritizes focus and minimizes cognitive load, directing attention to a single, primary path.

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

**Skeleton:** Standard web layout, mobile-first.

## 7. Motion & Interaction

Motion is functional and restrained, designed to provide clear feedback rather than to decorate. All transitions are smooth and consistent, using a uniform 220ms duration across properties to maintain a sense of deliberate, responsive control.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth hover transitions.

- **Hover:** Scale or color shift.
- **Click:** Scale down slightly.
- **Transition:** All properties over 220ms.
- **Keyboard:** Standard focus rings.

## 8. Voice & Don'ts

The editorial voice is direct, confident, and technical, mirroring the interface it inhabits. It employs short, punchy headlines and clear, actionable language, speaking to builders without resorting to vague promises or non-essential jargon.

- **Tone:** Direct, confident, technical.
- **Headline style:** Short, punchy sentences.
- **CTA style:** Clear and actionable.
- **Avoid:** Vague promises. / Excessive marketing fluff. / Non-technical jargon.

### Don'ts
- ❌ Don't use thin weights — screenshot shows bold/medium weights.
- ❌ Don't use sharp corners on primary buttons — screenshot shows pill shapes.
- ❌ Don't use light backgrounds — screenshot shows deep indigo.
- ❌ Don't use complex gradients — screenshot shows a solid or very subtle gradient.
- ❌ Don't use decorative fonts — screenshot shows clean sans-serifs.
- ❌ Don't clutter the layout — screenshot shows a clear, focused hero section.

The system deliberately rejects ornamental elements, light backgrounds, and cluttered layouts, defining itself as much by what it omits as by what it includes.

## System Prompt (paste into AI tool)

```
A decentralized social protocol for developers and creators. Deep indigo background (#361AAC) with white text and a vibrant purple accent (#7959FF). Uses clean humanist sans-serif typography (Inter) with bold weights for emphasis. Buttons are fully rounded (pill shape). The layout is clean and focused, avoiding clutter. Critical don'ts: Don't use sharp corners on buttons, don't use light backgrounds, don't use thin font weights.
```
