Stripe

Overview

Stripi's design language opens with the gradient mesh. A wide horizontal band of pastel cream, sherbet orange, lavender, electric indigo, and ruby pink occupies the upper third of nearly every marketing page — the brand's instantly-recognizable atmospheric backdrop. Type and product UI mockups float above it on `{colors.canvas}` (white), with the gradient acting as both decoration and visual anchor. The lower portion of the page returns to white, with feature explanations on `{colors.canvas-soft}` (a barely-tinted cool off-white) and dashboard product mockups composited as faux IDE/console panels in deep navy.

The color system has two primary roles. **Indigo** (`{colors.primary}` — `#533afd`) is the brand's signature CTA color, used sparingly: one filled pill per band. **Deep navy** (`{colors.ink}` — `#0d253d`) is the universal body text color and the fill of dashboard mockups, the featured pricing tier, and the dark-app surfaces on the dashboard track. Ruby (`{colors.ruby}`) and magenta (`{colors.magenta}`) appear inside the gradient mesh and as accent dots in product UI mockups; they are not used as button colors.

Typography is built around **Sohne** at weight 300 with negative letter-spacing — the brand's editorial-density display signature. Display sizes (32–56px) use -1.4px to -0.64px tracking; body sizes use 0; tabular caption sizes (where money and numerics matter) use the OpenType `tnum` feature plus a tightening -0.36 to -0.42px tracking. The `ss01` stylistic set is enabled across all roles.

**Key Characteristics:**

• Gradient-mesh backdrop on every marketing hero — cream/orange/lavender/indigo/ruby horizontally washed across the upper third of the page.
• Single-indigo CTA hierarchy: filled `{colors.primary}` pill is the only filled button on marketing surfaces.
• Sohne thin (weight 300) display tier with negative tracking from -1.4px to -0.2px depending on size.
• Tabular-figure body type (`tnum`) for any cell containing money or numerics — the brand's quiet financial-data signal.
• Dark-app dashboard track: deep navy product UI mockups sit composited above the white canvas, frequently with rendered code or dashboard tables inside.
• Pill-shaped buttons (`{rounded.pill}` 9999px) with tight `8px 16px` padding — short, decisive, transactional.
• Cream-band feature cards (`{colors.canvas-cream}`) introduce a warm interlude between blue/white sections without breaking the brand's chromatic logic.

Colors

> **Source pages:** home (`/`), `/payments`, `/pricing`, `dashboard.stripe.com/register/payments`.

Brand & Accent

• **Indigo** (`{colors.primary}` — `#533afd`): The brand's signature CTA color. Filled-pill button, link emphasis, gradient anchor.
• **Indigo Deep** (`{colors.primary-deep}` — `#4434d4`): A deeper indigo used in gradient mid-stops and as the press-state warmer alternative.
• **Indigo Press** (`{colors.primary-press}` — `#2e2b8c`): Pressed-state lift of the primary.
• **Indigo Soft** (`{colors.primary-soft}` — `#665efd`): A lighter indigo used in product-UI accents and chart highlights.
• **Indigo Subdued** (`{colors.primary-bg-subdued-hover}` — `#b9b9f9`): Pale indigo fill used as soft tag background.
• **Brand Dark 900** (`{colors.brand-dark-900}` — `#1c1e54`): The deep navy used on the featured pricing tier and dashboard chrome.
• **Ruby** (`{colors.ruby}` — `#ea2261`): Gradient accent and chart highlight; never a button.
• **Magenta** (`{colors.magenta}` — `#f96bee`): Brighter pink stop in gradient meshes.
• **Lemon** (`{colors.lemon}` — `#9b6829`): Warm sherbet stop in gradient backdrops.

Surface

