WIRED

Overview

Wired is the flagship technology-magazine brand under Condé Nast — and the web surface refuses to dress itself as a SaaS marketing site. The page is unmistakably an editorial product: a white canvas, a strict black wordmark in the brand's proprietary `WiredDisplay` (a tall, narrow, high-contrast serif used at 64 px), and stacked story cards that read as a printed magazine grid ported to the screen. There is no atmospheric gradient, no decorative chrome, no chromatic accent — the brand's only colour beyond the black-and-white duet is the small `{colors.link}` (`#057dbc`) used for inline body links inside long-form articles.

Type carries the entire identity. Three families ladder the system: `WiredDisplay` (the proprietary high-contrast serif) for hero / section headlines; `BreveText` (a humanist serif) for long-form body and bylines; and `Apercu` (a humanist sans) for metadata, captions, eyebrow tags, and buttons. The pairing is editorial-grade: serifs for narrative, sans for navigation and structural labels.

Buttons are square. The brand uses `{rounded.none}` 0 px corners across the entire UI — newsletter sign-ups, login forms, "Read more" CTAs all render as sharp rectangles. The only circular shape is the `button-icon-circular` used for social-share affordances. There are no soft drop-shadows; the brand uses hairline borders for elevation when needed.

**Key Characteristics:**

• A strict black-and-white duet with no chromatic accent except the inline link blue `{colors.link}`. The brand reads as a printed magazine.
• Three-face typographic system — `WiredDisplay` serif for display, `BreveText` serif for body, `Apercu` sans for metadata and buttons.
• Square buttons (`{rounded.none}`) — the brand never softens corners on interactive elements.
• A magazine-style story grid: large feature card at top, two-up secondary, then a vertical stack of bylined story rows separated by `{colors.hairline}` 1 px dividers.
• The brand's only signature decorative move is the **masthead band** — a thin black strip with the wordmark centred, no other decoration.
• A near-black `{colors.ink}` (`#000000`) footer band, no graphics, just text columns and the wordmark repeating.

Colors

Brand & Accent

• **Ink Black** (`{colors.primary}` — `#000000`): The brand's only "accent." Used for wordmark, headlines, CTAs, footer fill. Pure black, never softened.

Surface

• **Canvas** (`{colors.canvas}` — `#ffffff`): The default page background.
• **Canvas Soft** (`{colors.canvas-soft}` — `#f5f5f5`): Rare tint used for the comment-section background and search-result row hover states (not in the main page rhythm).
• **Hairline** (`{colors.hairline}` — `#e0e0e0`): 1 px dividers between story rows. The brand's only "line."

Text

• **Ink** (`{colors.ink}` — `#000000`): Every headline, every body paragraph in BreveText.
• **Ink Soft** (`{colors.ink-soft}` — `#1a1a1a`): A near-black variant used for caption-strong / footer link emphasis.
• **Body** (`{colors.body}` — `#757575`): Secondary metadata — bylines, timestamps, supporting body lines.

Semantic

The brand operates with one inline link colour and no separate error / success / warning palette in its marketing surface. Validation cues on form pages use the ink black + body grey hierarchy.

• **Link** (`{colors.link}` — `#057dbc`): The inline body-link blue. Used only inside long-form article body copy, never on UI buttons or navigation.

Typography

Font Family

Three families ladder the system:

1. **WiredDisplay** — the proprietary tall-narrow high-contrast serif used exclusively for display headlines (64 px hero, scaling down to 26 px sub-display). The brand's most-recognisable typographic signature.

2. **BreveText** — the proprietary humanist serif used for long-form body, bylines, and editorial captions. Used at 16 – 19 px line-height 1.45 – 1.50 for comfortable reading density.

3. **Apercu** — a humanist sans used for nav, button labels, category eyebrows, metadata, and captions. Weights 400 / 700.

Inter is loaded as a fourth fallback face for embedded utility surfaces (the comment section, account pages) but does not appear on the main marketing / article surface.

Hierarchy

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

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

| `{typography.display-hero}` | 64px | 400 | 59.5px | -0.5px | Cover-story headline. |

| `{typography.display-lg}` | 48px | 400 | 50.4px | -0.4px | Major section / feature headlines. |

