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

# Morphic · Design System

> A black canvas for cinematic AI storytelling

**Theme:** dark · **Industry:** ai · **Source:** https://morphic.com/ · **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._

Morphic pairs a near-black canvas and crisp typography with vivid AI-created media and product-interface previews. Spacious, editorial sections guide visitors from a concise promise through workflows and use cases to a direct signup invitation.

## North star

Keep the page quiet and dark so vivid creative media and a few clear blue actions provide the visual focus.

## Overview

The page is built on a near-pure black canvas (#000000), with low-contrast dark surfaces separating cards and interface previews without turning the page into a stack of obvious panels. Off-white headings establish hierarchy, while muted grays carry supporting copy; vivid blue (#0075ff) is reserved for primary actions and small interface accents. Inter supplies a compact, contemporary voice: large bold headings use tight negative tracking, and body text stays measured and restrained. The layout alternates concise editorial headings with broad product demonstrations, workflow cards, use-case content, and original media. Generous vertical intervals let each showcase read as a distinct chapter, while aligned content blocks keep the long page coherent. Media is allowed to carry color and atmosphere against the dark field; soft fades and edge shading help it recede into the canvas. Rounded controls and restrained card treatments preserve a polished product feel without competing with the work.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Canvas | `#000000` | `--color-deep-canvas` | brand | Dominant page canvas and section background; also used in dark fades that blend showcase media into the page. |
| Signal Blue | `#0075ff` | `--color-signal-blue` | accent | Primary signup and workflow actions, with occasional blue interface controls inside product previews. |
| Shadow Surface | `#0d0d0d` | `--color-shadow-surface` | surface | Subtle card and component surface plus hairline border; keeps panels close to the canvas. |
| Muted Silver | `#a6a6a6` | `--color-muted-silver` | neutral | Secondary descriptions and supporting text, including the subdued second line of hero and section headlines. |
| Charcoal Panel | `#212121` | `--color-charcoal-panel` | surface | Footer, dark buttons, and selected showcase cards; creates a visible but restrained surface contrast. |
| Soft Chalk | `#f5f5f5` | `--color-soft-chalk` | neutral | Primary headings, navigation and button text on blue actions. |
| Slate Copy | `#5b5b5b` | `--color-slate-copy` | semantic | Low-emphasis copy and subdued interface text; secondary to the more legible muted silver. |
| Pure White | `#ffffff` | `--color-pure-white` | neutral | Bright link and card text, particularly labels over dark media; not a page background color. |
| Ash Gray | `#999999` | `--color-ash-gray` | semantic | Muted headings and supporting labels, especially secondary lines and low-priority text. |
| Graphite Text | `#666666` | `--color-graphite-text` | semantic | Quiet button and interface labels that should remain legible but visually subordinate. |
| Dusk Gray | `#737373` | `--color-dusk-gray` | semantic | Low-emphasis footer and button text; use sparingly for tertiary information. |

### Semantic aliases

`--color-canvas` → `#000000` (Deep Canvas) · `--color-surface` → `#212121` (Charcoal Panel) · `--color-surface-2` → `#0d0d0d` (Shadow Surface) · `--color-text` → `#f5f5f5` (Soft Chalk) · `--color-text-muted` → `#a6a6a6` (Muted Silver) · `--color-text-subtle` → `#000000` (Deep Canvas) · `--color-border` → `#0d0d0d` (Shadow Surface) · `--color-accent` → `#0075ff` (Signal Blue) · `--color-on-accent` → `#f5f5f5` (Soft Chalk)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f5f5f5` | `#000000` | 19.26:1 | AAA |
| `#f5f5f5` | `#212121` | 14.77:1 | AAA |
| `#f5f5f5` | `#0d0d0d` | 17.83:1 | AAA |
| `#a6a6a6` | `#000000` | 8.63:1 | AAA |
| `#a6a6a6` | `#212121` | 6.61:1 | AA |
| `#a6a6a6` | `#0d0d0d` | 7.98:1 | AAA |
| `#000000` | `#212121` | 1.3:1 | fail |
| `#000000` | `#0d0d0d` | 1.08:1 | fail |
| `#0075ff` | `#000000` | 4.99:1 | AA |
| `#0075ff` | `#212121` | 3.83:1 | AA-large |

### Gradients

- `linear-gradient(in oklab, rgba(15, 15, 15, 0) 21%, rgb(15, 15, 15) 100%)`
- `linear-gradient(rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.65) 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 50.48%, rgba(0, 0, 0, 0.8) 100%), linear-gradient(rgba(0, 0, 0, 0) 20%, rgb(0, 0, 0) 100%)`
- `linear-gradient(rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.65) 100%), linear-gradient(90deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 50.48%, rgb(0, 0, 0) 100%), linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50.48%, rgb(0, 0`
- `linear-gradient(rgba(0, 0, 0, 0) 20%, rgb(0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 500, 600, 700, 400 | All page typography, from navigation and large editorial headings to body copy, captions, and controls. | Inter |

- **Inter:** Bold, tightly tracked display headings contrast with restrained supporting text; primarily sentence case, with medium-weight controls.

### Type scale — Augmented Fourth (ratio ≈ 1.388, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 52px | 700 | 1.15 | -0.048em | — | Inter | Hero headline, with the second phrase visually muted. |
| h2 | 40px | 700 | 1.2 | -0.062em | — | Inter | Major section headings and editorial statements. |
| h3 | 20px | 500 | 1.4 | -0.02em | — | Inter | Feature and product showcase titles. |
| h4 | 18px | 500 | 1.33 | -0.022em | — | Inter | Smaller feature headings and supporting content titles. |
| body | 14px | 500 | 1.44 | 0 | — | Inter | Descriptions, supporting paragraphs, and use-case copy. |
| caption | 12px | 600 | 1.48 | 0 | — | Inter | Compact labels and metadata within cards or interface previews. |
| button | 12px | 500 | 1.48 | 0 | — | Inter | Primary and secondary action labels. |
| nav | 14px | 500 | 1.44 | 0 | — | Inter | Header navigation links. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 5, 6, 8, 10, 12, 14, 16, 20, 24 px.
- Section rhythm 140px · element gap 24px · card padding — · max content width 1040px.

The long homepage uses a spacious, mostly centered composition with content constrained to a measured maximum width of 1040px. Headings and copy often align to the start of their content block, while team and closing calls to action center their content. Showcase sections use wide media and multi-column card arrangements, including full-bleed product moments. A section gap of 140px and element gap of 24px support a deliberate, low-density rhythm. The page remains visually continuous through its shared black canvas rather than alternating colored bands.

## Shape & elevation

- Radius: button `9999px` · card `32px` · media `16px` · nav `9999px` · link `16px` · xs `6px` · sm `7px` · md `10px` · lg `16px` · xl `24px` · 2xl `32px` · pill `9999px`
- Shadow `lg` (media): `rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px`
- Motion: standard transition `0.1s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Elevation is subtle: the measured media shadow is a soft black shadow, while cards rely more on tonal separation than prominent outlines. Dark panels and thin, nearly invisible borders distinguish interfaces from the canvas. Layered gradients fade showcase media into surrounding black, maintaining a flat overall presentation.

## Imagery

Product-interface previews, generated creative examples, workflow cards, and original media are the main visual content. Showcase frames sit against black, sometimes emerging from dark fades and edge shading. The imagery supplies most of the page's saturated color and cinematic atmosphere; keep overlays restrained and let media remain the focal point rather than adding decorative illustration.

## Components

### Primary action

Signal Blue (#0075ff) pill-shaped signup action with Soft Chalk (#f5f5f5) label; a smaller workflow action uses a compact rounded treatment.

### Secondary action

Dark charcoal or near-black button with a restrained light label, paired beside primary actions rather than competing with them.

### Navigation

Minimal header with the brand mark at left, centered links, and login plus a bright rounded creation action at right.

### Showcase media

Wide product and creative previews sit directly on the black canvas, with dark gradients and soft shading at media edges.

### Workflow cards

Horizontal row of media-led cards with concise titles and descriptions, using dark surfaces and muted text.

### Feature card

Near-black rounded panel with low-contrast border treatment, short feature copy, and an unobtrusive circular action affordance.

### Centered CTA

Centered heading and brief supporting paragraph followed by a bright primary action and a subdued secondary action.

### Measured component styles

- **Primary button** (“Run workflow”): background #0075ff · text #f5f5f5 · radius 7px · padding 8px 12px · 500 12px Inter
- **Secondary button** (“Copilot”): background #191a1a · text #fafafa · radius 3.35544e+07px · padding 8px 12px 8px 16px · 400 16px Inter
- **Link** (“Open in Morphic”): transparent background · text #ffffff · radius 16px · padding 0px · 400 16px Inter
- **Card** (“World Cup Anime Generate a football Worl”): background #212121 · text #ffffff · radius 0px · padding 0px · 400 16px Inter
- **Navigation item** (“Showcase”): transparent background · text #fafafa · radius 0px · padding 0px · 500 14px Inter

## Do

- Use #000000 as the continuous page canvas.
- Reserve #0075ff for clear primary actions and small product-interface accents.
- Set primary headings in bold Inter with tight tracking.
- Use muted gray for supporting copy and secondary headline phrases.
- Give showcase sections generous separation from neighboring content.
- Let vivid media provide contrast against the dark interface.
- Use rounded controls and restrained dark surfaces.

## Don't

- Do not introduce bright section backgrounds or large colored panels.
- Do not use blue as a general decorative color.
- Do not make every card equally prominent or heavily bordered.
- Do not crowd the showcase media with extra UI decoration.
- Do not use oversized shadows to create depth.
- Do not set all supporting text in bright white.
- Do not break the spacious vertical rhythm with dense content blocks.

## Agent prompt

Build a new page in Morphic’s visual language: use a continuous Deep Canvas (#000000) background, crisp Inter typography, and spacious editorial pacing. Set major headings in bold, tightly tracked type; use Soft Chalk (#f5f5f5) for primary text and Muted Silver (#a6a6a6) or Ash Gray (#999999) for secondary copy. Keep Signal Blue (#0075ff) for primary actions and restrained interface accents only. Present product functionality through broad, immersive previews and concise feature cards, letting colorful creative media contrast with the dark canvas. Separate sections generously, align content cleanly, and alternate left-aligned showcases with occasional centered calls to action. Use Charcoal Panel (#212121) and Shadow Surface (#0d0d0d) for quiet depth, subtle fades around media, rounded controls, and minimal borders. Avoid bright bands, dense layouts, and decorative effects that compete with the content.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero with headline on the left and supporting copy with paired actions on the right. | Primary signup action, Secondary demo action | Minimal top navigation, Two-tone headline, Pill-shaped actions |
| 2 | gallery | Horizontal, multi-column showcase gallery on the shared dark canvas. | Browse examples, Open example in product | Media cards, Compact gallery controls, Dark media fades |
| 3 | product-showcase | Full-bleed product demonstration with title, interface preview, and supporting feature points. | Explore canvas, Review feature benefits | Large interface preview, Dark gradients, Compact feature labels |
| 4 | product-grid | Left-aligned heading above a horizontally browsable row of workflow cards. | Browse workflows, Run workflow | Media-led cards, Carousel controls, Compact action buttons |
| 5 | feature-grid | Feature heading above a multi-column row of dark feature cards. | Browse feature options, Open a feature | Rounded dark cards, Short explanatory copy, Small circular affordances |
| 6 | team | Centered heading and supporting paragraph with two adjacent actions. | Start for free, View pricing | Centered text block, Paired pill actions |
| 7 | feature-split | Full-bleed product-style preview with a heading and industry descriptions below. | Browse use cases, Switch industry examples | Product interface preview, Compact use-case columns, Dark canvas |
| 8 | testimonials | Sparse, centered quotation placed between broad areas of negative space. | Read endorsement | Centered quote, Small publication attribution |
| 9 | gallery | Editorial heading followed by a broad row of original creative media. | Browse originals, See more | Media gallery, Section label, Compact see-more action |
| 10 | cta | Centered closing message, supporting copy, and two adjacent actions. | Get started, Book a demo | Centered CTA, High-contrast primary action, Subdued secondary action |
| 11 | footer | Low-profile footer with brand mark, compact navigation, and legal details. | Navigate footer links, Select language | Small brand mark, Fine-print text, Large low-contrast wordmark |

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