Superhuman

Overview

Superhumon's marketing pages open in an editorial dark register: a deep indigo navy `{colors.primary}` (`#1b1938`) canvas overlaid with a soft violet-and-sky atmospheric backdrop and a half-bleed portrait subject (often a person looking off-frame, photographed at twilight). Headlines render in `{typography.display-xxl}` (Super Sans VF at 64px / weight 540) with negative tracking, set in white over the indigo. A single rounded-rectangle CTA button anchors each band — never two, never three.

The body of every page flips to white. `{colors.canvas}` (`#ffffff`) takes over below the hero, with body type in `{colors.ink}` (`#292827` — a slightly warm dark grey, never pure black) and feature rows alternating between white and `{colors.canvas-soft}` (a barely-tinted off-white). Pricing tiers sit on this white surface; the featured tier inverts to the indigo navy, completing the brand's binary polarity.

Every page closes with a **deep-teal CTA band** (`{colors.surface-teal-deep}` — `#0e3030`). The teal is a single chromatic interlude: rich, almost-black green-blue, that breaks up what would otherwise be an indigo/white-only page. The teal band always contains the closing CTA in `{typography.display-lg}` paired with a single white-pill button.

Typography runs **Super Sans VF** — a proprietary variable display sans — at unusual mid-weights (460, 540, 600). The variable axes let the brand pick precise sub-default weights that read as warmer and more human than typical 400/500/700 SaaS scales. Display sizes use negative letter-spacing of -1.32px to -0.315px depending on size; line-heights are unusually tight (0.96 on 48px display).

**Key Characteristics:**

• Three-canvas system: indigo navy (`{colors.primary}`) for hero, white (`{colors.canvas}`) for body, deep teal (`{colors.surface-teal-deep}`) for closing CTA.
• Half-bleed portrait subject in the hero with violet-sky atmospheric backdrop — the brand uses a person looking off-frame as a recurring visual.
• Single CTA per band; the marketing pages never crowd actions.
• Super Sans VF at sub-default weights (460, 540, 600) — the brand's typographic warmth signature.
• Tight line-heights (0.96) on display sizes — vertical compression as editorial density.
• Off-warm-grey body ink (`#292827`) — never pure black; the brand's quiet warmth.
• Pill-shaped on-hero CTA in pale violet (`{colors.surface-violet-soft}`); rounded-rectangle CTAs everywhere else.

Colors

> **Source pages:** home (`/`), `/products/go-ai-assistant`, `/contact-sales`, `/plans`.

Brand & Accent

• **Primary Indigo Navy** (`{colors.primary}` — `#1b1938`): The brand's primary surface and CTA color. Hero canvas, filled rounded-rectangle button, featured pricing tier.
• **Indigo Deep** (`{colors.primary-deep}` — `#0e0c1f`): Pressed-state lift / deeper navy used in hero gradient stops.
• **Surface Violet Soft** (`{colors.surface-violet-soft}` — `#c9b4fa`): The hero pill-button fill — pale violet over the indigo canvas. Also appears in atmospheric backdrops.
• **Surface Teal Deep** (`{colors.surface-teal-deep}` — `#0e3030`): The signature closing-CTA band color. Rich green-blue, almost black.
• **Surface Teal Mid** (`{colors.surface-teal-mid}` — `#155555`): Slightly lifted teal for nested chrome inside the band.

Surface

• **Canvas** (`{colors.canvas}` — `#ffffff`): Default body background.
• **Canvas Soft** (`{colors.canvas-soft}` — `#fafaf8`): Barely-warm off-white for alternating feature-row bands.
• **Hairline** (`{colors.hairline}` — `#e8e4dd`): 1px borders, slightly warm grey.
• **Hairline Dark** (`{colors.hairline-dark}` — `#3f3a52`): 1px borders on dark surfaces.

Text