• **Canvas** (`{colors.canvas}` — `#ffffff`): Default page background.
• **Canvas Soft** (`{colors.canvas-soft}` — `#f6f9fc`): Cool-tinted off-white used on feature bands beneath the gradient hero.
• **Canvas Cream** (`{colors.canvas-cream}` — `#f5e9d4`): Warm cream used as a feature-band fill — the brand's chromatic interlude.
• **Hairline** (`{colors.hairline}` — `#e3e8ee`): 1px borders on cards and tables.
• **Hairline Input** (`{colors.hairline-input}` — `#a8c3de`): Slightly cooler hairline used on form inputs.

Text

• **Ink** (`{colors.ink}` — `#0d253d`): Default body text color across the brand. Deep navy, never pure black.
• **Ink Secondary** (`{colors.ink-secondary}` — `#273951`): Secondary text on white.
• **Ink Mute** (`{colors.ink-mute}` — `#64748d`): Helper text, captions, table labels.
• **Ink Mute 2** (`{colors.ink-mute-2}` — `#61718a`): Near-equivalent to ink-mute used in nav.
• **On Primary** (`{colors.on-primary}` — `#ffffff`): Text on indigo / dark-navy surfaces.

Semantic

The brand does not use a separate semantic color palette in the marketing system — error / success states live in dashboard-product UI specifically.

Typography

Font Family

The display and UI tier is **Sohne** (proprietary, licensed from Klim Type Foundry) at weights 300 (thin) and 400 (regular). The variable font (`sohne-var`) is loaded with `font-feature-settings: "ss01"` enabled globally — the stylistic set substitutes a single-story `a` and other character variants that are part of the brand's typographic signature.

When Sohne is unavailable, fall back to **SF Pro Display** at thin weights, then system-ui. For maximum brand fidelity, **Inter** (open-source) at weight 300 with `font-feature-settings: "ss01"` and `letter-spacing: -1.4px` on display sizes approximates the rhythm closely.

Hierarchy

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

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

| `{typography.display-xxl}` | 56px | 300 | 1.03 | -1.4px | Hero headline |

| `{typography.display-xl}` | 48px | 300 | 1.15 | -0.96px | Section opener |

| `{typography.display-lg}` | 32px | 300 | 1.1 | -0.64px | Card title / sub-section |

| `{typography.display-md}` | 26px | 300 | 1.12 | -0.26px | Compact card title |

| `{typography.heading-lg}` | 22px | 300 | 1.1 | -0.22px | Pricing tier name |

| `{typography.heading-md}` | 20px | 300 | 1.4 | -0.2px | Section sub-heading |

| `{typography.heading-sm}` | 18px | 300 | 1.4 | 0 | Mini-section label |

| `{typography.body-lg}` | 16px | 300 | 1.4 | 0 | Marketing body lead |

| `{typography.body-md}` | 15px | 300 | 1.4 | 0 | Default UI body |

| `{typography.body-tabular}` | 14px | 300 | 1.4 | -0.42px | Money / numeric tables (uses `tnum`) |

| `{typography.button-md}` | 16px | 400 | 1.0 | 0 | Pill button label |

| `{typography.button-sm}` | 14px | 400 | 1.0 | 0 | Compact pill label |

| `{typography.caption}` | 13px | 400 | 1.4 | -0.39px | Helper, table labels |

| `{typography.micro}` | 11px | 300 | 1.4 | 0 | Fine print |

| `{typography.micro-cap}` | 10px | 400 | 1.15 | 0.1px | All-caps eyebrow |

Principles

• **Thin weight is the brand.** Display tiers always render at weight 300. Bumping to 400+ removes the brand's editorial air.
• **Negative tracking on display.** -1.4px at 56px, scaling proportionally down to -0.2px at 20px. The negative tracking is the brand's typographic signature.
• **Tabular figures for money.** Any cell rendering currency, transaction amounts, or numeric counts uses `font-feature-settings: "tnum"` plus a tightening tracking. The brand quietly signals its financial DNA through this micro-detail.
• **`ss01` globally.** Apply `font-feature-settings: "ss01"` to the body element so the stylistic-set substitution is on for every text role.

Note on Font Substitutes

