CURATED · OPEN · FREE

Magic

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

aidev
Magic screenshot
↓ Download design system (5 MB)Open in OpenDesign

Visit: https://magic.dev

📦 Browse pack contents →

01

Identity DNA

Frontier AICode ModelsSafe AGIResearchSoftware Engineering

An elite research laboratory focused on AGI.

02

Color

#1C2024Ink
#FFFFFFBG
#60646CMuted
rgba(232, 232, 236, 1)Line

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

03

Typography

grotesque-sans · humanist-sans · monospace

04

Spacing

4px
8px
16px
24px
32px
48px
64px
96px

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

05

Surfaces

sm · 4px
md · 8px
lg · 12px
pill · 9999px

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

06

Layout

1280container
12columns
24pxgutter
768 / 1024breakpoints

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

07

Motion & Interaction

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

Hover transitions on interactive elements

Subtle color or opacity shift on links. · Direct navigation.

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko