---
version: alpha
name: MDX
description: Cinematic dark-studio minimalism — near-black canvas with off-white ink, electric-cyan accent reserved for interaction, gradient blur ellipses for atmospheric depth, and large bold display type over abundant negative space.
colors:
  # Canvas + ink
  background: "#0a0a0a"
  surface: "#111111"
  surface-soft: "#171717"
  ink: "#f5f5f5"
  ink-pure: "#ffffff"
  ink-secondary: "#a3a3a3"
  ink-muted: "#737373"

  # Accent — interaction only
  primary: "#22d3ee"        # electric cyan CTA / interactive
  accent-hover: "#67e8f9"

  # Decorative gradient blur tints (flattened over near-black canvas)
  glow-cyan: "#103d44"      # cyan ellipse wash over #0a0a0a
  glow-violet: "#241a3a"    # violet ellipse wash over #0a0a0a
  glow-rose: "#2e1820"      # rose ellipse wash over #0a0a0a

  # Neutral scale
  gray-900: "#0a0a0a"
  gray-800: "#171717"
  gray-700: "#262626"
  gray-500: "#737373"
  gray-400: "#a3a3a3"
  gray-200: "#d4d4d4"

  # Borders + hairlines
  border: "#262626"
  border-soft: "#1c1c1c"

  # On-color
  on-primary: "#0a0a0a"
  on-ink: "#0a0a0a"

typography:
  display-hero:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -2.16px
  section-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -1.44px
  sub-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: -0.96px
  card-title:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.30
    letterSpacing: -0.48px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 0.5px
  label-caps:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: 1.5px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 120px

rounded:
  none: 0px
  sm: 6px
  md: 10px
  lg: 16px
  xl: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.accent-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-pure}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.gray-700}"

  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
    borderColor: "{colors.border}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border}"

  card-glow:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 40px
    borderColor: "{colors.glow-cyan}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    padding: 20px 32px
    borderColor: "{colors.border-soft}"
---

# MDX Design System

## Overview

MDX presents itself as a design studio that treats its own website like a piece of cinema — a near-black canvas (`{colors.background}`) where off-white type (`{colors.ink}`) and atmospheric light do all the talking. There is no busy chrome, no decorative borders fighting for attention. Instead, the page leans on darkness as a stage: content floats in generous negative space while soft gradient blur ellipses drift behind it, creating depth without a single hard edge. The effect is closer to a title sequence than a typical SaaS landing page.

The type is the loudest voice in the system. Large, confident display headlines (up to 72px, weight 700, with tight negative tracking) anchor each section and lead with feeling — "Design That Feels" — rather than feature lists. The body relaxes into a comfortable 16–20px reading size in a contemporary grotesque sans (Inter-class), with muted gray (`{colors.ink-secondary}`) carrying secondary copy so the bright off-white stays reserved for what matters. Letter-spacing tightens as size grows and opens up only for tiny uppercase labels.

Color is deliberately rationed. The palette is almost entirely achromatic — a ladder of near-blacks and grays — broken only by a single electric-cyan accent (`{colors.primary}`) that appears on primary CTAs and interactive moments. The other color in the system is not paint at all but light: blurred gradient ellipses in cyan, violet, and rose that wash faintly over the canvas to give each viewport a sense of dimensional glow. This is depth-through-light rather than depth-through-shadow.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) with off-white ink (`{colors.ink}`) — cinematic dark theme
- Large bold display type (72px / weight 700) leading with feeling, not features
- Single reserved electric-cyan accent (`{colors.primary}`) for interaction only
- Atmospheric gradient blur ellipses (cyan / violet / rose) for depth-through-light
- Abundant negative space; content floats rather than fills
- Pill-shaped CTAs and badges; hairline `{colors.border}` instead of heavy chrome
- Muted gray secondary text keeps the bright off-white precious
- Motion-forward language — staggered reveals, smooth transitions

## Colors

### Primary
- **Canvas Black** (`{colors.background}`): The page background and base of the entire system.
- **Off-White Ink** (`{colors.ink}`): Primary text and headings — slightly softened from pure white.
- **Pure White** (`{colors.ink-pure}`): Reserved for the brightest emphasis only.