| `{typography.display-md}` | 32px | 400 | 35.2px | -0.3px | Story-card large variant. |

| `{typography.display-sm}` | 26px | 400 | 28px | 0 | Sub-display headings inside long-form articles. |

| `{typography.display-xs}` | 20px | 700 | 24px | -0.28px | Sans (Apercu) display micro-headings for category callouts. |

| `{typography.body-serif-lg}` | 19px | 400 | 27.93px | 0.108px | Lead paragraph of an article (BreveText). |

| `{typography.body-serif-md}` | 16px | 400 | 24px | 0.09px | Default article body (BreveText). |

| `{typography.body-md}` | 17px | 400 | 20px | 0 | Sans body (Apercu) for nav / metadata. |

| `{typography.body-md-strong}` | 17px | 700 | 22px | -0.144px | Bold sans body. |

| `{typography.body-sm}` | 14px | 400 | 18px | 0.4px | Secondary sans body. |

| `{typography.body-sm-strong}` | 14px | 700 | 18px | 0.4px | Bold caption / nav-link. |

| `{typography.byline}` | 12.73px | 700 | 28px | 0.108px | Article byline (BreveText). |

| `{typography.caption}` | 12px | 400 | 16px | 0 | Fine print, image captions. |

| `{typography.button-md}` | 16px | 700 | 20px | 0.3px | Button label. |

Principles

• **Serif for narrative, sans for structure.** The serif faces never carry button labels or nav text; the sans face never carries article body.
• **Display weight 400** — the proprietary WiredDisplay reads as elegant by virtue of its thin-tall-narrow design at default weight, not via weight 700+.
• **Bylines use BreveText weight 700 with relaxed line-height 2.2.** The vertical breathing is part of the editorial signature.

Note on Font Substitutes

The three proprietary faces have no exact substitutes. Best open-source approximations:

• **WiredDisplay** — *Playfair Display* weight 400 at large display sizes captures the high-contrast didone feel, though wider than the brand's tall-narrow proportions.
• **BreveText** — *Lora* or *Source Serif Pro* at 16 – 19 px.
• **Apercu** — *Inter* or *Manrope* weights 400 / 700.

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}` 20 px · `{spacing.2xl}` 24 px · `{spacing.3xl}` 32 px · `{spacing.4xl}` 48 px.
• **Section padding**: hero / story grid use `{spacing.4xl}` 48 px top/bottom on desktop.
• **Story row padding**: `{spacing.lg}` 16 px vertical between bylined story rows.

Grid & Container

• Marketing content uses a wide container (~1400 px max).
• Cover-story grid: 1 large hero + 2-up secondary stories + vertical stack.
• Story-row stack: full-width single column with hairline dividers.

Responsive Strategy

#### Breakpoints

| Name | Width | Key Changes |

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

| Mobile | < 768px | Cover hero 64→40 px; all grids 1-up; hamburger nav. |

| Tablet | 768–1023px | 2-up secondary story grid. |

| Desktop | ≥ 1024px | Full magazine grid. |

#### Touch Targets

Button-primary renders ~44 px tall (12 vertical padding + 20 line). WCAG AAA at all widths.

#### Collapsing Strategy

• Nav: full link row + Subscribe CTA at desktop. Hamburger at mobile.
• Magazine grid: hero stays full-width; 2-up secondary drops to 1-up at mobile.
• Story rows: stay single-column at all viewports.

#### Image Behavior

• Cover images: full-bleed 16:9 hero / 4:3 secondary.
• Article body images: full-width inside the article column.
• Author avatars: small inline circular crops next to bylines.

Elevation & Depth

| Level | Treatment | Use |

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

| Level 0 — Flat | No shadow, no border. | Default — almost every surface lives at this level. |

| Level 1 — Hairline | 1 px solid `{colors.hairline}` border. | Story-row dividers, input borders. |

| Level 2 — Heavy Black Border | 2 px solid `{colors.ink}` border. | Subscribe CTA on certain campaign moments. |

The brand uses no drop-shadows. Surface contrast and hairline borders carry all visual hierarchy.

Shapes

Border Radius Scale

| Token | Value | Use |

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

| `{rounded.none}` | 0px | Every interactive shape — buttons, inputs, cards. The brand's signature square geometry. |

| `{rounded.full}` | 9999px | Circular icon containers only (social-share, account avatar). |

Photography Geometry

• Cover stories: 16:9 hero, edge-to-edge.
• Secondary story cards: 4:3 thumbnails.
• Article body images: native aspect, full column width.
• Bylines / avatars: circular `{rounded.full}` 28 px crops.

Components

Buttons

**`button-primary`** — the square black CTA.

• Background `{colors.primary}`, text `{colors.on-primary}`, label `{typography.button-md}` (Apercu 16 px / 700 / 0.3 px tracking), padding `{spacing.md} {spacing.xl}`, shape `{rounded.none}` 0 px.

**`button-outline`** — the white outline CTA.

• Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid `{colors.ink}` border, same typography / padding / shape.

**`button-icon-circular`** — the circular share-icon button.

• Background `{colors.canvas}`, ink icon, shape `{rounded.full}`.

Cards & Containers

**`story-card-large`** — the cover-story card with `{typography.display-md}` headline.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.lg}`. No border — the card lives on the canvas with the photo doing the work.