Sohne is proprietary. Use **Inter** (open-source via Google Fonts) at weight 300 with `letter-spacing: -1.4px` and `font-feature-settings: "ss01"` for display tiers — Inter is the closest open-source analogue. For body sizes, Inter at 300 weight with `font-feature-settings: "tnum"` (where applicable) is the canonical substitute. Avoid Helvetica or system-ui defaults — they're heavier than the brand needs.

Layout

Spacing System

• **Base unit**: 8px (with 2 / 4 / 12 sub-tokens for fine work).
• **Tokens**: `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.xxl}` 32px · `{spacing.huge}` 64px.
• **Section padding**: 64–96px on marketing surfaces; 32–48px on dashboard / product surfaces.
• **Card internal padding**: 32px on feature cards; 24px on dashboard mockups.

Grid & Container

• Marketing pages center in a ~1200px container with the gradient mesh extending edge-to-edge above.
• Pricing collapses 4-up → 2-up → 1-up at 1024 / 768 breakpoints.
• Dashboard product mockups use their own internal grids (12-col tables, 3-col card grids) rendered as static composites.

Whitespace Philosophy

The gradient mesh occupies the upper third of the page; the white canvas below is generously padded. Section gaps tend toward 96px, with content tightening to 32px on dashboard / pricing pages where users compare and act.

Elevation & Depth

| Level | Treatment | Use |

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

| 0 | Flat | Default surface |

| 1 | `box-shadow: rgba(0,55,112,0.08) 0 1px 3px` | Card lift on white |

| 2 | `box-shadow: rgba(0,55,112,0.08) 0 8px 24px, rgba(0,55,112,0.04) 0 2px 6px` | Floating panels, dashboard mockup chrome |

| 3 | Gradient mesh backdrop | The brand's primary depth medium — atmospheric color rather than literal shadow |

Decorative Depth

The gradient mesh IS the depth system. Implemented as a layered SVG or large background image rather than CSS gradients (the actual mesh has organic blob shapes that aren't CSS-renderable). The mesh provides the brand's signature lift; literal shadows are reserved for product-UI mockups and stay subtle.

Shapes

Border Radius Scale

| Token | Value | Use |

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

| `{rounded.xs}` | 4px | Hairline tags, table chrome |

| `{rounded.sm}` | 6px | Form inputs |

| `{rounded.md}` | 8px | Compact cards, alerts |

| `{rounded.lg}` | 12px | Pricing cards, feature cards |

| `{rounded.xl}` | 16px | Dashboard product mockup chrome |

| `{rounded.pill}` | 9999px | All buttons, tag pills |

Photography Geometry

The brand uses **product UI mockups** more than photography. Dashboard composites render as faux IDE/terminal/dashboard chrome inside `{rounded.lg}` 12px containers with a subtle `box-shadow`. Real photography appears in customer logo strips and the rare case-study card; treated as inset 4:3 with no shadow.

Components

Buttons

**`button-primary-pill`** — the dominant CTA system-wide.

• Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button-md}`, padding `{spacing.sm} {spacing.lg}` (8px 16px), rounded `{rounded.pill}` 9999px.
• Pressed state `button-primary-pill-pressed` shifts background to `{colors.primary-press}`.

**`button-secondary`** — outline-style alternative.

• Background `{colors.canvas}`, text `{colors.primary}`, 1px solid `{colors.primary}` border, same pill geometry.

**`button-on-dark`** — used on dashboard / dark surfaces.

• Background `{colors.brand-dark-900}`, text `{colors.on-primary}`, same pill geometry.

Cards & Containers

**`card-feature-light`** — feature explanation card on white.

• Background `{colors.canvas}`, padding `{spacing.xxl}`, rounded `{rounded.lg}` 12px, 1px `{colors.hairline}` border, optional Level 1 shadow.

**`card-pricing`** — standard pricing tier.

• Background `{colors.canvas}`, padding `{spacing.xxl}`, rounded `{rounded.lg}`, 1px `{colors.hairline}` border. Title `{typography.heading-lg}`, price `{typography.display-md}`, body `{typography.body-md}`, CTA pinned bottom as `button-primary-pill`.

**`card-pricing-featured`** — the inverted dark featured tier.

• Background `{colors.brand-dark-900}`, text `{colors.on-primary}`, otherwise identical structure to `card-pricing`. The deep-navy fill is the brand's distinctive featured-tier choice.

**`card-cream-band`** — warm interlude card.

• Background `{colors.canvas-cream}`, text `{colors.ink}`, padding `{spacing.xxl}`, rounded `{rounded.lg}`. Used to break up the indigo / white rhythm with warmth.

**`card-dashboard-mockup`** — composited dashboard / product UI screenshot.

• Background `{colors.canvas}`, type `{typography.body-tabular}` (with `tnum`), padding `{spacing.xl}` 24px, rounded `{rounded.lg}` 12px, Level 2 shadow. Often contains nested mini-mockups: code preview + dashboard table + chart card.

Inputs & Forms

**`text-input`** — standard form field.

• Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-md}`, padding `{spacing.sm} {spacing.md}` (8px 12px), rounded `{rounded.sm}` 6px, 1px `{colors.hairline-input}` border.
• Focus state `text-input-focused`: border swaps to `{colors.primary}`.

