Vercel

Overview

Vercel is a developer-platform brand — the page is a deployment dashboard's marketing surface, written for engineers who already know the syntax. It earns that posture with one of the cleanest stark systems on the web: near-white `{colors.canvas-soft}` body background, ink-near-black `{colors.ink}` text, a 200-step gray scale that gives every divider, border, and disabled state its own deliberate step. The only place the brand introduces colour at marketing scale is the multi-stop mesh gradient (`{colors.gradient-develop-start}` → `{colors.gradient-preview-end}` → `{colors.gradient-ship-start}` → cyan / magenta / amber) that floats in atmospheric backdrops, never miniaturised to a swatch. That gradient is the entire decoration system.

Type is the second decisive voice. The brand's own custom geometric sans (Geist) carries display, body, button — everything narrative — at weight 600 for display, 500 for buttons, 400 for body. A matching monospaced face (Geist Mono) carries technical labels: terminal mockups, code blocks, sometimes filename captions. Headlines are sentence-case with aggressive negative letter-spacing (`-2.4px` at 48 px hero) — the brand never letter-spaces positively, never goes uppercase outside of mono labels.

Surfaces use a four-step ladder: `{colors.canvas}` (pure white for cards), `{colors.canvas-soft}` 98% (the page body), `{colors.canvas-soft-2}` 95% (occasional inset region), `{colors.primary}` (the deep ink-near-black used as the polarity-flipped band when a section needs the dark mode treatment). Shadows are exceptionally subtle — every elevated card carries a stacked shadow built from `0px 1px 1px #00000005` + `0px 2px 2px #0000000a` + an inset border. Cards never float on heavy drop-shadow; they sit on the page held by hairline + soft glow.

**Key Characteristics:**

• A single black-ink primary CTA `{colors.primary}` carries every conversion target, paired with white-on-white `button-secondary` for the secondary action. The brand uses 100 px pill shape for marketing CTAs and a tight 6 px square shape for in-app nav buttons.
• A multi-stop mesh gradient (cyan-blue-magenta-amber) is the only decorative chrome — used at hero scale and inside feature-band atmospheric backdrops. It is the brand.
• Every section eyebrow and small label uses the monospace face `{typography.caption-mono}` or `{typography.code}`; everything else is in the geometric sans.
• Subtle stacked-shadow elevation — three offsets layered with 4-12 % black opacity — never a single heavy drop-shadow.
• A complete 100–1000 gray + blue + red + amber + green + teal + purple + pink colour scale exists as a system token set, but the marketing surface uses only the `100`, `1000`, and `700`-level tones; the rest stay in the design-system tokens for in-product surfaces.
• An "Active CPU" pricing rhythm: `pricing-card` lays out 3-up on the pricing page with `pricing-card-featured` (Pro tier) polarity-flipped to `{colors.primary}` against white-card siblings.

Colors

Brand & Accent

• **Ink** (`{colors.primary}` — `#171717`): The single primary CTA color. Black-near-pure ink that carries every Sign Up pill, every footer CTA, the dark-band polarity-flip. Used as text color throughout the page on light surfaces. (Resolved from `--ds-gray-1000`.)
• **Cyan** (`{colors.cyan}` — `#50e3c2`): A signature mint-cyan used in the brand gradient and inside Geist-system spotlight tokens. Visible inside the hero gradient stops.
• **Highlight Pink** (`{colors.highlight-pink}` — `#ff0080`): The brand's highlight magenta, used as the high-saturation stop in the preview-gradient pair.
• **Violet** (`{colors.violet}` — `#7928ca`): The deep purple used as the start of the preview-gradient and inside developer-console highlights.
• **Link Blue** (`{colors.link}` — `#0070f3`): The brand's primary link color and the legacy `--geist-success` semantic.

Surface

• **Canvas** (`{colors.canvas}` — `#ffffff`): The pure-white card / dialog / modal surface.
• **Canvas Soft** (`{colors.canvas-soft}` — `#fafafa`): The default page background — 98 % white. Almost every section sits on this tone.
• **Canvas Soft 2** (`{colors.canvas-soft-2}` — `#f5f5f5`): A slightly deeper inset surface for "code editor inner background", template-card hover states, and dropdown menus.
• **Hairline** (`{colors.hairline}` — `#ebebeb`): 1 px dividers — table rows, card borders, input borders.
• **Hairline Strong** (`{colors.hairline-strong}` — `#a1a1a1`): The 500-level gray, used as the slightly-stronger divider on light bands and as the deemphasised text color.

Text

• **Ink** (`{colors.ink}` — `#171717`): Every heading and body paragraph on light surfaces.
• **Body** (`{colors.body}` — `#4d4d4d`): Secondary text — sub-headings, body captions, nav-link inactive text, footer column body.
• **Mute** (`{colors.mute}` — `#888888`): Lowest-priority text — placeholder text, fine print, low-key labels.
• **On Primary** (`{colors.on-primary}` — `#ffffff`): All text on `{colors.primary}` surfaces.

Semantic

• **Success / Link** (`{colors.success}` — `#0070f3`): The brand's legacy success indicator doubles as the primary link color. Visible underline-on-hover for inline body links.
• **Link Deep** (`{colors.link-deep}` — `#0761d1`): The pressed / visited tone for inline links.
• **Link Bg Soft** (`{colors.link-bg-soft}` — `#d3e5ff`): Soft pastel blue fill for "what's new" pill banners and informational badges.
• **Error** (`{colors.error}` — `#ee0000`): Validation red for destructive actions and form errors.
• **Error Soft** (`{colors.error-soft}` — `#f7d4d6`): Soft pastel red for destructive-state backgrounds.
• **Error Deep** (`{colors.error-deep}` — `#c50000`): Pressed / deep destructive state.
• **Warning** (`{colors.warning}` — `#f5a623`): Caution / pending status indicator.
• **Warning Soft** (`{colors.warning-soft}` — `#ffefcf`) / **Warning Deep** (`{colors.warning-deep}` — `#ab570a`): Background + pressed variants.

Brand Gradient

The brand's signature decoration is a three-pair gradient stack:

• **Develop** (`{colors.gradient-develop-start}` `#007cf0` → `{colors.gradient-develop-end}` `#00dfd8`) — the blue-to-teal pair used to mark the "deploy" / "develop" rhythm.
• **Preview** (`{colors.gradient-preview-start}` `#7928ca` → `{colors.gradient-preview-end}` `#ff0080`) — the violet-to-pink pair used for "preview" surfaces.
• **Ship** (`{colors.gradient-ship-start}` `#ff4d4d` → `{colors.gradient-ship-end}` `#f9cb28`) — the coral-to-amber pair used for "ship" surfaces.

The three pairs collapse into a single multi-color mesh gradient when used as the hero atmospheric backdrop. Treat the gradient as one unified object — do not crop down to a single colour, do not reorder the stops, and do not miniaturise. Used at hero scale only.

Typography

Font Family

Two custom faces carry the entire system:

1. **A custom geometric sans** (extracted as `Geist`) for every display, body, button, link, and label. Weights 400 / 500 / 600 are the working set; the face never appears in 700 or heavier. Display sizes are tracked aggressively negative (`-2.4 px` at 48 px hero, `-1.28 px` at 32 px section); body stays at neutral or slightly-negative tracking.

2. **A custom monospaced face** (extracted as `Geist Mono`) for terminal mockups, code blocks, and small mono-caption labels — anything that wants to signal "technical." Weight 400 only at 12 – 13 px. Tracking neutral.

A condensed display sans (`Space Grotesk`) is loaded as a third face for occasional editorial moments but does not render as the primary face anywhere in the captured surfaces.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xl}` | 48px | 600 | 48px | -2.4px | Hero headline ("Build and deploy on the AI Cloud."). |

| `{typography.display-lg}` | 32px | 600 | 40px | -1.28px | Section headlines ("Your frontend, delivered.", "A compute model for all workloads."). |

| `{typography.display-md}` | 24px | 600 | 32px | -0.96px | Card-cluster headlines, pricing-tier names. |

| `{typography.display-sm}` | 20px | 600 | 28px | -0.6px | Inline display micro-headings. |

| `{typography.body-lg}` | 18px | 400 | 28px | 0 | Lead paragraphs under section headlines. |

| `{typography.body-md}` | 16px | 400 | 24px | 0 | Default body paragraph. |

| `{typography.body-md-strong}` | 16px | 500 | 24px | 0 | Bolded inline body. |

| `{typography.body-sm}` | 14px | 400 | 20px | -0.28px | Secondary body, nav-link text, button-md labels. |

| `{typography.body-sm-strong}` | 14px | 500 | 20px | -0.28px | Nav CTA labels, table-row emphasis. |

| `{typography.caption}` | 12px | 400 | 16px | 0 | Footer secondary lines, badge labels. |

| `{typography.caption-mono}` | 12px | 400 | 16px | 0 | Section eyebrows and label captions that want a technical voice. |

| `{typography.code}` | 13px | 400 | 20px | 0 | Inline code, terminal mockups, command snippets. |

| `{typography.button-md}` | 14px | 500 | 20px | 0 | Small / nav-scale button labels. |

| `{typography.button-lg}` | 16px | 500 | 24px | 0 | Marketing-scale pill button labels. |

Principles

• **Negative tracking is part of the voice.** Display sizes use aggressive `-2.4` to `-0.6` px tracking. Reverting to default tracking breaks the brand.
• **Sentence-case headlines, period-terminated.** Headlines like "Build and deploy on the AI Cloud." end with a deliberate period — that punctuation is part of the brand's voice.
• **Mono for the technical layer only.** Section eyebrows, code blocks, terminal mockups. Body paragraphs never set in mono.
• **Weight 600 is the display ceiling.** The geometric sans never appears at 700 / 800. The brand reads as a calmer system because of this.

Note on Font Substitutes

The two primary faces are proprietary (custom-cut for the brand). Open-source substitutes:

• **Geometric sans** — *Inter* (400 / 500 / 600) is the closest stylistic match; `font-feature-settings: "ss01", "ss02"` enables the geometric alternates. *Satoshi* is a passable second choice.
• **Monospace** — *JetBrains Mono* (400) at 12 – 13 px matches the technical voice. *IBM Plex Mono* is the second-best option.

Layout

Spacing System

• **Base unit**: 4 px. The brand's `--geist-space` token is exactly 4 px and every captured value is a multiple of 4.
• **Tokens**: `{spacing.xxs}` 4 px · `{spacing.xs}` 8 px · `{spacing.sm}` 12 px · `{spacing.md}` 16 px · `{spacing.lg}` 24 px · `{spacing.xl}` 32 px · `{spacing.2xl}` 40 px · `{spacing.3xl}` 48 px · `{spacing.4xl}` 64 px · `{spacing.5xl}` 96 px · `{spacing.6xl}` 128 px · `{spacing.section}` 192 px.
• **Section padding**: marketing bands use `{spacing.4xl}` to `{spacing.5xl}` top/bottom. Hero bands stretch to `{spacing.section}` to give the mesh gradient room to breathe.
• **Card interior padding**: marketing cards sit at `{spacing.lg}` to `{spacing.xl}`; template-grid cards stay tighter at `{spacing.md}` because they sit in a denser grid.
• **Inline gap**: button rows, nav rows, and chip rows use `{spacing.sm}` to `{spacing.md}` between siblings. The brand's `--geist-gap` is exactly 24 px.

Grid & Container

• **Max width**: ~1400 px (`--ds-page-width`); the legacy `--geist-page-width` is 1200 px and still appears on some marketing surfaces. Content centres with horizontal gutters of `{spacing.lg}` 24 px on desktop, `{spacing.md}` 16 px on mobile.
• **Column patterns**:
• Three-feature row: 3-up at desktop, 1-up at mobile (rows like "Web Apps / Composable Commerce / Multi-tenant Platforms").
• Tab pill row: 5-up centred row of `tab-ghost` pills.
• Template-grid cluster: 5-up at desktop, scaling to 1-up at mobile.
• Pricing tier grid: 3-up at desktop with the middle tier polarity-flipped.
• Logo strip: ~5 logos wide, single row.

Whitespace Philosophy

The mesh gradient does most of the heavy decorative lifting; whitespace separates the bands. Section spacing is generous — `{spacing.4xl}` to `{spacing.5xl}` between bands lets the gradient breathe. Inside a card, the headline/paragraph stack is tight (`{spacing.xs}` 8 px gap), then a wider gap before the CTA cluster. The page reads as engineered — large gaps + tight interior, never the other way around.

Responsive Strategy

#### Breakpoints

| Name | Width | Key Changes |

|---|---|---|

| Mobile | < 600px | Hero stacks; nav collapses to hamburger; 3-up feature grids drop to 1-up; tab pill row enables horizontal scroll. |

| Tablet | 600–959px | 3-up grids drop to 2-up; nav still horizontal. |

| Desktop | 960–1199px | Full 3-up grids; pricing 3-up. |

| Wide | 1200–1399px | Container caps at 1400 px content width. |

| Ultra-wide | ≥ 1400px | Content stays centred at 1400 px; bands stretch edge-to-edge in colour but content holds the max-width. |

#### Touch Targets

The `button-primary` pill renders at ~32 px tall in nav and ~48 px tall in marketing contexts. Marketing CTAs comfortably meet WCAG AAA at all breakpoints; nav buttons inflate touch area through `{spacing.xs}` padding on mobile to meet the 44 × 44 px floor.

#### Collapsing Strategy

• **Nav**: full link row + Ask AI / Log In / Sign Up pills at desktop. Collapses to logo + hamburger at mobile with the menu opening as a full-overlay.
• **Hero**: mesh gradient stays centred; headline + body stack vertically at all breakpoints (the brand doesn't use a split-hero pattern).
• **Three-feature row**: 3-up → 2-up → 1-up at the breakpoints above; cards keep their `{rounded.md}` 8 px shape across all viewports.
• **Pricing card grid**: 3-up at desktop, vertical stack at mobile with `pricing-card-featured` always sitting in the middle.
• **Template grid**: 5-up → 3-up → 2-up → 1-up. Each `template-card` keeps its 16:9 aspect on the image.

#### Image Behavior

• **Mesh gradient**: rendered as inline SVG or canvas-painted gradient; scales fluidly with the hero container; never crops, never tiles.
• **Customer logos**: rendered as monochrome SVGs in the logo strip; consistent 24 px height.
• **Code editor mockup**: dark `{colors.primary}` rectangle with mono text rendered inside; treated as an image at the layout level.
• **Template thumbnails**: 16:9 landscape inside `{rounded.md}` card chrome; lazy-loaded; consistent grayscale palette in the placeholder state.

Elevation & Depth

| Level | Treatment | Use |

|---|---|---|

| Level 0 — Flat | No shadow, no border. | Full-bleed hero bands and the polarity-flipped dark sections. |

| Level 1 — Inset Hairline | `0 0 0 1px #00000014` inset 1 px border. | Default card chrome — the brand's universal "you can see this card" cue. |

| Level 2 — Subtle Drop | `0px 1px 1px #00000005, 0px 2px 2px #0000000a` plus inset hairline. | Slightly elevated cards (template-grid, marketing-card). |

| Level 3 — Soft Stack | `0px 2px 2px #0000000a, 0px 8px 8px -8px #0000000a` plus inset hairline. | The "medium" elevation — feature-grid cards. |

| Level 4 — Float Stack | `0px 2px 2px #0000000a, 0px 8px 16px -4px #0000000a` plus inset hairline. | "Large" elevation — pricing cards, callout panels. |

| Level 5 — Modal | `0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f` plus inset hairline. | Modal / dialog surfaces and dropdown menus. |

The brand uses STACKED shadows — multiple small offsets layered to fake natural light — never a single 8-px-blur generic drop. Inset hairline rings are always added so the card edge stays crisp.

Decorative Depth

• **Mesh gradient as atmospheric depth**: the hero's multi-stop gradient is the brand's only "atmospheric" effect — applied as a flat 2-D backdrop rather than a 3-D illustration.
• **Polarity-flipped dark band as section-depth**: switching the surface from `{colors.canvas-soft}` to `{colors.primary}` (the deep ink) is the brand's chief depth cue between bands.
• **Inset-shadow + drop-shadow combo**: the cards' combination of an inset 1 px ring and a multi-stop drop produces a "card sits on the page" effect without ever feeling material-heavy.

Shapes

Border Radius Scale

| Token | Value | Use |

|---|---|---|

| `{rounded.none}` | 0px | Full-bleed hero / footer bands. |

| `{rounded.xs}` | 4px | Tightest inline pill — the `nav-cta-signup` 6-px-radius button (mapped to `xs/sm`). |

| `{rounded.sm}` | 6px | The brand's `--geist-radius` token — base UI radius for in-app buttons, form inputs, dropdown menus. |

| `{rounded.md}` | 8px | The brand's `--geist-marketing-radius` token — feature cards, template cards. |

| `{rounded.lg}` | 12px | Slightly larger card chrome (pricing-card variants). |

| `{rounded.xl}` | 16px | Largest card chrome — when a card hosts a hero image cap. |

| `{rounded.pill-sm}` | 64px | Tab-ghost pills inside the "AI Apps / Web Apps / Ecommerce / Marketing / Platforms" row. |

| `{rounded.pill}` | 100px | The marketing CTA pill — `button-primary`, `button-secondary`, "Start Deploying" pill. |

| `{rounded.full}` | 9999px | Icon-button circular containers, nav-link ghost pills. |

Photography Geometry

• **Mesh gradient**: full-bleed 2-D atmospheric backdrop, never cropped to a frame; treated as the page's wallpaper.
• **Customer logos**: monochrome SVG, consistent 24 px height in a flex row.
• **Code editor mockup**: 16:10 dark rectangle, `{rounded.md}` corners.
• **Template thumbnails**: 16:9 landscape inside `{rounded.md}` chrome.
• **Showcase imagery**: 2:1 or 16:9 inside `{rounded.lg}` to `{rounded.xl}` chrome with a stacked shadow.

Components

Buttons

**`button-primary`** — the canonical 100-px-radius black pill, marketing scale.

• Background `{colors.primary}`, text `{colors.on-primary}`, label set in `{typography.button-lg}`, padding `0px {spacing.sm}` 12 px, shape `{rounded.pill}` 100 px. Renders ~48 px tall when paired with the marketing flex layout.

**`button-secondary`** — the white pill paired with the black primary inside marketing bands.

• Background `{colors.canvas}`, text `{colors.ink}`, same typography + padding as `button-primary`, shape `{rounded.pill}`.

**`button-primary-sm`** — the smaller-scale primary pill used inside nav and pricing-card CTAs.

• Background `{colors.primary}`, text `{colors.on-primary}`, label set in `{typography.button-md}` (14 px / 500), shape `{rounded.pill}`.

**`button-secondary-sm`** — the smaller-scale white pill paired with `button-primary-sm`.

• Background `{colors.canvas}`, text `{colors.ink}`, same typography + shape as `button-primary-sm`.

**`tab-ghost`** — the centred-row tab pill ("AI Apps / Web Apps / Ecommerce / Marketing / Platforms").

• Background `{colors.canvas}`, text `{colors.ink}`, label set in `{typography.body-sm}`, padding `0px {spacing.md}`, shape `{rounded.pill-sm}` 64 px.

**`icon-button-circular`** — the circular icon container (often a "?" or arrow inside).

• Background `{colors.canvas}`, dark icon, 1 px solid hairline border, shape `{rounded.full}`.

**Nav CTAs:**

**`nav-cta-signup`** — the small black "Sign Up" button in the nav row.

• Background `{colors.primary}`, text `{colors.on-primary}`, label `{typography.body-sm-strong}`, padding `0px {spacing.xs}`, height 28 px, shape `{rounded.sm}` 6 px (the brand's `--geist-radius`).

**`nav-cta-login`** — the white "Log In" button in the nav.

• Background `{colors.canvas}`, text `{colors.ink}`, same typography / height / shape as `nav-cta-signup`.

**`nav-cta-ask-ai`** — the small "Ask AI" button with a faint border.

• Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid `{colors.hairline}` border (extracted as `0px solid rgb(235, 235, 235)`), same typography / height / shape.

Cards & Containers

**`card-marketing`** — the canonical marketing feature card (3-up section cards).

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.lg}` 24 px, shape `{rounded.md}` 8 px (the `--geist-marketing-radius`). Carries Level 3 soft-stack shadow.

**`card-marketing-large`** — the larger marketing card used for "compute model" / "AI Gateway" callouts.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.xl}`, shape `{rounded.lg}` 12 px. Carries Level 4 float-stack shadow.

**`card-soft`** — the soft-tinted card used inside cluster groups (lighter than canvas-soft).

• Background `{colors.canvas-soft}`, text `{colors.ink}`, padding `{spacing.lg}`, shape `{rounded.md}`.

**`template-card`** — the deploy-template card in the "Deploy your first app" grid.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.md}` 16 px, shape `{rounded.md}` 8 px. Hosts a 16:9 thumbnail at the top.

**`code-editor-mockup`** — the dark code-preview surface inside marketing bands.

• Background `{colors.primary}`, text `{colors.on-primary}`, body in `{typography.code}` (13 px / Geist Mono), padding `{spacing.lg}` 24 px, shape `{rounded.md}` 8 px.

**`pricing-card`** — the default pricing-tier card.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.xl}` 32 px, shape `{rounded.lg}` 12 px. Inside: tier name in `{typography.display-md}`, price in `{typography.display-xl}`, feature list in `{typography.body-md}` rows, CTA at the bottom.

**`pricing-card-featured`** — the polarity-flipped "Pro" tier card.

• Background `{colors.primary}`, text `{colors.on-primary}`, same shape + padding as `pricing-card`. CTA inverts to `button-secondary-sm` (white pill on black card).

Inputs & Forms

**`form-input`** — the canonical text input.

• Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid `{colors.hairline}` border, body in `{typography.body-sm}` (14 px), padding `0px {spacing.sm}`, height 40 px (the brand's `--geist-form-height`), shape `{rounded.sm}` 6 px.

**`form-input-sm`** — small-height variant (32 px tall) for tight forms.

• Same as `form-input` but height 32 px (the `--geist-form-small-height`).

**`form-input-lg`** — large-height variant (48 px tall) for hero CTAs.

• Same as `form-input` but height 48 px (the `--geist-form-large-height`); body in `{typography.body-md}` 16 px.

Navigation

**`nav-bar`** — the sticky top nav.

• Background `{colors.canvas}`, text `{colors.ink}`, height 64 px (the brand's `--header-height`), padding `{spacing.sm} {spacing.lg}`. Layout: logo left, link row centre, "Ask AI / Log In / Sign Up" cluster right.

**`nav-link`** — the centred link row inside `nav-bar`.

• Text `{colors.body}`, set in `{typography.body-sm}`, padding `{spacing.xs} {spacing.sm}`, shape `{rounded.full}` (ghost pill — visible only on hover or active, but the radius is documented).

**`footer`** — the bottom 4-column nav.

• Background `{colors.canvas}`, text `{colors.body}`, padding `{spacing.4xl} {spacing.lg}`. Eyebrow column labels in `{typography.caption-mono}` (uppercase mono effect); link rows in `{typography.body-sm}`.

Signature Components

**`hero-band`** — the white hero with the mesh gradient backdrop.

• Background `{colors.canvas}` (or `{colors.canvas-soft}` on some surfaces), text `{colors.ink}`, padding `{spacing.4xl} {spacing.lg}`. Inside: a small mono badge above the headline, the headline in `{typography.display-xl}` (sentence-case, period-terminated), a body lead in `{typography.body-lg}`, then a CTA row with `button-primary` + `button-secondary`. The mesh gradient sits behind, scaled to occupy roughly the top half of the band.

**`feature-mesh-band`** — the secondary section that hosts a mesh-gradient atmospheric backdrop with feature copy on top.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.5xl} {spacing.lg}`. Section headline in `{typography.display-lg}`; supporting body in `{typography.body-md}`.

**`showcase-band-light`** — a soft-canvas section ("Deploy your first app in seconds").

• Background `{colors.canvas-soft}`, text `{colors.ink}`, padding `{spacing.5xl} {spacing.lg}`.

**`showcase-band-dark`** — the polarity-flipped dark band ("A compute model for all workloads").

• Background `{colors.primary}`, text `{colors.on-primary}`, padding `{spacing.5xl} {spacing.lg}`. Section headline in `{typography.display-lg}` (white on black). Often contains a `code-editor-mockup` flush with the band.

**`logo-strip`** — the customer-logo wrapping row near the top of the page.

• Background `{colors.canvas}`, text `{colors.body}`, padding `{spacing.lg} {spacing.xl}`. Logos rendered as monochrome SVGs at consistent height.

**`badge-secondary`** — the small inline metadata pill ("New", "Beta", "Live").

• Background `{colors.canvas-soft}`, text `{colors.body}`, body in `{typography.caption}`, padding `0px {spacing.xs}`, shape `{rounded.full}`.

**`banner-marketing`** — the "Introducing X" announcement pill at the top of pages.

• Background `{colors.canvas-soft}`, text `{colors.body}`, body in `{typography.body-sm}`, padding `{spacing.xs} {spacing.sm}`, shape `{rounded.full}`.

**`link-inline`** — body-copy inline links.

• Text `{colors.link}` (`#0070f3`), body in `{typography.body-md}`, underlined.

Examples (illustrative)

> Auto-derived kit-mirror demonstration surfaces (`scripts/derive-examples-block.mjs`). Each `ex-*` entry references brand-native primitives so downstream consumers (`/preview-design`, `/generate-kit`) re-skin the same 10 surfaces consistently. `TO_FILL` markers indicate missing primitives — resolve in the LLM judgment pass.

**`ex-pricing-tier`** — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.

• Properties: `backgroundColor`, `textColor`, `borderColor`, `rounded`, `padding`

**`ex-pricing-tier-featured`** — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).

