---
version: alpha
name: Morphic
description: A pure-black stage where cinematic AI footage supplies every color.
colors:
  on-surface-variant: "#A3A3A3"
  on-surface: "#FAFAFA"
  surface: "#000000"
  primary: "#0075FF"
  surface-2: "#1E1E1E"
  surface-raised: "#212121"
  white: "#FFFFFF"
  off-white: "#F5F5F5"
  text-dim: "#737373"
  crimson: "#91213D"
  violet: "#653D9A"
  green: "#31855F"
typography:
  display:
    fontFamily: Inter
    fontSize: 52px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: 0em
  heading:
    fontFamily: Inter
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0em
  subheading:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  lead:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  label:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  caption:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  micro:
    fontFamily: Inter
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
rounded:
  small-controls-chips: 6px
  inputs-small-cards: 10px
  panels: 16px
  feature-cards: 24px
  showcase-cards: 32px
  pills-buttons-badges: 9999px
spacing:
  2xs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
---
# Morphic — Style Reference
> A pure-black stage where cinematic AI footage supplies every color.

**Theme:** dark

Morphic paints its entire chrome in absolute black (`#000000`) and near-neutral grays, then hands all the chroma to the work itself — a wall of cinematic, AI-generated film stills (rock climbers, panthers, saxophonists, portraits) that runs edge-to-edge beneath the fold. The interface is deliberately colorless so the imagery reads as loud; the only saturated UI element is a single signal blue (`#0075FF`) reserved for the primary CTA. Type is one family — Inter — worked hard across a 700-weight 52px display down to 10px micro-labels, with the headline's second line dropped to muted gray so a two-line hero reads as one bright statement and one quiet qualifier. Everything that isn't image is a pill: buttons, badges, and chips all resolve to fully-rounded capsules, and the few structural cards carry a generous 32px radius. It is a product page built like a film reel — black gutters, high-contrast text, and photography doing the persuading.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Black | `#000000` | `--color-black` | The canvas — every page, nav, and hero sits on pure black; never lightened for "sections". |
| Surface | `#1E1E1E` | `--color-surface` | First raised step — badge pills, inset panels lifted off black by luminance only. |
| Surface Raised | `#212121` | `--color-surface-raised` | Secondary buttons and hovered chips; the ceiling of the dark ramp. |
| White | `#FFFFFF` | `--color-white` | Hairline card borders and the brightest heading strokes; used sparingly as a true white. |
| Text | `#FAFAFA` | `--color-text` | Primary text and the light button fill — the near-white that reads as "white" on black. |
| Off-White | `#F5F5F5` | `--color-off-white` | Label color inside filled CTAs (blue and ghost); a hair softer than pure white. |
| Text Muted | `#A3A3A3` | `--color-text-muted` | The hero's second headline line and body paragraph — deliberate demotion, not disabled state. |
| Text Dim | `#737373` | `--color-text-dim` | Micro-labels, captions, "See more" — the quietest legible gray. |
| Signal Blue | `#0075FF` | `--color-blue` | The one saturated UI color — primary CTA fill only ("Start for free"). Never decorative. |
| Crimson | `#91213D` | `--color-crimson` | Editorial category/genre accent for showcase tags; never a CTA. |
| Violet | `#653D9A` | `--color-violet` | Editorial category/genre accent, paired with crimson and green as a tag triad. |
| Green | `#31855F` | `--color-green` | The "New" announcement accent and a third genre tag color; signals freshness, not success-state. |

## Tokens — Typography
### Inter — the entire system: nav, display, body, and micro-labels · `--font-sans`
- **Substitute:** ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
- **Weights:** 400 (body, badges), 500 (nav, buttons, subheads), 600 (emphasis), 700 (display headline)
- **Sizes:** 52px, 40px, 20px, 18px, 16px, 14px, 12px, 10px
- **Line height:** tight on display (~1.05–1.1), relaxed ~1.5 on body paragraphs
- **Letter spacing:** near-zero to slightly negative on the 52px/40px display; default on body and labels
- **Role:** Carries the whole product. The heavy 700 display against 400/500 supporting text is the only typographic contrast Morphic uses — no serif, no second display face.

### Kalam / Nothing You Could Do — handwriting accents (loaded) · `--font-hand`
- **Substitute:** "Comic Sans MS", cursive
- **Weights:** 400
- **Sizes:** contextual (annotations, playful captions)
- **Line height:** loose
- **Letter spacing:** default
- **Role:** Genuinely loaded handwriting faces used as occasional human/annotation accents; *(inferred)* role — kept rare so the black-and-Inter system stays disciplined.

### IBM Plex Sans Arabic — localized body (loaded) · `--font-arabic`
- **Substitute:** "Noto Sans Arabic", sans-serif
- **Weights:** 400, 500, 600, 700
- **Role:** Arabic-locale counterpart to Inter's weight ladder; not part of the Latin identity face but shipped for i18n parity.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display | 52px / 700 | ~1.05 | slightly negative | `--text-display` |
| Heading | 40px / 700 | ~1.1 | slightly negative | `--text-heading` |
| Subheading | 20px / 500 | ~1.3 | default | `--text-subheading` |
| Lead | 18px / 400 | ~1.5 | default | `--text-lead` |
| Body | 16px / 400 | ~1.5 | default | `--text-body` |
| Label | 14px / 500 | ~1.4 | default | `--text-label` |
| Caption | 12px / 400 | ~1.4 | default | `--text-caption` |
| Micro | 10px / 400 | ~1.3 | default | `--text-micro` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable (roomy black gutters, image-forward)

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 2xs | 4px | `--spacing-2xs` |
| xs | 8px | `--spacing-xs` |
| sm | 12px | `--spacing-sm` |
| md | 16px | `--spacing-md` |
| lg | 20px | `--spacing-lg` |
| xl | 24px | `--spacing-xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Small controls / chips | 6px, 7px |
| Inputs / small cards | 10px |
| Panels | 16px |
| Feature cards | 24px |
| Showcase cards | 32px |
| Pills / buttons / badges | fully rounded (9999px) |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Lifted | `rgba(0,0,0,0.1) 0px 20px 25px -5px, rgba(0,0,0,0.1) 0px 8px 10px -6px` | `--shadow-lifted` |

### Layout
- **Page max-width:** 1040px (standard), 1360px (wide) — `--resources-page-max`, `--resources-page-max-wide`
- **Section gap:** generous vertical black between hero, showcase, and Canvas sections
- **Card padding:** ~0–20px 24px (imagery bleeds to card edges; text insets bottom-left)
- **Element gap:** 8–16px between pill controls and inline chips

## Components
### Primary CTA (Start for free)
**Role:** The single loud action on the page.
Fill `#0075FF`, label `#F5F5F5` at 16px/500, fully-rounded pill, padding `9px 18px`, no border, no shadow. The only saturated button in the system — one per view.

### Light Pill Button (Start creating)
**Role:** Top-right conversion anchor in the nav.
Fill `#FAFAFA`, black `#000000` label at 14px/500, fully-rounded pill, padding `9px 14px`. High-contrast white-on-black; reads as the "get started" magnet.

### Ghost CTA (Book a demo)
**Role:** Secondary action beside the primary.
Transparent fill on black, label `#F5F5F5` at 16px/500, fully-rounded pill, padding `9px 18px`. Sits on a subtle raised surface (`#212121` / `#1E1E1E`) rather than a border — depth by luminance.

### Announcement Badge (New · Seedance 2.0)
**Role:** Freshness pill above the hero headline.
Transparent-to-`#1E1E1E` pill, `#FAFAFA` text at 16px/400, asymmetric padding `8px 12px 8px 16px`, green `#31855F` "New" token leading a divider, trailing chevron. Fully rounded.

### Nav Link
**Role:** Primary navigation (Showcase, Pricing, Enterprise, Resources).
`#FAFAFA` text at 14px/500, no background, no radius, no padding chrome. Quiet until hovered.

### Text Link (See more / Log in)
**Role:** Inline utility links.
`#FFFFFF` or `#FAFAFA` at 14–16px/400–500, no decoration until hover. Kept flat against black.

### Showcase Card
**Role:** A single "Made with Morphic" film still in the carousel wall.
32px radius, full-bleed cinematic image, `1px #FFFFFF` hairline only where a frame is needed; text (if any) insets bottom-left via `0px 20px 20px 24px` padding. The image is the content.

### Feature Card
**Role:** Structural content block below the fold.
24px radius, black or `#1E1E1E` surface, 16px body text `#FAFAFA`. Depth from surface step + optional `--shadow-lifted`.

### Genre / Category Tag
**Role:** Editorial label on showcase content.
Small pill, one of the accent triad — crimson `#91213D`, violet `#653D9A`, green `#31855F` — with light text. Decorative categorization only; never an action.

### Heading (Display)
**Role:** The hero statement.
`#FAFAFA` at 52px/700, tight leading. A second line drops to muted `#A3A3A3` to split a bold claim from its quiet qualifier ("Smart storytelling" / "For every creative").

### Body Paragraph
**Role:** Supporting hero copy.
`#A3A3A3` at 16–18px/400, ~1.5 line height, short measure. Deliberately dimmer than the headline.

### Testimonial Row
**Role:** Social proof under the showcase.
Overlapping circular avatars + italicized quote at ~14px with a `#737373` attribution. Understated, single line.

## Do's and Don'ts
### Do
- Keep every surface on the black ramp: `#000000` canvas, `#1E1E1E` / `#212121` for raised steps. Convey depth by luminance, not by tinting sections.
- Reserve `#0075FF` for exactly one primary action per view. Everything else is a neutral pill.
- Let imagery carry the color. UI stays grayscale so cinematic stills look saturated by contrast.
- Make interactive elements fully-rounded pills; make content cards 24–32px radius.
- Use `#A3A3A3` to demote a headline's second line — a signature two-tone display move.
- Confine crimson/violet/green to editorial genre tags, never to buttons.

### Don't
- Don't introduce a light-mode section or a gray-lightened "band" — the black is the brand.
- Don't add a second saturated UI color to compete with the blue CTA.
- Don't add borders where a luminance step already separates surfaces (the ghost button and raised panels use tone, not outline).
- Don't reach for a second display typeface — Inter's 700 vs 400 contrast is the whole system.
- Don't let the handwriting or Arabic faces leak into core Latin UI copy.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#000000` | Every page and the hero; the default void. |
| 1 | Surface | `#1E1E1E` | Badges, inset panels lifted just off black. |
| 2 | Raised | `#212121` | Secondary/ghost buttons, hovered chips — the top of the dark ramp. |
| — | Light Invert | `#FAFAFA` | Rare inverted fill (the white nav CTA); pairs with `#000000` text. |

## Elevation
Depth is almost entirely luminance-based. Surfaces step `#000000 → #1E1E1E → #212121`, and a control is "raised" because it's a few points lighter than the void — not because it has a border or shadow. A single soft shadow token (`--shadow-lifted`, dual-layer `rgba(0,0,0,0.1)`) exists for the occasional lifted card, but on a black canvas its effect is subtle by design. White `#FFFFFF` hairlines appear only where a card genuinely needs a frame. The net feel is flat-but-layered: everything sits close to the picture plane, and imagery — not shadow — creates the sense of depth.

## Imagery
Imagery is the entire point. The homepage devotes its center to a dense, edge-to-edge carousel of AI-generated cinematic stills — a shirtless rock climber on red sandstone, a black panther on crimson, a saxophonist in blue haze, film-noir portraits, a Ferris wheel over rubble. The direction is high-drama, high-saturation, film-grade: strong single-color lighting, shallow depth of field, human subjects and creatures rendered like movie frames. Cards are 32px-radius and full-bleed so the photography touches every edge. Because the UI is grayscale, this imagery is the only place color lives — the black chrome exists to frame it. Any generated page in this style should treat photography/video as the hero and keep all surrounding UI monochrome.

## Layout
Full-bleed black with a centered content column (1040px standard, 1360px wide). The nav is a simple horizontal bar — wordmark left, four text links centered, log-in + white pill right. The hero splits into a left headline stack and a right paragraph-plus-CTAs column. Below the fold, the "Made with Morphic" showcase breaks the column and runs a two-row image carousel nearly edge-to-edge with prev/next chevrons, followed by a single-line testimonial. Sections are separated by tall black gutters rather than dividers or color changes. The rhythm alternates dense image walls with quiet text blocks.

## Typography Voice
Morphic runs a one-family, two-mode system. Mode one is the **700-weight display** — 52px/40px, tight negative-tracked leading, near-white `#FAFAFA` — used for the single big claim per section. Mode two is **400/500 supporting text** — 14–18px, ~1.5 line height, in `#A3A3A3` or `#737373` — for everything explanatory. The signature move is demoting the headline's second line to muted gray, so "Smart storytelling / For every creative" reads as one bright assertion and one quiet aside without changing size or weight. It works because on pure black the luminance gap between `#FAFAFA` and `#A3A3A3` is large enough to create hierarchy from tone alone — the same trick that governs the surfaces. Inter's tight metrics keep the heavy display from feeling bulky, and the absence of any second face makes the product feel engineered rather than decorated.