Navigation

**`nav-bar-on-mesh`** — top nav floating over the gradient hero.

• Background `{colors.canvas}` (or transparent depending on scroll), text `{colors.ink}`, padding `{spacing.lg} {spacing.xl}`. Logo wordmark on the left, primary nav center, sign-in + filled `button-primary-pill` on the right.

Pills, Tags, and Chips

**`pill-tag-soft`** — subdued indigo tag.

• Background `{colors.primary-bg-subdued-hover}`, text `{colors.primary-deep}`, type `{typography.micro-cap}`, padding `4px 8px`, rounded `{rounded.pill}`.

Signature Components

**Gradient Mesh Backdrop** — pastel cream → sherbet orange → lavender → indigo → ruby pink stops blurred horizontally across the upper third of the page. Implemented as SVG or a large background image — not a flat CSS gradient (the real mesh has organic blob shapes).

**Composited Dashboard Mockup** — multi-layer faux-product-UI compositions: an IDE panel on the left, a dashboard table center, a chart card on the right, all rendered at small scale inside `{rounded.lg}` containers with subtle Level 2 shadows. The composite is the brand's most-photographed feature.

**Tabular-Figure Money Type** — every number rendering money, count, or transaction value uses `font-feature-settings: "tnum"`. The brand's quiet signal that it's a financial-infrastructure platform.

**`link-on-light`** — inline links on light surfaces.

• Text `{colors.primary}` rendered in `{typography.body-md}`, no underline by default.

**`footer-light`** — site-wide footer.

• Background `{colors.canvas}`, text `{colors.ink-mute}`, type `{typography.caption}`, padding `{spacing.huge} {spacing.xl}` (64px 24px). Holds 4–6 columns of link groups, social icons, and a small legal row.

Do's and Don'ts

Do

• Reserve `{colors.primary}` for filled CTAs and inline link emphasis — it should appear sparingly, one filled button per band.
• Apply the gradient mesh to every marketing hero; bare-canvas heroes feel off-brand.
• Render display tiers at weight 300 with negative letter-spacing — the thin tracking is the typographic signature.
• Use `font-feature-settings: "tnum"` on every money / numeric cell.
• Apply `font-feature-settings: "ss01"` globally on the body element.
• Pair every feature explanation with a composited product UI mockup; the brand's argument is "look at the actual product."

Don't

• Don't bump display weight above 300 — at 400 the brand's editorial air collapses.
• Don't add new accent colors outside the documented gradient stops (cream / orange / lavender / indigo / ruby / magenta).
• Don't use the indigo `{colors.primary}` as a body-text color — it's a CTA and link color, not a type color at body size.
• Don't shrink button padding below `8px 16px` — the tight pill is part of the brand's transactional feel.
• Don't render money cells without `tnum` — it breaks the quiet financial-data signature.
• Don't replace the pill shape with rounded-rectangles for buttons.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes |

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