• Properties: `backgroundColor`, `textColor`, `rounded`, `padding`

**`ex-product-selector`** — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).

• Properties: `backgroundColor`, `rounded`, `padding`

**`ex-cart-drawer`** — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).

• Properties: `backgroundColor`, `rounded`, `padding`, `item-divider`

**`ex-app-shell-row`** — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.

• Properties: `backgroundColor`, `activeIndicator`, `rounded`, `padding`

**`ex-data-table-cell`** — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.

• Properties: `headerBackground`, `headerTypography`, `bodyTypography`, `cellPadding`, `rowBorder`

**`ex-auth-form-card`** — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.

• Properties: `backgroundColor`, `rounded`, `padding`

**`ex-modal-card`** — Modal dialog surface — same chrome as feature-card with elevated shadow.

• Properties: `backgroundColor`, `rounded`, `padding`

**`ex-empty-state-card`** — Empty-state illustration frame.

• Properties: `backgroundColor`, `rounded`, `padding`, `captionTypography`

**`ex-toast`** — Toast notification surface — feature-card shape + medium shadow.

• Properties: `backgroundColor`, `rounded`, `padding`, `typography`

Do's and Don'ts

Do

• Reserve `{colors.primary}` (`#171717`) for primary CTAs across the page. Black ink IS the conversion target.
• Use `{rounded.pill}` 100 px for every marketing-scale CTA and `{rounded.sm}` 6 px for nav-scale buttons. The two pill scales coexist deliberately.
• Set every headline in `{typography.display-*}` weight 600, sentence-case, often period-terminated. Aggressive negative tracking is part of the voice.
• Use the brand mesh gradient as atmospheric decoration at hero scale only — never miniaturise it to an icon, never reduce to a single colour.
• Layer stacked shadows (multiple small offsets with inset hairline) rather than single heavy drops. The brand's elevation is calmer than Material.
• Cycle page surfaces in `{colors.canvas-soft}` → `{colors.canvas}` → `{colors.primary}` polarity-flipped bands; the dark band IS the depth cue.
• Set every code block and technical eyebrow in `{typography.code}` / `{typography.caption-mono}`. Mono is the voice of the platform.

Don't

• Don't introduce a sixth accent colour. The brand operates with ink + gray + the four-pair gradient palette; new accents flatten the voice.
• Don't render headlines in all-caps. Sentence-case + negative tracking is non-negotiable.
• Don't drop a single heavy drop-shadow on cards. The brand's elevation is built from stacked small offsets + inset hairline rings.
• Don't render the brand gradient at icon scale or in a single-colour reduced form. The gradient lives at hero scale only.
• Don't promote the geometric sans to weight 700. The brand's display ceiling is 600.
• Don't pair the marketing 100-px pill CTA shape with the 6-px nav radius on the same screen — pick a scale and stay there.
• Don't set body paragraphs in the mono face. The mono is for code + technical labels only.

개요

Vercel은 개발자 플랫폼 브랜드입니다. 이 페이지는 이미 구문을 알고 있는 엔지니어를 위해 작성된 배포 대시보드의 마케팅 표면입니다. 웹에서 가장 깔끔한 시스템 중 하나인 흰색에 가까운 `` 본문 배경, 검정색에 가까운 `` 텍스트, 모든 구분선, 테두리 및 비활성화된 상태에 고유한 의도적인 단계를 제공하는 200단계 그레이 스케일을 사용하여 이러한 자세를 얻습니다. 브랜드가 마케팅 규모에서 색상을 소개하는 유일한 장소는 견본으로 축소되지 않고 대기 배경에 떠 있는 멀티 스톱 메시 그라데이션(`` → `` → `` → 청록색/자홍색/호박색)입니다. 그 그라데이션이 전체 장식 시스템입니다.

유형은 두 번째로 결정적인 목소리입니다. 브랜드 자체 맞춤형 기하학적 산(Geist)은 디스플레이, 본체, 버튼 등 모든 설명을 담고 있으며 무게는 디스플레이용 600, 버튼용 500, 본체용 400입니다. 일치하는 고정폭 얼굴(Geist Mono)에는 터미널 모형, 코드 블록, 때로는 파일 이름 캡션과 같은 기술 라벨이 포함됩니다. 헤드라인은 공격적인 음수 간격의 문장 대소문자입니다(`-2.4px` 48px 영웅). 브랜드는 절대로 공백을 긍정적으로 사용하지 않으며 모노 라벨 외부에서는 대문자를 사용하지 않습니다.

표면은 4단계 사다리를 사용합니다. ``(카드의 경우 순백색), `` 98%(페이지 본문), `` 95%(간헐적으로 삽입 영역), ``(검은색에 가까운 깊은 잉크가 페이지 본문으로 사용됨) 섹션에 다크 모드 처리가 필요한 경우 극성 반전 밴드). 그림자는 매우 미묘합니다. 모든 상승된 카드에는 `0px 1px 1px ` + `0px 2px 2px ` + 삽입 테두리로 구성된 누적 그림자가 있습니다. 카드는 두꺼운 그림자 위에 떠다니지 않습니다. 헤어라인 + 은은한 빛으로 고정된 페이지에 앉아있습니다.

**주요 특성:**

• 단일 검정색 잉크 기본 CTA ``는 모든 전환 타겟을 전달하고 보조 작업을 위한 흰색 바탕에 흰색 `button-secondary`과 쌍을 이룹니다. 이 브랜드는 마케팅 CTA에 100px 알약 모양을 사용하고 인앱 탐색 버튼에 촘촘한 6px 정사각형 모양을 사용합니다.
• 멀티 스톱 메시 그라데이션(청록색-청색-자홍색-호박색)은 영웅 규모와 기능 밴드 대기 배경 내부에 사용되는 유일한 장식용 크롬입니다. 브랜드입니다.
• 모든 섹션 눈썹과 작은 레이블은 고정폭 면 `` 또는 ``을 사용합니다. 다른 모든 것은 기하학적 산세에 있습니다.
• 미묘하게 쌓인 그림자 높이 - 4-12% 검정 불투명도로 레이어된 3개의 오프셋 - 절대 단일의 무거운 그림자가 아닙니다.
• 전체 100-1000 회색 + 파란색 + 빨간색 + 호박색 + 녹색 + 청록색 + 보라색 + 분홍색 색상 스케일이 시스템 토큰 세트로 존재하지만 마케팅 표면에서는 `100`, `1000` 및 `700` 수준 톤만 사용합니다. 나머지는 제품 내 표면에 대한 디자인 시스템 토큰에 유지됩니다.
• "활성 CPU" 가격 책정 리듬: `pricing-card`은 화이트 카드 형제에 대해 `pricing-card-featured`(프로 등급) 극성을 ``로 전환하여 가격 책정 페이지에 3단계를 표시합니다.

색상

브랜드 및 액센트

• **잉크** (`` — ``): 단일 기본 CTA 색상입니다. 모든 가입 알약, 모든 바닥글 CTA, 어두운 밴드 극성 반전을 포함하는 검정색에 가까운 잉크입니다. 밝은 표면의 페이지 전체에서 텍스트 색상으로 사용됩니다. (`--ds-gray-1000`에서 해결되었습니다.)
• **청록색** (`` — ``): 브랜드 그라데이션과 Geist 시스템 스포트라이트 토큰 내부에 사용되는 시그니처 민트색입니다. Hero Gradient Stop 내부에 표시됩니다.
• **하이라이트 핑크** (`` — ``): 브랜드의 하이라이트 마젠타색으로 미리보기-그라디언트 쌍에서 채도가 높은 스톱으로 사용됩니다.
• **보라색** (`` — ``): 미리보기 그라데이션의 시작 부분과 개발자 콘솔 하이라이트 내부에 사용되는 진한 보라색입니다.
• **링크 블루** (`` — ``): 브랜드의 기본 링크 색상 및 기존 `--geist-success` 의미 체계.

표면

• **캔버스** (`` — ``): 순백색 카드/대화상자/모달 표면.
• **소프트 캔버스**(`` — ``): 기본 페이지 배경 — 98% 흰색. 거의 모든 섹션이 이 톤에 속합니다.
• **캔버스 소프트 2**(`` — ``): "코드 편집기 내부 배경", 템플릿 카드 가리키기 상태 및 드롭다운 메뉴를 위한 약간 더 깊은 삽입 표면.
• **가는 선** (`` — ``): 1px 구분선 — 표 행, 카드 테두리, 입력 테두리.
• **헤어라인 강함** (`` — ``): 500레벨 회색으로 밝은 밴드에서 약간 더 강한 구분선과 덜 강조된 텍스트 색상으로 사용됩니다.

텍스트

• **잉크** (`` — ``): 밝은 표면의 모든 제목과 본문 단락.
• **본문**(`` — ``): 보조 텍스트 — 부제목, 본문 캡션, 탐색 링크 비활성 텍스트, 바닥글 열 본문.
• **음소거**(`` — ``): 가장 낮은 우선순위 텍스트 — 자리 표시자 텍스트, 작은 글씨, 로우키 라벨.
• **기본**(`` — ``): `` 표면의 모든 텍스트.

의미

• **성공/링크** (`` — ``): 브랜드의 기존 성공 표시기가 기본 링크 색상의 두 배가 됩니다. 인라인 본문 링크에 마우스를 올리면 밑줄이 표시됩니다.
• **링크 딥** (`` — ``): 인라인 링크에 대한 누르기/방문 톤입니다.
• **링크 Bg 소프트**(`` — ``): "새로운 기능" 알약 배너 및 정보 배지를 위한 부드러운 파스텔 블루 채우기입니다.
• **오류**(`` — ``): 파괴적인 작업 및 양식 오류에 대한 유효성 검사 빨간색입니다.
• **오류 소프트**(`` — ``): 파괴 상태 배경을 위한 부드러운 파스텔 레드.
• **오류 깊이**(`` — ``): 눌림/깊은 파괴 상태.
• **경고** (`` — ``): 주의/보류 상태 표시기.
• **부드러운 경고**(`` — ``) / **깊은 경고**(`` — ``): 배경 + 압축 변형.

브랜드 그라데이션

브랜드의 시그니처 장식은 세 쌍의 그래디언트 스택입니다:

• **개발** (`` `` → `` ``) — "배포"/"개발" 리듬을 표시하는 데 사용되는 파란색-청록색 쌍입니다.
• **미리보기** (`` `` → `` ``) — "미리보기" 표면에 사용되는 보라색-분홍색 쌍입니다.
• **선박** (`` `` → `` ``) — "선박" 표면에 사용되는 산호-호박 쌍.

영웅의 분위기 있는 배경으로 사용될 때 세 쌍은 단일 다중 색상 메시 그라데이션으로 축소됩니다. 그라디언트를 하나의 통합된 객체로 취급하십시오. 단일 색상으로 자르거나 정지점을 재정렬하거나 축소하지 마십시오. 영웅 규모에서만 사용됩니다.

타이포그래피

글꼴군

두 개의 사용자 정의 얼굴이 전체 시스템을 전달합니다.

1. 모든 디스플레이, 본문, 버튼, 링크 및 라벨에 대한 **맞춤 기하학적 산세**(`Geist`로 추출됨). 무게 400/500/600이 작업 세트입니다. 700 이상에서는 얼굴이 나타나지 않습니다. 디스플레이 크기는 적극적으로 음수로 추적됩니다(48px 영웅에서 `-2.4 px`, 32px 섹션에서 `-1.28 px`). 신체는 중립 또는 약간 부정적인 추적 상태를 유지합니다.

2. 터미널 모형, 코드 블록 및 작은 단일 캡션 레이블 등 "기술적"이라는 신호를 원하는 모든 것을 위한 **맞춤형 고정 폭 문자**(`Geist Mono`로 추출됨). 12 – 13픽셀에서만 무게가 400입니다. 추적 중립.

축소된 디스플레이 산세(`Space Grotesk`)는 간헐적인 편집 순간을 위해 세 번째 면으로 로드되지만 캡처된 표면의 어느 곳에서도 기본 면으로 렌더링되지는 않습니다.

계층구조

| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | |

사용

|---|---|---|---|---|---|

| _`` | 48px | 600 | 48px | -2.4px | Hero 헤드라인("AI 클라우드에서 구축 및 배포.") |

| _`` | 32px | 600 | 40px | -1.28px | 섹션 헤드라인("귀하의 프런트엔드가 제공됩니다.", "모든 워크로드를 위한 컴퓨팅 모델.") |