**`story-card`** — the secondary story card.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.md}`. Photo at top, sans display heading + body lead below.

**`story-row`** — the bylined story list row.

• Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid `{colors.hairline}` bottom border, body in `{typography.body-md-strong}`, padding `{spacing.lg}` 0.

Inputs & Forms

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

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

Navigation

**`nav-bar`** — the top nav, light by default.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.md} {spacing.xl}`. Layout: hamburger left, masthead centre, Subscribe right.

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

• Text `{colors.ink}`, set in `{typography.body-sm-strong}` (Apercu 14 / 700).

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

• Background `{colors.primary}`, text `{colors.on-primary}`, padding `{spacing.4xl} {spacing.xl}`. Body in `{typography.body-sm}` (Apercu 14 / 400). Footer column eyebrows in `{typography.body-sm-strong}`.

Signature Components

**`hero-band`** — the white hero band hosting the cover-story.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.4xl} {spacing.xl}`. Cover headline in `{typography.display-hero}` (WiredDisplay 64 px).

**`masthead-band`** — the thin top band with the wordmark.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.md} {spacing.xl}`. The wordmark sits centred; flanked by section nav.

**`category-eyebrow`** — the small uppercase category label above story headlines.

• Text `{colors.ink}`, set in `{typography.body-sm-strong}` (Apercu 14 / 700 — though some campaigns use ALL CAPS via CSS).

**`byline-row`** — the article byline strip.

• Background `{colors.canvas}`, text `{colors.body}`, body in `{typography.byline}` (BreveText 12.73 / 700 / line-height 2.2). Includes an author avatar + name + date.

**`hairline-divider`** — the 1 px line between story rows.

• 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.primary}` black for the wordmark, every CTA, and the footer fill. The brand IS the strict black-on-white duet.
• Set hero headlines in `{typography.display-hero}` (WiredDisplay 64 px weight 400). The proprietary serif IS the brand's typographic signature.
• Use `{rounded.none}` 0 px on every button and form input. The brand reads as a printed magazine — square corners are non-negotiable.
• Pair WiredDisplay (serif display) with BreveText (serif body) and Apercu (sans labels). Three faces, three roles.
• Render story rows with `{colors.hairline}` 1 px dividers — the brand's only elevation cue.

Don't

• Don't introduce a chromatic brand accent. The link blue is reserved for inline body links inside articles only.
• Don't round button corners. The brand never softens its rectangular geometry.
• Don't drop a soft drop-shadow on cards. Surface contrast and hairlines carry elevation.
• Don't substitute the proprietary serif faces with a generic sans for display. The serif voice is the brand.
• Don't promote display weight beyond 400. The brand's elegance is in the typeface design, not bold weight.

개요

Wired는 Condé Nast 산하의 대표적인 기술 잡지 브랜드이며 웹 표면은 SaaS 마케팅 사이트로 위장하기를 거부합니다. 이 페이지는 틀림없이 사설 제품입니다. 흰색 캔버스, 브랜드 독점 'WiredDisplay'(64px에서 사용되는 크고 좁은 고대비 세리프)의 엄격한 검정색 워드마크, 화면에 포팅된 인쇄된 잡지 그리드로 읽혀지는 쌓인 스토리 카드입니다. 분위기 있는 그라데이션도 없고, 장식용 크롬도 없고, 유채색 악센트도 없습니다. 흑백 듀엣을 넘어서는 브랜드의 유일한 색상은 긴 형식의 기사 내부 인라인 본문 링크에 사용되는 작은 `{colors.link}`(`#057dbc`)입니다.