• **Ink** (`{colors.ink}` — `#292827`): Default body text. Warm dark grey, never pure black.
• **Ink Mute** (`{colors.ink-mute}` — `#73706d`): Secondary text, captions.
• **Ink Faint** (`{colors.ink-faint}` — `#9a9794`): Tertiary / disabled text.
• **On Primary** (`{colors.on-primary}` — `#ffffff`): Text on dark navy / teal surfaces.
• **On Dark Mute** (`{colors.on-dark-mute}` — translucent white): Secondary text on dark.
• **On Dark Faint** (`{colors.on-dark-faint}` — translucent white): Tertiary text on dark.

Typography

Font Family

The display and UI tier is **Super Sans VF** — a proprietary variable sans (variable axes for weight, with the brand using sub-default 460 / 540 / 600 weights). Fallback chain is the system font stack.

For substitution use **Inter Variable** (open-source) at weight 460 / 540 / 600 — Inter's variable axes match Super Sans VF's behavior closely. Avoid fixed-weight Inter at 400 / 500 / 600 — the brand specifically picks the in-between weights.

Hierarchy

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

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

| `{typography.display-xxl}` | 64px | 540 | 0.96 | 0 | Hero headline |

| `{typography.display-xl}` | 48px | 460 | 0.96 | -1.32px | Section opener on light surfaces |

| `{typography.display-lg}` | 28px | 540 | 1.14 | -0.63px | Sub-section / feature title |

| `{typography.display-md}` | 22px | 460 | 1.1 | -0.315px | Card title |

| `{typography.heading-lg}` | 20px | 460 | 1.2 | -0.4px | Compact card title |

| `{typography.body-lg}` | 18px | 540 | 1.5 | -0.135px | Marketing body lead |

| `{typography.body-md}` | 16px | 460 | 1.5 | 0 | Default UI body |

| `{typography.body-strong}` | 18.72px | 700 | 1.5 | 0 | Emphasized body |

| `{typography.button-md}` | 16px | 700 | 1.0 | 0 | Rounded-rectangle button label |

| `{typography.button-cap}` | 14px | 600 | 1.0 | 0 | Compact button label |

| `{typography.caption}` | 14px | 460 | 1.4 | 0 | Helper, footnote |

| `{typography.micro}` | 12px | 540 | 1.4 | 0 | Pill label, fine print |

Principles

• **Sub-default weights.** The brand picks 460 / 540 / 600 instead of 400 / 500 / 700 — a quiet warmth in the typography that distinguishes it from default SaaS systems.
• **Tight display leading.** 0.96 on 48–64px display — the type stacks unusually compact.
• **Negative tracking on display sizes.** -1.32px at 48px scaling proportionally — tightens the variable letterforms into editorial density.

Note on Font Substitutes

**Inter Variable** (open-source via Google Fonts) is the recommended substitute. Set `font-variation-settings: "wght" 540` for display, 460 for body — Inter's variable axes match. Avoid fixed-weight Inter; the in-between weights are the brand's signature.

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 most sections; closing teal band uses 96–128px for editorial weight.
• **Card internal padding**: 32px on pricing cards; 24px on alternating feature rows.

Grid & Container

• Hero spans full viewport width with the violet-sky backdrop edge-to-edge; content centers in a ~960px column.
• Body content centers in ~960–1100px.
• Pricing collapses 3-up → 2-up → 1-up at 1024 / 768 breakpoints.

Whitespace Philosophy

The brand uses generous editorial whitespace on both polarities — dark hero and white body. Section gaps tend toward 96px; the teal closing band gets up to 128px of vertical air. The whitespace itself is part of the brand's "considered, slow-tempo" feel.

Elevation & Depth

| Level | Treatment | Use |

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

| 0 | Flat | Default surface |

| 1 | `box-shadow: 0 1px 3px rgba(0,0,0,0.08)` | Subtle card lift |

| 2 | `box-shadow: 0 8px 24px rgba(0,0,0,0.12)` | Floating panels, modals |

| 3 | Atmospheric backdrop (violet-sky over indigo) | The hero's depth medium |

Decorative Depth