| _`` | 24px | 600 | 32px | -0.96px | 카드 클러스터 헤드라인, 가격 책정 계층 이름. |

| _`` | 20픽셀 | 600 | 28px | -0.6px | 인라인 디스플레이 마이크로 제목. |

| _`` | 18px | 400 | 28px | 0 | 섹션 헤드라인 아래에 단락을 삽입하세요. |

| _`` | 16px | 400 | 24px | 0 | 기본 본문 단락. |_

| _`` | 16px | 500 | 24px | 0 | 굵은 글씨의 인라인 본문. |

| _`` | 14px | 400 | 20픽셀 | -0.28px | 보조 본문, 탐색 링크 텍스트, 버튼 MD 라벨. |

| _`` | 14px | 500 | 20픽셀 | -0.28px | 탐색 CTA 라벨, 표 행 강조. |

| _`` | 12px | 400 | 16px | 0 | 바닥글 보조 줄, 배지 라벨. |

| _`` | 12px | 400 | 16px | 0 | 기술적인 목소리를 원하는 섹션 눈썹과 라벨 캡션. |_

| _`` | 13px | 400 | 20픽셀 | 0 | 인라인 코드, 터미널 모형, 명령 조각. |

| _`` | 14px | 500 | 20픽셀 | 0 | 소형/탐색 규모 버튼 라벨. |_

| _`` | 16px | 500 | 24px | 0 | 마케팅 규모의 알약 버튼 라벨. |

원칙

• **부정 추적은 음성의 일부입니다.** 디스플레이 크기는 공격적인 `-2.4` ~ `-0.6`픽셀 추적을 사용합니다. 기본 추적으로 되돌리면 브랜드가 손상됩니다.
• **문장 헤드라인, 마침표 종료.** "AI 클라우드에서 구축 및 배포"와 같은 헤드라인. 의도적인 마침표로 끝나십시오. 구두점은 브랜드 목소리의 일부입니다.
• **기술 계층 전용 모노.** 섹션 눈썹, 코드 블록, 터미널 모형. 본문 단락은 모노로 설정되지 않습니다.
• **무게 600은 디스플레이 천장입니다.** 기하학적 산세는 700/800에서는 결코 나타나지 않습니다. 이 때문에 브랜드는 더 차분한 시스템으로 읽힙니다.

글꼴 대체에 대한 참고사항

두 개의 기본 얼굴은 독점적입니다(브랜드에 맞게 맞춤 제작됨). 오픈 소스 대체물:

• **기하학적 산세** — *Inter*(400 / 500 / 600)가 문체와 가장 가까운 일치입니다. _`font-feature-settings: "ss01", "ss02"`은 기하학적 대체를 활성화합니다. *사토시*는 무난한 두 번째 선택입니다.
• **모노스페이스** — *JetBrains Mono*(400), 12~13픽셀이 기술적인 목소리와 일치합니다. *IBM Plex Mono*는 차선책입니다.

레이아웃

간격 시스템

• **기본 단위**: 4px. 브랜드의 `--geist-space` 토큰은 정확히 4px이고 캡처된 모든 값은 4.
의 배수입니다.
• **토큰**: `` 4픽셀 · `` 8픽셀 · `` 12픽셀 · `` 16픽셀 · `` 24픽셀 · `` 32픽셀 · `` 40픽셀 · `` 48픽셀 · `` 64픽셀 · `` 96픽셀 · `` 128픽셀 · `` 192픽셀.
• **섹션 패딩**: 마케팅 밴드는 ``부터 `` 상단/하단까지 사용합니다. 히어로 밴드는 ``까지 확장되어 메쉬 그래디언트에 숨쉬는 공간을 제공합니다.
• **카드 내부 패딩**: 마케팅 카드는 ``부터 ``까지 위치합니다. 템플릿 그리드 카드는 더 조밀한 그리드에 위치하므로 ``에서 더 조밀하게 유지됩니다.
• **인라인 간격**: 버튼 행, 탐색 행 및 칩 행은 동위 항목 간에 `` ~ ``을 사용합니다. 브랜드의 `--geist-gap`는 정확히 24픽셀입니다.

그리드 및 컨테이너

• **최대 너비**: ~1400px(`--ds-page-width`); 레거시 `--geist-page-width`은(는) 1200픽셀이며 일부 마케팅 표면에는 여전히 표시됩니다. 데스크탑의 경우 `` 24픽셀, 모바일의 경우 `` 16픽셀의 수평 여백이 있는 콘텐츠 센터.
• **열 패턴**:
• 3개 기능 행: 데스크톱에서 3개, 모바일에서 1개('웹 앱/컴포저블 상거래/다중 테넌트 플랫폼'과 같은 행).
• 탭 알약 행: `tab-ghost` 알약의 5위 중앙 행.
• 템플릿 그리드 클러스터: 데스크탑에서는 5-up, 모바일에서는 1-up으로 확장됩니다.
• 가격 계층 표: 중간 계층 극성이 반전된 데스크탑의 3-up.
• 로고 스트립: 최대 5개의 로고 너비, 단일 행.

공백 철학

메시 그래디언트는 대부분의 무거운 장식 리프팅을 수행합니다. 공백은 밴드를 구분합니다. 섹션 간격은 넉넉합니다. 밴드 사이의 ``에서 `` 사이는 그라데이션이 숨쉬도록 해줍니다. 카드 내에서 헤드라인/단락 스택은 촘촘하고(`` 8픽셀 간격) CTA 클러스터 앞의 간격은 더 넓습니다. 페이지가 설계된 것처럼 읽힙니다. 큰 간격과 좁은 내부가 있으며, 그 반대의 경우는 없습니다.

반응형 전략

#### 중단점

| 이름 | 폭 | 주요 변경 사항 |

|---|---|---|

| 모바일 | _< 600px | Hero stacks; nav collapses to hamburger; 3-up feature grids drop to 1-up; tab pill row enables horizontal scroll. |

| 태블릿 | 600~959픽셀 | 3-up 그리드는 2-up 그리드로 떨어집니다. 탐색은 여전히 ​​수평입니다. |

| 데스크탑 | 960~1199픽셀 | 전체 3업 그리드; 가격 3-up. |

| 와이드 | 1200~1399픽셀 | 1400px 콘텐츠 너비의 컨테이너 캡입니다. |

| 울트라와이드 | ≥ 1400px | 콘텐츠는 1400px 중앙에 유지됩니다. 밴드는 색상이 가장자리에서 가장자리까지 늘어나지만 콘텐츠는 최대 너비를 유지합니다. |

#### 터치 타겟

`button-primary` 알약은 탐색에서 높이가 ~32px, 마케팅 컨텍스트에서 높이가 ~48px로 렌더링됩니다. 마케팅 CTA는 모든 중단점에서 WCAG AAA를 편안하게 충족합니다. 탐색 버튼은 44 × 44픽셀 바닥에 맞게 모바일의 `` 패딩을 통해 터치 영역을 확장합니다.

#### 축소 전략

• **Nav**: 전체 링크 행 + 데스크톱에서 AI에게 물어보기/로그인/가입 알약. 메뉴가 전체 오버레이로 열리는 모바일에서는 로고 + 햄버거로 축소됩니다.
• **영웅**: 메쉬 그라데이션이 중앙에 유지됩니다. 모든 중단점에서 헤드라인 + 본문 스택이 수직으로 배치됩니다(브랜드는 분할 히어로 패턴을 사용하지 않습니다).
• **3개 기능 행**: 위 중단점에서 3개 → 2개 → 1개; 카드는 모든 뷰포트에서 `` 8픽셀 모양을 유지합니다.
• **가격 카드 그리드**: 데스크탑에서는 3-up, 모바일에서는 수직 스택(`pricing-card-featured`이 항상 중앙에 있음).
• **템플릿 그리드**: 5등분 → 3등분 → 2등분 → 1등분. 각 `template-card`은 이미지의 16:9 비율을 유지합니다.

#### 이미지 동작

• **메시 그라디언트**: 인라인 SVG 또는 캔버스 페인팅 그라디언트로 렌더링됩니다. Hero 컨테이너에 따라 유동적으로 확장됩니다. 자르거나 타일을 붙이지 않습니다.
• **고객 로고**: 로고 스트립에서 흑백 SVG로 렌더링됩니다. 일관된 24픽셀 높이.
• **코드 편집기 모형**: 내부에 모노 텍스트가 렌더링된 어두운 `` 직사각형; 레이아웃 수준에서 이미지로 처리됩니다.
• **템플릿 썸네일**: `` 카드 크롬 내부의 16:9 가로 모드; 게으른 로드; 자리표시자 상태의 일관된 회색조 팔레트입니다.

고도 및 깊이

| 레벨 | 치료 | |

사용

|---|---|---|

| 레벨 0 — 평면 | 그림자도 없고 국경도 없습니다. | 풀 블리드 히어로 밴드와 극성이 반전된 다크 섹션. |

| 레벨 1 - 인셋 헤어라인 | `0 0 0 1px ` 1px 테두리 삽입. | 기본 카드 크롬 — 브랜드의 보편적인 "이 카드를 볼 수 있습니다" 큐입니다. |

| 레벨 2 - 미묘한 드롭 | `0px 1px 1px , 0px 2px 2px ` 및 삽입된 헤어라인. | 약간 높은 카드(템플릿 그리드, 마케팅 카드). |

| 레벨 3 — 소프트 스택 | `0px 2px 2px , 0px 8px 8px -8px ` 및 삽입된 헤어라인. | "중간" 고도 — 기능 그리드 카드. |

| 레벨 4 — 플로트 스택 | `0px 2px 2px , 0px 8px 16px -4px ` 및 삽입된 헤어라인. | "큰" 고도 — 가격 책정 카드, 콜아웃 패널. |

| 레벨 5 - 모달 | `0px 1px 1px , 0px 8px 16px -4px , 0px 24px 32px -8px ` 및 삽입된 헤어라인. | 모달/대화상자 표면 및 드롭다운 메뉴. |

이 브랜드는 자연광을 가짜로 만들기 위해 여러 개의 작은 오프셋을 겹친 스택 그림자를 사용합니다. 단 하나의 8픽셀 블러 일반 드롭도 사용하지 않습니다. 인셋 헤어라인 링이 항상 추가되어 카드 가장자리가 선명하게 유지됩니다.

장식적 깊이

• **대기 깊이에 따른 메시 그라디언트**: 영웅의 멀티스톱 그라디언트는 브랜드의 유일한 "대기" 효과로 3D 일러스트레이션이 아닌 평면 2D 배경으로 적용됩니다.
• **섹션 깊이로서 극성이 뒤집힌 어두운 밴드**: 표면을 ``에서 ``(진한 잉크)로 전환하는 것은 밴드 사이의 브랜드의 주요 깊이 단서입니다.
• **삽입-섀도우 + 드롭-섀도우 콤보**: 삽입된 1px 링과 멀티스톱 드롭의 카드 조합은 자료가 무거워진 느낌 없이 "페이지에 카드가 위치하는" 효과를 생성합니다.

도형

경계 반경 배율

| 토큰 | 가치 | |

사용

|---|---|---|

| _`` | 0픽셀 | 풀블리드 영웅/바닥글 밴드. |

| _`` | 4픽셀 | 가장 엄격한 인라인 알약 — `nav-cta-signup` 6픽셀 반경 버튼(`xs/sm`에 매핑됨). |

| _`` | 6픽셀 | 브랜드의 `--geist-radius` 토큰 — 인앱 버튼, 양식 입력, 드롭다운 메뉴에 대한 기본 UI 반경입니다. |

| _`` | 8픽셀 | 브랜드의 `--geist-marketing-radius` 토큰 — 기능 카드, 템플릿 카드. |

| _`` | 12px | 약간 더 큰 카드 크롬(가격 카드 변형) |

| _`` | 16px | 가장 큰 카드 크롬 — 카드가 히어로 이미지 캡을 호스팅하는 경우. |

| _`` | 64px | "AI 앱/웹 앱/전자상거래/마케팅/플랫폼" 행에 있는 탭 고스트 알약입니다. |

| _`` | 100px | 마케팅 CTA 알약 — `button-primary`, `button-secondary`, "배포 시작" 알약. |

| _`` | 9999px | 아이콘 버튼 원형 용기, 탐색 링크 유령 알약. |

사진 기하학

• **메시 그라디언트**: 풀 블리드 2D 대기 배경, 프레임으로 잘리지 않음. 페이지의 배경화면으로 처리됩니다.
• **고객 로고**: 단색 SVG, 플렉스 행에서 일관된 24px 높이.
• **코드 편집기 모형**: 16:10 어두운 직사각형, `` 모서리.
• **템플릿 썸네일**: `` 크롬 내부의 16:9 가로 모드.
• **쇼케이스 이미지**: 쌓인 그림자가 있는 ``에서 `` 크롬 내부의 2:1 또는 16:9.

