---
title: "Mage AI design system"
variant: extended
source: https://www.mage.ai/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/mage-ai)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Mage AI · Design System

> Calm, product-led automation with a playful edge

**Theme:** light · **Industry:** ai · **Source:** https://www.mage.ai/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Mage AI pairs a near-white canvas and restrained typography with colorful geometric hero artwork and dark product interfaces. A persistent sidebar and spacious feature sections make the long homepage feel like a guided product tour.

## North star

Keep the interface quiet and spacious; let product screens and contained bursts of color demonstrate the value.

## Overview

The page is anchored by a near-white canvas (#fbfbfc), with near-black headings and copy providing crisp contrast. Muted slate text and fine pale borders keep supporting information quiet; violet, green, and blue appear sparingly in actions, badges, and links. The hero’s soft, blurred backdrop and bright geometric forms are illustrative rather than a cue to recolor the interface. Geist Sans carries the page: bold, compact hero headings give way to readable paragraph text and smaller uppercase eyebrow labels. A fixed left rail frames the main content, which flows through centered product demonstrations, feature explanations, and use-case sections. Generous whitespace separates these blocks, while rounded media and cards soften the otherwise restrained layout. Product videos and dark UI captures provide visual contrast, and occasional editorial illustrations add warmth without changing the neutral page foundation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#fbfbfc` | `--color-gallery-white` | neutral | Dominant page canvas and the pale ground around navigation, content, and cards. |
| Vivid Violet | `#8a4dff` | `--color-vivid-violet` | accent | Small badge and interface details; not a primary page-wide color. |
| Mist Gray | `#f2f2f2` | `--color-mist-gray` | surface | Light surface and gradient tone used in supporting page areas. |
| Near Ink | `#080808` | `--color-near-ink` | neutral | Primary text, dark UI surfaces, and the dark primary action. |
| Pipeline Green | `#006b5f` | `--color-pipeline-green` | accent | Validation and automation status accents, including outlined badges. |
| Slate Haze | `#737985` | `--color-slate-haze` | semantic | Muted explanatory text and secondary copy. |
| Lavender Line | `#dccbff` | `--color-lavender-line` | accent | Pale violet border detail on a Mage-labeled pill. |
| Charcoal Copy | `#24262d` | `--color-charcoal-copy` | semantic | Secondary card and navigation text, with stronger contrast than muted body copy. |
| Warm Gray | `#66645f` | `--color-warm-gray` | semantic | Subtle text details; use for secondary information rather than headings. |
| Quiet Divider | `#dfe0e1` | `--color-quiet-divider` | neutral | Fine card and component borders against light surfaces. |
| Soft Black | `#202020` | `--color-soft-black` | surface | Dark product-card surface, distinct from the bright page canvas. |
| Graphite Surface | `#242424` | `--color-graphite-surface` | surface | Dark button and inverse component surface. |
| Mage Violet | `#6f42f5` | `--color-mage-violet` | brand | Bright violet signup action; use as a contained emphasis, not a large background. |
| True Black | `#000000` | `--color-true-black` | surface | Black areas inside dark interface and product imagery. |
| Muted Graphite | `#4a4d56` | `--color-muted-graphite` | semantic | Secondary navigation and supporting text. |
| Blue Slate | `#3f4550` | `--color-blue-slate` | semantic | Low-emphasis supporting text. |
| Action Blue | `#0b4bb8` | `--color-action-blue` | accent | Text links such as platform-exploration calls to action. |

### Semantic aliases

`--color-canvas` → `#fbfbfc` (Gallery White) · `--color-surface` → `#080808` (Near Ink) · `--color-surface-2` → `#f2f2f2` (Mist Gray) · `--color-surface-3` → `#202020` (Soft Black) · `--color-surface-4` → `#242424` (Graphite Surface) · `--color-text` → `#080808` (Near Ink) · `--color-text-muted` → `#737985` (Slate Haze) · `--color-text-subtle` → `#24262d` (Charcoal Copy) · `--color-border` → `#dfe0e1` (Quiet Divider) · `--color-accent` → `#006b5f` (Pipeline Green) · `--color-accent-2` → `#6f42f5` (Mage Violet) · `--color-accent-3` → `#0b4bb8` (Action Blue) · `--color-on-accent` → `#ffffff`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#080808` | `#fbfbfc` | 19.37:1 | AAA |
| `#080808` | `#f2f2f2` | 17.89:1 | AAA |
| `#080808` | `#202020` | 1.23:1 | fail |
| `#737985` | `#fbfbfc` | 4.23:1 | AA-large |
| `#737985` | `#080808` | 4.58:1 | AA |
| `#737985` | `#f2f2f2` | 3.91:1 | AA-large |
| `#737985` | `#202020` | 3.73:1 | AA-large |
| `#24262d` | `#fbfbfc` | 14.61:1 | AAA |
| `#24262d` | `#080808` | 1.33:1 | fail |
| `#24262d` | `#f2f2f2` | 13.49:1 | AAA |

### Gradients

- `linear-gradient(90deg, rgba(238, 238, 238, 0.72), rgba(238, 238, 238, 0.52)), url("https://www.mage.ai/assets/pages/home/hero-background.webp")`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| geistSans | `--font-body` | webfont | 400, 600, 500 | Primary interface, navigation, headings, body copy, and buttons. | Inter |
| geistMono | `--font-mono` | webfont | 500 | Compact code and technical labels within product-oriented content. | Roboto Mono |

- **geistSans:** Use clean sans-serif forms, measured weights from 400 to 600, and restrained tracking; uppercase is reserved for eyebrow labels.
- **geistMono:** Use the measured medium weight for terse code-like details, not general page copy.

### Type scale — Minor Third (ratio ≈ 1.221, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 600 | 1.1 | 0 | — | geistSans | Primary hero headline introducing pipeline automation. |
| h2 | 38px | 600 | 1.3 | 0 | — | geistSans | Major section headings for product capabilities and use cases. |
| h3 | 36px | 400 | 1.6 | 0 | — | geistSans | Supporting feature headings and prominent explanatory statements. |
| h4 | 30px | 400 | 1.45 | 0 | — | geistSans | Smaller feature or card titles within content sections. |
| body | 18px | 400 | 1.5 | 0 | — | geistSans | Hero description and primary explanatory paragraphs. |
| caption | 16px | 400 | 1.63 | 0 | — | geistSans | Compact supporting copy and descriptions beneath demonstrations. |
| nav | 18px | 600 | 1.22 | 0 | — | geistSans | Sidebar navigation labels and primary navigation items. |
| eyebrow | 14px | 600 | 1.4 | 0.08em | uppercase | geistSans | Small uppercase labels that introduce use-case or feature groups. |
| code | 10px | 500 | 1.35 | 0 | — | geistMono | Technical snippets and compact developer-facing interface details. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 20, 24, 26 px.
- Section rhythm 56px · element gap 5px · card padding — · max content width —.

A persistent vertical navigation rail sits beside the broad main content area. The page uses a comfortable, editorial rhythm: a large hero, a horizontal customer-logo row, then centered product media and feature explanations. Headings generally align to the left edge of their content groups, while demonstrations and illustrations sit within rounded frames. Sections are separated by generous whitespace rather than strong background bands. Cards and feature groups use orderly columns, with no measured maximum width or card padding specified.

## Shape & elevation

- Radius: button `9999px` · card `16px` · media `22px` · badge `50%` · nav `9px` · link `16px` · xs `6px` · sm `9px` · md `12px` · lg `13px` · xl `16px` · 2xl `18px` · pill `9999px`
- Shadow `lg` (other): `rgba(22, 20, 38, 0.13) 0px 22px 46px 0px`
- Shadow `lg-2` (card): `rgba(22, 25, 31, 0.1) 0px 16px 38px 0px`
- Shadow `hairline` (other): `rgba(16, 18, 26, 0.12) 0px 1px 2px 0px, rgba(16, 18, 26, 0.08) 0px 0px 0px 1px`
- Shadow `xl` (card): `rgba(141, 141, 141, 0.08) 0px 36px 100px 0px`
- Shadow `lg-3` (text): `rgba(22, 25, 31, 0.05) 0px 14px 32px 0px`
- Shadow `lg-4` (card): `rgba(22, 25, 31, 0.08) 0px 18px 40px 0px`
- Motion: standard transition `0.42s cubic-bezier(0.55, 0, 0.13, 1)` on interactive elements.

The page is mostly flat, with pale borders distinguishing cards and controls from the canvas. Product media, cards, and occasional floating elements use soft, broad shadows rather than sharp elevation. Dark interface previews create their own visual depth; reserve stronger layering for framed media and prominent cards.

## Imagery

The hero uses a soft, hazy background with colorful geometric shapes; treat those hues as artwork rather than the core interface palette. Product videos and screenshots show dark, dense data tools in rounded frames, creating contrast with the light canvas. Later sections use friendly, colorful illustrations of people and workflow concepts. Keep imagery contained and purposeful, with product screens as the main evidence of functionality.

## Components

### Sidebar navigation

Persistent left rail with brand mark, grouped navigation, and lower account actions; use muted labels, a softly tinted active pill, and rounded navigation items.

### Hero panel

Large rounded visual panel pairs a bold headline and readable summary with primary and secondary pill actions over softly colored geometric artwork.

### Customer logo row

A horizontal strip of customer marks follows the hero, rendered quietly so logos add social proof without competing with the headline.

### Product showcase

Rounded video or interface capture with a dark data-tool screen; pair it with a short title and subdued explanatory copy.

### Feature cards

Light cards use restrained borders, modest rounding, dark titles, and muted descriptions; use violet or green for small status details.

### Action links

Use blue text links for exploration actions and compact pill buttons for primary conversion actions.

### Measured component styles

- **Primary button** (“S S i i g g n n U U p p”): background #6f42f5 · text #ffffff · border 1px solid · radius 999px · padding 0px 13px · 600 14px geistSans
- **Secondary button** (“Platform”): transparent background · text #4a4d56 · border 1px solid · radius 999px · padding 0px 13px · 400 16px geistSans
- **Link** (“Explore the platform”): transparent background · text #0b4bb8 · radius 0px · padding 0px · 600 16px geistSans
- **Card** (“Recover failed pipelines automatically S”): background #ffffff · text #24262d · radius 16px · padding 0px · 400 16px geistSans
- **Badge** (“Applied automatically”): transparent background · text #006b5f · border 1px solid #006b5f · radius 999px · padding 6px 9px · 600 12px geistSans
- **Navigation item** (“Automate work”): transparent background · text #4a4d56 · radius 9px · padding 0px 9px · 400 16px geistSans

## Do

- Keep the page canvas near-white and visually quiet.
- Use dark headings with muted supporting copy.
- Reserve violet, green, and blue for small, clear accents.
- Frame product demonstrations with rounded corners.
- Give major sections generous breathing room.
- Use illustrations as contained accents, not background decoration.

## Don't

- Do not turn the hero artwork palette into the interface palette.
- Do not fill every section with a contrasting color band.
- Do not make secondary copy compete with headlines.
- Do not crowd the sidebar or feature demonstrations.
- Do not add heavy borders or harsh shadows to every card.
- Do not use decorative display typography in place of Geist-like sans.

## Agent prompt

Build a new Mage AI page with a persistent sidebar and a spacious, product-led content flow. Use Gallery White (#fbfbfc) as the canvas, Near Ink (#080808) for strong text, Slate Haze (#737985) for supporting copy, and Quiet Divider (#dfe0e1) for subtle outlines. Apply Mage Violet (#6f42f5), Pipeline Green (#006b5f), and Action Blue (#0b4bb8) only to focused actions, status details, or links. Use Geist Sans or Inter for the interface and Geist Mono or Roboto Mono for compact technical details. Keep headings clean and left-aligned within their content groups. Place rounded dark product screens and occasional friendly illustrations within generous whitespace. Favor light, fine borders and soft shadows; avoid dense layouts, loud section fills, and oversized decorative color outside contained artwork.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Persistent left sidebar beside a long single-page content area, starting with a wide hero and continuing through stacked product sections. | Persistent sidebar navigation, Primary and secondary hero actions, Customer logo proof, Product capability walkthrough | Near-white canvas, Soft geometric hero artwork, Rounded dark product media, Muted text and fine borders, Contained violet and blue accents |

## Source CSS custom properties (selected)

```css
--arcane-animated-button-theme-bg: #fff;
--arcane-animated-button-theme-color: #080808;
--arcane-animated-button-theme-hover-bg: #080808;
--arcane-animated-button-theme-hover-border: #ffffff7a;
--career-shadow: 0 28px 90px #0000003d;
--article-accent-blue: #76d7ff;
--article-accent-pink: #ff8fc7;
--article-accent-purple: #caa7ff;
--article-accent-yellow: #f5df30;
--color-ink-900: #080808;
--color-ink-800: #080808;
--color-slate-900: #10161b;
--color-slate-700: #34343a;
--color-canvas-warm: #fbfbfc;
--color-canvas-warm-alt: #f5f5f7;
--color-canvas-cream: #eef0f4;
--color-surface-white: #fff;
--color-text-primary: #080808;
--color-text-muted: #66645f;
--color-text-subtle: #8b8982;
--color-text-inverse: #fff;
--color-text-inverse-muted: #ffffff9e;
--color-text-inverse-subtle: #ffffff61;
--color-border-default: #deddd4;
--color-border-strong: #c9c7ba;
--color-border-inverse: #ffffff26;
--color-action-blue: #3686ff;
--color-action-blue-hover: #0b4bb8;
--color-signal-green: #00fb82;
--color-signal-yellow: #ffd600;
--color-signal-purple: #956eff;
--color-signal-red: #ff3b3b;
--color-accent-cyan: #d9f6ff;
--color-accent-lavender: #d9c2ff;
--color-accent-yellow: #fff38a;
--color-accent-mint: #c9f6ea;
--color-accent-pink: #ffd2df;
--color-illustration-aqua: #b3fcf5;
--color-ink: #080808;
--color-muted: #66645f;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/mage-ai