The hero's depth is the **violet-sky atmospheric backdrop** — a soft indigo-to-violet-to-sky-blue radial wash that sits behind the portrait subject. Implemented as a CSS radial gradient or large background image. Below the hero, depth is minimal — the white canvas is flat.

Shapes

Border Radius Scale

| Token | Value | Use |

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

| `{rounded.xs}` | 4px | Hairline tags |

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

| `{rounded.md}` | 8px | Buttons (the brand's signature button shape — rounded rectangle, never pill) |

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

| `{rounded.xl}` | 16px | Modal dialogs, large feature cards |

| `{rounded.full}` | 9999px | Pill tabs in feature row, hero CTA |

Photography Geometry

The hero uses **half-bleed portrait subjects** — a person photographed at twilight, looking off-frame, occupying the right half of the hero. The portrait extends edge-to-edge vertically and stops mid-canvas horizontally; type sits on the left side. Other photography is rare; product UI mockups handle most other illustrative needs.

Components

Buttons

**`button-primary-dark`** — the dominant rounded-rectangle CTA on white surfaces.

• Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button-md}`, padding `{spacing.md} {spacing.xl}` (12px 20px), rounded `{rounded.md}` 8px.
• Pressed state `button-primary-dark-pressed` shifts to `{colors.primary-deep}`.

**`button-on-dark-pill`** — the hero CTA in pale violet pill shape.

• Background `{colors.surface-violet-soft}`, text `{colors.primary}`, same typography, padding 12px 20px, rounded `{rounded.full}`. The pill shape only appears on the hero — body CTAs use the rounded rectangle.

**`button-secondary-outline`** — outline alternative on white.

• Background `{colors.canvas}`, text `{colors.ink}`, 1px solid `{colors.hairline-dark}` border, same shape as `button-primary-dark`.

**`button-on-teal`** — CTA inside the closing teal band.

• Background `{colors.canvas}`, text `{colors.surface-teal-deep}`, rounded-rectangle, same typography.

Cards & Containers

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

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

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

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

**`card-pricing-featured`** — inverted indigo featured tier.

• Background `{colors.primary}`, text `{colors.on-primary}`, otherwise identical to `card-pricing`.

**`card-teal-band`** — the closing CTA band on every page.

• Background `{colors.surface-teal-deep}`, text `{colors.on-primary}`, padding `{spacing.huge}` 64px, rounded `{rounded.lg}` 12px (often radius-less in practice when full-bleed). Holds a single closing headline in `{typography.display-lg}` and a `button-on-teal`.

**`card-feature-row`** — alternating feature-row card on the body.

• Background `{colors.canvas-soft}`, text `{colors.ink}`, padding `{spacing.xl}` 24px, rounded `{rounded.md}` 8px. Used in pairs/triplets to explain features below the hero.

Inputs & Forms

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

• Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-md}`, padding `{spacing.sm}+ {spacing.md}` (10px 12px), rounded `{rounded.sm}` 6px, 1px `{colors.hairline}` border.

Navigation

**`nav-bar-dark`** — top nav over the indigo hero.

• Background `{colors.primary}`, text `{colors.on-primary}`, padding `{spacing.lg} {spacing.xl}`. Logo on the left, nav center, "Get Started" `button-on-dark-pill` on the right.

**`nav-bar-light`** — top nav on body / pricing pages.

• Background `{colors.canvas}`, text `{colors.ink}`, otherwise same structure with `button-primary-dark` on the right.

Pills, Tags, and Chips

**`pill-tab-light`** — feature-row tab selector.

• Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.button-cap}`, padding `{spacing.sm} {spacing.lg}`, rounded `{rounded.full}`. Used in the feature category picker (Mail / Channels / Code / AI / Calendar etc.) below the hero.

Signature Components

**Half-Bleed Portrait Hero** — a person photographed at twilight, occupying the right half of the indigo hero with violet-sky atmospheric backdrop behind. Type and CTA sit on the left side. The portrait is the brand's recurring visual signature.

**Closing Teal Band** — every page closes with a `card-teal-band` containing a `{typography.display-lg}` closing headline and a single `button-on-teal`. The teal is the page's resolving chord.

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

• Text `{colors.ink}` rendered in `{typography.body-md}` with persistent underline.

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

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

Do's and Don'ts

Do

• Pair every hero with the violet-sky atmospheric backdrop and a half-bleed portrait subject when possible.
• Render display tiers at sub-default weights (460 / 540) — the warmth is the typographic signature.
• Use rounded-rectangle CTAs at 8px radius everywhere except the hero (where pill-shaped is the rule).
• Close every marketing page with a deep-teal CTA band.
• Use warm dark grey `{colors.ink}` for body text — never pure black.
• Apply tight 0.96 line-height on display sizes; the editorial compression is the brand.

Don't

• Don't use pill-shaped buttons in the body of the page; the pill is hero-only.
• Don't bump display weight above 540 unless using `body-strong` (700) for emphasized inline body.
• Don't render body text in pure black — the warm grey `#292827` is part of the brand.
• Don't omit the closing teal band — every marketing page closes with it.
• Don't introduce additional accent colors beyond indigo, violet-soft, teal, and the off-warm-greys.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes |

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

| Wide | ≥ 1440px | Half-bleed portrait at full scale; teal band 128px tall |

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

| Tablet | 768–1023px | Pricing 2-up; portrait crops tighter |

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

Touch Targets

• Buttons hit ≥ 44×44px on mobile via 12px vertical padding × 16px line-height. WCAG AAA.
• Form fields stay at the 44px minimum height.

Collapsing Strategy

• Display tiers stair-step 64 → 48 → 36 → 28 → 22px.
• Half-bleed portrait crops to head-and-shoulders on mobile; atmospheric backdrop simplifies.
• Pricing tiers stair-step 3-up → 2-up → 1-up.
• Top nav collapses to hamburger below 768px.
• Closing teal band reduces vertical padding from 128 → 64px on mobile.

Image Behavior

Hero portrait uses `srcset` with desktop / mobile crops — desktop favors the full half-bleed composition; mobile crops to head-and-shoulders.

Iteration Guide

1. Focus on ONE component at a time.

2. Reference component names and tokens directly.

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

4. Default body to `{typography.body-md}`; reserve `{typography.body-lg}` for marketing leads.

5. Keep the three-canvas rhythm (indigo / white / teal) — adding a fourth canvas color breaks the system.

6. The closing teal band is non-negotiable — every marketing page resolves there.

개요

Superhuman의 마케팅 페이지는 어두운 사설의 어두운 영역에서 열립니다. 짙은 남색 `{colors.primary}`(`#1b1938`) 캔버스는 부드러운 보라색과 하늘의 분위기 있는 배경과 반쯤 흐릿한 인물 피사체(종종 프레임 밖에서 바라보고 황혼에 사진을 찍는 사람)로 덮여 있습니다. 헤드라인은 네거티브 추적을 사용하여 `{typography.display-xxl}`(64px / 가중치 540의 Super Sans VF)로 렌더링되며 남색 위에 흰색으로 설정됩니다. 하나의 둥근 직사각형 CTA 버튼이 각 밴드를 고정합니다. 절대 두 개가 아니고 세 개가 아닙니다.

모든 페이지의 본문이 흰색으로 바뀝니다. `{colors.canvas}`(`#ffffff`)는 영웅 아래를 차지하며 신체 유형은 `{colors.ink}`(`#292827` — 약간 따뜻한 짙은 회색, 절대 순수한 검정색 아님)이며 특징 행은 흰색과 `{colors.canvas-soft}`(거의 색조가 없는 황백색)를 번갈아 가며 나타납니다. 가격 책정 계층은 이 흰색 표면에 있습니다. 주요 계층은 인디고 네이비로 전환되어 브랜드의 이진 극성을 완성합니다.

모든 페이지는 **짙은 청록색 CTA 밴드**(`{colors.surface-teal-deep}` — `#0e3030`)로 닫힙니다. 청록색은 단일 유채색 막간입니다. 풍부하고 거의 검은색에 가까운 녹색-파랑으로, 남색/흰색 전용 페이지를 분리합니다. 청록색 밴드에는 항상 단일 흰색 알약 버튼과 쌍을 이루는 `{typography.display-lg}`의 닫는 CTA가 포함됩니다.