구성요소

버튼

**`button-primary`** — 표준 100픽셀 반경의 검은색 알약, 마케팅 규모.

• 배경 ``, 텍스트 ``, ``에 설정된 라벨, 패딩 `0px ` 12px, 모양 `` 100px. 마케팅 플렉스 레이아웃과 결합하면 높이가 최대 48픽셀로 렌더링됩니다.

_**`button-secondary`** — 마케팅 밴드 내부의 검은색 기본 색상과 짝을 이루는 흰색 알약입니다.

• 배경 ``, 텍스트 ``, `button-primary`과 동일한 서체 + 패딩, 모양 ``.

**`button-primary-sm`** — 탐색 및 가격 카드 CTA에서 사용되는 소규모 기본 알약입니다.

• 배경 ``, 텍스트 ``, ``(14px/500)에 설정된 라벨, 모양 ``.

_**`button-secondary-sm`** — `button-primary-sm`.

과 결합된 소형 흰색 알약

• 배경 ``, 텍스트 ``, `button-primary-sm`.
과 동일한 서체 + 모양

**`tab-ghost`** — 가운데 행 탭 알약("AI 앱/웹 앱/전자상거래/마케팅/플랫폼").

• 배경 ``, 텍스트 ``, ``에 설정된 라벨, 패딩 `0px `, 모양 `` 64픽셀.

**`icon-button-circular`** — 원형 아이콘 컨테이너(종종 "?" 또는 내부 화살표).

• 배경 ``, 어두운 아이콘, 1px 가는 가는 실선 테두리, 모양 ``.

**탐색 CTA:**

**`nav-cta-signup`** — 탐색 행에 있는 작은 검정색 "가입" 버튼.

• 배경 ``, 텍스트 ``, 라벨 ``, 패딩 `0px `, 높이 28px, 모양 `` 6px(브랜드의 `--geist-radius`).

**`nav-cta-login`** — 탐색 메뉴의 흰색 "로그인" 버튼

• 배경 ``, 텍스트 ``, `nav-cta-signup`.
와 동일한 활자체/높이/모양

**`nav-cta-ask-ai`** — 희미한 테두리가 있는 작은 "AI에게 물어보기" 버튼.

• 배경 ``, 텍스트 ``, 1px 실선 `` 테두리(`0px solid rgb(235, 235, 235)`로 추출됨), 동일한 타이포그래피/높이/모양.

카드 및 용기

**`card-marketing`** — 표준 마케팅 기능 카드(3업 섹션 카드).

• 배경 ``, 텍스트 ``, 패딩 `` 24px, 모양 `` 8px(`--geist-marketing-radius`). 레벨 3 소프트 스택 섀도우를 전달합니다.

**`card-marketing-large`** — "컴퓨팅 모델"/"AI 게이트웨이" 콜아웃에 사용되는 더 큰 마케팅 카드.

• 배경 ``, 텍스트 ``, 패딩 ``, 모양 `` 12px. 레벨 4 부동 스택 그림자를 전달합니다.

_**`card-soft`** — 클러스터 그룹 내부에 사용되는 부드러운 색조의 카드(캔버스 소프트보다 가벼움).

• 배경 ``, 텍스트 ``, 패딩 ``, 모양 ``.

**`template-card`** — "첫 번째 앱 배포" 그리드의 배포 템플릿 카드.

• 배경 ``, 텍스트 ``, 패딩 `` 16px, 모양 `` 8px. 상단에 16:9 썸네일을 호스팅합니다.

**`code-editor-mockup`** — 마케팅 밴드 내부의 어두운 코드 미리보기 표면.

• 배경 ``, 텍스트 ``, 본문 ``(13px / Geist Mono), 패딩 `` 24px, 모양 `` 8 px.

**`pricing-card`** — 기본 가격 책정 등급 카드.

• 배경 ``, 텍스트 ``, 패딩 `` 32px, 모양 `` 12px. 내부: ``의 계층 이름, ``의 가격, `` 행의 기능 목록, 하단의 CTA.

**`pricing-card-featured`** — 극성이 반전된 "Pro" 등급 카드.

• 배경 ``, 텍스트 ``, `pricing-card`과 동일한 모양 + 패딩. CTA는 `button-secondary-sm`(검은색 카드에 흰색 알약)로 반전됩니다.

입력 및 양식

**`form-input`** — 표준 텍스트 입력.

• 배경 ``, 텍스트 ``, 1px 단색 `` 테두리, 본문 ``(14px), 패딩 `0px `, 높이 40px(브랜드 `--geist-form-height`), 모양 `` 6픽셀.

**`form-input-sm`** — 꽉 끼는 형식을 위한 작은 높이 변형(32픽셀 높이).

• `form-input`와 동일하지만 높이가 32픽셀(`--geist-form-small-height`)입니다.

**`form-input-lg`** — 영웅 CTA에 대한 큰 높이 변형(높이 48px).

• `form-input`와 동일하지만 높이가 48픽셀(`--geist-form-large-height`)입니다. `` 16픽셀의 본문.

탐색

**`nav-bar`** — 고정 상단 탐색

• 배경 ``, 텍스트 ``, 높이 64px(브랜드 `--header-height`), 패딩 ` `. 레이아웃: 왼쪽 로고, 링크 행 중앙, "AI에게 물어보기/로그인/가입" 클러스터 오른쪽.

_**`nav-link`** — `nav-bar`.

내부의 중앙 링크 행

• 텍스트 ``, ``에 설정, 패딩 ` `, 모양 ``(유령 알약 — 호버 또는 활성 상태에서만 표시되지만 반경은 문서화되어 있습니다.

**`footer`** — 하단 4열 탐색

• 배경 ``, 텍스트 ``, 패딩 ` `. ``의 눈썹 열 레이블(대문자 모노 효과) ``.
의 링크 행

서명 구성요소

**`hero-band`** — 메시 그라데이션 배경을 갖춘 흰색 영웅.

• 배경 ``(또는 일부 표면에서는 ``), 텍스트 ``, 패딩 ` `. 내부: 헤드라인 위의 작은 모노 배지, ``(문장 케이스, 마침표 종료)의 헤드라인, ``의 본문 리드, `button-primary` + `button-secondary`의 CTA 행. 메시 그래디언트는 밴드의 위쪽 절반 정도를 차지하도록 크기가 조정되어 뒤에 있습니다.

**`feature-mesh-band`** — 상단에 기능 사본이 있는 메시 그라데이션 대기 배경을 호스팅하는 보조 섹션입니다.

• 배경 ``, 텍스트 ``, 패딩 ` `. _``의 섹션 헤드라인; ``.
의 지지체

**`showcase-band-light`** — 소프트 캔버스 섹션("몇 초 만에 첫 번째 앱 배포").

• 배경 ``, 텍스트 ``, 패딩 ` `.

_**`showcase-band-dark`** — 극성이 반전된 어두운 밴드("모든 작업 부하에 대한 컴퓨팅 모델").

• 배경 ``, 텍스트 ``, 패딩 ` `. ``의 섹션 헤드라인(검은색 바탕에 흰색). 종종 밴드와 같은 높이의 `code-editor-mockup`을 포함합니다.

**`logo-strip`** — 페이지 상단 근처에 있는 고객 로고 줄 바꿈 행입니다.

• 배경 ``, 텍스트 ``, 패딩 ` `. 일관된 높이의 흑백 SVG로 렌더링된 로고.

**`badge-secondary`** — 작은 인라인 메타데이터 알약("신규", "베타", "라이브").

• 배경 ``, 텍스트 ``, 본문 ``, 패딩 `0px `, 모양 ``.

_**`banner-marketing`** — 페이지 상단에 있는 "X 소개" 공지 사항입니다.

• 배경 ``, 텍스트 ``, 본문 ``, 패딩 ` `, 모양 ``.

**`link-inline`** — 본문 복사 인라인 링크.

• 텍스트 ``(``), 본문 ``, 밑줄 그음.

예(설명)

> 자동 파생 키트-미러 데모 표면(`scripts/derive-examples-block.mjs`). 각 `ex-*` 항목은 브랜드 기본 기본 요소를 참조하므로 다운스트림 소비자(`/preview-design`, `/generate-kit`)는 동일한 10개 표면을 일관되게 다시 스킨합니다. `TO_FILL` 마커는 누락된 기본 요소를 나타냅니다. LLM 판단 단계에서 해결됩니다.

**`ex-pricing-tier`** — 기본 가격 등급 카드. 브랜드 캔버스처럼 부드러운 표면에 기능 카드 크롬을 재사용합니다.

• 속성: `backgroundColor`, `textColor`, `borderColor`, `rounded`, `padding`

**`ex-pricing-tier-featured`** — 추천/강조 표시된 계층 — 극성이 반전된 표면(밝은 모드에서 어두운 채우기 + 밝은 텍스트, 어두운 모드에서 밝은 채우기 + 어두운 텍스트).

• 속성: `backgroundColor`, `textColor`, `rounded`, `padding`

**`ex-product-selector`** — 포함 내용 요약 카드 — SaaS/B2B 업종에 맞게 용도가 변경되었습니다(문자 그대로의 제품 갤러리 아님).

• 속성: `backgroundColor`, `rounded`, `padding`

**`ex-cart-drawer`** — 구독 요약 — SaaS/B2B용으로 다시 사용됨(리터럴 카트가 아닌 추가 기능당 품목).

• 속성: `backgroundColor`, `rounded`, `padding`, `item-divider`

_**`ex-app-shell-row`** — 앱 셸 예시 내부의 사이드바 탐색 행. 활성 상태는 기본 브랜드를 지표로 사용합니다.

• 속성: `backgroundColor`, `activeIndicator`, `rounded`, `padding`

**`ex-data-table-cell`** — 기본 데이터 테이블 th + td chrome. 헤더는 모노 캡 눈썹 타이포그래피를 사용합니다. body는 body-sm을 사용합니다.

• 속성: `headerBackground`, `headerTypography`, `bodyTypography`, `cellPadding`, `rowBorder`

**`ex-auth-form-card`** — 로그인/가입 카드. 내부에 텍스트 입력 기본 요소가 포함된 기능 카드 크롬을 재사용합니다.

• 속성: `backgroundColor`, `rounded`, `padding`

**`ex-modal-card`** — 모달 대화 상자 표면 — 높은 그림자가 있는 기능 카드와 동일한 크롬입니다.

• 속성: `backgroundColor`, `rounded`, `padding`

**`ex-empty-state-card`** — 빈 상태 그림 프레임.

• 속성: `backgroundColor`, `rounded`, `padding`, `captionTypography`

**`ex-toast`** — 토스트 알림 표면 — 기능 카드 모양 + 중간 그림자.

• 속성: `backgroundColor`, `rounded`, `padding`, `typography`

해야 할 일과 하지 말아야 할 일

하라

• 페이지 전체의 기본 CTA용으로 ``(``)을 예약합니다. 검정 잉크가 전환 대상입니다.
• 모든 마케팅 규모 CTA에는 `` 100픽셀을 사용하고 탐색 규모 버튼에는 `` 6픽셀을 사용하세요. 두 개의 알약 저울이 의도적으로 공존합니다.
• `` 가중치 600, 문장 단위, 종종 마침표로 끝나는 모든 헤드라인을 설정합니다. 공격적인 부정 추적은 음성의 일부입니다.
• 브랜드 메시 그래디언트는 영웅 규모의 분위기 있는 장식으로만 사용하세요. 절대 아이콘으로 축소하거나 단일 색상으로 축소하지 마세요.
• 하나의 무거운 방울이 아닌 레이어 스택 그림자(삽입된 헤어라인이 있는 여러 개의 작은 오프셋). 머티리얼보다 브랜드의 위상이 차분합니다.
• `` → `` → `` 극성 반전 밴드의 페이지 표면을 순환합니다. 어두운 띠는 깊이 단서입니다.
• `` / ``에 모든 코드 블록과 기술적 눈썹을 설정하세요. 모노는 플랫폼의 목소리입니다.

하지 마세요

• 6번째 강조 색상을 도입하지 마세요. 브랜드는 잉크 + 그레이 + 4쌍 그라데이션 팔레트로 운영됩니다. 새로운 액센트로 인해 목소리가 부드러워집니다.
• 헤드라인을 모두 대문자로 렌더링하지 마세요. 문장 케이스 + 부정 추적은 협상 불가능합니다.
• 카드에 무거운 그림자를 하나도 놓지 마십시오. 브랜드의 입면도는 쌓인 작은 오프셋과 삽입된 헤어라인 링으로 구성됩니다.
• 브랜드 그라데이션을 아이콘 크기나 단일 색상 축소 형식으로 렌더링하지 마세요. 그라데이션은 영웅 규모로만 적용됩니다.
• 기하학적 산세를 700으로 홍보하지 마세요. 브랜드의 디스플레이 한도는 600입니다.
• 마케팅용 100픽셀 알약 CTA 모양과 6픽셀 탐색 반경을 동일한 화면에 결합하지 마세요. 규모를 선택하고 그대로 유지하세요.
• 모노페이스에 본문 단락을 설정하지 마세요. 모노는 코드 + 기술 라벨 전용입니다.

概要

_Vercel は開発者プラットフォームのブランドです。このページは展開ダッシュボードのマーケティング画面であり、構文をすでに知っているエンジニア向けに書かれています。この姿勢は、Web 上で最もクリーンな殺風景なシステムの 1 つで実現されています。白に近い `` ボディの背景、黒に近いインク `` のテキスト、すべての仕切り、境界線、および無効な状態に独自の意図的なステップを与える 200 段階のグレー スケールです。ブランドがマーケティング規模でカラーを導入する唯一の場所は、大気の背景に浮かぶマルチストップ メッシュ グラデーション (`` → `` → `` → シアン / マゼンタ / アンバー) であり、見本にまで縮小されることはありません。そのグラデーションが装飾システム全体です。

Type は 2 番目の決定的な音声です。ブランド独自のカスタム ジオメトリック サンズ (Geist) は、ディスプレイ、ボディ、ボタン、すべての物語を担っており、重量はディスプレイが 600、ボタンが 500、ボディが 400 です。一致する等幅面 (Geist Mono) には、端末モックアップ、コード ブロック、場合によってはファイル名のキャプションなどの技術ラベルが付けられます。見出しは大文字と小文字を区別し、積極的に負の文字間隔をとります (`-2.4px` 48 ピクセルのヒーロー)。このブランドでは決して積極的に文字間隔を空けず、モノクロ ラベルの外側では大文字にすることはありません。

サーフェスでは 4 段階のラダーを使用します: `` (カード用の純白)、__CODEBCK_903___ 98% (ページ本文)、__CODEBCK_904___ 95% (時折挿入領域)、__CODEBCK_905___ (極性反転バンドとして使用される黒に近い濃いインク)セクションはダークモード処理が必要です)。シャドウは非常に微妙です。すべてのエレベート カードには、__CODEBCK_906___ + `0px 2px 2px ` + 差し込み枠で構築されたスタック シャドウが含まれています。カードが重いドロップシャドウの上に浮かぶことはありません。ヘアラインと柔らかな輝きによって保持されたページ上に配置されます。