### Accent
- **Electric Cyan** (`{colors.primary}`): Primary CTAs, links, interactive highlights. The single chromatic note.
- **Cyan Hover** (`{colors.accent-hover}`): Lifted accent on hover.

### Decorative Glow
- **Glow Cyan** (`{colors.glow-cyan}`): Cyan gradient ellipse wash, flattened over canvas.
- **Glow Violet** (`{colors.glow-violet}`): Violet ambient ellipse.
- **Glow Rose** (`{colors.glow-rose}`): Rose ambient ellipse.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Deepest canvas.
- **Gray 800** (`{colors.gray-800}`): Raised surfaces, cards.
- **Gray 700** (`{colors.gray-700}`): Hover borders, dividers.
- **Gray 500** (`{colors.gray-500}`): Muted / disabled text.
- **Gray 400** (`{colors.gray-400}`): Secondary text.
- **Gray 200** (`{colors.gray-200}`): Bright tertiary text.

### Surface & Border
- **Surface** (`{colors.surface}`): Default card / panel fill.
- **Surface Soft** (`{colors.surface-soft}`): Slightly lifted panel fill.
- **Border** (`{colors.border}`): Hairline outlines on cards and inputs.
- **Border Soft** (`{colors.border-soft}`): Whisper-level dividers.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks: `Helvetica Neue, Arial, sans-serif`
- A contemporary grotesque sans used for everything — display, body, and labels.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 72px hero statement — cinematic impact |
| `section-heading` | Major section titles |
| `sub-heading` | Sub-sections, large card headings |
| `card-title` | Feature / project cards |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-medium` | Navigation, emphasized inline text |
| `button-ui` | Buttons and CTAs |
| `label-caps` | Uppercase eyebrow labels, badges |
| `caption` | Metadata, fine print |

### Principles
- **Lead with feeling**: Headlines state an emotion or stance ("Design That Feels"), not a spec sheet.
- **Tracking scales with size**: tight negative tracking on display (-2.16px), neutral at body, and wide positive (1.5px) only on tiny uppercase labels.
- **Off-white over pure white**: `{colors.ink}` is the default text color; pure white is held back for peak emphasis.
- **Muted secondary copy**: support text drops to `{colors.ink-secondary}` so brightness signals hierarchy.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large jumps (`{spacing.3xl}` 64px → `{spacing.4xl}` 120px) to produce cinematic vertical breathing room between sections.

### Grid & Container
- Max content width roughly 1200px, centered
- Hero: single centered column with massive top and bottom padding
- Work / feature sections: 2–3 column grids of cards
- Sections separated by space and hairline `{colors.border-soft}` dividers, not heavy rules

### Whitespace Philosophy
- **Darkness as space**: the black canvas itself reads as negative space; content floats within it.
- **Generous vertical rhythm**: sections separated by `{spacing.4xl}`-scale padding.
- **Atmosphere over ornament**: depth comes from blurred glow ellipses, never from busy borders.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No border, canvas only | Page background, text blocks |
| Hairline (Level 1) | `1px solid {colors.border}` | Cards, inputs, badges |
| Surface (Level 2) | `{colors.surface}` fill + hairline | Raised panels |
| Glow (Level 3) | Blurred gradient ellipse behind element | Hero / featured atmospheric depth |
| Focus (Accessibility) | `2px solid {colors.primary}` outline | Keyboard focus on interactive elements |

**Depth Philosophy**: MDX builds depth from light, not shadow. Soft, large-radius gradient blurs (cyan / violet / rose) sit behind content and bleed at low opacity, giving the dark canvas a sense of volume. Surfaces lift through subtle fill changes and hairline borders rather than drop shadows.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 6px | Small inline elements |
| `md` | 10px | Inputs, small cards |
| `lg` | 16px | Standard cards |
| `xl` | 24px | Featured / glow cards |
| `pill` | 9999px | Buttons, badges, tags |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Electric-cyan fill, dark text, full pill. The single high-contrast CTA.
- **`button-secondary`** — Dark surface with hairline border, off-white text.

### Pills & Badges
- **`badge`** — Surface fill, muted text, uppercase label-caps, full pill with hairline border.

### Cards
- **`card`** — Dark surface, hairline `{colors.border}`, 16px radius.
- **`card-glow`** — Featured card with a glow-tinted border and a gradient blur behind it.

### Inputs
- **`input`** — Dark surface, hairline border; focus switches the border to `{colors.primary}`.

### Navigation
- **`nav-bar`** — Transparent-over-canvas header, off-white links, whisper divider beneath.

### Distinctive Components
- **Glow Ellipses**: Large blurred gradient shapes (cyan / violet / rose) placed behind content for atmospheric depth — the studio's signature move.
- **Staggered Reveals**: Content animates in sequentially on load ("Perfection takes a moment").

## Do's and Don'ts

### Do
- Keep the canvas near-black (`{colors.background}`) and text off-white (`{colors.ink}`)
- Reserve `{colors.primary}` cyan for interaction only — CTAs, links, focus
- Use blurred gradient glow ellipses for depth instead of drop shadows
- Lead headlines with feeling and stance, not feature copy
- Use hairline `{colors.border}` for structure, never heavy borders
- Let content float in generous negative space
- Drop secondary copy to `{colors.ink-secondary}` for hierarchy

### Don't
- Don't introduce a second saturated accent — cyan is the only chroma
- Don't put pure-white (`{colors.ink-pure}`) on large blocks of body text — use off-white `{colors.ink}`
- Don't add heavy drop shadows — depth is light-based
- Don't crowd sections; the darkness needs room to breathe
- Don't use square hard corners on CTAs — buttons and badges are pills
- Don't let glow ellipses become loud — they stay atmospheric and low-opacity

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales down, glows simplify |
| Tablet | 600–1024px | 2-column card grids |
| Desktop | 1024–1400px | Full layout, max content width |
| Large Desktop | >1400px | Centered, generous side margins |

### Touch Targets
- Pill buttons use 14px vertical padding for comfortable taps
- Nav links spaced generously
- Badges retain 14px horizontal padding

### Collapsing Strategy
- Hero: 72px display → scales down, retains negative tracking proportionally
- Navigation: horizontal links → hamburger menu
- Card grids: 3-column → 2-column → single column
- Glow ellipses: reduce count and blur radius on mobile
- Section spacing: 120px → ~64px on mobile

### Image Behavior
- Project visuals maintain rounded corners at all sizes
- Glow gradients soften and simplify on mobile
- Full-bleed dark sections stay edge-to-edge

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Canvas Black `{colors.background}`
- Heading text: Off-White `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Primary CTA: Electric Cyan `{colors.primary}` with dark text `{colors.on-primary}`
- Border: hairline `{colors.border}`
- Focus ring: `{colors.primary}`