타이포그래피는 독점적인 가변 디스플레이 산세인 **Super Sans VF**를 특이한 중간 무게(460, 540, 600)로 실행합니다. 가변 축을 통해 브랜드는 일반적인 400/500/700 SaaS 저울보다 더 따뜻하고 인간적인 것으로 읽히는 정확한 하위 기본 가중치를 선택할 수 있습니다. 디스플레이 크기는 크기에 따라 -1.32px ~ -0.315px의 음수 문자 간격을 사용합니다. 줄 높이가 비정상적으로 빡빡합니다(48px 디스플레이에서 0.96).

**주요 특징:**

• 3개 캔버스 시스템: 영웅을 위한 남색 남색(`{colors.primary}`), 본문을 위한 흰색(`{colors.canvas}`), CTA 닫기를 위한 진한 청록색(`{colors.surface-teal-deep}`).
• 보랏빛 하늘을 배경으로 한 주인공의 반 출혈 인물 피사체 - 브랜드는 프레임을 벗어난 사람을 반복적인 시각적 요소로 사용합니다.
• 밴드당 단일 CTA; 마케팅 페이지는 결코 행동을 붐비지 않습니다.
• 하위 기본 가중치(460, 540, 600)의 Super Sans VF — 브랜드의 따뜻함을 상징하는 타이포그래피입니다.
• 디스플레이 크기에 대한 엄격한 라인 높이(0.96) - 편집 밀도로 수직 압축.
• 오프웜 그레이 바디 잉크(`#292827`) — 절대 순수한 검정색이 아닙니다. 브랜드의 조용한 따뜻함.
• 옅은 보라색의 알약 모양 영웅 CTA(`{colors.surface-violet-soft}`) 다른 모든 곳에서는 둥근 직사각형 CTA가 있습니다.

색상

> **소스 페이지:** 홈(`/`), `/products/go-ai-assistant`, `/contact-sales`, `/plans`.

브랜드 및 액센트

• **Primary Indigo Navy** (`{colors.primary}` — `#1b1938`): 브랜드의 기본 표면 및 CTA 색상입니다. 둥근 직사각형 버튼으로 채워진 히어로 캔버스는 가격 책정 계층을 제공합니다.
• **Indigo Deep** (`{colors.primary-deep}` — `#0e0c1f`): 눌린 상태 리프트/영웅 그라데이션 정지에 사용되는 더 깊은 네이비.
• **Surface Violet Soft** (`{colors.surface-violet-soft}` — `#c9b4fa`): 히어로 알약 버튼 채우기 — 인디고 캔버스 위의 옅은 보라색. 대기 배경에서도 나타납니다.
• **Surface Teal Deep** (`{colors.surface-teal-deep}` — `#0e3030`): 시그니처 클로징-CTA 밴드 색상입니다. 진한 녹색-파랑, 거의 검은색.
• **Surface Teal Mid** (`{colors.surface-teal-mid}` — `#155555`): 밴드 내부에 중첩된 크롬을 위해 약간 들어 올려진 청록색입니다.

표면

• **캔버스** (`{colors.canvas}` — `#ffffff`): 기본 본문 배경.
• **캔버스 소프트**(`{colors.canvas-soft}` — `#fafaf8`): 특징 행 밴드를 교대로 사용하기 위한 거의 따뜻한 황백색입니다.
• **헤어라인** (`{colors.hairline}` — `#e8e4dd`): 1px 테두리, 약간 따뜻한 회색.
• **Hairline Dark** (`{colors.hairline-dark}` — `#3f3a52`): 어두운 표면의 1px 테두리.

텍스트