**主な特徴:**

• 単一の黒インクのプライマリ CTA `` にはすべてのコンバージョン ターゲットが含まれ、二次アクションの白地に白の `button-secondary` と組み合わせられます。このブランドは、マーケティング CTA には 100 ピクセルの錠剤の形状を使用し、アプリ内ナビゲーション ボタンには 6 ピクセルの狭い正方形を使用しています。
• _マルチストップ メッシュ グラデーション (シアン、ブルー、マゼンタ、アンバー) が唯一の装飾的なクロムであり、ヒーロー スケールやフィーチャー バンドの大気背景の内側で使用されます。ブランドです。
• すべてのセクションの眉と小さなラベルは等幅面__CODEBCK_910___または__CODEBCK_911___を使用します。他のすべては幾何学的なものではありません。
• 微妙なスタック シャドウの標高 — 4 ～ 12 % の黒の不透明度で重ねられた 3 つのオフセット — 単一の重いドロップ シャドウはありません。
• 完全な 100 ～ 1000 のグレー + ブルー + 赤 + アンバー + グリーン + ティール + パープル + ピンクのカラー スケールがシステム トークン セットとして存在しますが、マーケティング サーフェスでは `100`、__CODEBCK_913___、および `700` レベルのトーンのみが使用されます。残りは製品内サーフェスのデザイン システム トークンに残ります。
• 「アクティブ CPU」の価格設定リズム: `pricing-card` は、白カードの兄弟に対して `pricing-card-featured` (プロ ティア) の極性が `` に反転され、価格ページに 3 アップをレイアウトします。

色

ブランドとアクセント_

• **インク** (`` — ``): 単一の CTA プライマリ カラー。すべてのサインアップ錠剤、すべてのフッター CTA、ダークバンド極性反転を搭載した、黒に近い純粋なインク。ページ全体の明るい表面上のテキストの色として使用されます。 (__CODEBCK_920___ から解決されました。)
• **シアン** (`` — ``): ブランドのグラデーションと Geist システムのスポットライト トークン内で使用される特徴的なミント シアン。 ヒーローのグラデーション停止の内側に表示されます。
• **ハイライト ピンク** (`` — ``): ブランドのハイライト マゼンタ。プレビューとグラデーションのペアの高彩度のストップとして使用されます。
• **紫** (`` — ``): プレビュー グラデーションの開始点および開発者コンソール内のハイライトとして使用される濃い紫。
• **リンク ブルー** (`` — ``): ブランドの主要なリンク色と従来の__CODEBCK_929___ セマンティック。

サーフェス

• **キャンバス** (`` — ``): 真っ白なカード/ダイアログ/モーダル サーフェス。
• **キャンバス ソフト** (`` — ``): デフォルトのページ背景 — 98% 白。ほぼすべてのセクションがこの調子です。
• **Canvas Soft 2** (`` — ``): 「コード エディターの内部背景」、テンプレート カードのホバー状態、ドロップダウン メニュー用のわずかに深い差し込みサーフェス。
• **ヘアライン** (`` — ``): 1 ピクセルの区切り線 — テーブル行、カード境界線、入力境界線。
• **強いヘアライン** (`` — ``): 500 レベルのグレー。明るいバンドのわずかに強い分割線として、また強調されないテキストの色として使用されます。

テキスト

• **インク** (`` — ``): ライト サーフェス上のすべての見出しと本文の段落。
• **本文** (`` — ``): 二次テキスト — 小見出し、本文キャプション、ナビゲーションリンクの非アクティブなテキスト、フッター列の本文。
• **ミュート** (`` — ``): 優先度の最も低いテキスト — プレースホルダー テキスト、細字、控えめなラベル。
• **プライマリ上** (`` — ``): `` 表面上のすべてのテキスト。

セマンティック

• **成功/リンク** (`` — ``): ブランドの従来の成功インジケーターは、主要なリンクの色としても機能します。 インライン本文リンクにカーソルを合わせると下線が表示されます。
• **リンクディープ** (`` — ``): インラインリンクの押された/訪問されたトーン。
• **Link Bg Soft** (`` — ``): 「最新情報」錠剤バナーおよび情報バッジ用のソフト パステル ブルーの塗りつぶし。
• **エラー** (`` — ``): 破壊的なアクションとフォーム エラーの検証は赤です。
• **エラー ソフト** (`` — ``): 破壊状態の背景用のソフト パステル 赤。
• **深いエラー** (`` — ``): 押された/深い破壊的な状態。
• **警告** (`` — ``): 注意/保留ステータスインジケーター。
• **ソフト警告** (`` — ``) / **警告ディープ** (`` — ``): 背景 + 押されたバリアント。

ブランド グラデーション

ブランドの特徴的な装飾は、3 ペアのグラデーション スタックです:

• **Develop** (`` `` → `` ``) — 「展開」/「開発」のリズムをマークするために使用される青と青緑のペア。
• **プレビュー** (`` `` → `` ``) — 「プレビュー」サーフェスに使用される紫とピンクのペア。
• **船** (`` `` → `` ``) — 「船」の表面に使用されるサンゴと琥珀のペア。

ヒーローの雰囲気の背景として使用すると、3 つのペアが単一のマルチカラー メッシュ グラデーションに折りたたまれます。グラデーションを 1 つの統一されたオブジェクトとして扱います。単一の色にトリミングしたり、ストップの順序を変更したり、縮小したりしないでください。ヒーロー スケールでのみ使用されます。

タイポグラフィ

フォント ファミリー

2 つのカスタム面がシステム全体をサポートします:

1. **すべてのディスプレイ、本文、ボタン、リンク、ラベルのカスタム幾何学的なサンズ** (__CODEBCK_979___ として抽出)。ウェイト 400 / 500 / 600 はワーキング セットです。 700以上の重量では顔は表示されません。ディスプレイ サイズは積極的に負の値で追跡されます (48 ピクセルのヒーローで`-2.4 px`、32 ピクセルのセクションで`-1.28 px`)。ボディはニュートラルまたはわずかにネガティブなトラッキングを維持します。

2. **ターミナル モックアップ、コード ブロック、小さなモノキャプション ラベルなど、「技術的」であることを示すためのカスタム等幅面** (__CODEBCK_982___ として抽出)。 12 ～ 13 ピクセルの場合のみウェイト 400。追跡は中立です。

(`Space Grotesk`) を含まない圧縮表示は、時折の編集の瞬間に 3 番目の顔として読み込まれますが、キャプチャされたサーフェスのどこにも主要な顔としてレンダリングされません。

階層

|トークン |サイズ |重量 |行の高さ |文字間隔 | |

を使用します

|---|---|---|---|---|---|

| `` | 48ピクセル | 600 | 48ピクセル | -2.4ピクセル |ヒーローの見出し (「AI クラウドで構築してデプロイする」)。 |

| `` | 32ピクセル | 600 | 40ピクセル | -1.28ピクセル |セクションの見出し (「フロントエンドが完成しました。」、「すべてのワークロードに対応するコンピューティング モデル。」)。 |

| `` | 24ピクセル | 600 | 32ピクセル | -0.96ピクセル |カード クラスタの見出し、価格帯の名前。 |

| `` | 20ピクセル | 600 | 28ピクセル | -0.6ピクセル |インライン表示のマイクロ見出し。 |

| `` | 18ピクセル | 400 | 28ピクセル | 0 |セクションの見出しの下に段落を置きます。 |

| `` | 16ピクセル | 400 | 24ピクセル | 0 |デフォルトの本文段落。 |

| `` | 16ピクセル | 500 | 24ピクセル | 0 |太字のインライン本文。 |

| `` | 14ピクセル | 400 | 20ピクセル | -0.28ピクセル |セカンダリ本文、ナビゲーションリンクテキスト、ボタンMDラベル。 |

| `` | 14ピクセル | 500 | 20ピクセル | -0.28ピクセル |ナビゲーション CTA ラベル、テーブル行の強調。 |

| `` | 12ピクセル | 400 | 16ピクセル | 0 |フッターの二次行、バッジのラベル。 |

| `` | 12ピクセル | 400 | 16ピクセル | 0 |眉毛をセクション化し、技術的な内容が必要なキャプションにラベルを付けます。 |

| `` | 13ピクセル | 400 | 20ピクセル | 0 |インライン コード、端末モックアップ、コマンド スニペット。 |

| `` | 14ピクセル | 500 | 20ピクセル | 0 |小さい/ナビスケールのボタンラベル。 |

| `` | 16ピクセル | 500 | 24ピクセル | 0 |マーケティング規模のピル ボタン ラベル。 |

原則

• **ネガティブ トラッキングは音声の一部です。** ディスプレイ サイズでは、__CODEBCK_998___ ～ `-0.6` ピクセルの積極的なトラッキングが使用されます。デフォルトのトラッキングに戻すと、ブランドが失われます。
• **文例の見出し、ピリオドで終了。** 「AI クラウド上で構築してデプロイする」などの見出し。意図的にピリオドで終わります。その句読点はブランドの声の一部です。
• **技術レイヤーのみのモノラル。** 眉毛、コード ブロック、端子のモックアップのセクション。本文の段落がモノラルに設定されることはありません。
• **ウェイト 600 はディスプレイの天井です。** 幾何学模様が 700 / 800 に表示されることはありません。このため、ブランドはより穏やかなシステムとして読み取られます。

フォントの代替に関する注意

2 つの主要な面は独自のものです (ブランド用にカスタムカットされたもの)。オープンソースの代替品:

• **幾何学要素なし** — *Inter* (400 / 500 / 600) が最もスタイル的に一致します。 `font-feature-settings: "ss01", "ss02"` は幾何学的代替を有効にします。 *Satoshi* はまずまずの 2 番目の選択肢です。
• **Monospace** — 12 ～ 13 ピクセルの *JetBrains Mono* (400) は技術的な声と一致します。 *IBM Plex Mono* は次善の選択肢です。

レイアウト

間隔システム_

• **基本単位**: 4 ピクセル。ブランドの `--geist-space` トークンは正確に 4 ピクセルで、キャプチャされたすべての値は 4 の倍数です。
• **トークン**: `` 4 px · `` 8 px · `` 12 px · `` 16 px · `` 24 px · `` 32 ピクセル · `` 40 ピクセル · `` 48 ピクセル · `` 64 ピクセル · `` 96 ピクセル · `` 128 ピクセル · `` 192 px.
• **セクション パディング**: マーケティング バンドは `` から `` の上部/下部を使用します。ヒーロー バンドは `` まで伸び、メッシュ グラデーションに呼吸の余地を与えます。
• **カード内部のパディング**: マーケティング カードは `` から `` に配置されます。テンプレート グリッド カードは、より密なグリッドに配置されるため、__CODEBCK_1019___ でより密に配置されます。
• **インライン ギャップ**: ボタン行、ナビゲーション行、チップ行は、兄弟間で `` から `` を使用します。 ブランドの `--geist-gap` はちょうど 24 ピクセルです。