| Wide | ≥ 1440px | Full gradient mesh edge-to-edge; dashboard composite at full scale |

| Desktop | 1024–1440px | Default content max-width; pricing 4-up |

| Tablet | 768–1023px | Pricing 2-up; dashboard composite simplifies to 2 panels |

| Mobile | < 768px | Pricing 1-up; hamburger nav; display drops 56 → 36px |

Touch Targets

• Pill buttons hit ≥ 40×40px on mobile via padding scaling. On smaller screens, buttons size up to 44×44px to maintain WCAG AAA.
• Form fields stay at 40px minimum height.

Collapsing Strategy

• Display tiers stair-step 56 → 48 → 32 → 26 → 22px through the breakpoints.
• Gradient mesh re-tiles on mobile to preserve the wash without disappearing.
• Dashboard composites simplify to single-panel mockups on mobile; the multi-layer composition only renders at desktop+.
• Pricing tiers stair-step 4-up → 2-up → 1-up.

Image Behavior

Product UI composites use `srcset` with art-direction crops at major breakpoints. Mobile crops focus on the most actionable inner panel; desktop crops show the full multi-layer composition.

Iteration Guide

1. Focus on ONE component at a time.

2. Reference component names and tokens directly (`{colors.primary}`, `{button-primary-pill}-pressed`, `{rounded.pill}`).

3. Run `npx @google/design.md lint DESIGN.md` after edits.

4. Add new variants as separate entries.

5. Default body to `{typography.body-md}` (15px); use `{typography.body-tabular}` for any money / numeric cell.

6. Apply `ss01` globally on the body; apply `tnum` per-element on numeric content.

7. The gradient mesh is non-negotiable on marketing heroes — bare-canvas heroes break the brand.

개요

Stripi의 디자인 언어는 그라디언트 메쉬로 열립니다. 파스텔 크림, 샤베트 오렌지, 라벤더, 일렉트릭 인디고, 루비 핑크의 넓은 수평 밴드가 거의 모든 마케팅 페이지의 상단 3분의 1을 차지하며 브랜드의 분위기를 즉시 알아볼 수 있습니다. 유형 및 제품 UI 모형은 `{colors.canvas}`(흰색) 위에 떠 있으며 그라데이션은 장식 및 시각적 앵커 역할을 합니다. 페이지 하단 부분은 '{colors.canvas-soft}'(거의 착색되지 않은 시원한 황백색)에 대한 기능 설명과 짙은 남색의 가짜 IDE/콘솔 패널로 합성된 대시보드 제품 모형과 함께 흰색으로 돌아갑니다.

색상 시스템에는 두 가지 주요 역할이 있습니다. **인디고**(`{colors.primary}` — `#533afd`)는 브랜드의 시그니처 CTA 색상으로 드물게 사용됩니다. 밴드당 알약이 1개씩 채워져 있습니다. **딥 네이비**(`{colors.ink}` — `#0d253d`)는 범용 본문 텍스트 색상이자 대시보드 모형의 채우기, 주요 가격 책정 계층 및 대시보드 트랙의 어두운 앱 표면입니다. Ruby(`{colors.ruby}`) 및 마젠타(`{colors.magenta}`)는 그라디언트 메쉬 내부에 표시되고 제품 UI 모형에서는 강조점으로 표시됩니다. 버튼 색상으로 사용되지 않습니다.

타이포그래피는 브랜드의 편집 밀도 디스플레이 시그니처인 음수 문자 간격을 사용하여 무게 300의 **Sohne**을 중심으로 제작되었습니다. 디스플레이 크기(32~56px)는 -1.4px~-0.64px 추적을 사용합니다. 신체 크기는 0을 사용합니다. 표 형식 캡션 크기(돈과 숫자가 중요한 경우)는 OpenType 'tnum' 기능과 함께 -0.36~-0.42px 추적을 강화합니다. 'ss01' 스타일 세트는 모든 역할에서 활성화됩니다.

