# Replit · Design system migration spec

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

> A prime example of modern SaaS design that uses warmth and restraint to make a complex developer tool feel approachable and premium.

## 1. Identity DNA

Replit’s design system begins with the concept of an open, airy workshop—a place where builders sketch ideas and compile them into reality. The visual language mirrors this: spacious, warm, and focused on the act of creation itself. Every component is a toolset, arranged with the clarity of a well-organized workbench.

**One-liner:** Replit is a browser-based collaborative IDE that lets you build, deploy, and share software without local setup.
**Keywords:** coding · building · AI · developer platform · collaboration
**Analogy:** An open, airy workshop where builders sketch ideas and compile them into reality.

## 2. Color

The color system is built on a foundation of warm, off-white neutrals, providing a soft, low-strain canvas for long coding sessions. A single, high-energy orange accent cuts through this calm, reserved exclusively for the primary call-to-action.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F7F6F4` | main background |
| `--bg-soft` | `#F1F0EE` | card background |
| `--bg-quiet` | `#FFFFFF` | quiet area |
| `--ink` | `#0E0E0F` | body text |
| `--ink-soft` | `#36373B` | secondary text |
| `--muted` | `#898C94` | placeholder |
| `--muted-soft` | `#D5D4CE` | weak hint |
| `--accent` | `#FF3C00` | single accent |
| `--line` | `rgba(137,140,148,0.3)` | divider |

**Color principle:** Warm, off-white neutrals with a single high-energy orange accent for action.

The governing principle is restraint: the accent’s energy is potent precisely because it is used sparingly.

## 3. Typography

Typography adopts a clean, geometric sans-serif voice, treating text as both interface and instruction. Headlines are set with tight, negative tracking for a compact punch, while even body copy maintains a relatively tight line-height to preserve interface density.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1px | Main hero headline |
| headline | 40px | 1.1 | 500 | -0.5px | Section headings |
| body | 16px | 1.5 | 400 | 0 | Primary paragraph text |
| caption | 14px | 1.4 | 400 | 0 | Labels, metadata, and secondary text |

**Type rules:**
- Headlines use tight negative tracking for a compact, punchy feel.
- Line heights are relatively tight even for body text to maintain density.
- Font weight 500 is used for display/headline emphasis rather than a bold 700.

## 4. Spacing

Spacing follows a strict 4px baseline grid, establishing a consistent, tight rhythm between functional elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A 4px baseline grid providing consistent, tight spacing between elements and generous padding for cards.

## 5. Surfaces

Surface design relies on depth communicated through soft, translucent shadows rather than hard borders. Cards and containers use generous border-radius and subtle elevation, creating a layered effect that feels integrated rather than stacked.

- **Radius:** sm 6px · md 8px · lg 16px · pill 999px
- **Shadows:**
  - rgba(0,0,0,0.08) 0px 2px 8px 0px
  - rgba(0,0,0,0.12) 0px 8px 32px 0px
- **Borders:** 1px solid rgba(137,140,148,0.3)

## 6. Layout

The layout skeleton is anchored by a centered, single-column hero section dominated by a large interactive input field. Below this, the interface expands into a multi-column card arrangement for features or pricing, maintaining generous padding and clear separation.

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

**Skeleton:** Centered single-column hero with a prominent input field, followed by a multi-column card layout for pricing or features.

## 7. Motion & Interaction

Motion is employed as functional feedback, not decoration. All transitions use smooth fades, color shifts, and subtle scale or opacity changes on hover, governed by a consistent 0.2s to 0.3s timing on a custom cubic-bezier curve.

- **Durations:** micro 120ms · small 200ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth fade and background-color transitions on interactive elements.
  - Subtle scale or opacity shifts on hover for buttons and cards.

- **Hover:** Background color fills for outline buttons; slight elevation change for cards.
- **Click:** Subtle scale-down effect on buttons; transition to the next state or page.
- **Transition:** All 0.2s or 0.3s using a custom cubic-bezier for smooth, professional feel.
- **Keyboard:** Standard focus rings or outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is direct, empowering, and slightly playful, speaking to builders in short, punchy statements. It avoids jargon-heavy explanations and aggressive sales language, opting instead for clear, action-oriented prompts.

- **Tone:** Direct, empowering, and slightly playful, inviting the user to create.
- **Headline style:** Short, punchy questions or statements like 'What will you build?' or 'Start Small. Scale Fast.'
- **CTA style:** Clear, action-oriented text like 'Create account' or 'Sign up'.
- **Avoid:** Jargon-heavy technical explanations / Aggressive sales language / Passive or uncertain phrasing

### Don'ts
- ❌ Don't use stark pure black backgrounds — the design uses warm off-whites like #F7F6F4 instead.
- ❌ Don't use overly decorative or serif fonts — the typography is consistently clean geometric sans-serif.
- ❌ Don't use sharp, rectangular corners everywhere — elements rely on generous border-radius like 8px or pill shapes.
- ❌ Don't flood the UI with the orange accent — it's reserved strictly for high-priority calls-to-action.
- ❌ Don't use heavy drop shadows or high contrast borders — elevation is communicated through very soft, subtle shadows.
- ❌ Don't use wide, loose line-heights for headlines — the text is kept tight and compact.

The system deliberately refrains from decorative fonts, stark dark modes, and pervasive use of its signature accent color.

## System Prompt (paste into AI tool)

```
Replit is a browser-based developer platform and IDE. Its design uses a warm, off-white palette (#F7F6F4, #F1F0EE) with a single high-energy orange accent (#FF3C00) for primary actions. Typography is strictly geometric sans-serif with tight letter-spacing for a modern, punchy feel. Critical donts: never use stark pure black backgrounds, avoid sharp rectangular corners everywhere, don't flood the UI with orange accents, don't use decorative serif fonts, don't use heavy shadows, and don't use wide line-heights for headlines. The overall feel is clean, premium, and focused on builder productivity.
```