グリッドとコンテナ

• **最大幅**: ~1400 ピクセル (`--ds-page-width`);従来の `--geist-page-width` は 1200 ピクセルで、依然として一部のマーケティング画面に表示されます。デスクトップでは `` 24 ピクセル、モバイルでは `` 16 ピクセルの水平方向の余白を持つコンテンツ センター。
• **列パターン**:
• 3 つの機能の行: デスクトップで 3 つ、モバイルで 1 つ (「Web アプリ / コンポーザブル コマース / マルチテナント プラットフォーム」などの行)。
• タブ錠剤の行: `tab-ghost` 錠剤の 5 つ上の中央の行。
• テンプレート グリッド クラスター: デスクトップでは 5 アップ、モバイルでは 1 アップにスケーリングします。
• 価格階層グリッド: デスクトップでは 3 アップ、中間階層の極性は反転されています。
• ロゴ ストリップ: 幅最大 5 つのロゴ、1 行。

ホワイトスペースの哲学

メッシュ グラデーションは、重要な装飾のほとんどを行います。空白はバンドを区切ります。セクションの間隔は十分にあり、バンド間の `` から `` により、グラデーションが呼吸できるようになります。カード内では、見出し/段落のスタックは狭く (`` 8 ピクセルのギャップ)、CTA クラスターの前ではさらに広いギャップがあります。ページは設計どおりに表示されます。大きな隙間と狭い内部があり、その逆はありません。

レスポンシブ戦略

__HTMLTAG_484__#### ブレークポイント

|名前 |幅 |主な変更点 |

|---|---|---|

|モバイル | < 600px | Hero stacks; nav collapses to hamburger; 3-up feature grids drop to 1-up; tab pill row enables horizontal scroll. |

|タブレット | 600–959ピクセル | 3 アップのグリッドは 2 アップに下がります。ナビは水平のままです。 |

|デスクトップ | 960–1199ピクセル |完全な 3 アップ グリッド。価格は3アップ。 |

|ワイド | 1200–1399ピクセル |コンテナはコンテンツ幅 1400 ピクセルでキャップされます。 |

|超広角 | ≥ 1400 ピクセル |コンテンツは 1400 ピクセルの中央に留まります。バンドはカラーで端から端まで伸びますが、コンテンツは最大幅を保持します。 |

#### タッチターゲット

__CODEBCK_1031___ 錠剤は、ナビゲーションでは高さ約 32 ピクセル、マーケティング コンテキストでは高さ約 48 ピクセルでレンダリングされます。マーケティング CTA は、すべてのブレークポイントで WCAG AAA を快適に満たします。ナビゲーション ボタンは、モバイル上の `` パディングを通じてタッチ領域を拡大し、44 × 44 ピクセルのフロアに合わせます。

__HTMLTAG_504__#### 戦略の崩壊

• **ナビゲーション**: 完全なリンク行 + デスクトップでの AI への質問 / ログイン / サインアップの錠剤。モバイルではロゴとハンバーガーに折りたたまれ、メニューがフルオーバーレイとして開きます。
• **ヒーロー**: メッシュ グラデーションは中央に留まります。すべてのブレークポイントで見出しと本文を垂直方向にスタックします (ブランドは分割ヒーロー パターンを使用しません)。
• **3 フィーチャー行**: 上記のブレークポイントでの 3-up → 2-up → 1-up;カードはすべてのビューポートにわたって__CODEBCK_1033___ 8 ピクセルの形状を維持します。
• **価格カードのグリッド**: デスクトップでは 3 段、モバイルでは垂直にスタックされ、__CODEBCK_1034___ は常に中央に配置されます。
• **テンプレート グリッド**: 5 アップ → 3 アップ → 2 アップ → 1 アップ。 各 `template-card` は、画像上で 16:9 のアスペクトを維持します。

_#### 画像の動作

• **メッシュ グラデーション**: インライン SVG またはキャンバスにペイントされたグラデーションとしてレンダリングされます。ヒーローコンテナに合わせて流動的にスケールします。決してクロップしたりタイル化したりしません。
• **顧客ロゴ**: ロゴ ストリップ内でモノクロ SVG としてレンダリングされます。一貫した 24 ピクセルの高さ。
• **コード エディターのモックアップ**: 内部にモノラル テキストがレンダリングされた暗い `` の四角形。レイアウト レベルで画像として扱われます。
• **テンプレート サムネイル**: `` カード クロム内の 16:9 横長。遅延ロード;プレースホルダー状態での一貫したグレースケール パレット。

標高と深さ

|レベル |治療 | |

を使用します

|---|---|---|

|レベル 0 — フラット |影も境界線もありません。 |フルブリードのヒーローバンドと極性が反転したダークセクション。 |

|レベル 1 — 差し込みヘアライン | `0 0 0 1px ` 1 ピクセルの境界線を挿入します。 |デフォルトのカード クロム — ブランドの普遍的な「このカードが表示されます」という合図。 |

|レベル 2 — 微妙なドロップ | `0px 1px 1px , 0px 2px 2px ` プラスインセットヘアライン。 |わずかに高さを高めたカード (テンプレート グリッド、マーケティング カード)。 |

|レベル 3 — ソフト スタック | `0px 2px 2px , 0px 8px 8px -8px ` プラスインセットヘアライン。 | 「中」標高 — フィーチャ グリッド カード。 |

|レベル 4 — フロート スタック | `0px 2px 2px , 0px 8px 16px -4px ` プラスインセットヘアライン。 | 「大」立面図 - 価格表、吹き出しパネル。 |

|レベル 5 — モーダル | `0px 1px 1px , 0px 8px 16px -4px , 0px 24px 32px -8px ` プラスインセットヘアライン。 |モーダル/ダイアログ サーフェスとドロップダウン メニュー。 |

このブランドは、積み重ねられた影 (自然光を偽装するために重ねられた複数の小さなオフセット) を使用しており、8 ピクセルのぼかしの一般的なドロップを 1 つも使用しません。差し込みヘアライン リングが常に追加されるため、カードの端が鮮明なままになります。

装飾の深さ

• **大気の深度としてのメッシュ グラデーション**: ヒーローのマルチストップ グラデーションは、ブランドの唯一の「大気」効果であり、3D イラストではなく平坦な 2D 背景として適用されます。
• **セクション深度として極性を反転したダーク バンド**: サーフェスを `` から `` (濃いインク) に切り替えることは、ブランドのバンド間の主な深さの手がかりです。
• **インセット シャドウ + ドロップ シャドウ コンボ**: カードのインセット 1 ピクセル リングとマルチストップ ドロップの組み合わせにより、素材の重さを感じることなく「カードがページ上にある」効果が得られます。

図形

境界線の半径スケール

|トークン |値 | |

を使用します

|---|---|---|

| `` | 0ピクセル |フルブリードのヒーロー/フッターバンド。 |

| `` | 4ピクセル |最も厳密なインライン ピル — `nav-cta-signup` 半径 6 ピクセルのボタン (__CODEBCK_1048___ にマッピング)。 |

| `` | 6ピクセル |ブランドの `--geist-radius` トークン — アプリ内ボタン、フォーム入力、ドロップダウン メニューの基本 UI 半径。 |

| `` | 8ピクセル |ブランドの `--geist-marketing-radius` トークン — フィーチャー カード、テンプレート カード。 |

| `` | 12ピクセル |わずかに大きいカードクロム (価格カードのバリエーション)。 |

| `` | 16ピクセル |最大のカード クロム — カードにヒーロー画像キャップが含まれる場合。 |

| `` | 64ピクセル | 「AI Apps / Web Apps / Ecommerce / Marketing / Platforms」行内のタブゴーストピル。 |

| `` | 100ピクセル |マーケティング CTA の丸薬 — `button-primary`、__CODEBCK_1058___、「展開の開始」の丸薬。 |

| `` | 9999ピクセル |アイコンボタンの円形コンテナ、ナビゲーションリンクのゴースト錠剤。 |

写真の幾何学

• **メッシュ グラデーション**: フルブリード 2D 大気背景、フレームに切り取られることはありません。ページの壁紙として扱われます。
• **顧客ロゴ**: モノクロ SVG、フレックス行で一貫した 24 ピクセルの高さ。
• **コード エディターのモックアップ**: 16:10 暗い長方形、__CODEBCK_1060___ コーナー。
• **テンプレートのサムネイル**: `` クロム内の 16:9 の横長。
• **ショーケース画像**: `` から `` のクロム内に 2:1 または 16:9 を重ね影付きで表示します。

コンポーネント

ボタン

_**`button-primary`** — 正規の半径 100 ピクセルの黒い錠剤、マーケティング スケール。

• 背景__CODEBCK_1065___、テキスト__CODEBCK_1066___、__CODEBCK_1067___に設定されたラベル、パディング__CODEBCK_1068___ 12ピクセル、形状__CODEBCK_1069___ 100ピクセル。 マーケティング フレックス レイアウトと組み合わせると、最大 48 ピクセルの高さでレンダリングされます。

**`button-secondary`** — マーケティング バンド内の黒のプライマリーと組み合わせた白い錠剤。

• 背景__CODEBCK_1071___、テキスト__CODEBCK_1072___、__CODEBCK_1073___と同じタイポグラフィ+パディング、形状__CODEBCK_1074___.

**`button-primary-sm`** — ナビゲーションおよび価格カードの CTA 内で使用される小規模な主要なピル。

• 背景__CODEBCK_1076___、テキスト__CODEBCK_1077___、ラベルは__CODEBCK_1078___ (14ピクセル/500)で設定、形状__CODEBCK_1079___.

**`button-secondary-sm`** — `button-primary-sm`.

と組み合わせた小型の白い錠剤

• 背景__CODEBCK_1082___、テキスト__CODEBCK_1083___、__CODEBCK_1084___と同じタイポグラフィと形状。

_**`tab-ghost`** — 中央行のタブ ピル (「AI アプリ / ウェブ アプリ / e コマース / マーケティング / プラットフォーム」)。

• 背景__CODEBCK_1086___、テキスト__CODEBCK_1087___、__CODEBCK_1088___に設定されたラベル、パディング__CODEBCK_1089___、形状__CODEBCK_1090___ 64ピクセル

**`icon-button-circular`** — 円形のアイコン コンテナ (多くの場合「?」または矢印が内側にあります)。

• 背景__CODEBCK_1092___、暗いアイコン、1ピクセルの実線ヘアライン枠、形状__CODEBCK_1093___.

**ナビゲーション CTA:**

**`nav-cta-signup`** — ナビゲーション行にある小さな黒い「サインアップ」ボタン。

• 背景 ``、テキスト ``、ラベル ``、パディング `0px `、高さ 28 ピクセル、形状 `` 6 ピクセル (ブランドの`--geist-radius`).

**`nav-cta-login`** — ナビゲーションの白い「ログイン」ボタン

• 背景__CODEBCK_1102___、テキスト__CODEBCK_1103___、__CODEBCK_1104___と同じタイポグラフィ/高さ/形状。

_**`nav-cta-ask-ai`** — 薄い枠線が付いた小さな「AI に聞く」ボタン。

• 背景__CODEBCK_1106___、テキスト__CODEBCK_1107___、1ピクセルの実線__CODEBCK_1108___境界線(__CODEBCK_1109___として抽出)、同じタイポグラフィ/高さ/形状。

カードとコンテナ

**`card-marketing`** — 正規のマーケティング機能カード (3 枚構成のセクション カード)。

• 背景__CODEBCK_1111___、テキスト__CODEBCK_1112___、パディング__CODEBCK_1113___ 24ピクセル、形状__CODEBCK_1114___ 8ピクセル（__CODEBCK_1115___）。レベル 3 のソフトスタック シャドウをサポートします。

_**`card-marketing-large`** — 「コンピューティング モデル」/「AI ゲートウェイ」コールアウトに使用される大きなマーケティング カード。

• 背景__CODEBCK_1117___、テキスト__CODEBCK_1118___、パディング__CODEBCK_1119___、形状__CODEBCK_1120___ 12ピクセル。 レベル 4 のフロート スタック シャドウを保持します。

_**`card-soft`** — クラスター グループ内で使用されるソフトな色合いのカード (キャンバス ソフトよりも明るい)。

• 背景__CODEBCK_1122___、テキスト__CODEBCK_1123___、パディング__CODEBCK_1124___、形状__CODEBCK_1125___.