**주요 특징:**

• 모든 마케팅 영웅의 그라디언트 메쉬 배경 - 페이지 상단 1/3을 가로로 가로로 씻은 크림/오렌지/라벤더/인디고/루비.
• 단일 인디고 CTA 계층: 채워진 `{colors.primary}` 알약은 마케팅 화면에서 유일하게 채워진 버튼입니다.
• 크기에 따라 -1.4px에서 -0.2px까지 네거티브 추적이 가능한 Sohne 얇은(무게 300) 디스플레이 계층입니다.
• 돈이나 숫자가 포함된 모든 셀에 대한 표 형식의 본문 유형(`tnum`) - 브랜드의 조용한 금융 데이터 신호입니다.
• 다크 앱 대시보드 트랙: 짙은 남색 제품 UI 모형은 흰색 캔버스 위에 합성되며, 내부에 렌더링된 코드나 대시보드 테이블이 있는 경우가 많습니다.
• 알약 모양의 버튼(`{rounded.pill}` 9999px)과 촘촘한 '8px 16px' 패딩 - 짧고 단호하며 트랜잭션이 가능합니다.
• 크림색 밴드 기능 카드(`{colors.canvas-cream}`)는 브랜드의 색채 논리를 깨지 않으면서 파란색/흰색 섹션 사이에 따뜻한 간격을 도입합니다.

색상

> **소스 페이지:** 홈(`/`), `/결제`, `/pricing`, `dashboard.stripe.com/register/paids`.

브랜드 및 액센트

• **인디고** (`{colors.primary}` — `#533afd`): 브랜드의 시그니처 CTA 색상입니다. 채워진 알약 버튼, 링크 강조, 그라데이션 앵커.
• **인디고 딥**(`{colors.primary-deep}` — `#4434d4`): 그라데이션 중간 정지 및 프레스 상태의 따뜻한 대안으로 사용되는 더 깊은 인디고입니다.
• **인디고 프레스** (`{colors.primary-press}` — `#2e2b8c`): 기본의 프레스 상태 리프트.
• **인디고 소프트**(`{colors.primary-soft}` — `#665efd`): 제품 UI 강조 및 차트 하이라이트에 사용되는 밝은 인디고입니다.
• **Indigo Subdued** (`{colors.primary-bg-subdued-hover}` — `#b9b9f9`): 소프트 태그 배경으로 사용되는 옅은 남색 채우기.
• **Brand Dark 900** (`{colors.brand-dark-900}` — `#1c1e54`): 주요 가격 책정 계층 및 대시보드 크롬에 사용되는 딥 네이비 색상입니다.
• **Ruby** (`{colors.ruby}` — `#ea2261`): 그라데이션 악센트 및 차트 하이라이트; 결코 버튼이 아닙니다.
• **마젠타** (`{colors.magenta}` — `#f96bee`): 그라디언트 메쉬의 더 밝은 분홍색 정지점입니다.
• **레몬**(`{colors.lemon}` — `#9b6829`): 그라데이션 배경의 따뜻한 셔벗 중지입니다.

표면

• **캔버스** (`{colors.canvas}` — `#ffffff`): 기본 페이지 배경.
• **캔버스 소프트**(`{colors.canvas-soft}` — `#f6f9fc`): 그라데이션 영웅 아래 기능 밴드에 사용되는 시원한 색조의 황백색입니다.
• **캔버스 크림**(`{colors.canvas-cream}` — `#f5e9d4`): 기능 밴드 채우기로 사용되는 따뜻한 크림 - 브랜드의 색채 막간입니다.
• **헤어라인** (`{colors.hairline}` — `#e3e8ee`): 카드와 테이블의 1px 테두리.
• **헤어라인 입력** (`{colors.hairline-input}` — `#a8c3de`): 양식 입력에 사용되는 약간 멋진 헤어라인입니다.

