Composio

Overview

Composio's marketing site reads like a serious developer-infrastructure brand — closer to Vercel or Stripe Docs in atmosphere than to a typical AI-tools startup. The base canvas is a near-black `{colors.canvas}` (#0f0f0f) holding white type and a single voltage of **deep electric blue** (`{colors.primary}` — #0007cd) carrying every primary CTA, brand wordmark, and atmospheric spotlight glow that backs the homepage hero.

Type runs **abcDiatype** as the single sans family across display, body, navigation, and captions. Display sits at weight 500 — confident but not bombastic. Code blocks and terminal mockups switch to JetBrains Mono.

The page rhythm is monolithic: dark canvas top to bottom with subtle elevation steps via card surfaces. The brand's strongest visual signature is a **four-pane terminal-style mockup** — a 2×2 grid of dark code/output panels with a central blue spotlight glow behind them.

**Key Characteristics:**

• Single accent: `{colors.primary}` (#0007cd) for primary CTAs, wordmark, spotlight glows.
• Single sans family: abcDiatype carries everything except code (JetBrains Mono).
• Dark monolithic canvas: `{colors.canvas}` runs top to bottom; depth from `{colors.surface-card}` and `{colors.surface-card-elevated}` brightness steps.
• Terminal-mockup hero: 2×2 grid of code/output panes is the brand signature.
• Compact pill geometry: CTAs sit at `{rounded.md}` (8px), not full pills — developer-tool dialect.
• Spotlight-glow atmospheric backdrop: a radial blue glow centered behind hero content.
• 96px section rhythm.

Colors

Brand & Accent

• **Composio Blue** (`{colors.primary}` — #0007cd): Primary CTAs, wordmark, spotlight glow center.
• **Composio Blue Active** (`{colors.primary-active}` — #0005a3): Press state.
• **Spotlight Glow Tone** (`{colors.primary-glow}` — #1a26ff): Brighter blue used inside radial atmospheric glows.
• **Accent Cyan** (`{colors.accent-cyan}` — #00d4ff): Sparingly on data-flow visualizations.
• **Accent Violet** (`{colors.accent-violet}` — #7b3aed): Inside specific product illustrations only.

Surface

• **Canvas** (`{colors.canvas}` — #0f0f0f): Page floor — near-black.
• **Canvas Deep** (`{colors.canvas-deep}` — #000000): Pure black for terminal mockup grids and code blocks.
• **Surface Card** (`{colors.surface-card}` — #181818): Default content card.
• **Surface Card Elevated** (`{colors.surface-card-elevated}` — #222222): Terminal panes, secondary buttons.
• **Surface Strong** (`{colors.surface-strong}` — #2a2a2a): Dropdown menus.

Hairlines

• **Hairline** (`{colors.hairline}` — #222222): Default 1px divider.
• **Hairline Soft** (`{colors.hairline-soft}` — #1a1a1a): Lighter divider.
• **Hairline Strong** (`{colors.hairline-strong}` — #333333): Stronger panel outline.

Text

• **Ink** (`{colors.ink}` — #ffffff): Display headlines.
• **Body** (`{colors.body}` — #a8a8a8): Default running-text — soft gray.
• **Body Strong** (`{colors.body-strong}` — #ffffff): Same as ink.
• **Muted** (`{colors.muted}` — #888888): Sub-titles, breadcrumbs.
• **Muted Soft** (`{colors.muted-soft}` — #666666): Disabled text.
• **On Primary** (`{colors.on-primary}` — #ffffff): White text on blue CTAs.

Semantic

• **Success** (`{colors.semantic-success}` — #33d17a): "Online", "active" indicators.
• **Error** (`{colors.semantic-error}` — #ff4d4d): Validation errors.

Typography

Font Family

The system runs **abcDiatype** (Lineto) across every text role. Code blocks switch to **JetBrains Mono**. Fallback: `ui-sans-serif, system-ui, sans-serif`.

Hierarchy

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

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

| `{typography.display-mega}` | 72px | 500 | 1.05 | -2.16px | Homepage hero h1 |

| `{typography.display-xl}` | 56px | 500 | 1.05 | -1.68px | Subsidiary heroes |

| `{typography.display-lg}` | 44px | 500 | 1.1 | -1.32px | Section heads |

| `{typography.display-md}` | 32px | 500 | 1.15 | -0.96px | Sub-section heads |

| `{typography.display-sm}` | 24px | 500 | 1.25 | -0.5px | Card group titles |

| `{typography.title-md}` | 18px | 600 | 1.4 | 0 | Component titles |

| `{typography.title-sm}` | 16px | 600 | 1.4 | 0 | Toolkit card titles |

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

| `{typography.body-sm}` | 14px | 400 | 1.5 | 0 | Footer body |

| `{typography.caption}` | 13px | 400 | 1.4 | 0 | Photo captions |

| `{typography.caption-uppercase}` | 11px | 600 | 1.4 | 0.88px | Section labels, badge pills |

| `{typography.code}` | 13px | 400 | 1.5 | 0 | Code blocks — JetBrains Mono |

| `{typography.button}` | 14px | 500 | 1.0 | 0 | CTA pill labels |

| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu |

Principles

• **Display weight stays at 500.** Confident but not display-bold.
• **abcDiatype across every role.** No display/body family split.
• **JetBrains Mono on every code surface.**

Note on Font Substitutes

abcDiatype is a Lineto licensed typeface. Open-source substitute: **Inter** at weight 500 with letter-spacing -1.5%.

Layout

Spacing System

• **Base unit:** 4px.
• **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.base}` 16px · `{spacing.md}` 20px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
• **Section padding:** `{spacing.section}` (96px) for major bands.

Grid & Container

• Max content width: ~1200px.
• Editorial body: 12-column grid.
• Terminal mockup grid: 2×2 equal-size panes.
• Toolkit grid: 4-up at desktop, 2-up tablet, 1-up mobile.
• Footer: 5-column at desktop.

Whitespace Philosophy

The dark canvas creates its own depth — whitespace can stay tight without feeling crowded. 96px between bands; 24px between cards inside a band.

Elevation & Depth

The system uses **brightness-step elevation**: surfaces step up in brightness instead of casting drop shadows. Combined with subtle radial blue glows, this creates a focused dark-mode atmosphere.

| Level | Treatment | Use |

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

| Flat (canvas) | `{colors.canvas}` (#0f0f0f) | Body bands, footer |

| Recessed | `{colors.canvas-deep}` (#000000) | Terminal mockup grid background, code blocks |

| Card | `{colors.surface-card}` (#181818) | Default content cards |

| Card elevated | `{colors.surface-card-elevated}` (#222222) | Terminal panes, secondary buttons |

| Atmospheric glow | Radial gradient using `{colors.primary-glow}` | Hero spotlight backdrop |

Decorative Depth

• **Spotlight glow backdrops** — radial blue gradient centered behind hero content.
• **Terminal-pane brightness ladder** — 2×2 mockup uses canvas-deep outer + surface-card-elevated panes.

Shapes

Border Radius Scale

| Token | Value | Use |

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

| `{rounded.none}` | 0px | Reserved |

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

| `{rounded.sm}` | 6px | Compact rows |

| `{rounded.md}` | 8px | CTA buttons, form inputs |

| `{rounded.lg}` | 12px | Toolkit cards, code blocks, terminal panes |

| `{rounded.xl}` | 16px | Feature cards, terminal mockup grids |

| `{rounded.pill}` | 9999px | Section-label badges |

| `{rounded.full}` | 9999px | Avatar plates (rare) |

Compact developer-ergonomic radii — 8px CTAs, 12-16px cards. Signals "developer tool" rather than "consumer brand."

Components

Top Navigation

**`top-nav-dark`** — Default top nav. Background `{colors.canvas}`, text `{colors.body-strong}`, height 64px. Layout: Composio wordmark left, primary horizontal menu (Product / Toolkits / Docs / Pricing / Customers / Blog), GitHub stars + Sign In + "Get started" right.

Buttons

**`button-primary`** — The signature Composio Blue CTA. Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button}` (14px / 500), padding 10px × 18px, height 40px, rounded `{rounded.md}` (8px).

**`button-primary-active`** — Press state. Background `{colors.primary-active}`.

**`button-secondary-dark`** — Surface-elevated secondary. Background `{colors.surface-card-elevated}`, text `{colors.body-strong}`.

**`button-outline`** — Transparent with 1px hairline-strong border.

**`button-tertiary-text`** — Inline text link.

Hero & Atmospheric

**`hero-band`** — Homepage hero. Background `{colors.canvas}`, full-width display headline in `{typography.display-mega}` (72px / 500), subhead, two CTAs, and a spotlight-glow backdrop emanating from behind the centered terminal-mockup grid.

**`terminal-mockup-grid`** — The brand's strongest visual signature. 2×2 grid of dark code/output panels inside a `{rounded.xl}` (16px) container. Background `{colors.canvas-deep}`, padding 32px, gap 16px.

**`terminal-pane`** — Individual code/output panel inside the mockup grid. Background `{colors.surface-card}`, text `{colors.body}` in `{typography.code}`, rounded `{rounded.lg}` (12px), padding 20px.

**`spotlight-glow-card`** — Large feature card with centered display headline and a radial blue glow behind it. Background `{colors.surface-card}`, text `{colors.body-strong}` in `{typography.display-md}`, rounded `{rounded.xl}`, padding 48px.

Cards

**`feature-card`** — 3-up benefit grid. Background `{colors.surface-card}`, text `{colors.body}`, type `{typography.title-md}`, rounded `{rounded.xl}`, padding 28px.

**`toolkit-card`** — 4-up toolkit grid (Slack, GitHub, Stripe, Notion, Linear, etc.). Background `{colors.surface-card}`, text `{colors.body-strong}`, type `{typography.title-sm}`, rounded `{rounded.lg}`, padding 20px. 40px square `{component.toolkit-icon}` top, toolkit name, one-line description.

**`toolkit-icon`** — Square icon plate. Background `{colors.surface-card-elevated}`, rounded `{rounded.md}`, 40px size.

**`testimonial-card`** — Quote card. Background `{colors.surface-card}`, text `{colors.body}`, rounded `{rounded.lg}`, padding 24px.

Code

**`code-block`** — Inline code/terminal block. Background `{colors.canvas-deep}`, text `{colors.body}` in `{typography.code}`, rounded `{rounded.lg}`, padding 20px.

Forms

**`text-input`** — Background `{colors.surface-card}`, text `{colors.body-strong}`, rounded `{rounded.md}` (8px), padding 12px × 16px, height 44px.

**`search-input`** — Compact search field. Same surface and radius, smaller padding, 40px height.

Tags & Badges

**`badge-pill`** — Small uppercase pill. Background `{colors.surface-card-elevated}`, text `{colors.body-strong}`, type `{typography.caption-uppercase}`, rounded `{rounded.pill}`, padding 4px × 10px.

CTA / Footer

**`cta-band-spotlight`** — Pre-footer band. Background `{colors.canvas}` with centered radial spotlight glow. Display headline + single primary CTA pill. 96px padding.

**`footer-dark`** — Closing footer. Background `{colors.canvas}`, text `{colors.body}`. 5-column link list. 64×48px padding.

**`footer-link`** — Background transparent, text `{colors.body}`, type `{typography.body-sm}`.

Do's and Don'ts

Do

• Reserve `{colors.primary}` for primary CTAs, wordmark, and spotlight glows.
• Use `{rounded.md}` (8px) for every CTA — not full pills.
• Use brightness-step ladder for elevation; avoid drop shadows.
• Pair every hero with a centered radial blue spotlight glow.
• Render code, CLI commands in JetBrains Mono via `{typography.code}`.
• Use the 2×2 terminal-mockup grid as the homepage hero anchor.

Don't

• Don't introduce a secondary brand color. Cyan and violet are illustrative-only.
• Don't use full pills on CTAs.
• Don't drop display weight to 400.
• Don't add drop shadow tiers.
• Don't use canvas-deep (#000000) outside terminal/code surfaces.
• Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA color is what appears on actual page CTAs.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes |

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

| Mobile | < 640px | Hero h1 72→36px; terminal mockup grid collapses to single pane; toolkit grid 1-up; nav hamburger. |

| Tablet | 640–1024px | Hero h1 56px; terminal mockup grid stays 2×2; toolkit grid 2-up. |

| Desktop | 1024–1280px | Full hero h1 72px; full 2×2 terminal mockup; toolkit grid 4-up. |

| Wide | > 1280px | Content caps at 1200px. |

Touch Targets

• Primary CTA at 40px height — at WCAG AA, padded for AAA.
• Search input at 40px.

Collapsing Strategy

• Top nav switches to hamburger below 768px.
• Terminal mockup 2×2 grid collapses to a single pane on mobile.
• Toolkit grid: 4-up → 2-up → 1-up.
• Hero spotlight glow stays at every breakpoint.

Iteration Guide

1. Focus on a single component at a time.

2. CTAs default to `{rounded.md}` (8px). Cards use `{rounded.lg}` or `{rounded.xl}`.

3. Variants live as separate entries inside `components:`.

4. Use `{token.refs}` everywhere — never inline hex.

5. Hover state never documented.

6. abcDiatype 500 for display, 400/600 for body. JetBrains Mono on every code surface.

7. Composio Blue stays scarce.

Known Gaps

• abcDiatype is licensed; Inter is the substitute.
• Animation timings out of scope.
• In-product surfaces (toolkit dashboards, agent playground) are behind login walls.
• Form validation states beyond focus not visible on captured surfaces.

개요

Composio의 마케팅 사이트는 일반적인 AI 도구 스타트업보다 분위기 면에서 Vercel 또는 Stripe Docs에 더 가까운 심각한 개발자 인프라 브랜드처럼 읽혀집니다. 기본 캔버스는 흰색 유형과 **딥 일렉트릭 블루**(`{colors.primary}` — #0007cd)의 단일 전압을 포함하는 검정색에 가까운 `{colors.canvas}`(#0f0f0f)로 모든 기본 CTA, 브랜드 워드마크 및 홈페이지 영웅을 뒷받침하는 분위기 있는 스포트라이트 광선을 전달합니다.

Type은 디스플레이, 본문, 탐색, 캡션 전체에서 **abcDiatype**을 단일 산세 계열로 실행합니다. 디스플레이의 무게는 500입니다. 자신감은 있지만 과격하지는 않습니다. 코드 블록과 터미널 모형이 JetBrains Mono로 전환됩니다.

페이지 리듬은 단일체입니다. 카드 표면을 통해 미묘한 높이 단계가 있는 위에서 아래로 어두운 캔버스입니다. 브랜드의 가장 강력한 시각적 특징은 **4창 터미널 스타일 모형**입니다. 2×2 그리드의 어두운 코드/출력 패널과 그 뒤에 중앙 파란색 스포트라이트가 있습니다.

**주요 특징:**

• 단일 악센트: 기본 CTA, 워드마크, 스포트라이트 글로우를 위한 `{colors.primary}`(#0007cd).
• 단일 산세 제품군: abcDiatype은 코드(JetBrains Mono)를 제외한 모든 것을 전달합니다.
• 어두운 모놀리식 캔버스: `{colors.canvas}`는 위에서 아래로 실행됩니다. `{colors.surface-card}` 및 `{colors.surface-card-elevated}` 밝기 단계의 깊이입니다.
• 터미널 모형 영웅: 코드/출력 창의 2×2 그리드가 브랜드 시그니처입니다.
• 컴팩트한 알약 형상: CTA는 전체 알약이 아닌 `{rounded.md}`(8px)에 위치합니다. — 개발자 도구 방언입니다.
• 스포트라이트 글로우 대기 배경: 영웅 콘텐츠 뒤에 중앙에 방사형 파란색 글로우가 있습니다.
• 96px 섹션 리듬.

색상

브랜드 및 액센트

• **Composio Blue** (`{colors.primary}` — #0007cd): 기본 CTA, 워드마크, 스포트라이트 글로우 센터.
• **Composio Blue Active** (`{colors.primary-active}` — #0005a3): 프레스 상태.
• **스포트라이트 글로우 톤** (`{colors.primary-glow}` — #1a26ff): 방사형 대기 글로우 내부에 사용되는 더 밝은 파란색입니다.
• **Accent Cyan** (`{colors.accent-yan}` — #00d4ff): 데이터 흐름 시각화에 드물게 사용됩니다.
• **Accent Violet** (`{colors.accent-violet}` — #7b3aed): 특정 제품 그림 내부에만 해당됩니다.

표면

• **캔버스** (`{colors.canvas}` — #0f0f0f): 페이지 바닥 — 검정색에 가깝습니다.
• **Canvas Deep** (`{colors.canvas-deep}` — #000000): 터미널 모형 그리드 및 코드 블록을 위한 순수한 검정색입니다.
• **Surface 카드**(`{colors.surface-card}` — #181818): 기본 콘텐츠 카드.
• **Surface Card Elevated** (`{colors.surface-card-elevated}` — #222222): 터미널 창, 보조 버튼.
• **Surface Strong** (`{colors.surface-strong}` — #2a2a2a): 드롭다운 메뉴.

헤어라인

• **헤어라인** (`{colors.hairline}` — #222222): 기본 1px 구분선입니다.
• **Hairline Soft** (`{colors.hairline-soft}` — #1a1a1a): 더 가벼운 구분선.
• **Hairline Strong** (`{colors.hairline-strong}` — #333333): 패널 윤곽선이 더 강해졌습니다.

텍스트

• **잉크** (`{colors.ink}` — #ffffff): 헤드라인을 표시합니다.
• **본문**(`{colors.body}` — #a8a8a8): 기본 실행 텍스트 — 부드러운 회색.
• **Body Strong** (`{colors.body-strong}` — #ffffff): 잉크와 동일합니다.
• **음소거됨** (`{colors.muted}` — #888888): 부제목, 탐색경로.
• **음소거 소프트**(`{colors.muted-soft}` — #666666): 비활성화된 텍스트입니다.
• **On Primary** (`{colors.on-primary}` — #ffffff): 파란색 CTA에 흰색 텍스트입니다.

의미론

• **성공** (`{colors.semantic-success}` — #33d17a): "온라인", "활성" 표시기.
• **오류** (`{colors.semantic-error}` — #ff4d4d): 유효성 검사 오류.

타이포그래피

글꼴 계열

시스템은 모든 텍스트 역할에서 **abcDiatype**(Lineto)을 실행합니다. 코드 블록은 **JetBrains Mono**로 전환됩니다. 대체: `ui-sans-serif, system-ui, sans-serif`.

계층 구조

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

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

| `{typography.display-mega}` | 72px | 500 | 1.05 | -2.16px | 홈페이지 히어로 h1 |

| `{typography.display-xl}` | 56px | 500 | 1.05 | -1.68px | 자회사 영웅 |

| `{typography.display-lg}` | 44px | 500 | 1.1 | -1.32px | 부문장 |

| `{typography.display-md}` | 32px | 500 | 1.15 | -0.96px | 하위 부문장 |

| `{typography.display-sm}` | 24px | 500 | 1.25 | -0.5px | 카드 그룹 제목 |

| `{typography.title-md}` | 18px | 600 | 1.4 | 0 | 구성 요소 제목 |

| `{typography.title-sm}` | 16px | 600 | 1.4 | 0 | 툴킷 카드 제목 |

| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | 기본 본문 |

| `{typography.body-sm}` | 14px | 400 | 1.5 | 0 | 바닥글 본문 |

| `{typography.caption}` | 13px | 400 | 1.4 | 0 | 사진 캡션 |

| `{typography.caption-uppercase}` | 11px | 600 | 1.4 | 0.88px | 섹션 라벨, 배지 알약 |

| `{typography.code}` | 13px | 400 | 1.5 | 0 | 코드 블록 — JetBrains Mono |

| `{typography.button}` | 14px | 500 | 1.0 | 0 | CTA 알약 라벨 |

| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | 상단 탐색 메뉴 |

원칙

• **디스플레이 무게는 500으로 유지됩니다.** 자신감이 있지만 굵게 표시되지는 않습니다.
• **모든 역할에 걸쳐 abcDiatype.** 디스플레이/바디 패밀리 분할이 없습니다.
• **모든 코드 표면에 JetBrains Mono가 탑재되어 있습니다.*

概要

Composio のマーケティング サイトは、本格的な開発者インフラストラクチャ ブランドのように見えます。典型的な AI ツールのスタートアップというよりも、雰囲気としては Vercel や Stripe Docs に近いです。ベース キャンバスは、白に近いタイプの`{colors.canvas}` (#0f0f0f) で、**深いエレクトリック ブルー**の単一電圧 (`{colors.primary}` — #0007cd) が含まれており、すべての主要な CTA、ブランド ワードマーク、およびホームページのヒーローを支える雰囲気のあるスポットライトの輝きが含まれています。

Type は、**abcDiatype** をディスプレイ、本文、ナビゲーション、キャプション全体にわたって単一のファミリーとして実行します。ディスプレイのウェイトは 500 です。自信に満ちていますが、大げさではありません。コード ブロックと端末モックアップは JetBrains Mono に切り替わります。

ページのリズムは一枚岩です。暗いキャンバスの上から下まで、カードの表面を介して微妙な高低差があります。このブランドの最も強力な視覚的特徴は、**4 ペインのターミナル スタイルのモックアップ**です。これは、2×2 グリッドの暗いコード/出力パネルと、その後ろに中央の青いスポットライトが輝くものです。

**主な特徴:**

• 単一アクセント: プライマリ CTA、ワードマーク、スポットライトのグロー用の `{colors.primary}` (#0007cd)。
• 単一のファミリーなし: abcDiatype はコード (JetBrains Mono) 以外のすべてを保持します。
• ダークモノリシックキャンバス: `{colors.canvas}` は上から下まで続きます。 `{colors.surface-card}` および `{colors.surface-card-elevated}` の明るさステップからの深度。
• ターミナル モックアップのヒーロー: コード/出力ペインの 2×2 グリッドがブランドの特徴です。
• コンパクトな錠剤のジオメトリ: CTA は完全な錠剤ではなく、`{rounded.md}` (8px) に配置されます (開発者ツールの方言)。
• スポットライト グローの大気背景: ヒーロー コンテンツの背後にある放射状の青い輝き。
• 96pxセクションリズム。

色

ブランドとアクセント

• **コンポジオ ブルー** (`{colors.primary}` — #0007cd): プライマリ CTA、ワードマーク、スポットライト グロー センター。
• **Composio Blue Active** (`{colors.primary-active}` — #0005a3): プレス状態。
• **スポットライト グロー トーン** (`{colors.primary-glow}` — #1a26ff): 放射状の大気グローの内側で使用される明るい青。
• **アクセント シアン** (`{colors.accent-chan}` — #00d4ff): データフローの視覚化には控えめです。
• **アクセント バイオレット** (`{colors.accent-violet}` — #7b3aed): 特定の製品のイラストのみ。

表面

• **キャンバス** (`{colors.canvas}` — #0f0f0f): ページフロア — 黒に近い。
• **キャンバス ディープ** (`{colors.canvas-deep}` — #000000): 端末モックアップ グリッドとコード ブロック用の純粋な黒。
• **Surface Card** (`{colors.surface-card}` — #181818): デフォルトのコンテンツ カード。
• **Surface Card Elevated** (`{colors.surface-card-elevated}` — #222222): ターミナル ペイン、二次ボタン。
• **Surface Strong** (`{colors.surface-strong}` — #2a2a2a): ドロップダウン メニュー。

ヘアライン

• **ヘアライン** (`{colors.hairline}` — #222222): デフォルトの 1 ピクセルの分割線。
• **Hairline Soft** (`{colors.hairline-soft}` — #1a1a1a): より軽いディバイダー。
• **強いヘアライン** (`{colors.hairline-strong}` — #333333): より強力なパネル アウトライン。

テキスト

• **インク** (`{colors.ink}` — #ffffff): 見出しを表示します。
• **本文** (`{colors.body}` — #a8a8a8): デフォルトの実行テキスト — ソフトグレー。
• **ボディ ストロング** (`{colors.body-strong}` — #ffffff): インクと同じ。
• **ミュート** (`{colors.muted}` — #888888): サブタイトル、パンくずリスト。
• **ミュート ソフト** (`{colors.muted-soft}` — #666666): 無効なテキスト。
• **プライマリ上** (`{colors.on-primary}` — #ffffff): 青い CTA に白いテキスト。

セマンティック

• **成功** (`{colors.semantic-success}` — #33d17a): 「オンライン」、「アクティブ」インジケーター。
• **エラー** (`{colors.semantic-error}` — #ff4d4d): 検証エラー。

タイポグラフィー

フォントファミリー

システムは、すべてのテキスト ロールにわたって **abcDiatype** (Lineto) を実行します。コード ブロックは **JetBrains Mono** に切り替わります。フォールバック: `ui-sans-serif、system-ui、sans-serif`。

階層

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

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

| `{typography.display-mega}` | 72ピクセル | 500 | 1.05 | -2.16ピクセル |ホームページ ヒーロー h1 |

| `{typography.display-xl}` | 56ピクセル | 500 | 1.05 | -1.68ピクセル |サブヒーロー |

| `{typography.display-lg}` | 44ピクセル | 500 | 1.1 | -1.32ピクセル |課長 |

| `{typography.display-md}` | 32ピクセル | 500 | 1.15 | -0.96ピクセル |サブセクションの責任者 |

| `{typography.display-sm}` | 24ピクセル | 500 | 1.25 | -0.5ピクセル |カードグループタイトル |

| `{typography.title-md}` | 18ピクセル | 600 | 1.4 | 0 |コンポーネントのタイトル |

| `{typography.title-sm}` | 16ピクセル | 600 | 1.4 | 0 |ツールキット カードのタイトル |

| `{typography.body-md}` | 16ピクセル | 400 | 1.5 | 0 |デフォルトの本文 |

| `{typography.body-sm}` | 14ピクセル | 400 | 1.5 | 0 |フッター本体 |

| `{typography.caption}` | 13ピクセル | 400 | 1.4 | 0 |写真のキャプション |

| `{typography.caption-uppercase}` | 11ピクセル | 600 | 1.4 | 0.88ピクセル |セクションラベル、バッジ錠剤 |

| `{typography.code}` | 13ピクセル | 400 | 1.5 | 0 |コードブロック — JetBrains Mono |

| `{typography.button}` | 14ピクセル | 500 | 1.0 | 0 | CTA 錠剤ラベル |

| `{typography.nav-link}` | 14ピクセル | 500 | 1.4 | 0 |トップナビゲーションメニュー |

原則

• **表示ウェイトは 500 のままです。** 自信はありますが、大胆には表示されません。
• **すべてのロールにわたる abcDiatype。** ディスプレイ/ボディ ファミリの分割はありません。
• **すべてのコード サーフェスに JetBrains Mono を使用します。*