• **잉크**(`{colors.ink}` — `#292827`): 기본 본문 텍스트입니다. 따뜻한 짙은 회색, 결코 순수한 검정색이 아닙니다.
• **잉크 음소거**(`{colors.ink-mute}` — `#73706d`): 보조 텍스트, 캡션.
• **잉크 희미함**(`{colors.ink-faint}` — `#9a9794`): 3차/비활성화된 텍스트.
• **On Primary** (`{colors.on-primary}` — `#ffffff`): 짙은 남색/청록색 표면에 텍스트가 있습니다.
• **어두운 음소거 설정** (`{colors.on-dark-mute}` — 반투명 흰색): 어두운 부분의 보조 텍스트입니다.
• **어둡고 희미한 부분** (`{colors.on-dark-faint}` — 반투명 흰색): 어두운 부분의 3차 텍스트입니다.

타이포그래피

글꼴 계열

디스플레이 및 UI 계층은 독점 변수 sans인 **Super Sans VF**입니다(브랜드에서는 하위 기본값 460/540/600 가중치를 사용함). 대체 체인은 시스템 글꼴 스택입니다.

대체하려면 가중치 460/540/600에서 **Inter Variable**(오픈 소스)을 사용하십시오. Inter의 가변 축은 Super Sans VF의 동작과 거의 일치합니다. 400/500/600의 고정 가중치 Inter를 피하세요. 브랜드는 특별히 중간 가중치를 선택합니다.

계층 구조

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

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

| `{typography.display-xxl}` | 64px | 540 | 0.96 | 0 | 영웅 헤드라인 |

| `{typography.display-xl}` | 48px | 460 | 0.96 | -1.32

概要