### Example Component Prompts
- "Create a hero on a near-black background `{colors.background}`. Headline at 72px Inter weight 700, line-height 1.05, letter-spacing -2.16px, color `{colors.ink}`. Subtitle at 20px weight 400, color `{colors.ink-secondary}`. Cyan pill CTA (`{colors.primary}` fill, dark text, 9999px radius, 14px 28px padding). Place a soft blurred cyan glow ellipse behind the content."
- "Design a card: `{colors.surface}` fill, 1px solid `{colors.border}`, 16px radius, 32px padding. Title 24px Inter weight 600 color `{colors.ink}`, body 16px `{colors.ink-secondary}`."
- "Build a badge: `{colors.surface-soft}` fill, `{colors.ink-secondary}` text, uppercase 12px weight 600 letter-spacing 1.5px, 9999px radius, hairline border."
- "Create a dark nav bar over the canvas: off-white links at 16px weight 500, transparent background, whisper divider `{colors.border-soft}` beneath."

### Iteration Guide
1. Start from near-black and add light, not shadow — glow ellipses create depth
2. Keep cyan strictly for interaction; everything else stays achromatic
3. Off-white `{colors.ink}` is the default text color, pure white only for peak emphasis
4. Headlines lead with feeling; tighten tracking as size grows
5. Pills for CTAs and badges; hairlines for structure
6. Give every section room — darkness needs negative space to read as cinematic

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by MDX. Brand names and trademarks belong to their respective owners.