유형은 전체 정체성을 담고 있습니다. 세 가지 제품군이 시스템을 구성합니다: 영웅/섹션 헤드라인을 위한 'WiredDisplay'(독점 고대비 세리프체); 긴 형식의 본문과 저자명을 위한 `BreveText`(인문주의 세리프체) 메타데이터, 캡션, 눈썹 태그 및 버튼에 대한 'Apercu'(인본주의적 산세). 조합은 편집자 수준입니다. 내러티브를 위한 세리프체, 탐색을 위한 산세리프체 및 구조적 라벨입니다.

버튼은 정사각형입니다. 브랜드는 전체 UI에서 `{rounded.none}` 0픽셀 모서리를 사용합니다. 뉴스레터 가입, 로그인 양식, "자세히 보기" CTA는 모두 선명한 직사각형으로 렌더링됩니다. 유일한 원형 모양은 소셜 공유 어포던스에 사용되는 '버튼-아이콘-원형'입니다. 부드러운 그림자가 없습니다. 브랜드는 필요할 때 높이를 높이기 위해 가는 선 테두리를 사용합니다.

**주요 특징:**

• 인라인 링크 파란색 `{colors.link}`를 제외하고 반음계 악센트가 없는 엄격한 흑백 듀엣입니다. 브랜드는 인쇄된 잡지로 읽힌다.
• 3면 타이포그래피 시스템 — 디스플레이용 'WiredDisplay' 세리프, 본문용 'BreveText' 세리프, 메타데이터 및 버튼용 'Apercu' sans.
• 사각형 버튼(`{rounded.none}`) — 브랜드는 대화형 요소의 모서리를 절대로 부드럽게 만들지 않습니다.
• 잡지 스타일 스토리 그리드: 상단에 대형 기능 카드, 두 개의 보조 보조 카드, `{colors.hairline}` 1픽셀 구분선으로 구분된 작성자 스토리 행의 수직 스택.
• 브랜드의 유일한 시그니처 장식은 **마스트헤드 밴드**입니다. 이는 워드마크가 중앙에 있는 얇은 검정색 스트립이며 다른 장식은 없습니다.
• 검정색에 가까운 `{colors.ink}`(`#000000`) 바닥글 밴드, 그래픽 없음, 텍스트 열과 워드마크만 반복됨.

색상

브랜드 및 액센트

• **잉크 블랙**(`{colors.primary}` — `#000000`): 브랜드의 유일한 "악센트"입니다. 워드마크, 헤드라인, CTA, 바닥글 채우기에 사용됩니다. 결코 부드러워지지 않는 순수한 검정색입니다.

표면

• **캔버스** (`{colors.canvas}` — `#ffffff`): 기본 페이지 배경입니다.
• **캔버스 소프트**(`{colors.canvas-soft}` — `#f5f5f5`): 주석 섹션 배경 및 검색 결과 행 호버 상태에 사용되는 드문 색조입니다(메인 페이지 리듬에는 없음).
• **헤어라인**(`{colors.hairline}` — `#e0e0e0`): 스토리 행 사이에 1px 구분선이 있습니다. 브랜드의 유일한 "라인"입니다.

텍스트

• **잉크**(`{colors.ink}` — `#000000`): BreveText의 모든 헤드라인, 모든 본문 단락.
• **잉크 소프트**(`{colors.ink-soft}` — `#1a1a1a`): 강한 캡션/바닥글 링크 강조에 사용되는 검은색에 가까운 변형입니다.
• **본문**(`{colors.body}` — `#757575`): 보조 메타데이터 — 바이라인, 타임스탬프, 지원 본문 라인.

의미론

브랜드는 하나의 인라인 링크 색상으로 운영되며 마케팅 표면에 별도의 오류/성공/경고 팔레트가 없습니다. 양식 페이지의 유효성 검사 단서는 잉크 검정 + 본문 회색 계층 구조를 사용합니다.

• **링크** (`{colors.link}` — `#057dbc`): 인라인 본문 링크 파란색입니다. 긴 형식의 기사 본문 문구 내에서만 사용되며 UI 버튼이나 탐색에는 절대 사용되지 않습니다.

타이포그래피

글꼴 계열

세 가족이 시스템을 구성합니다.

1. **WiredDisplay** — 디스플레이 헤드라인(64px 히어로, 26px 하위 디스플레이로 축소)에만 사용되는 길고 좁은 고대비 세리프체입니다. 브랜드의 가장 잘 알려진 타이포그래피 시그니처입니다.

2. **BreveText** — 긴 형식의 본문, 작성자 이름 및 편집 캡션에 사용되는 독점적인 인문주의 세리프체입니다. 편안한 읽기 밀도를 위해 16~19픽셀 줄 높이 1.45~1.50에서 사용됩니다.

3. **Apercu** — 탐색, 버튼 라벨, 카테고리 눈썹, 메타데이터 및 캡션에 사용되는 인본주의적 산세입니다. 무게 400/700.

Inter는 내장된 유틸리티 화면(댓글 섹션, 계정 페이지)에 대한 네 번째 대체 화면으로 로드되지만 기본 마케팅/기사 화면에는 표시되지 않습니다.

계층 구조

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

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

| `{typography.display-hero}` | 64px | 400 | 59.5px | -0.5px | 표지 기사 제목. |

| `{typography.display-lg}` | 48px | 400 | 50.4px | -0.4px | 주요 섹션/특집 헤드라인. |

| `{typography.display-md}` | 32px | 400 | 35.2px | -0.3px | 스토리 카드 대형 변형. |

| `{typography.display-sm}` | 26px | 400 | 28px | 0 | 긴 형식의 기사 내부에 하위 표시 제목이 있습니다. |

| `{typography.display-xs}` | 20픽셀 | 700 | 24px | -0.28px | Sans(Apercu)는 카테고리 콜아웃에 대한 마이크로 제목을 표시합니다. |

| `{typography.body-serif-lg}` | 19px | 400 | 27.93px | 0.108px | ar의 선두 단락

概要

Wired は Condé Nast 傘下の主力テクノロジー雑誌ブランドであり、Web 表面は SaaS マーケティング サイトの装いをすることを拒否しています。このページは紛れもなく編集作品です。白いキャンバス、ブランド独自の「WiredDisplay」（64 ピクセルで使用される細長い高コントラストのセリフ）の厳密な黒のワードマーク、そして画面に移植された印刷された雑誌のグリッドとして読み取れる積み重ねられたストーリー カードです。雰囲気のあるグラデーション、装飾的なクロム、色のアクセントはありません。白と黒のデュエットを超えるこのブランドの唯一の色は、長文記事内のインライン本文リンクに使用される小さな `{colors.link}` (`#057dbc`) です。

型はアイデンティティ全体を伝えます。システムには 3 つのファミリーが含まれています。ヒーロー/セクション見出し用の「WiredDisplay」 (独自のハイコントラスト セリフ)。長い形式の本文と署名欄用の `BreveText` (人文主義的なセリフ)。メタデータ、キャプション、眉毛タグ、ボタン用の「Apercu」（ヒューマニスト・サンズ）。この組み合わせは編集グレードです。ナラティブにはセリフ、ナビゲーションと構造ラベルにはサンズを使用します。

ボタンは四角いです。このブランドは UI 全体で「{rounded.none}」0 ピクセルのコーナーを使用しています。ニュースレターのサインアップ、ログイン フォーム、「続きを読む」CTA はすべて鋭い長方形として表示されます。唯一の円形は、ソーシャルシェアアフォーダンスに使用される「ボタンアイコン円形」です。ソフトなドロップシャドウはありません。このブランドでは、必要に応じてヘアラインの境界線を使用して高さを表現しています。

**主な特徴:**