## Agent Prompt Guide
## Quick Color Reference
- background: `#000000` / text: `#FAFAFA` / muted text: `#A3A3A3` / surface: `#1E1E1E` / raised: `#212121` / border: `#FFFFFF` (hairline only) / accent tags: `#91213D` `#653D9A` `#31855F` / primary action: `#0075FF`

## Example Component Prompts
1. **Hero**: On a pure-black (`#000000`) full-bleed section, a left-aligned two-line display headline in Inter 700 at 52px — first line `#FAFAFA`, second line `#A3A3A3` — beside a right column with a 16px `#A3A3A3` paragraph and two fully-rounded pill buttons: primary fill `#0075FF` with `#F5F5F5` label (padding 9px 18px), and a transparent ghost pill with `#F5F5F5` label on a `#212121` surface.
2. **Announcement Badge**: A fully-rounded pill on `#1E1E1E` with `#FAFAFA` text at 16px/400, a leading `#31855F` "New" token, a thin divider, label text, and a trailing chevron; asymmetric padding 8px 12px 8px 16px.
3. **Showcase Carousel**: A two-row edge-to-edge wall of 32px-radius full-bleed cinematic image cards on black, with `#737373` "See more" link and circular prev/next chevron buttons; no borders, images touch every edge.
4. **Nav Bar**: Black bar — left wordmark in `#FAFAFA`, four centered text links (Inter 14px/500 `#FAFAFA`), and right side a `#FAFAFA`/14px "Log in" link plus a fully-rounded white `#FAFAFA` pill button with black `#000000` label (padding 9px 14px).
5. **Genre Tag Row**: Small fully-rounded pills using the accent triad `#91213D`, `#653D9A`, `#31855F` with light text — categorization labels only, never actionable, set over a black card.

## Similar Brands
- **Runway** — near-black creative-tool UI where AI-generated film stills supply all the color and the chrome stays monochrome.
- **Pika** — dark, image-forward AI video landing page with a single bright accent and pill controls.
- **Vercel** — the black-canvas, Inter, high-contrast-heading engineering aesthetic Morphic shares (minus the imagery wall).
- **Linear** — disciplined single-family type, luminance-stepped dark surfaces, and restrained accent usage.
- **Luma Dream Machine** — cinematic AI-media showcase that frames dramatic generated footage against a stark dark shell.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-black: #000000;
  --color-surface: #1E1E1E;
  --color-surface-raised: #212121;
  --color-white: #FFFFFF;
  --color-text: #FAFAFA;
  --color-off-white: #F5F5F5;
  --color-text-muted: #A3A3A3;
  --color-text-dim: #737373;
  --color-blue: #0075FF;
  --color-crimson: #91213D;
  --color-violet: #653D9A;
  --color-green: #31855F;

  /* Typography — Families */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-hand: 'Kalam', 'Nothing You Could Do', cursive;
  --font-arabic: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;

  /* Typography — Scale */
  --text-display: 52px;
  --text-heading: 40px;
  --text-subheading: 20px;
  --text-lead: 18px;
  --text-body: 16px;
  --text-label: 14px;
  --text-caption: 12px;
  --text-micro: 10px;
  --leading-tight: 1.1;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-sm-alt: 7px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-lifted: 0px 20px 25px -5px rgba(0,0,0,0.1), 0px 8px 10px -6px rgba(0,0,0,0.1);

  /* Layout */
  --resources-page-max: 1040px;
  --resources-page-max-wide: 1360px;
}
```
### Tailwind v4
```css
@theme {
  /* Colors */
  --color-black: #000000;
  --color-surface: #1E1E1E;
  --color-surface-raised: #212121;
  --color-white: #FFFFFF;
  --color-text: #FAFAFA;
  --color-off-white: #F5F5F5;
  --color-text-muted: #A3A3A3;
  --color-text-dim: #737373;
  --color-blue: #0075FF;
  --color-crimson: #91213D;
  --color-violet: #653D9A;
  --color-green: #31855F;

  /* Typography — Families */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-hand: 'Kalam', 'Nothing You Could Do', cursive;
  --font-arabic: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;

  /* Typography — Scale */
  --text-display: 52px;
  --text-heading: 40px;
  --text-subheading: 20px;
  --text-lead: 18px;
  --text-body: 16px;
  --text-label: 14px;
  --text-caption: 12px;
  --text-micro: 10px;
  --leading-tight: 1.1;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-sm-alt: 7px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-lifted: 0px 20px 25px -5px rgba(0,0,0,0.1), 0px 8px 10px -6px rgba(0,0,0,0.1);
}
```