# Magic · Design system migration spec

> Source: https://magic.dev  ·  Curated by OpenDesign  ·  en

> This site is a prime example of restrained, high-impact typography-driven design for a serious tech/research company.

## 1. Identity DNA

Magic's design language operates like a well-appointed research laboratory: every element is selected with purpose, and the environment is engineered to focus attention on the work itself. The system draws its authority from stark contrast and deliberate emptiness, letting the mission statement and technical clarity command the space.

**One-liner:** Magic is building frontier code models to automate software engineering and research.
**Keywords:** Frontier AI · Code Models · Safe AGI · Research · Software Engineering
**Analogy:** An elite research laboratory focused on AGI.

## 2. Color

The palette is a study in restraint, built on a strict monochrome foundation. Deep charcoal ink, identified as #1C2024, sits against a pure white ground, with soft gray reserved for secondary information.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#1C2024` | body text |
| `--muted` | `#60646C` | placeholder |
| `--line` | `rgba(232, 232, 236, 1)` | divider |

**Color principle:** High-contrast minimalism: deep charcoal ink on a pure white canvas, with soft gray for secondary information.

The principle is absolute: high-contrast minimalism where the absence of color becomes the primary expressive tool.

## 3. Typography

Typography is the dominant voice, using a modern grotesque-sans for display and a humanist-sans for body text. The system maintains a consistent regular weight throughout, establishing a tone that is technical, clean, and authoritative.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 46px | 1.1 | 400 | -0.9px | Hero heading |
| body | 17.5px | 1.5 | 400 | 0 | Main content |
| small | 13px | 1.5 | 400 | 0 | Meta text |

## 4. Spacing

A strict 4px base rhythm underpins the entire layout, with generous whitespace creating an open, editorial cadence.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px base with generous whitespace for a breathable, editorial feel.

## 5. Surfaces

Surfaces are flat and borderless, defined only by the content they contain. The sole structural element is a thin, 1px line in a light rgba gray used to separate list items.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Borders:** 1px solid rgba(232, 232, 236, 1) for list separators

## 6. Layout

The skeleton begins with a two-column split for the hero section, establishing a strong initial composition. The remainder of the page adopts a single-column, linear list layout for clarity and focus.

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

**Skeleton:** Two-column split for hero section, single-column list layout for job postings with horizontal separators.

## 7. Motion & Interaction

Motion is reserved for functional feedback, not decoration. All interactive elements share a uniform transition property, providing a subtle, consistent response to user input.

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

- **Hover:** Subtle color or opacity shift on links.
- **Click:** Direct navigation.
- **Transition:** All elements have a transition property applied.
- **Keyboard:** Standard focus management.

## 8. Voice & Don'ts

The editorial voice is direct and mission-focused, using bold headlines to state purpose with authority. All communication avoids technical jargon, excessive enthusiasm, and generic marketing language.

- **Tone:** Authoritative, technical, and mission-driven.
- **Headline style:** Bold, direct, and mission-focused.
- **CTA style:** Understated, professional, and clear.
- **Avoid:** Jargon / Excessive enthusiasm / Marketing buzzwords

### Don'ts
- ❌ Don't use vibrant primary colors — screenshot shows a mostly monochrome palette with only a subtle gradient mesh.
- ❌ Don't use bold weights for body text — screenshot shows regular (400) weight for all body copy.
- ❌ Don't use decorative or serif fonts for headings — screenshot shows a clean, modern grotesque sans-serif.
- ❌ Don't use complex card layouts — screenshot shows a simple, linear list layout.
- ❌ Don't use heavy drop shadows — screenshot shows completely flat, shadowless surfaces.
- ❌ Don't use boxed-in buttons — screenshot shows simple text links with chevron icons.

This system deliberately forgoes vibrant accents, decorative typography, and complex component patterns in favor of typographic clarity and structural simplicity.

## System Prompt (paste into AI tool)

```
This design is a minimalist, mission-driven AI research landing page. It features a clean, monochromatic color palette of deep charcoal (#1C2024) on a pure white background (#FFFFFF), with a single subtle gradient mesh at the top. Typography is centered on modern sans-serif categories, specifically a grotesque-sans for display and a humanist-sans for body text, maintaining a regular 400 weight throughout. Layout is spacious and editorial, utilizing generous whitespace and thin horizontal lines for structure. Critical constraints: Never use bold weights for body text, avoid complex card-based layouts in favor of linear lists, and never introduce high-chroma accent colors; the design relies on the high contrast of dark ink on white for impact.
```
