xAI

Overview

xAI is Elon Musk's frontier-AI lab and the website wears that posture with engineered restraint: a near-black canvas `{colors.canvas}` (`#0a0a0a`) edge-to-edge, white outline pills as every interactive element, and a single proprietary geometric sans `Universal Sans` carrying every display headline at weight 400. There is no gradient hero, no atmospheric backdrop, no product screenshot. The brand reads as confidently sparse — a research lab announcing its work rather than a SaaS marketing site.

Type is the second decisive voice. `Universal Sans` carries every display at weight 400 (regular) with aggressive negative tracking (`-2.4 px` at 96 px, scaling down through the display ladder). For technical labels, eyebrows, and metric counters, the brand pairs `Geist Mono` (uppercase, 1.4 px positive tracking) — every section eyebrow reads as a code comment more than a marketing label.

Every interactive element is a pill (`{rounded.pill}` 9999 px) with 1 px white-translucent border `rgba(255, 255, 255, 0.25)`. The button shape never varies — the same translucent-white pill carries "Try Grok", "Read announcement", "Custom Voices", "Sign up now", and every "Read" anchor. The pill is the entire shape system.

**Key Characteristics:**

• A single near-black canvas (`{colors.canvas}` `#0a0a0a`) with white outline pills as the entire interactive vocabulary.
• Universal Sans weight 400 for display, Geist Mono uppercase tracked for labels — the two-face contrast IS the brand voice.
• Every button is a `{rounded.pill}` outline with translucent-white border. The brand never uses filled CTAs except for one variant (white-filled pill on Sign Up).
• Cards are tight `{rounded.sm}` 8 px rectangles in a slightly-lighter `{colors.canvas-card}` (`#191919`) fill with hairline border. No shadows.
• A muted accent palette of sunset-orange / dusk-purple / twilight-violet / breeze-blue lives in the design tokens but appears rarely on the main marketing surface — reserved for product illustrations / icons.
• Massive negative letter-spacing on display headlines (`-2.4 px` at 96 px) gives the typography a precise, gathered look.

Colors

Brand & Accent

• **White** (`{colors.primary}` — `#ffffff`): The brand's primary "color" — used as button outline, button-primary fill, all display text. The brand's signature is white-on-near-black.
• **Sunset Orange** (`{colors.accent-sunset}` — `#ff7a17`): A warm orange used inside product illustrations and accent moments.
• **Sunset Soft** (`{colors.accent-sunset-soft}` — `#ffc285`): The lighter variant of the sunset accent.
• **Dusk Purple** (`{colors.accent-dusk}` — `#7c3aed`): Deep purple used inside product illustrations.
• **Twilight** (`{colors.accent-twilight}` — `#c4b5fd`): Soft violet — illustrative accent.
• **Breeze Blue** (`{colors.accent-breeze}` — `#a0c3ec`): Soft blue — illustrative accent.
• **Midnight** (`{colors.accent-midnight}` — `#0d1726`): Deep blue-black for illustrative backgrounds.

Surface

• **Canvas** (`{colors.canvas}` — `#0a0a0a`): The default near-black page background. The brand's only true surface.
• **Canvas Soft** (`{colors.canvas-soft}` — `#1a1c20`): A slightly lighter dark fill used for hovered nav items and tooltips.
• **Canvas Card** (`{colors.canvas-card}` — `#191919`): The charcoal card fill used inside product-feature cards.
• **Canvas Mid** (`{colors.canvas-mid}` — `#363a3f`): A mid-dark used for nested surfaces and code mockup backgrounds.
• **Hairline** (`{colors.hairline}` — `#212327`): 1 px solid dividers on dark surfaces.

Text

• **Ink** (`{colors.ink}` — `#ffffff`): Default text on canvas — pure white.
• **Ink Hover** (`{colors.ink-hover}` — `#fafaf7`): Slightly off-white used for hover states (filtered out per no-hover policy in component specs).
• **Body** (`{colors.body}` — `#dadbdf`): Secondary body text — supporting copy in lighter weight.
• **Body Mid / Mute** (`{colors.body-mid}` — `#7d8187`): Mid-emphasis body and mute text — captions, fine print.

Semantic

The brand doesn't surface a separate semantic palette on the marketing site. Validation cues use the white-on-canvas hierarchy.

Typography

Font Family

Two faces ladder the system:

1. **universalSans** — proprietary geometric sans used for every display, body, button, and link role. Weight 400 only on the marketing surface (the brand's restraint is part of the voice). Negative letter-spacing at display sizes is the visual signature.

2. **GeistMono** — used for uppercase section eyebrows, label captions, and metric counters. Positive tracking (1.2 – 1.4 px) at 12 – 14 px.

Hierarchy

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

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

| `{typography.display-xl}` | 96px | 400 | 96px | -2.4px | Maximum hero scale. |

| `{typography.display-lg}` | 72px | 400 | 72px | -1.8px | Sub-hero displays. |

| `{typography.display-md}` | 48px | 400 | 48px | -1.2px | Section headlines. |

| `{typography.display-sm}` | 32px | 400 | 36px | -0.6px | Card-cluster headings. |

| `{typography.display-xs}` | 20px | 400 | 28px | 0 | Inline displays. |

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

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

| `{typography.body-sm}` | 14px | 400 | 20px | 0 | Secondary body. |

| `{typography.caption-mono}` | 14px | 400 | 20px | 1.4px | Section eyebrow (GeistMono uppercase). |

| `{typography.caption-mono-sm}` | 12px | 400 | 16px | 1.2px | Small mono labels. |

| `{typography.button-md}` | 14px | 400 | 20px | 0 | Button label. |

Principles

• **Weight 400 for everything.** The brand never bolds. Negative tracking + size hierarchy do the emphasis work.
• **Tight negative tracking on display sizes.** Reverting to neutral tracking loses the precision feel.
• **GeistMono uppercase for eyebrows.** Tracked positively (1.4 px) to make the mono read as a code comment.

Note on Font Substitutes

universalSans is proprietary. Open-source substitutes:

• **Display + body** — *Inter* weight 400 with `-0.04em` to `-0.02em` letter-spacing at display sizes comes closest. *Geist* is the second-best option.
• **Mono** — *Geist Mono* is the documented brand companion; *JetBrains Mono* or *IBM Plex Mono* are alternates.

Layout

Spacing System

• **Base unit**: 4 px.
• **Tokens**: `{spacing.xxs}` 2 px · `{spacing.xs}` 4 px · `{spacing.sm}` 8 px · `{spacing.md}` 12 px · `{spacing.lg}` 16 px · `{spacing.xl}` 24 px · `{spacing.2xl}` 32 px · `{spacing.3xl}` 48 px · `{spacing.4xl}` 64 px.
• **Section padding**: hero / content bands at `{spacing.4xl}` 64 px on desktop.
• **Card interior padding**: `{spacing.xl}` 24 px.

Grid & Container

• Marketing content centres at ~1200 px.
• Product / announcement card grid: 2-up at desktop, 1-up at mobile.

Responsive Strategy

#### Breakpoints

| Name | Width | Key Changes |

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

| Mobile | < 768px | Hero scales 96 → 48 px; grids 1-up; hamburger nav. |

| Desktop | ≥ 768px | Full hero + 2-up grids. |

#### Touch Targets

Buttons render ~32 – 40 px tall (8 vertical padding + 20 line). Mobile inflates touch area to meet WCAG 44 × 44 px.

#### Image Behavior

The brand uses sparse SVG illustrations for product moments (Grok, Voice, API). No photography on the marketing surface.

Elevation & Depth

| Level | Treatment | Use |

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

| Level 0 — Flat | No shadow, no border. | Default. |

| Level 1 — Hairline | 1 px solid `{colors.hairline}` border. | Card chrome, button outlines (with translucent white). |

The brand uses no shadows. Hairline borders carry all elevation cues.

Shapes

Border Radius Scale

| Token | Value | Use |

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

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

| `{rounded.sm}` | 8px | Card chrome (the brand's `--radius` value). |

| `{rounded.pill}` | 9999px | Every button — the brand's universal interactive shape. |

| `{rounded.full}` | 9999px | Circular icon containers. |

Components

Buttons

**`button-primary`** — the rare white-filled pill (used on a single Sign Up CTA).

• Background `{colors.primary}` white, text `{colors.on-primary}` near-black, 1 px solid white border, label `{typography.button-md}`, padding `{spacing.xs} {spacing.md}`, shape `{rounded.pill}` 9999 px.

**`button-outline-on-dark`** — the canonical white-outline pill, used for every non-primary CTA.

• Background `{colors.canvas}` (transparent in practice — `rgba(0,0,0,0)`), text `{colors.ink}` white, 1 px solid `{colors.hairline}` border (translucent white at runtime), same typography / padding scale / shape.

**`button-outline-sm`** — the smaller outline pill used in card-cluster CTAs.

• Same as `button-outline-on-dark` with tighter padding `{spacing.xs} {spacing.md}`.

Cards & Containers

**`card-content`** — the default content card.

• Background `{colors.canvas-card}` (`#191919`), text `{colors.ink}`, 1 px solid `{colors.hairline}` border, padding `{spacing.xl}`, shape `{rounded.sm}` 8 px.

**`card-feature-product`** — the product-feature card (Grok / Voice / API).

• Same chrome as `card-content`. Hosts an SVG illustration + headline + body + outline pill CTA.

Inputs & Forms

**`text-input`** — the standard text input on dark.

• Background `{colors.canvas-soft}`, text `{colors.ink}`, 1 px solid `{colors.hairline}`, body in `{typography.body-md}`, padding `{spacing.md} {spacing.lg}`, shape `{rounded.sm}` 8 px.

Navigation

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

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.md} {spacing.xl}`.

**`nav-link`** — link items inside nav.

• Text `{colors.ink}`, set in `{typography.body-sm}`.

**`footer`** — the footer band.

• Background `{colors.canvas}`, text `{colors.body}`, padding `{spacing.3xl} {spacing.xl}`. Body in `{typography.body-sm}`.

Signature Components

**`hero-band`** — the dark hero with massive display headline.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.4xl} {spacing.xl}`. Headline in `{typography.display-xl}` (96 px weight 400 with `-2.4 px` tracking).

**`content-band`** — the standard content section.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.4xl} {spacing.xl}`. Section headline in `{typography.display-md}` preceded by a `{typography.caption-mono}` UPPERCASE GeistMono eyebrow.

**`eyebrow-mono`** — the uppercase tracked GeistMono label above every section headline.

• Text `{colors.ink}`, set in `{typography.caption-mono}`. The brand's signature label style.

**`divider-hairline`** — the 1 px line between section bands.

• 1 px solid `{colors.hairline}`.

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.canvas}` (`#0a0a0a`) as the only page surface. The brand is dark-canvas only.
• Set hero headlines in `{typography.display-xl}` Universal Sans weight 400 with `-2.4 px` tracking. The precision IS the voice.
• Use `{rounded.pill}` 9999 px on every interactive element. The pill is the brand.
• Pair Universal Sans (sentence-case) with GeistMono UPPERCASE (eyebrows, labels, metric counters).
• Use white-translucent borders for outline buttons — the brand never uses solid white borders on its outline pill.

Don't

• Don't introduce a light-mode counterpart. xAI is dark-canvas only.
• Don't bold display headlines. Weight 400 is the entire scale.
• Don't use filled buttons broadly. The brand uses outline pills almost exclusively; one Sign Up white-filled pill is the rare exception.
• Don't drop a drop-shadow on cards. Hairline borders carry elevation.
• Don't substitute Universal Sans with a generic geometric sans without adjusting letter-spacing. The negative tracking is part of the brand.

개요

xAI는 Elon Musk의 최첨단 AI 연구소이며 웹 사이트는 검은색에 가까운 캔버스 `{colors.canvas}`(`#0a0a0a`) 가장자리에서 가장자리까지, 흰색 윤곽선 알약을 모든 대화형 요소로 사용하고 모든 디스플레이 헤드라인을 무게 400으로 표시하는 단일 독점 기하학적 산세 `Universal Sans`와 같은 공학적 제한을 적용한 자세를 취합니다. 그라데이션 영웅도, 분위기 있는 배경도, 제품 스크린샷도 없습니다. 이 브랜드는 SaaS 마케팅 사이트라기보다는 자신의 작업을 발표하는 연구소라는 자신 있게 희박한 것으로 읽혀집니다.

유형은 두 번째 결정적인 목소리입니다. 'Universal Sans'는 공격적인 네거티브 추적(96픽셀에서 '-2.4px', 디스플레이 래더를 통해 축소)을 통해 무게 400(일반)의 모든 디스플레이를 전달합니다. 기술 라벨, 눈썹 및 미터법 카운터의 경우 브랜드는 'Geist Mono'(대문자, 1.4px 포지티브 추적)를 쌍으로 사용합니다. 모든 섹션 눈썹은 마케팅 라벨보다 코드 주석으로 읽혀집니다.

모든 대화형 요소는 1px 흰색 반투명 ​​테두리 `rgba(255, 255, 255, 0.25)`가 있는 알약(`{rounded.pill}` 9999px)입니다. 버튼 모양은 절대 변하지 않습니다. 동일한 반투명 흰색 알약에는 "Grok 사용해 보기", "공지 사항 읽기", "사용자 정의 음성", "지금 가입" 및 모든 "읽기" 앵커가 포함되어 있습니다. 알약은 전체 모양 시스템입니다.

**주요 특징:**

• 전체 대화형 어휘로서 흰색 윤곽선 알약이 있는 검정색에 가까운 단일 캔버스(`{colors.canvas}` `#0a0a0a`).
• 디스플레이용 Universal Sans 웨이트 400, 라벨용 Geist Mono 대문자 추적 - 양면 대비가 브랜드 보이스입니다.
• 모든 버튼은 반투명 흰색 테두리가 있는 `{rounded.pill}` 윤곽선입니다. 브랜드는 하나의 변형(가입 시 흰색으로 채워진 알약)을 제외하고는 채워진 CTA를 사용하지 않습니다.
• 카드는 가는선 테두리가 있는 약간 더 밝은 `{colors.canvas-card}`(`#191919`) 채우기에 촘촘한 `{rounded.sm}` 8픽셀 직사각형입니다. 그림자가 없습니다.
• 일몰-주황색/황혼-보라색/황혼-보라색/미풍-파란색의 차분한 액센트 팔레트는 디자인 토큰에 있지만 주요 마케팅 표면에는 거의 나타나지 않습니다. 제품 일러스트레이션/아이콘용으로 예약되어 있습니다.
• 디스플레이 헤드라인의 대규모 음수 문자 간격(96픽셀에서 `-2.4픽셀`)은 타이포그래피에 정확하고 모아진 모양을 제공합니다.

색상

브랜드 및 액센트

• **흰색** (`{colors.primary}` — `#ffffff`): 브랜드의 기본 "색상" — 버튼 윤곽선, 버튼 기본 채우기, 모든 표시 텍스트로 사용됩니다. 브랜드의 시그니처는 검정색에 가까운 흰색입니다.
• **Sunset Orange** (`{colors.accent-sunset}` — `#ff7a17`): 제품 일러스트레이션과 강조 부분에 사용되는 따뜻한 오렌지색입니다.
• **Sunset Soft** (`{colors.accent-sunset-soft}` — `#ffc285`): 일몰 악센트의 더 밝은 변형입니다.
• **Dusk Purple** (`{colors.accent-dusk}` — `#7c3aed`): 제품 일러스트레이션 내부에 진한 보라색이 사용되었습니다.
• **Twilight** (`{colors.accent-twilight}` — `#c4b5fd`): 부드러운 보라색 — 예시적인 악센트.
• **브리즈 블루** (`{colors.accent-breeze}` — `#a0c3ec`): 소프트 블루 — 일러스트 액센트.
• **Midnight** (`{colors.accent-midnight}` — `#0d1726`): 설명용 배경을 위한 진한 파란색-검정색입니다.

표면

• **캔버스** (`{colors.canvas}` — `#0a0a0a`): 검정색에 가까운 기본 페이지 배경입니다. 브랜드의 유일한 진정한 표면.
• **캔버스 소프트**(`{colors.canvas-soft}` — `#1a1c20`): 마우스를 올려 놓은 탐색 항목과 툴팁에 사용되는 약간 더 밝은 어두운 채우기입니다.
• **캔버스 카드** (`{colors.canvas-card}` — `#191919`): 제품 기능 카드 내부에 사용되는 목탄 카드 채우기입니다.
• **Canvas Mid** (`{colors.canvas-mid}` — `#363a3f`): 중첩된 표면 및 코드 모형 배경에 사용되는 중간 어둠입니다.
• **헤어라인**(`{colors.hairline}` — `#212327`): 어두운 표면의 1px 솔리드 구분선입니다.

텍스트

• **잉크**(`{colors.ink}` — `#ffffff`): 캔버스의 기본 텍스트 — 순백색입니다.
• **잉크 호버**(`{colors.ink-hover}` — `#fafaf7`): 호버 상태에 사용되는 약간 황백색입니다(구성 요소 사양의 호버 금지 정책에 따라 필터링됨).
• **본문**(`{colors.body}` — `#dadbdf`): 보조 본문 텍스트 — 더 가벼운 무게로 사본을 지원합니다.
• **본문 중간/음소거** (`{colors.body-mid}` — `#7d8187`): 중간 강조 본문 및 음소거 텍스트 — 캡션, 작은 글씨.

의미론

브랜드는 마케팅 사이트에 별도의 의미 체계 팔레트를 표시하지 않습니다. 검증 단서는 캔버스에 흰색 계층 구조를 사용합니다.

타이포그래피

글꼴 계열

두 얼굴이 시스템에 사다리를 추가합니다.

1. **universalSans** — 모든 디스플레이, 본문, 버튼 및 링크 역할에 사용되는 독점 기하학적 산입니다. 마케팅 표면에만 무게 400이 있습니다(브랜드의 자제도 목소리의 일부입니다). 디스플레이 크기의 음수 문자 간격은 시각적 특징입니다.

2. **GeistMono** — 대문자 섹션 눈썹, 라벨 캡션 및 미터법 카운터에 사용됩니다. 12~14px에서 포지티브 추적(1.2~1.4px).

계층 구조

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

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

| `{typography.display-xl}` | 96px | 400 | 96px | -2.4px | 최대 영웅 규모. |

| `{typography.display-lg}` | 72px | 400 | 72px | -1.8px | 서브 히어로가 표시됩니다. |

| `{타이포그래피.디스플레이

概要

xAI はイーロン・マスクのフロンティア AI ラボであり、ウェブサイトはその姿勢を巧みに設計された抑制で身に着けています。黒に近いキャンバス「{colors.canvas}」 (「#0a0a0a」) の端から端まで、すべてのインタラクティブ要素として白いアウトラインの錠剤が使用され、ウェイト 400 ですべての表示見出しを運ぶ単一の独自の幾何学的なサンズなしの「ユニバーサル サンズ」があります。グラデーションのヒーローも雰囲気のある背景もありません。製品のスクリーンショット。このブランドは、SaaS マーケティング サイトではなく、自社の研究を発表する研究機関であると自信を持って表現しています。

タイプは2番目の決定的な音声です。 「Universal Sans」は、すべてのディスプレイをウェイト 400 (標準) で、積極的なネガティブ トラッキング (96 ピクセルで「-2.4 ピクセル」、ディスプレイ ラダーを通じて縮小) を備えています。テクニカル ラベル、眉毛、およびメトリクス カウンターについては、ブランドは「Geist Mono」(大文字、1.4 ピクセルのポジティブ トラッキング) を組み合わせています。眉毛の各セクションは、マーケティング ラベルというよりもコード コメントとして読み取られます。

すべてのインタラクティブ要素は、1 ピクセルの白半透明の境界線「rgba(255, 255, 255, 0.25)」を持つ錠剤 (`{rounded.pill}` 9999 ピクセル) です。ボタンの形状は決して変わりません。同じ半透明の白い錠剤には、「Grok を試してください」、「お知らせを読んでください」、「カスタム音声」、「今すぐサインアップしてください」、およびすべての「読む」アンカーが表示されます。錠剤は形状システム全体です。

**主な特徴:**

• インタラクティブな語彙全体として白い輪郭の錠剤を含む、黒に近い単一のキャンバス (`{colors.canvas}` `#0a0a0a`)。
• ディスプレイにはユニバーサル サンズ ウェイト 400、ラベルには Geist Mono 大文字を追跡 - 2 つの面のコントラストがブランドの声です。
• すべてのボタンは、半透明の白い境界線が付いた「{rounded.pill}」のアウトラインです。このブランドは、1 つのバリエーション (サインアップ時に白で塗りつぶされた錠剤) を除いて、塗りつぶされた CTA を使用することはありません。
• カードはタイトな `{rounded.sm}` の 8 ピクセルの長方形で、わずかに明るい `{colors.canvas-card}` (`#191919`) でヘアラインの境界線で塗りつぶされています。影はありません。
• サンセットオレンジ / 夕暮れパープル / トワイライトバイオレット / ブリーズブルーの落ち着いたアクセントパレットはデザイントークンに含まれていますが、主要なマーケティング面に現れることはほとんどありません - 製品のイラスト/アイコン用に予約されています。
• ディスプレイ見出しの大きなマイナスの文字間隔 (96 ピクセルで「-2.4 ピクセル」) により、タイポグラフィーに正確でまとまった外観が与えられます。

色

ブランドとアクセント

• **白** (`{colors.primary}` — `#ffffff`): ブランドの主要な「色」 — ボタンの輪郭、ボタンの主要な塗りつぶし、すべての表示テキストとして使用されます。ブランドの特徴は黒に近い白です。
• **サンセット オレンジ** (`{colors.accent-sunset}` — `#ff7a17`): 製品のイラストやアクセントの瞬間に使用される温かみのあるオレンジ。
• **サンセット ソフト** (`{colors.accent-sunset-soft}` — `#ffc285`): サンセット アクセントの明るいバージョン。
• **ダスク パープル** (`{colors.accent-dusk}` — `#7c3aed`): 製品イラスト内で使用されている深い紫。
• **トワイライト** (`{colors.accent-twilight}` — `#c4b5fd`): 柔らかな紫 — 例示的なアクセント。
• **ブリーズ ブルー** (`{colors.accent-breeze}` — `#a0c3ec`): ソフト ブルー — 例示的なアクセント。
• **Midnight** (`{colors.accent-midnight}` — `#0d1726`): 説明的な背景用の深い青と黒。

表面

• **キャンバス** (`{colors.canvas}` — `#0a0a0a`): デフォルトのほぼ黒のページ背景。ブランドの唯一の真の表面。
• **Canvas Soft** (`{colors.canvas-soft}` — `#1a1c20`): ホバーされたナビゲーション項目とツールチップに使用されるわずかに明るい暗い塗りつぶし。
• **キャンバス カード** (`{colors.canvas-card}` — `#191919`): 製品機能カード内で使用される木炭カードの塗りつぶし。
• **Canvas Mid** (`{colors.canvas-mid}` — `#363a3f`): ネストされたサーフェスとコード モックアップの背景に使用されるミッドダーク。
• **ヘアライン** (`{colors.hairline}` — `#212327`): 暗い表面上の 1 ピクセルのソリッド ディバイダー。

テキスト

• **インク** (`{colors.ink}` — `#ffffff`): キャンバス上のデフォルトのテキスト — 純白。
• **インク ホバー** (`{colors.ink-hover}` — `#fafaf7`): ホバー状態に使用されるわずかにオフホワイト (コンポーネント仕様のノーホバー ポリシーに従ってフィルタリングされます)。
• **本文** (`{colors.body}` — `#dadbdf`): セカンダリ本文テキスト — 軽量のコピーをサポートします。
• **Body Mid / Mute** (`{colors.body-mid}` — `#7d8187`): 本文中強調およびミュートテキスト — キャプション、細字。

セマンティック

このブランドは、マーケティング サイト上に別個のセマンティック パレットを表示しません。検証キューでは、キャンバス上の白の階層が使用されます。

タイポグラフィー

フォントファミリー

2 つの面がシステムを梯子します。

1. **universalSans** — すべてのディスプレイ、本体、ボタン、リンクの役割に使用される独自の幾何学的な Sans。マーケティング面でのみ 400 を重み付けします (ブランドの抑制は声の一部です)。表示サイズにおける負の文字間隔は、視覚的な特徴です。

2. **GeistMono** — 大文字セクションの眉毛、ラベル キャプション、およびメトリック カウンターに使用されます。 12 ～ 14 ピクセルのポジティブ トラッキング (1.2 ～ 1.4 ピクセル)。

階層

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

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

| `{typography.display-xl}` | 96ピクセル | 400 | 96ピクセル | -2.4ピクセル |ヒーローの最大スケール。 |

| `{typography.display-lg}` | 72ピクセル | 400 | 72ピクセル | -1.8ピクセル |サブヒーローが表示されます。 |

| `{タイポグラフィ.ディスプレイ