**`template-card`** — 「最初のアプリのデプロイ」グリッドのデプロイ テンプレート カード。

• 背景__CODEBCK_1127___、テキスト__CODEBCK_1128___、パディング__CODEBCK_1129___ 16ピクセル、形状__CODEBCK_1130___ 8ピクセル。 16:9 のサムネイルが上部に表示されます。

_**`code-editor-mockup`** — マーケティング バンド内のダーク コード プレビュー サーフェス。

• 背景__CODEBCK_1132___、テキスト__CODEBCK_1133___、本文__CODEBCK_1134___ (13ピクセル/ガイストモノ)、パディング__CODEBCK_1135___ 24ピクセル、形状__CODEBCK_1136___ 8ピクセル

**`pricing-card`** — デフォルトの価格帯カード。

• 背景__CODEBCK_1138___、テキスト__CODEBCK_1139___、パディング__CODEBCK_1140___ 32ピクセル、形状__CODEBCK_1141___ 12ピクセル。内部: `` に階層名、__CODEBCK_1143___ に価格、__CODEBCK_1144___ 行に機能リスト、下部に CTA。

_**`pricing-card-featured`** — 極性を反転した「Pro」層カード。

• 背景__CODEBCK_1146___、テキスト__CODEBCK_1147___、__CODEBCK_1148___と同じ形状とパディング。 CTA は `button-secondary-sm` (黒いカードに白い錠剤) に反転されます。

入力とフォーム

**`form-input`** — 正規のテキスト入力。

• 背景__CODEBCK_1151___、テキスト__CODEBCK_1152___、1ピクセルのソリッド__CODEBCK_1153___の境界線、本文__CODEBCK_1154___（14ピクセル）、パディング__CODEBCK_1155___、高さ40ピクセル（ブランドの`--geist-form-height`)、形状__CODEBCK_1157___ 6 ピクセル

**`form-input-sm`** — タイトなフォーム向けの高さの低いバリアント (高さ 32 ピクセル)。

• _`form-input` と同じですが、高さは 32 ピクセルです (`--geist-form-small-height`)。

_**`form-input-lg`** — ヒーロー CTA 用の高さの大きいバリアント (高さ 48 ピクセル)。

• _`form-input` と同じですが、高さは 48 ピクセルです (_`--geist-form-large-height`)。 `` 16 ピクセルの本文。

ナビゲーション

**`nav-bar`** — スティッキートップナビゲーション

• 背景__CODEBCK_1166___、テキスト__CODEBCK_1167___、高さ64ピクセル（ブランドの__CODEBCK_1168___）、パディング__CODEBCK_1169___。レイアウト: 左にロゴ、中央にリンク行、右に「Ask AI / ログイン / サインアップ」クラスター。

**`nav-link`** — `nav-bar`.

内の中央にあるリンク行

• テキスト__CODEBCK_1172___、__CODEBCK_1173___で設定、パディング__CODEBCK_1174___、形状__CODEBCK_1175___ (ゴーストピル - ホバー時またはアクティブ時にのみ表示されますが、半径は文書化されます)。

**`footer`** — 下部の 4 列ナビゲーション

• 背景__CODEBCK_1177___、テキスト__CODEBCK_1178___、パディング__CODEBCK_1179___。 `` の眉列ラベル (大文字のモノラル効果)。 ``.
の行をリンクします

署名コンポーネント

_**`hero-band`** — メッシュ グラデーションの背景を持つ白いヒーロー。

• 背景__CODEBCK_1183___ (一部の表面では__CODEBCK_1184___)、テキスト__CODEBCK_1185___、パディング__CODEBCK_1186___。内部: 見出しの上に小さなモノラルのバッジ、__CODEBCK_1187___ の見出し (文例、ピリオドで終わる)、__CODEBCK_1188___ の本文リード、__CODEBCK_1189___ + `button-secondary` の CTA 行。メッシュ グラデーションは後ろにあり、バンドのほぼ上半分を占めるようにスケールされます。

**`feature-mesh-band`** — フィーチャ コピーが上部にあるメッシュ グラデーションの大気背景をホストする 2 番目のセクション。

• 背景__CODEBCK_1192___、テキスト__CODEBCK_1193___、パディング__CODEBCK_1194___。 `` のセクション見出し; ``.
の支持体

**`showcase-band-light`** — ソフト キャンバス セクション (「最初のアプリを数秒でデプロイする」)。

• 背景__CODEBCK_1198___、テキスト__CODEBCK_1199___、パディング__CODEBCK_1200___.

_**`showcase-band-dark`** — 極性反転されたダーク バンド (「すべてのワークロードのコンピューティング モデル」)。

• 背景__CODEBCK_1202___、テキスト__CODEBCK_1203___、パディング__CODEBCK_1204___。 `` のセクション見出し (黒地に白)。多くの場合、バンドとフラッシュする__CODEBCK_1206___が含まれます。

**`logo-strip`** — ページの上部近くにある顧客ロゴの折り返し行。

• 背景__CODEBCK_1208___、テキスト__CODEBCK_1209___、パディング__CODEBCK_1210___。ロゴは、一貫した高さでモノクロ SVG としてレンダリングされます。

**`badge-secondary`** — 小さなインライン メタデータ ピル (「新規」、「ベータ」、「ライブ」)。

• 背景__CODEBCK_1212___、テキスト__CODEBCK_1213___、本文__CODEBCK_1214___、パディング__CODEBCK_1215___、形状__CODEBCK_1216___.

**`banner-marketing`** — ページの上部にある「X の紹介」というアナウンスメント ピル。

• 背景__CODEBCK_1218___、テキスト__CODEBCK_1219___、本文__CODEBCK_1220___、パディング__CODEBCK_1221___、形状__CODEBCK_1222___.

**`link-inline`** — 本文のインライン リンク。

• テキスト__CODEBCK_1224___ (``)、本文は__CODEBCK_1226___、下線付き。

_例 (説明)

> 自動派生キットミラー デモンストレーション サーフェス (`scripts/derive-examples-block.mjs`)。各 `ex-*` エントリはブランドネイティブのプリミティブを参照するため、下流のコンシューマ (`/preview-design`、__CODEBCK_1230___) は同じ 10 個のサーフェスを一貫して再スキンします。 `TO_FILL` マーカーはプリミティブが欠落していることを示しています — LLM 判定パスで解決されます。

_**`ex-pricing-tier`** — デフォルトの価格帯カード。 ブランドキャンバスのような柔らかい表面を備えたフィーチャーカードクロムを再利用します。

• プロパティ: `backgroundColor`、__CODEBCK_1234___、__CODEBCK_1235___、__CODEBCK_1236___、__CODEBCK_1237___

_**`ex-pricing-tier-featured`** — 注目/ハイライト層 — 極性反転サーフェス (ライト モードでは暗い塗りつぶし + 明るいテキスト、ダーク モードでは明るい塗りつぶし + 暗いテキスト)。

• プロパティ: `backgroundColor`、__CODEBCK_1240___、__CODEBCK_1241___、__CODEBCK_1242__HTMLTAG_808___

**`ex-product-selector`** — 含まれるもの概要カード — SaaS / B2B 業種向けに再利用されています (文字通りの製品ギャラリーではありません)。

• プロパティ: `backgroundColor`、__CODEBCK_1245___、__CODEBCK_1246___

_**`ex-cart-drawer`** — サブスクリプションの概要 — SaaS / B2B 用に再利用されました (文字通りのカートではなく、アドオンごとの品目)。

• プロパティ: `backgroundColor`、__CODEBCK_1249___、__CODEBCK_1250___、__CODEBCK_1251___

**`ex-app-shell-row`** — App Shell サンプル内のサイドバーのナビゲーション行。アクティブな状態では、ブランドのプライマリを指標として使用します。

• プロパティ: `backgroundColor`、__CODEBCK_1254___、__CODEBCK_1255___、__CODEBCK_1256__HTMLTAG_826___

_**`ex-data-table-cell`** — デフォルトのデータテーブル th + td chrome。ヘッダーにはモノキャップの眉毛タイポグラフィが使用されています。 body は body-sm を使用します。

• プロパティ: `headerBackground`、__CODEBCK_1259___、__CODEBCK_1260___、__CODEBCK_1261___、__CODEBCK_1262__HTMLTAG_832___

_**`ex-auth-form-card`** — サインイン/サインアップ カード。テキスト入力プリミティブを内部に備えた機能カード クロムを再利用します。

• プロパティ: `backgroundColor`、__CODEBCK_1265___、__CODEBCK_1266___

**`ex-modal-card`** — モーダル ダイアログ サーフェス — 影が高くなったフィーチャー カードと同じクロム。

• プロパティ: `backgroundColor`、__CODEBCK_1269___、__CODEBCK_1270___

**`ex-empty-state-card`** — 空の状態のイラスト フレーム。

• プロパティ: `backgroundColor`、__CODEBCK_1273___、__CODEBCK_1274___、__CODEBCK_1275__HTMLTAG_850___

**`ex-toast`** — トースト通知面 — フィーチャー カードの形状 + 中程度の影。

• プロパティ: `backgroundColor`、__CODEBCK_1278___、__CODEBCK_1279___、__CODEBCK_1280___

推奨事項と禁止事項

実行

• ページ全体のプライマリ CTA 用に__CODEBCK_1281___ (``) を予約します。黒インクが変換対象です。
• すべてのマーケティング スケールの CTA には `` 100 ピクセルを使用し、ナビゲーション スケールのボタンには `` 6 ピクセルを使用します。 2 つの錠剤スケールは意図的に共存しています。
• すべての見出しを__CODEBCK_1285___ ウェイト 600、文単位、ピリオドで終了することがよくあります。積極的なネガティブな追跡も声の一部です。
• ブランド メッシュ グラデーションは、ヒーロー スケールでのみ雰囲気の装飾として使用します。決してアイコンに縮小したり、単色に減らしたりしないでください。
• _単一の重いドロップではなく、レイヤーを重ねたシャドウ (ヘアラインが差し込まれた複数の小さなオフセット)。 素材よりもブランドの格上げが落ち着いています。
• __CODEBCK_1286___ → `` → `` 極性反転バンドでページ サーフェスを循環します。暗い帯は深度の手がかりです。
• _`` / `` ですべてのコード ブロックと技術的な眉毛を設定します。 Mono はプラットフォームの声です。

しないでください

• 6 番目のアクセント カラーを導入しないでください。このブランドは、インク + グレー + 4 ペアのグラデーション パレットで運営されています。新しいアクセントにより声が平坦になります。
• _見出しをすべて大文字で表示しないでください。文例 + ネガティブ トラッキングについては交渉の余地がありません。
• カードに重いドロップシャドウを 1 つも落とさないでください。ブランドのエレベーションは、積み重ねられた小さなオフセット + ヘアライン リングによって構築されます。
• ブランドのグラデーションをアイコンのスケールや単色の縮小形式でレンダリングしないでください。グラデーションはヒーロー スケールでのみ有効です。
• ウェイト 700 を持たない幾何学模様を宣伝しないでください。ブランドのディスプレイの上限は 600 です。
• 同じ画面上で、マーケティング用の 100 ピクセルの錠剤 CTA 図形と 6 ピクセルのナビゲーション半径を組み合わせないでください。スケールを選択してそこに留まります。
• モノフェイスに本文段落を設定しないでください。モノラルはコードと技術ラベルのみを対象としています。

Practical Takeaways for Designers

Studying Vercel's system reveals several repeatable patterns: the use of a single dominant brand color rather than a multi-color palette (reducing decision fatigue), consistent border radius values across interactive elements (creating cohesive visual rhythm), and the deliberate spacing between components (improving scanability). These are not accidental — they are the result of a disciplined design system that prioritizes user experience over visual novelty. Designers building their own systems would benefit from studying how Vercel applies its tokens at vercel.com.

Practical Takeaways for Designers

Studying Vercel's system reveals several repeatable patterns: the use of a single dominant brand color rather than a multi-color palette (reducing decision fatigue), consistent border radius values across interactive elements (creating cohesive visual rhythm), and the deliberate spacing between components (improving scanability). These are not accidental — they are the result of a disciplined design system that prioritizes user experience over visual novelty. Designers building their own systems would benefit from studying how Vercel applies its tokens at vercel.com.

Practical Takeaways for Designers

Studying Vercel's system reveals several repeatable patterns: the use of a single dominant brand color rather than a multi-color palette (reducing decision fatigue), consistent border radius values across interactive elements (creating cohesive visual rhythm), and the deliberate spacing between components (improving scanability). These are not accidental — they are the result of a disciplined design system that prioritizes user experience over visual novelty. Designers building their own systems would benefit from studying how Vercel applies its tokens at vercel.com.

Related Design Systems

Explore similar design languages from the same category:

• Cursor Design System
• Sanity Design System
• Mintlify Design System
• Linear Design System