---
name: Magic
description: "This site is a prime example of restrained, high-impact typography-driven design for a serious tech/research company."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1C2024"
  neutral: "#60646C"
  line: "rgba(232, 232, 236, 1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 46px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.9px"
  body:
    fontFamily: humanist-sans
    fontSize: 17.5px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  small:
    fontFamily: humanist-sans
    fontSize: 13px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Magic is building frontier code models to automate software engineering and research.

*An elite research laboratory focused on AGI.*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1C2024`)** — uses `ink` token
- **Muted (`#60646C`)** — uses `muted` token
- **Borders (`rgba(232, 232, 236, 1)`)** — uses `line` token

## Typography

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

## Layout

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

*Rhythm:* Standard 4px base with generous whitespace for a breathable, editorial feel.

## Elevation & Depth

- Borders: 1px solid rgba(232, 232, 236, 1) for list separators

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** Minimal text links with chevron icons, separated by thin horizontal lines.
- **card:** None visible.
- **chip:** None visible.
- **input:** None visible.
- **hero:** Large-scale typographic statement with a subtle, colorful gradient mesh background at the very top.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```