# Mage Design System

> A high-contrast technical canvas where monochromatic precision meets soft, functional pastel wayfinding.

**Source:** https://mage.ai | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Mage utilizes a stark, developer-centric aesthetic that balances a pure white foundation (#ffffff) with deep achromatic anchors (#000000, #2e2e2e). The system is defined by high-density typography using Inter and Geist, punctuated by a primary electric blue accent (#3686ff) for critical actions. A secondary layer of "functional pastels" (mint, lavender, peach) is used strictly for categorization and data-use-case cards, providing visual distinction without breaking the technical atmosphere. Geometry is varied, moving from sharp 0px containers to hyper-rounded 100px pill surfaces for navigational elements.

## Signature DNA
1. **Functional Pastel Wayfinding** (The use of specific light-saturated backgrounds like #ba9ffc for dbt or #fcc2cd for AI workflows to differentiate complex product modules on https://mage.ai).
2. **Achromatic Density** (Heavy reliance on #000000 and #2e2e2e for structural text and surfaces, creating a "terminal-adjacent" feel within a web context).
3. **Pill-Encapsulated Navigation** (The 100px border-radius applied to interactive surfaces and tags, creating a soft touchpoint against otherwise sharp grid layouts).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Primary page background | 304 | 1.0 | computed_style |
| `{color.black}` | `#000000` | Primary text and dark surfaces | 578 | 0.8 | computed_style |
| `{color.gray.dark}` | `#2e2e2e` | Secondary text and structural elements | 12 | 1.0 | brand_page |
| `{color.gray.mid}` | `#878787` | Muted body and captions | 139 | 0.8 | computed_style |
| `{color.gray.light}` | `#adadad` | Tertiary text and disabled states | 278 | 0.8 | computed_style |
| `{color.bone}` | `#f1f1ea` | Section backgrounds and card surfaces | 54 | 1.0 | brand_page |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.blue.primary}` | `#3686ff` | Primary CTA and active states | 138 | 0.8 | computed_style |
| `{color.blue.link}` | `#0000ee` | Inline text links | 120 | 0.8 | computed_style |
| `{color.sky.soft}` | `#e0f6ff` | Primary light accent surface | 8 | 1.0 | brand_page |
| `{color.lavender}` | `#ba9ffc` | Decorative: dbt orchestration cards | 2 | 1.0 | decorative_only |
| `{color.rose}` | `#fcc2cd` | Decorative: AI/ML workflow cards | 2 | 1.0 | decorative_only |
| `{color.mint}` | `#b3fcf5` | Decorative: API workflow cards | 2 | 1.0 | decorative_only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Inter | 400, 500, 600, 700 | Headings, UI, Buttons | Inter (Google Fonts) | SIL OFL |
| Geist | 500, 600 | Display, Technical Body | Geist Sans (Vercel) | SIL OFL |
| Fira Code | 400 | Code snippets, technical annotations | Fira Code | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.lg}` | 60px | 84px | normal | 400 | Hero headlines | p.framer-text |
| `{type.display.md}` | 50px | 60px | normal | 600 | Section headers | p.framer-text |
| `{type.h1}` | 38px | 49.4px | normal | 400 | Page titles | p.framer-text |
| `{type.h2}` | 32px | 38.4px | normal | 600 | Feature titles | p.framer-text |
| `{type.h3}` | 24px | 28.8px | normal | 600 | Card titles | span:nth-of-type(1) |
| `{type.body.lg}` | 18px | 21.6px | normal | 600 | Strong body | span:nth-of-type(1) |
| `{type.body.md}` | 16px | 19.2px | normal | 600 | Default UI text | span:nth-of-type(1) |
| `{type.body.sm}` | 13px | 16.9px | normal | 500 | Captions/Tags | p.framer-text |

### Principles
1. **Variable Weight for Hierarchy**: Uses Inter Variable at 400 for large display sizes to maintain a clean, thin profile.
2. **Technical Monospace**: Fira Code is used for all descriptive technical features to signal "code-first" functionality.
3. **Tight UI Leading**: UI components (16px and below) use a tight 1.2x line-height ratio for density.

## Spacing
**Base unit:** 4
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 6px | 139 |
| `{space.sm}` | 8px | 15 |
| `{space.md}` | 16px | 154 |
| `{space.lg}` | 24px | 12 |
| `{space.xl}` | 40px | 68 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers | 1250 occurrences |
| `{radius.sm}` | 6px | Feature cards | Card component |
| `{radius.md}` | 8px | Interactive panels | Card component |
| `{radius.pill}` | 100px | Buttons, Tags, Navigation | Surface component |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All cards and surfaces | Component evidence |

## Components

### Tier 1: Foundational

#### Surface (Tag/Pill)
**Role:** Categorization and navigation labels.
**Pages observed:** https://mage.ai, https://mage.ai/about
**Spec:** Background: transparent / Text: #000000 / Radius: 100px / Padding: 6px 16px / Font: 12px
**States observed:** Default | Hover: captured

#### Button (Primary)
**Role:** Main call to action.
**Pages observed:** https://mage.ai, https://mage.ai/pricing
**Spec:** Background: #3686ff / Text: #ffffff / Radius: 100px / Padding: 8px 30px / Font: 12px
**States observed:** Default | Active: captured

### Tier 2: Patterns

#### Feature Card (Bone)
**Role:** Secondary content grouping.
**Pages observed:** https://mage.ai, https://mage.ai/about
**Spec:** Background: #f1f1ea / Text: #000000 / Radius: 6px / Padding: 40px
**States observed:** Default | Hover: not captured

#### Feature Card (Accent)
**Role:** Primary product feature highlight.
**Pages observed:** https://mage.ai, https://mage.ai/about
**Spec:** Background: #e0f6ff / Text: #000000 / Radius: 6px / Padding: 40px
**States observed:** Default

### Tier 3: Surface-specific

#### Dark UI Panel
**Role:** Pricing or technical code blocks.
**Pages observed:** https://mage.ai/pricing
**Spec:** Background: #1d1f21 / Text: #0000ee / Radius: 100px (inner elements)
**States observed:** Default

#### Pricing Tier Card
**Role:** Subscription plan selection.
**Pages observed:** https://mage.ai/pricing
**Spec:** Background: #34404c (20% opacity) / Radius: 12px / Padding: 24px
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1440px |
| Section Padding | 60px |
| Card Gap | 16px |

## Imagery & decoration
Mage uses abstract, colorful 3D illustrations and technical diagrams with flowing "pipeline" lines. It avoids generic stock photography, preferring high-saturation renders that contrast with the achromatic UI.

## Do's
- Use `#3686ff` for all primary user actions.
- Apply `100px` radius to all interactive pill-style elements.
- Use `Fira Code` for any text describing data or logic.
- Maintain high contrast between `#ffffff` canvas and `#000000` text.
- Use the pastel palette (`#ba9ffc`, `#fcc2cd`) only for background categorization.