텍스트

• **잉크**(`{colors.ink}` — `#0d253d`): 브랜드 전체의 기본 본문 텍스트 색상입니다. 결코 순수한 검정색이 아닌 딥 네이비.
• **잉크 보조**(`{colors.ink-secondary}` — `#273951`): 흰색 바탕의 보조 텍스트입니다.
• **잉크 음소거**(`{colors.ink-mute}` — `#64748d`): 도우미 텍스트, 캡션, 테이블 레이블.
• **잉크 음소거 2** (`{colors.ink-mute-2}` — `#61718a`): 탐색에 사용되는 잉크 음소거와 거의 동일합니다.
• **On Primary** (`{colors.on-primary}` — `#ffffff`): 남색/진한 남색 표면의 텍스트입니다.

의미론

브랜드는 마케팅 시스템에서 별도의 의미 색상 팔레트를 사용하지 않습니다. 오류/성공 상태는 특히 대시보드 제품 UI에 표시됩니다.

타이포그래피

글꼴 계열

디스플레이 및 UI 계층은 **Sohne**(Klim Type Foundry에서 라이센스를 받은 독점)입니다.

概要

Stripi のデザイン言語は、グラデーション メッシュから始まります。パステル クリーム、シャーベット オレンジ、ラベンダー、エレクトリック インディゴ、ルビー ピンクの幅広の水平帯が、ほぼすべてのマーケティング ページの上部 3 分の 1 を占めています。これは、ブランドのすぐに認識できる雰囲気のある背景です。型と製品の UI モックアップは、`{colors.canvas}` (白) 上に浮かび上がり、グラデーションが装飾と視覚的なアンカーの両方として機能します。ページの下部は白に戻り、「{colors.canvas-soft}」（かろうじて着色されたクールなオフホワイト）に関する機能の説明と、深いネイビーの擬似 IDE/コンソール パネルとして合成されたダッシュボード製品のモックアップが表示されます。

カラー システムには 2 つの主な役割があります。 **インディゴ** (`{colors.primary}` — `#533afd`) はブランドの特徴的な CTA カラーであり、バンドごとに 1 錠ずつというように、控えめに使用されています。 **ディープ ネイビー** (`{colors.ink}` — `#0d253d`) は、ユニバーサル本文テキストの色であり、ダッシュボード モックアップ、注目の価格帯、ダッシュボード トラックのダークアプリ サーフェスの塗りつぶしです。ルビー (`{colors.ruby}`) とマゼンタ (`{colors.magenta}`) は、グラデーション メッシュ内に表示され、製品 UI モックアップのアクセント ドットとして表示されます。ボタンの色としては使用されません。

タイポグラフィは **Sohne** を中心にウェイト 300、負の文字間隔で構築されています。これはブランドの編集上の密度表示の特徴です。表示サイズ (32 ～ 56 ピクセル) は、-1.4 ピクセルから -0.64 ピクセルのトラッキングを使用します。本体サイズは 0 を使用します。表形式のキャプション サイズ (金額と数値が重要な場合) は、OpenType の `tnum` 機能に加えて、-0.36 から -0.42 ピクセルの厳格なトラッキングを使用します。 「ss01」スタイル セットはすべてのロールにわたって有効です。

**主な特徴:**

• すべてのマーケティング ヒーローのグラデーション メッシュの背景 — クリーム/オレンジ/ラベンダー/インディゴ/ルビーがページの上 3 分の 1 にわたって水平方向にウォッシュされています。
• シングルインディゴ CTA 階層: 塗りつぶされた `{colors.primary}` 錠剤は、マーケティング画面上の唯一の塗りつぶされたボタンです。
• サイズに応じて -1.4px から -0.2px までのネガティブ トラッキングを備えた Sohne 薄型 (ウェイト 300) ディスプレイ層。
• お金や数値を含むセルの表形式のボディ タイプ (`tnum`)。これはブランドの静かな財務データ シグナルです。
• ダークアプリのダッシュボード トラック: 濃いネイビーの製品 UI モックアップが白いキャンバスの上に合成され、内部にレンダリングされたコードやダッシュボード テーブルが配置されることがよくあります。
• タイトな `8px 16px` パディングを備えた錠剤型のボタン (`{rounded.pill}` 9999px) — 短く、決定的で、トランザクション的です。
• クリームバンドのフィーチャーカード (`{colors.canvas-cream}`) は、ブランドの半音ロジックを壊すことなく、青と白のセクションの間に温かみのある間奏を導入します。