• インライン リンクの青い `{colors.link}` を除いて、半音アクセントのない、厳密な白黒のデュエットです。このブランドは紙の雑誌として読まれます。
• 3 面タイポグラフィック システム — ディスプレイ用の `WiredDisplay` セリフ、本文用の `BreveText` セリフ、メタデータとボタン用の `Apercu` なし。
• 四角いボタン (`{rounded.none}`) — このブランドは、インタラクティブな要素に決して手を加えません。
• 雑誌スタイルのストーリー グリッド: 一番上に大きな特集カード、2 つ目のサブカード、そして `{colors.hairline}` 1 ピクセルの仕切りで区切られた署名入りのストーリー行の垂直スタック。
• このブランドの唯一の特徴的な装飾は **マストヘッド バンド** です。これはワードマークが中央に配置された細い黒い帯で、他の装飾はありません。
• 黒に近い `{colors.ink}` (`#000000`) フッター バンド。グラフィックスはなく、テキスト列とワードマークの繰り返しだけです。

色

ブランドとアクセント

• **インク ブラック** (`{colors.primary}` — `#000000`): ブランドの唯一の「アクセント」。ワードマーク、見出し、CTA、フッターの塗りつぶしに使用されます。決して柔らかくならない純粋な黒。

表面

• **キャンバス** (`{colors.canvas}` — `#ffffff`): デフォルトのページの背景。
• **Canvas Soft** (`{colors.canvas-soft}` — `#f5f5f5`): コメント セクションの背景と検索結果行のホバー状態 (メイン ページのリズムではない) に使用される珍しい色合い。
• **ヘアライン** (`{colors.hairline}` — `#e0e0e0`): ストーリー行間の 1 ピクセルの区切り線。ブランド唯一の「ライン」。

テキスト

• **インク** (`{colors.ink}` — `#000000`): BreveText のすべての見出し、すべての本文段落。
• **Ink Soft** (`{colors.ink-soft}` — `#1a1a1a`): キャプションを強く/フッター リンクを強調するために使用される黒に近いバリアント。
• **本文** (`{colors.body}` — `#757575`): 二次メタデータ — 署名欄、タイムスタンプ、サポート本文行。

セマンティック

このブランドは 1 つのインライン リンク色で運営されており、マーケティング画面に個別のエラー/成功/警告パレットはありません。フォーム ページの検証キューでは、インク ブラック + ボディ グレーの階層が使用されます。

• **リンク** (`{colors.link}` — `#057dbc`): インラインのボディリンクの青。長い形式の記事の本文コピー内でのみ使用され、UI ボタン​​やナビゲーションでは決して使用されません。

タイポグラフィー

フォントファミリー

3 つの家族がシステムを梯子します。

1. **WiredDisplay** — ディスプレイの見出し専用に使用される独自の縦長の高コントラストのセリフ (64 ピクセルのヒーロー、26 ピクセルのサブディスプレイに縮小)。ブランドの最も有名なタイポグラフィーのシグネチャー。

2. **BreveText** — 長編本文、署名欄、編集キャプションに使用される独自の人文主義的なセリフ。快適な読書密度のために、16 ～ 19 ピクセルの行の高さ 1.45 ～ 1.50 で使用されます。

3. **Apercu** — ナビゲーション、ボタンのラベル、カテゴリの眉毛、メタデータ、およびキャプションに使用されないヒューマニスト。重さ400/700。

Inter は、埋め込みユーティリティ面 (コメント セクション、アカウント ページ) の 4 番目の代替面として読み込まれますが、メインのマーケティング/記事面には表示されません。

階層

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

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

| `{typography.display-hero}` | 64ピクセル | 400 | 59.5ピクセル | -0.5ピクセル |カバーストーリーの見出し。 |

| `{typography.display-lg}` | 48ピクセル | 400 | 50.4ピクセル | -0.4ピクセル |主要なセクション/特集の見出し。 |

| `{typography.display-md}` | 32ピクセル | 400 | 35.2ピクセル | -0.3ピクセル |ストーリーカードの大型異形。 |

| `{typography.display-sm}` | 26ピクセル | 400 | 28ピクセル | 0 |長文記事内の見出しをサブ表示します。 |

| `{typography.display-xs}` | 20ピクセル | 700 | 24ピクセル | -0.28ピクセル | Sans (Apercu) は、カテゴリ コールアウトのマイクロ見出しを表示します。 |

| `{typography.body-serif-lg}` | 19ピクセル | 400 | 27.93ピクセル | 0.108ピクセル | ar の先頭段落