スーパーヒューモンのマーケティング ページは、編集用の暗いレジスターで開きます。深いインディゴ ネイビーの「{colors.primary}」 (「#1b1938」) キャンバスに、柔らかな紫と空の雰囲気の背景と、半分にじみ出るポートレートの被写体 (多くの場合、夕暮れ時に撮影され、フレームから外を見ている人物) が重ねられています。見出しは、ネガティブ トラッキングを使用して「{typography.display-xxl}」（Super Sans VF、64 ピクセル / ウェイト 540）でレンダリングされ、インディゴの上に白で設定されます。単一の角丸長方形の CTA ボタンが各バンドを固定します (2 つも 3 つもありません)。

すべてのページの本文が白になります。 `{colors.canvas}` (`#ffffff`) はヒーローの下を引き継ぎ、ボディタイプは `{colors.ink}` (`#292827` — わずかに温かみのある濃い灰色で、決して純粋な黒ではありません) で、白と `{colors.canvas-soft}` (わずかに着色されたオフホワイト) が交互に並ぶ行が特徴です。価格階層はこの白い表面に表示されます。注目の層はインディゴ ネイビーに反転し、ブランドの二極性を完成させます。

すべてのページは **濃い青緑色の CTA バンド** (`{colors.surface-teal-deep}` — `#0e3030`) で閉じます。ティールは単一の有彩色の間奏であり、豊かでほぼ黒に近い緑と青で、通常はインディゴ/白のみのページを分割します。青緑色のバンドには常に、単一の白い錠剤ボタンと組み合わせられた `{typography.display-lg}` の終了 CTA が含まれています。

タイポグラフィーは、**Super Sans VF** (独自の変数ディスプレイ sans) を異常な中間のウェイト (460、540、600) で実行します。可変軸により、ブランドは、一般的な 400/500/700 SaaS スケールよりも温かみがあり、より人間的と読み取れる正確なサブデフォルトの重みを選択できます。表示サイズでは、サイズに応じて -1.32px ～ -0.315px の負の文字間隔が使用されます。行の高さは異常にタイトです (48 ピクセル表示で 0.96)。

**主な特徴:**

• 3 つのキャンバス システム: ヒーロー用のインディゴ ネイビー (`{colors.primary}`)、ボディ用の白 (`{colors.canvas}`)、CTA を閉じるためのディープ ティール (`{colors.surface-teal-deep}`)。
• 紫色の空の雰囲気を背景にしたヒーローの半分にじみ出るポートレートの被写体 - ブランドは、フレームから外れて見ている人物を繰り返しのビジュアルとして使用しています。
• バンドごとに単一の CTA。マーケティング ページにアクションが集中することはありません。
• サブデフォルトのウェイト (460、540、600) での Super Sans VF — ブランドのタイポグラフィーの暖かさの特徴。
• 表示サイズでのタイトな行の高さ (0.96) — 編集密度としての垂直方向の圧縮。
• オフウォームグレーのボディインク (`#292827`) — 決して純粋な黒ではありません。ブランドの静かな温もり。
• 淡い紫色の錠剤型のオンヒーロー CTA (`{colors.surface-violet-soft}`)。他の場所では角丸長方形の CTA が使用されます。

色

> **ソース ページ:** ホーム (`/`)、`/products/go-ai-assistant`、`/contact-sales`、`/plans`。

ブランドとアクセント

• **プライマリ インディゴ ネイビー** (`{colors.primary}` — `#1b1938`): ブランドのプライマリ サーフェスおよび CTA カラー。ヒーロー キャンバス、塗りつぶされた角丸長方形のボタン、注目の価格帯。
• **インディゴ ディープ** (`{colors.primary-deep}` — `#0e0c1f`): 押された状態のリフト / ヒーローのグラデーション ストップで使用される濃いネイビー。
• **Surface Violet Soft** (`{colors.surface-violet-soft}` — `#c9b4fa`): ヒーローのピルボタンの塗りつぶし — インディゴ キャンバス上の淡い紫色。雰囲気のある背景にも表示されます。
• **Surface Teal Deep** (`{colors.surface-teal-deep}` — `#0e3030`): 特徴的な終了 CTA バンドの色。濃い緑がかった青、ほぼ黒。
• **Surface Teal Mid** (`{colors.surface-teal-mid}` — `#155555`): バンド内のネストされたクロムのためにわずかに持ち上げられたティール。

表面

• **キャンバス** (`{colors.canvas}` — `#ffffff`): デフォルトの本文の背景。
• **キャンバス ソフト** (`{colors.canvas-soft}` — `#fafaf8`): 交互のフィーチャー行バンド用のほんのり暖かいオフホワイト。
• **ヘアライン** (`{colors.hairline}` — `#e8e4dd`): 1 ピクセルの境界線、わずかに暖かいグレー。
• **ヘアライン ダーク** (`{colors.hairline-dark}` — `#3f3a52`): 暗いサーフェス上の 1 ピクセルの境界線。

テキスト

• **インク** (`{colors.ink}` — `#292827`): デフォルトの本文テキスト。温かみのあるダークグレーで、決して純粋な黒ではありません。
• **インクミュート** (`{colors.ink-mute}` — `#73706d`): 二次テキスト、キャプション。
• **インクかすれ** (`{colors.ink-faint}` — `#9a9794`): 三次/無効化されたテキスト。
• **プライマリ上** (`{colors.on-primary}` — `#ffffff`): ダークネイビー/ティールの表面上のテキスト。
• **オン ダーク ミュート** (`{colors.on-dark-mute}` — 半透明の白): ダークのセカンダリ テキスト。
• **On Dark Faint** (`{colors.on-dark-faint}` — 半透明の白): 暗い色の第 3 テキスト。

タイポグラフィー

フォントファミリー

ディスプレイと UI 層は **Super Sans VF** です。これは独自の変数 sans (重みの可変軸、ブランドはサブデフォルトの 460 / 540 / 600 重みを使用します) です。フォールバック チェーンはシステム フォント スタックです。

置換には **Inter Variable** (オープンソース) を重み 460 / 540 / 600 で使用します。Inter の変数軸は Super Sans VF の動作とよく一致します。インターのウェイトを 400 / 500 / 600 に固定するのは避けてください。ブランドは特にその中間のウェイトを選択します。

階層

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

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

| `{typography.display-xxl}` | 64ピクセル | 540 | 0.96 | 0 |ヒーローの見出し |

| `{typography.display-xl}` | 48ピクセル | 460 | 0.96 | -1.32