# Remix · Design system migration spec

> Source: https://remix.run  ·  Curated by OpenDesign  ·  en

> This site is a prime example of a modern, developer-focused landing page that uses motion and bold typography to convey power and performance.

## 1. Identity DNA

The design system for Remix functions like a high-speed race track for web development: every element is engineered for minimal friction and maximum velocity. It's a stark, performance-first environment where the interface itself communicates the framework's core promise of speed and modern capability.

**One-liner:** A modern, high-performance web framework for developers.
**Keywords:** developer · framework · performance · modern
**Analogy:** A high-speed race track for web development

## 2. Color

The color system is a study in high-contrast restraint. A foundational palette of pure black and off-white provides the canvas, while a single vibrant blue accent and energetic light-trail glows act as kinetic highlights that signal interactivity and power.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#1e2226` | card background |
| `--ink` | `#ffffff` | body text |
| `--ink-soft` | `#dee2e6` | secondary text |
| `--muted` | `#dee2e6` | placeholder |
| `--accent` | `#3facf9` | single accent |
| `--line` | `rgba(255, 255, 255, 0.12)` | divider |

**Color principle:** High-contrast dark mode with vibrant, energetic accents.

The principle is simple: use contrast to create focus and introduce color only to energize and direct.

## 3. Typography

The typographic voice is split between commanding authority and clean utility. Display headlines are set in a bold, tightly tracked geometric sans-serif for impact, while UI labels and navigation adopt an uppercase monospaced treatment that evokes the precision of a code editor.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 84px | 1.0 | 700 | -2.52px | Hero headline |
| heading | 56px | 1.0 | 700 | -1.12px | Section headline |
| body | 16px | 1.5 | 400 | 0 | Body text |
| caption | 13px | 1.6 | 400 | 0.5px | Navigation and labels |

**Type rules:**
- Use uppercase and monospaced font for navigation and UI labels.
- Use bold, tightly tracked geometric sans for display headlines.
- Body text uses a clean humanist sans-serif.

## 4. Spacing

Rhythm is established through generous vertical padding, with major sections separated by a consistent 120px gap that allows content to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 120 px
- **Rhythm:** Generous vertical padding (120px) separates major content sections.

## 5. Surfaces

Surfaces are defined by subtle, glowing borders and atmospheric shadows rather than heavy fills. The default 1px solid border uses a low-opacity white, and interactive states are marked by soft, warm light trails.

- **Radius:** sm 4px · md 8px · lg 24px · pill 999px
- **Shadows:**
  - rgb(253, 189, 134) 0px 0px 2px 0px
  - rgb(253, 189, 134) 0px 0px 8px 0px
- **Borders:** 1px solid rgba(255, 255, 255, 0.12)

## 6. Layout

The layout begins with a full-width, immersive hero block containing a centered content column. Following this, the structure transitions into a two-column grid to present feature showcases and technical details.

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

**Skeleton:** Full-width dark hero with a centered content block, transitioning into a two-column layout for features.

## 7. Motion & Interaction

Motion is ambient and purposeful, not decorative. Subtle background particle animations and glowing light trails create a sense of depth and constant, efficient activity, while UI transitions remain fast and smooth at 150ms.

- **Durations:** micro 150ms · small 300ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle background particle animations and glowing light trails.
  - Smooth opacity transitions for UI elements.

- **Hover:** Color transitions on interactive elements.
- **Click:** Pointer cursor on buttons and links.
- **Transition:** Fast 150ms transitions for color, background, and border-color.
- **Keyboard:** Standard focus states implied by standard HTML elements.

## 8. Voice & Don'ts

The editorial voice is confident, technical, and direct, mirroring the framework's own demeanor. It favors bold statements and command-line snippets over passive language, speaking as a knowledgeable peer to the developer.

- **Tone:** Confident, technical, and empowering.
- **Headline style:** Bold, direct statements emphasizing power and versatility.
- **CTA style:** Direct instructions, often involving command-line snippets.
- **Avoid:** Overly complex technical jargon without clear benefits. / Passive or hesitant language. / Bright or pastel color palettes.

### Don'ts
- ❌ Don't use light mode or pastel backgrounds — screenshot shows a dark, high-contrast environment.
- ❌ Don't use serif or script fonts for headlines — screenshot shows bold, tightly tracked geometric sans-serif.
- ❌ Don't use large, heavy borders on components — screenshot shows subtle, thin, low-opacity borders.
- ❌ Don't use standard sentence case for navigation — screenshot shows uppercase monospaced labels.
- ❌ Don't use static, flat backgrounds — screenshot shows dynamic, animated particle fields and glowing light trails.
- ❌ Don't use small, cramped spacing — screenshot shows generous vertical padding between sections.

They deliberately avoid light modes, serif typography, and heavy borders, as these elements would contradict the core identity of a fast, modern developer tool.

## System Prompt (paste into AI tool)

```
Remix is a high-performance web framework website with a dark, developer-focused aesthetic. The design uses a primary palette of pure black (#000000) and off-white (#ffffff, #dee2e6), with a vibrant blue accent (#3facf9) and energetic light trails. Typography combines bold, geometric sans-serif for large display headlines with a humanist sans-serif for body text and a monospaced font for code and UI labels. Key features include tightly tracked headlines, generous vertical spacing (120px), and subtle, glowing interactive elements. Critical don'ts: avoid light themes, avoid serif fonts for headlines, and avoid heavy borders. The site is designed to feel fast, modern, and technical.
```