## Don'ts
- **Wrong:** Using `#3686ff` as a background for large content sections. **Right:** Use `#f1f1ea` or `#ffffff`. **Reason:** Primary blue is reserved for high-voltage interaction points.
- **Wrong:** Applying shadows to cards. **Right:** Use 1px borders or background shifts. **Reason:** The system is strictly flat.
- **Wrong:** Mixing Inter and Geist in the same paragraph. **Reason:** Geist is for display/technical headers; Inter is for UI/Body.

## Similar brands
- Vercel (Geist typography, high-contrast monochrome)
- Linear (Technical density, pill-based navigation)
- Railway (Developer-tool aesthetic, functional color usage)

## Quick start

```css
/* CSS Variables */
:root {
  --mage-blue: #3686ff;
  --mage-black: #000000;
  --mage-bone: #f1f1ea;
  --mage-white: #ffffff;
  --mage-radius-pill: 100px;
  --mage-font-main: 'Inter', sans-serif;
  --mage-font-mono: 'Fira Code', monospace;
}
```

## Agent prompt examples
- "Generate a primary CTA button using Mage's electric blue #3686ff, white text, and a 100px pill radius."
- "Create a feature card with a #f1f1ea background, 6px border radius, and 40px padding."
- "Design a technical tag using a transparent background, #000000 text, and 6px 16px padding."

## Known gaps
- Hover and focus states for secondary buttons were not fully captured in the automated crawl.
- Mobile-specific navigation transitions were not observed.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://mage.ai | 1440px | 2026-06-06 |
| Pricing | https://mage.ai/pricing | 1440px | 2026-06-06 |
| About | https://mage.ai/about | 1440px | 2026-06-06 |