色

> **ソース ページ:** ホーム (`/`)、`/payments`、`/pricing`、`dashboard. Stripe.com/register/payments`。

ブランドとアクセント

• **インディゴ** (`{colors.primary}` — `#533afd`): ブランドの特徴的な CTA カラー。黒丸ボタン、リンク強調、グラデーションアンカー。
• **インディゴ ディープ** (`{colors.primary-deep}` — `#4434d4`): グラデーションのミッドストップで、またプレス状態の暖かい代替品として使用される深いインディゴ。
• **Indigo Press** (`{colors.primary-press}` — `#2e2b8c`): プライマリーのプレス状態のリフト。
• **Indigo Soft** (`{colors.primary-soft}` — `#665efd`): 製品 UI のアクセントやチャートのハイライトで使用される明るいインディゴ。
• **抑制されたインディゴ** (`{colors.primary-bg-subdued-hover}` — `#b9b9f9`): ソフト タグの背景として使用される淡いインディゴの塗りつぶし。
• **Brand Dark 900** (`{colors.brand-dark-900}` — `#1c1e54`): 注目の価格帯とダッシュボードのクロームで使用されているディープ ネイビー。
• **Ruby** (`{colors.ruby}` — `#ea2261`): グラデーションのアクセントとチャートのハイライト。決してボタンではありません。
• **マゼンタ** (`{colors.magenta}` — `#f96bee`): グラデーション メッシュでの明るいピンクの停止。
• **レモン** (`{colors.lemon}` — `#9b6829`): グラデーションの背景に温かみのあるシャーベット ストップ。

表面

• **キャンバス** (`{colors.canvas}` — `#ffffff`): デフォルトのページの背景。
• **キャンバス ソフト** (`{colors.canvas-soft}` — `#f6f9fc`): グラデーション ヒーローの下のフィーチャー バンドで使用される、クールな色合いのオフホワイト。
• **キャンバス クリーム** (`{colors.canvas-cream}` — `#f5e9d4`): フィーチャー バンドの塗りつぶし、つまりブランドのクロマティック インタールードとして使用される温かいクリーム。
• **ヘアライン** (`{colors.hairline}` — `#e3e8ee`): カードとテーブルの 1 ピクセルの境界線。
• **ヘアライン入力** (`{colors.hairline-input}` — `#a8c3de`): フォーム入力で使用される少しクールなヘアライン。

テキスト

• **インク** (`{colors.ink}` — `#0d253d`): ブランド全体のデフォルトの本文テキストの色。決して真っ黒ではない深いネイビー。
• **二次インク** (`{colors.ink-secondary}` — `#273951`): 白の二次テキスト。
• **インクミュート** (`{colors.ink-mute}` — `#64748d`): ヘルパー テキスト、キャプション、表のラベル。
• **インク ミュート 2** (`{colors.ink-mute-2}` — `#61718a`): ナビゲーションで使用されるインク ミュートとほぼ同等です。
• **プライマリ上** (`{colors.on-primary}` — `#ffffff`): インディゴ/ダークネイビーの表面上のテキスト。

セマンティック

このブランドは、マーケティング システムで個別のセマンティック カラー パレットを使用していません。エラー/成功の状態は、特にダッシュボード製品の UI に存在します。

タイポグラフィー

フォントファミリー

ディスプレイと UI 層は **Sohne** (独自仕様、Klim Type Foundry からライセンス供与) です。