Resend

Overview

Resend looks like a developer tool with the typography of an editorial.

Every page opens on `{colors.canvas}` (`#000000`), and the loudest element on

the canvas is not a button or a brand stamp — it's a 96px Domaine Display

serif headline ("Email for developers", "Email reimagined") with the

`ss01 / ss04 / ss11` stylistic alternates engaged. That single typographic

decision sets the brand tone: confident, considered, slightly literary, and

priced on quality rather than novelty.

The supporting cast is technical. Body copy switches to **ABC Favorit** for

marketing prose and **Inter** for UI labels, while code blocks render in

**Geist Mono** inside `{component.code-window}` shells with hairline traffic-

light dots. Surface depth is built almost entirely from translucent white —

6% borders, 14% strong borders, 4% dividers — over a deep `{colors.surface-deep}`

layer that sits just below the canvas black. There are no gradients painted

across full bands, just **soft atmospheric glows** (orange, blue, green, red,

yellow) anchored at the top of select sections, all at low opacity.

Page rhythm cycles in a single dark register: hero stripe → atmospheric

section → code window section → email mockup section → pricing or feature

grid → black footer. The brand never warms to a light surface; even

secondary email mockups are rendered as compact white cards inside the dark

canvas, framed like print insets in a black-bordered magazine page.

**Key Characteristics:**

• Pure black canvas (`{colors.canvas}` — `#000000`) on every public page; off-white text (`{colors.ink}` — `#fcfdff`) carries the full read.
• A serif-led type system: **Domaine Display** at 76–96px for hero headlines, **ABC Favorit** for marketing body, **Inter** for UI, **Geist Mono** for code.
• Six accent glow colours used only as low-opacity atmospheric washes (`{colors.accent-orange}`, `{colors.accent-blue}`, `{colors.accent-green}`, `{colors.accent-red}`, `{colors.accent-yellow}`) — never as buttons or solid surfaces.
• Strict container vocabulary: `{rounded.lg}` (12px) for feature cards, code wells, and email mockups; `{rounded.md}` (8px) for buttons; `{rounded.full}` for pills and avatars.
• Translucent white borders (`{colors.hairline}` 6% / `{colors.hairline-strong}` 14%) replace shadows entirely — the system has no traditional drop-shadow elevation language.
• `{component.button-primary}` is a small white rectangle with black text — counterintuitive contrast that becomes the page's brightest pixel and works as a single visual anchor.

Colors

Brand & Accent

• **Primary White** (`{colors.primary}` — `#fcfdff`): the brand's de facto accent. Reserved for `{component.button-primary}` (white pill on black canvas), Domaine display headlines, and the active text colour. White is the loudest possible colour on this canvas — that's the signature.
• **Primary On** (`{colors.primary-on}` — `#000000`): label colour on top of `{colors.primary}` surfaces. Black text on white pill is the brand's CTA pattern.
• **Surface Light** (`{colors.surface-light}` — `#f1f7fe`): a subtle blue-tinted off-white used as the active/pressed state of `{component.button-primary}`.

Surface

• **Canvas** (`{colors.canvas}` — `#000000`): the default page background. True black, never near-black.
• **Surface Card** (`{colors.surface-card}` — `#0a0a0c`): the standard inset card surface, just lighter than canvas to register a step up in elevation.
• **Surface Elevated** (`{colors.surface-elevated}` — `#101012`): a second elevation step used on featured pricing tiers and ghost button surfaces.
• **Surface Deep** (`{colors.surface-deep}` — `#06060a`): code window background — slightly cooler and darker than the canvas itself, suggesting depth via temperature.
• **Hairline** (`{colors.hairline}` — `rgba(255,255,255,0.06)`): the soft 1px translucent-white divider used between rows and around feature cards.
• **Hairline Strong** (`{colors.hairline-strong}` — `rgba(255,255,255,0.14)`): the structural 1px border on cards, code wells, and form inputs.
• **Divider Soft** (`{colors.divider-soft}` — `rgba(255,255,255,0.04)`): low-contrast dividers between footer columns.

Text

• **Ink** (`{colors.ink}` — `#fcfdff`): primary text colour on the dark canvas. Faintly blue-cool to feel like printed paper rather than pure white pop.
• **Body** (`{colors.body}` — `rgba(252,253,255,0.86)`): long-form body text where pure ink would feel too sharp.
• **Charcoal** (`{colors.charcoal}` — `rgba(252,253,255,0.7)`): captions, secondary nav labels.
• **Mute** (`{colors.mute}` — `#a1a4a5`): supporting text and inactive labels.
• **Ash** (`{colors.ash}` — `#888e90`): tertiary text, footer copy.
• **Stone** (`{colors.stone}` — `#464a4d`): disabled foreground.
• **On-Light** (`{colors.on-light}` — `#000000`): label colour inside the rare email-mockup white cards.
• **On-Light Mute** (`{colors.on-light-mute}` — `rgba(0,0,51,0.7)`): secondary text inside email mockups.

Semantic

• **Accent Orange** (`{colors.accent-orange}` — `#ff801f`) + glow (`{colors.accent-orange-glow}` — `rgba(255,89,0,0.22)`): atmospheric warm wash anchored to "Email reimagined" / customer story sections. Solid orange never appears as a button or surface — only the glow.
• **Accent Yellow** (`{colors.accent-yellow}` — `#ffc53d`): used in inline highlight strokes and "first-class developer experience" key callouts.
• **Accent Blue** (`{colors.accent-blue}` — `#3b9eff`) + glow (`{colors.accent-blue-glow}` — `rgba(0,117,255,0.34)`): inline link colour and the cool atmospheric wash on the "Integrate this weekend" section.
• **Accent Green** (`{colors.accent-green}` — `#11ff99`) + glow (`{colors.accent-green-glow}` — `rgba(34,255,153,0.18)`): success status dots and the "delivery confirmed" feature glow.
• **Accent Red** (`{colors.accent-red}` — `#ff2047`) + glow (`{colors.accent-red-glow}` — `rgba(255,32,71,0.34)`): inline error red and the "reach humans, not spam folders" attention wash.
• **Link** (`{colors.link}` — `#3b9eff`): inline link colour — same as accent blue.

Typography

Font Family

Resend ships a four-family stack:

• **Domaine Display** — proprietary editorial serif used exclusively for hero headlines at 76px+, with `ss01 / ss04 / ss11` stylistic sets engaged for a slightly tighter, more print-magazine look.
• **ABC Favorit** — proprietary humanist sans-serif used for marketing body copy, hero subtitles, and pill labels. Carries `ss01 / ss03 / ss04` features for tabular figures and alternate glyphs.
• **Inter** — open-source sans-serif used for UI: button labels, captions, card body text, nav links.
• **Geist Mono** — open-source monospace used in code wells.

When proprietary families cannot be licensed, **Söhne** or **Tiempos Headline** stand in for Domaine Display, and **Geist** or **Inter Tight** can replace ABC Favorit. Inter and Geist Mono are open-source and should be used directly.

Hierarchy

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

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

| `{typography.display-xxl}` | 96px | 400 | 1.0 | -0.96px | Home hero ("Email for developers"). One per page. |

| `{typography.display-xl}` | 76.8px | 400 | 1.0 | -0.768px | Section openers ("Email reimagined", "Available today"). |

| `{typography.display-lg}` | 56px | 400 | 1.2 | -2.8px | ABC Favorit display sub-titles. |

| `{typography.heading-md}` | 24px | 500 | 1.5 | -0.4px | Card titles, section sub-titles. |

| `{typography.heading-sm}` | 20px | 500 | 1.3 | -0.3px | List headers. |

| `{typography.subtitle}` | 20px | 400 | 1.3 | 0 | Hero subtitles. |

| `{typography.body-lg}` | 18px | 400 | 1.5 | 0 | Marketing prose. |

| `{typography.body-md}` | 16px | 400 | 1.5 | -0.8px | ABC Favorit body. |

| `{typography.body-sm}` | 14px | 400 | 1.43 | 0 | Captions, metadata. |

| `{typography.button-md}` | 14px | 500 | 1.43 | 0 | Default button label. |

| `{typography.button-sm}` | 14px | 500 | 1.43 | 0.35px | Pill labels, inline links. |

| `{typography.caption}` | 12px | 400 | 1.5 | 0 | Footer disclosure, copyright. |

| `{typography.caption-emph}` | 14px | 600 | 1.0 | 0 | Emphatic small caption — Helvetica fallback. |

| `{typography.code-md}` | 13px | 400 | 1.6 | 0 | Code blocks, inline code. |

Principles

• Display sizes always run at `lineHeight: 1.0` with negative letter-spacing — the Domaine Display headlines pack into solid typographic blocks rather than open prose lines.
• Body weight stays at 400 across `{typography.body-lg}` and `{typography.body-md}`. The serif/sans family change carries hierarchy, not weight bumps.
• ABC Favorit always runs with `ss01 / ss04 / ss11` engaged; Inter never carries OpenType features. Code in Geist Mono never carries ligatures.
• Inline links use `{typography.button-sm}` with positive letter-spacing (`0.35px`) and ABC Favorit — the small spacing nudge gives interactive prose its precision.

Note on Font Substitutes

When Domaine Display is unavailable, clamp `lineHeight` to 1.0 explicitly and apply `font-feature-settings: "ss01", "liga"` on the substitute serif to mimic the alternate glyphs. Söhne or Tiempos Headline will read closest. ABC Favorit substitutes (Geist, Inter Tight) typically default to looser tracking — apply -0.5% letter-spacing on body sizes to compensate.

Layout

Spacing System

• **Base unit**: 4px, with the working scale on multiples of 4 / 8 / 16.
• **Tokens**: `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.xxl}` 32px · `{spacing.xxxl}` 48px · `{spacing.section}` 96px · `{spacing.band}` 128px.
• Section padding: `{spacing.section}` (96px) vertical between bands; `{spacing.band}` (128px) on the hero stripe and closing footer transition.
• Card internal padding: `{spacing.xxl}` (32px) on `{component.feature-card}`, `{component.pricing-tier}`, and `{component.code-window}`.

Grid & Container

• **Max content width** ≈ 1200px on body sections.
• **Feature grid**: 3 columns at desktop, 2 at tablet, 1 at mobile.
• **Pricing**: 3-tier grid centred at desktop; centre tier promotes to `{component.pricing-tier-featured}` (one-step-elevated surface).
• **Code-story splits**: a 2-up split — narrative copy left, `{component.code-window}` right — collapsing to stacked at < 1024px.
• **Email mockup band**: a single white card (640px max width) centred in the dark canvas with generous vertical padding to read like a print magazine inset.

Whitespace Philosophy

• Whitespace is editorial and generous — full-bleed sections breathe at 96–128px so Domaine Display headlines have room to register at scale.
• Inside cards, padding stays at 32px so feature copy and code wells have a consistent rhythm with the outer grid.
• Hairline `{colors.hairline}` and `{colors.hairline-strong}` carry the role drop shadows would in a brighter system; the dark canvas suppresses traditional shadow depth entirely.

Elevation & Depth

| Level | Treatment | Use |

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

| 0 — flat | No shadow, no border | Default canvas, full-bleed bands. |

| 1 — surface card | `{colors.surface-card}` (`#0a0a0c`) + 1px `{colors.hairline-strong}` | Feature cards, pricing tiers, form inputs. |

| 2 — elevated | `{colors.surface-elevated}` (`#101012`) + 1px `{colors.hairline-strong}` | Featured pricing tier, ghost button. |

| 3 — code well | `{colors.surface-deep}` (`#06060a`) + 1px `{colors.hairline-strong}` | Code window, terminal shells. |

| 4 — atmospheric glow | Low-opacity radial gradient (`{colors.accent-*-glow}`) anchored at section top | Section openers ("Integrate this weekend", "Email reimagined"). |

The system has **no traditional drop shadow language**. Every surface either gets a translucent-white hairline border or sits inside an atmospheric glow. The dark canvas absorbs shadow naturally; surfaces register depth via temperature and luminance shifts rather than blur.

Decorative Depth

• **Atmospheric section glows** — six accent colours each with a paired glow token (orange, yellow, blue, green, red, plus a deep slate for "everything in your context"). Each section opens with a single radial wash anchored at the top edge of the section, falling off to canvas black within ~600px vertical distance. Never two glows in the same section.
• **Email card insets** — the "Beyond experience" mockup band lifts a single white email card off the black canvas, giving it the only true light-on-dark contrast in the system. The card uses no shadow; the contrast itself is the elevation.
• **Code window traffic lights** — `{component.code-window}` shells include a row of three coloured dots (red `{colors.accent-red}`, yellow `{colors.accent-yellow}`, green `{colors.accent-green}`) at the top — the only place all three semantic colours appear together as solid surfaces.

Shapes

Border Radius Scale

| Token | Value | Use |

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

| `{rounded.none}` | 0px | Hero stripe, full-bleed bands, footer. |

| `{rounded.xs}` | 4px | Inline tags inside code wells. |

| `{rounded.sm}` | 6px | Code tabs, mid-size chips. |

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

| `{rounded.lg}` | 12px | Feature cards, pricing tiers, code wells, email mockups. |

| `{rounded.xl}` | 16px | Larger feature panels. |

| `{rounded.full}` | 9999px | Pills, status dots, contributor avatars. |

Photography Geometry

• The system uses almost no photography. Visual interest comes from typography + atmospheric glows + code wells + the white email-card insets.
• When portraits appear (testimonial avatars), they are circular (`{rounded.full}`) at 32px, sitting inline with body copy.
• Email mockup cards run at 4:5 portrait aspect with `{rounded.lg}` corners.

Components

Buttons

**`button-primary`** — white CTA

• Background `{colors.primary}`, label `{colors.primary-on}`, type `{typography.button-md}`, padding `8px 16px`, `rounded: {rounded.md}`, height 36px.
• The brightest pixel on the canvas. Used for "Get started", "Sign up", "Try Resend".
• Pressed state lives in `button-primary-pressed` (background `{colors.surface-light}`).

**`button-ghost`** — translucent CTA

• Background `{colors.surface-elevated}`, label `{colors.ink}`, 1px `{colors.hairline-strong}`, type `{typography.button-md}`, `rounded: {rounded.md}`, height 36px.
• Equal-weight secondary action paired with `{component.button-primary}`.

**`button-outline`** — outlined CTA

• Background `{colors.canvas}`, label `{colors.ink}`, 1px `{colors.hairline-strong}`, type `{typography.button-md}`, `rounded: {rounded.md}`, height 36px.
• Tertiary action; appears on its own next to inline links.

Cards & Containers

**`hero-stripe`** — full-bleed hero

• Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.display-xxl}` for the headline, padding `96px 32px`, `rounded: {rounded.none}`.
• Used only on the home page hero band; carries the 96px Domaine Display headline and a single `{component.button-primary}` CTA. No photography, no atmospheric glow inside the hero itself — the glow appears on the section that follows.

**`feature-card`** — feature highlight card

• Background `{colors.surface-card}`, text `{colors.ink}`, type `{typography.body-md}`, `rounded: {rounded.lg}`, padding `{spacing.xxl}` (32px).
• Used in the home grid: "Despite emails using React", "So beyond editing", etc. No outline by default — relies on canvas black contrast.

**`feature-card-bordered`** — outlined feature card

• Background `{colors.surface-card}`, text `{colors.ink}`, 1px `{colors.hairline-strong}`, type `{typography.body-md}`, `rounded: {rounded.lg}`, padding `{spacing.xxl}`.
• Used when feature cards sit close together and need explicit separation.

**`pricing-tier`** — pricing tier card

• Background `{colors.surface-card}`, text `{colors.ink}`, 1px `{colors.hairline-strong}`, type `{typography.body-md}`, `rounded: {rounded.lg}`, padding `{spacing.xxl}` (32px).
• Tier name in `{typography.heading-md}` + price in `{typography.display-lg}` (ABC Favorit, 56px).

**`pricing-tier-featured`** — recommended tier

• Background `{colors.surface-elevated}`, text `{colors.ink}`, 1px `{colors.hairline-strong}`, type `{typography.body-md}`, `rounded: {rounded.lg}`, padding `{spacing.xxl}`.
• Centre tier elevated by surface luminance, not by colour.

**`code-window`** — code well

• Background `{colors.surface-deep}`, text `{colors.body}`, type `{typography.code-md}`, 1px `{colors.hairline-strong}`, `rounded: {rounded.lg}`, padding `{spacing.xl}` (24px).
• Includes a 3-dot traffic-light row at top using `{colors.accent-red}` / `{colors.accent-yellow}` / `{colors.accent-green}` for chrome, plus a tab strip below it.

**`code-tab`** — code language tab

• Background `{colors.surface-card}`, text `{colors.charcoal}`, type `{typography.code-md}`, `rounded: {rounded.sm}`, padding `6px 12px`.
• Active tab bumps text to `{colors.ink}` and adds a subtle `{colors.hairline-strong}` underline.

**`email-mockup`** — email-card inset

• Background `{colors.surface-card}` (or the rare `#ffffff` when rendered as a light-island inset), text `{colors.ink}` (or `{colors.on-light}` for white insets), type `{typography.body-md}`, `rounded: {rounded.lg}`, padding 0.
• Used in the "Beyond experience" band to demonstrate rendered email output.

Inputs & Forms

**`text-input`** — default input

• Background `{colors.surface-card}`, text `{colors.ink}`, type `{typography.body-sm}`, 1px `{colors.hairline-strong}`, `rounded: {rounded.md}`, padding `10px 14px`, height 40px.
• Sign-up and waitlist email fields. Focus state thickens the border to `{colors.ink}` (no separate ring colour).

Navigation

**`nav-bar`** — top nav (desktop)

• Background `{colors.canvas}`, text `{colors.body}`, type `{typography.button-sm}`, height 64px, single hairline `{colors.hairline}` bottom border.
• Left: wordmark logo. Centre: top-level nav ("Features", "Pricing", "Docs", "Customers"). Right: "Sign in" link + `{component.button-primary}`.

**`nav-bar`** (mobile)

• Same height 64px, collapses centre nav into a hamburger icon. Logo stays left, sign-in CTA stays right.

**`sub-nav-pill`** — pill-style sub-nav

• Pill chips set in a horizontal row above content (e.g. on the customers index), `{component.sub-nav-pill}` styling.

Signature Components

**`badge-pill`** — neutral pill

• Background `{colors.surface-elevated}`, text `{colors.body}`, type `{typography.caption}`, `rounded: {rounded.full}`, padding `4px 10px`.
• Inline tags ("New", "Beta", "v3.0") inside hero copy and customer story headers.

**`status-dot`** — status indicator

• Background `{colors.accent-green}`, `rounded: {rounded.full}`, 8px square.
• Inline indicator next to "Status: Operational" in the footer or system status references.

**`contributor-avatar`** — testimonial avatar

• Background `{colors.surface-card}` placeholder, `rounded: {rounded.full}`, 32×32px.
• Used inline with customer testimonials.

**`footer`** — global footer

• Background `{colors.canvas}`, text `{colors.charcoal}`, type `{typography.body-sm}`, `rounded: {rounded.none}`, padding `64px 32px`.
• Multi-column quick-links grid above a single-line copyright row separated by `{colors.divider-soft}`.

Do's and Don'ts

Do

• Use `{colors.canvas}` (true black) as the default page background. Every public page lives here.
• Reserve `{component.button-primary}` (white pill) as the only solid bright surface. One per viewport at most.
• Set hero headlines in **Domaine Display** at 76–96px with `lineHeight: 1.0` and `ss01 / ss04 / ss11` features engaged.
• Use **ABC Favorit** for marketing body, **Inter** for UI labels, **Geist Mono** for code. Keep the lanes strict.
• Build elevation from translucent-white hairlines, not drop shadows.
• Use `{colors.accent-*-glow}` tokens as low-opacity radial atmospheric washes — never as solid surfaces.
• Set buttons and inputs to `{rounded.md}` (8px); cards and code wells to `{rounded.lg}` (12px); pills and avatars to `{rounded.full}`.
• Use the white email-mockup inset sparingly — it's the only deliberately-light surface and should feel like a print pull-quote.

Don't

• Don't use a near-black canvas. The brand sits on `#000000`, not `#0a0a0a`.
• Don't apply solid colour to atmospheric accent tokens. `{colors.accent-orange}` is for inline highlights only — its glow form is for backdrops.
• Don't add drop shadows to feature cards or code wells. Translucent white borders carry depth on this canvas.
• Don't bump body weight to 600 for emphasis. Use family change (Inter → ABC Favorit → Domaine Display) instead.
• Don't render code outside `{component.code-window}` — even small inline code uses Geist Mono and a `{colors.surface-card}` background.
• Don't loosen Domaine Display `lineHeight` past 1.0. Tight stacking is structural to the brand.
• Don't introduce a secondary brand accent. White is the brand on black — accents are atmospheric only.
• Don't bring photography front-and-centre. The brand reads as type-and-code, not photography-led.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes |

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

| Desktop XL | ≥ 1440px | Full max-width 1200 body, 3-up feature grid, side-by-side code-story splits. |

| Desktop | 1280–1439px | Container shrinks; xl side padding. |

| Tablet Large | 1024–1279px | Feature grid stays 3-up, code-story remains 2-up. |

| Tablet | 768–1023px | Feature grid 2-up, code-story stacks (narrative on top), pricing stacks vertically. |

| Mobile Large | 426–767px | Feature grid 1-up; nav collapses to hamburger; hero `{typography.display-xxl}` clamps to 56px. |

| Mobile | ≤ 425px | All grids 1-up, hero clamps to 44px, section padding `{spacing.section}` collapses to 64px. |

Touch Targets

• All buttons ship at minimum 36px tall on desktop, scaling to 44px on mobile via padding adjustment. WCAG AAA met on mobile.
• `{component.text-input}` is 40px tall — comfortable but not large. Mobile scales to 48px via padding.
• `{component.sub-nav-pill}` stays at 36px on desktop, 40px on mobile.

Collapsing Strategy

• Top-level nav collapses to hamburger at < 1024px; the wordmark and `{component.button-primary}` stay anchored.
• Hero `{typography.display-xxl}` clamps: 96px → 76px → 56px → 44px across the breakpoint ladder.
• Pricing 3-up stacks vertically at < 1024px with the featured tier remaining centre-stacked.
• Code-story splits switch from side-by-side to stacked at < 1024px, code well always second.
• Atmospheric glows scale with section width but maintain the same opacity — they fade naturally at small viewports.

Image Behavior

• Email mockup cards reflow at 1:1 aspect on mobile to remain readable.
• Atmospheric glows are CSS gradients — no asset cost, no breakpoint variation.
• Customer testimonial avatars stay 32px circular regardless of breakpoint.

Iteration Guide

1. Focus on ONE component at a time. Most surfaces share `{colors.surface-card}` or `{colors.surface-elevated}` with `{rounded.lg}` — only the role-specific tokens (`{colors.primary}`, `{component.code-window}`) shift between variants.

2. Reference component names and tokens directly (`{colors.primary}`, `{component.button-primary-pressed}`, `{rounded.lg}`) — do not paraphrase.

3. Run `npx @google/design.md lint DESIGN.md` after edits; orphaned-tokens warnings will catch unused entries.

4. Add new variants as separate entries (`-pressed`, `-featured`, `-disabled`) — do not bury them in prose.

5. Default body type to `{typography.body-md}`; reach for `{typography.subtitle}` only on hero subtitles.

6. Keep `{colors.primary}` (white) scarce — if more than one solid white surface appears per viewport, ask whether one should drop to `{component.button-ghost}` instead.

Known Gaps

• Pressed/active visual states are documented only for `button-primary-pressed`; other components rely on the default focus-ring (browser default) for interactive feedback.
• Logged-in dashboard surfaces (API keys, sending logs, audience management) are out of scope; only the public marketing canvas is documented.
• Email-template editor surfaces (a key product feature) are not extracted — those live behind authentication.
• The atmospheric glow rendering uses CSS radial gradients; exact stops and angles vary per section and are not standardised as tokens — render per section-specific design judgment.

개요

재전송은 사설의 타이포그래피를 갖춘 개발자 도구처럼 보입니다.

모든 페이지는 `{colors.canvas}`(`#000000`)에서 열리고 가장 소리가 큰 요소는

캔버스는 버튼이나 브랜드 스탬프가 아닙니다. 96px 도메인 디스플레이입니다.

serif 헤드라인("개발자를 위한 이메일", "재창조된 이메일")

`ss01 / ss04 / ss11` 스타일이 번갈아 사용됩니다. 그 하나의 타이포그래피

결정은 브랜드 톤을 결정합니다: 자신감 있고, 사려 깊고, 약간 문학적이며,

참신함보다는 품질을 중시합니다.

조연은 기술적입니다. 본문 문구가 **ABC 즐겨찾기**로 전환됩니다.

마케팅 문구 및 UI 라벨용 **Inter**, 코드 블록 렌더링

**Geist Mono** `{comComponent.code-window}` 쉘 내부에 헤어라인 트래픽이 있음-

밝은 점. 표면 깊이는 거의 전적으로 반투명 흰색으로 만들어졌습니다.

6% 테두리, 14% 강한 테두리, 4% 구분선 — 깊은 `{colors.surface-deep}` 위에

캔버스 검정색 바로 아래에 있는 레이어입니다. 그라데이션이 그려져 있지 않습니다.

전체 밴드에서 **부드러운 분위기의 빛**(주황색, 파란색, 녹색, 빨간색,

노란색) 선택 섹션의 상단에 고정되어 있으며 모두 불투명도가 낮습니다.

단일 다크 레지스터의 페이지 리듬 주기: 히어로 스트라이프 → 대기

섹션 → 코드 창 섹션 → 이메일 모형 섹션 → 가격 또는 기능

그리드 → 검은색 바닥글. 브랜드는 결코 가벼운 표면에 따뜻해지지 않습니다. 심지어

보조 이메일 모형은 어둠 속에서 컴팩트한 흰색 카드로 렌더링됩니다.

검은색 테두리가 있는 잡지 페이지의 인쇄 삽입물처럼 액자에 담긴 캔버스.

**주요 특징:**

• 모든 공개 페이지의 순수한 검정색 캔버스(`{colors.canvas}` — `#000000`) 황백색 텍스트(`{colors.ink}` — `#fcfdff`)는 전체 읽기를 전달합니다.
• 세리프 기반 유형 시스템: 히어로 헤드라인의 경우 76~96px의 **도메인 디스플레이**, 마케팅 기관의 경우 **ABC Favorit**, UI의 경우 **Inter**, 코드의 경우 **Geist Mono**.
• 불투명도가 낮은 대기 워시(`{colors.accent-orange}`, `{colors.accent-blue}`, `{colors.accent-green}`, `{colors.accent-red}`, `{colors.accent-yellow}`)로만 사용되는 6가지 액센트 글로우 색상 — 버튼이나 단색 표면으로는 절대 사용되지 않습니다.
• 엄격한 컨테이너 어휘: 기능 카드, 코드 웰 및 이메일 모형을 위한 `{rounded.lg}`(12px) 버튼용 `{rounded.md}`(8px); 알약과 아바타용 `{rounded.full}`.
• 반투명 흰색 테두리(`{colors.hairline}` 6% / `{colors.hairline-strong}` 14%)가 그림자를 완전히 대체합니다. 시스템에는 전통적인 드롭 그림자 엘리베이션 언어가 없습니다.
• `{comComponent.button-primary}`는 검은색 텍스트가 있는 작은 흰색 직사각형입니다. 이는 페이지의 가장 밝은 픽셀이 되고 단일 시각적 앵커 역할을 하는 반직관적인 대비입니다.

색상

브랜드 및 액센트

• **기본 흰색** (`{colors.primary}` — `#fcfdff`): 브랜드의 사실상 강조점입니다. `{comComponent.button-primary}`(검은색 캔버스에 흰색 알약), Domaine 표시 헤드라인 및 활성 텍스트 색상용으로 예약되어 있습니다. 흰색은 이 캔버스에서 가능한 가장 큰 색상입니다. 이것이 바로 시그니처입니다.
• **Primary On** (`{colors.primary-on}` — `#000000`): `{colors.primary}` 표면 위에 라벨 색상을 표시합니다. 흰색 알약에 검은색 텍스트가 브랜드의 CTA 패턴입니다.
• **표면 조명**(`{colors.surface-light}` — `#f1f7fe`): `{comComponent.button-primary}`의 활성/눌림 상태로 사용되는 은은한 파란색 색조의 황백색입니다.

표면

• **캔버스** (`{colors.canvas}` — `#000000`): 기본 페이지 배경. 진정한 검정색, 절대 검정색에 가깝지 않습니다.
• **Surface Card** (`{colors.surface-card}` — `#0a0a0c`): 표준 삽입 카드 표면으로, 한 단계 더 높은 고도를 등록하기 위해 캔버스보다 가볍습니다.
• **Surface Elevated** (`{colors.surface-elevated}` — `#101012`): 주요 가격 책정 계층 및 고스트 버튼 표면에 사용되는 두 번째 상승 단계입니다.
• **표면 깊이**(`{colors.surface-deep}` — `#06060a`): 코드 창 배경 - 캔버스 자체보다 약간 더 차갑고 어두우며 온도를 통해 깊이를 나타냅니다.
• **헤어라인** (`{colors.hairline}` — `rgba(255,255,255,0.06)`): 행 사이와 기능 카드 주위에 사용되는 부드러운 1px 반투명 흰색 구분선입니다.
• **Hairline Strong** (`{colors.hairline-strong}` — `rgba(255,255,255,0.14)`): 카드, 코드 웰 및 양식 입력의 구조적 1px 테두리입니다.
• **구분선 소프트** (`{colors.divider-soft}` — `rgba(255,255,255,0.04)`): 바닥글 열 사이의 저대비 구분선입니다.

텍스트

• **잉크**(`{colors.ink}` — `#fcfdff`): 어두운 캔버스의 기본 텍스트 색상입니다. 새하얀 팝이라기보다는 마치 인쇄된 종이 같은 느낌을 주는 희미한 블루 쿨.
• **본문** (`{colors.body}` — `rgba(252,253,255,0.86)`): 순수 잉크가 너무 선명하게 느껴지는 긴 형식의 본문 텍스트입니다.
• **차콜** (`{colors.charcoal}` — `rgba(252,253,255,0.7)`): 캡션, 보조 탐색 라벨.
• **음소거**(`{colors.mute}` — `#a1a4a5`): 텍스트 및 비활성 라벨을 지원합니다.
• **Ash** (`{colors.ash}` — `#888e90`): 3차 텍스트, 바닥글 사본.
• **Stone** (`{colors.stone}` — `#464a4d`): 전경이 비활성화되었습니다.
• **On-Light** (`{colors.on-light}` — `#000000`): 희귀한 이메일 모형 흰색 카드 내부의 라벨 색상입니다.
• **켜짐 음소거**(`{색상

概要

Resend は、社説のタイポグラフィーを備えた開発者ツールのように見えます。

すべてのページは `{colors.canvas}` (`#000000`) で開き、最も大きな要素は

キャンバスはボタンやブランドスタンプではなく、96ピクセルのドメインディスプレイです。

セリフ見出し (「開発者向け電子メール」、「再考された電子メール」)

`ss01 / ss04 / ss11` の代替文体が使用されています。そのたった 1 つのタイポグラフィ

この決定がブランドのトーンを決定します。自信があり、思慮深く、少し文学的で、

目新しさよりも品質を重視して価格を設定します。

サポートキャストはテクニカルです。本文コピーが **ABC お気に入り**に切り替わります

マーケティング散文と UI ラベルの **Inter**、コード ブロックはレンダリングで表示されます。

**Geist Mono** `{component.code-window}` シェル内のヘアライン トラフィック -

明るいドット。表面の深さは、ほぼ完全に半透明の白で構築されています。

6% ボーダー、14% 強力ボーダー、4% ディバイダー — 深い `{colors.surface-deep}` 上

キャンバスのすぐ下にある黒のレイヤー。グラデーションは塗られていません

フルバンドにわたって、**柔らかな雰囲気の輝き** (オレンジ、青、緑、赤、

黄色) 選択したセクションの上部に固定され、すべて低い不透明度で表示されます。

単一の暗いレジスターでのページ リズム サイクル: ヒーロー ストライプ → 大気

セクション → コードウィンドウ セクション → 電子メールモックアップ セクション → 価格または機能

グリッド→黒いフッター。ブランドは表面的には決して温まりません。さえ

二次電子メールのモックアップは、暗闇の中でコンパクトな白いカードとしてレンダリングされます。

黒枠の雑誌ページの差し込み印刷のように額装されたキャンバス。

**主な特徴:**

• すべての公開ページに純粋な黒のキャンバス (`{colors.canvas}` — `#000000`)。オフホワイトのテキスト (`{colors.ink}` — `#fcfdff`) には完全な読み取り値が含まれます。
• セリフ主導のタイプ システム: ヒーローの見出しには 76 ～ 96 ピクセルの **Domaine Display**、マーケティング本文には **ABC Favorit**、UI には **Inter**、コードには **Geist Mono**。
• 6 つのアクセント グロー カラーは、不透明度の低い大気ウォッシュとしてのみ使用されます (`{colors.accent-orange}`、`{colors.accent-blue}`、`{colors.accent-green}`、`{colors.accent-red}`、`{colors.accent- yellow}`)。ボタンやソリッド サーフェスとしては決して使用されません。
• 厳密なコンテナボキャブラリー: フィーチャーカード、コードウェル、電子メールモックアップ用の `{rounded.lg}` (12px)。ボタンの場合は `{rounded.md}` (8px)。錠剤とアバターの場合は「{rounded.full}」。
• 半透明の白い境界線 (`{colors.hairline}` 6% / `{colors.hairline-strong}` 14%) が影を完全に置き換えます。システムには従来のドロップシャドウ標高言語がありません。
• `{component.button-primary}` は黒いテキストが付いた小さな白い四角形です。直観に反したコントラストがページの最も明るいピクセルとなり、単一の視覚的なアンカーとして機能します。

色

ブランドとアクセント

• **プライマリー ホワイト** (`{colors.primary}` — `#fcfdff`): ブランドの事実上のアクセント。 `{component.button-primary}` (黒いキャンバスに白い錠剤)、ドメイン表示見出し、およびアクティブなテキストの色用に予約されています。白はこのキャンバス上で最も派手な色です。それが特徴です。
• **Primary On** (`{colors.primary-on}` — `#000000`): `{colors.primary}` サーフェスの上のラベル カラー。白い錠剤に黒い文字がブランドの CTA パターンです。
• **Surface Light** (`{colors.surface-light}` — `#f1f7fe`): `{component.button-primary}` のアクティブ/押された状態として使用される、微妙な青みがかったオフホワイト。

表面

• **キャンバス** (`{colors.canvas}` — `#000000`): デフォルトのページの背景。本物の黒、決して黒に近いものではありません。
• **表面カード** (`{colors.surface-card}` — `#0a0a0c`): 標準の差し込みカード表面。キャンバスよりも軽く、高さのステップアップを記録します。
• **Surface Elevated** (`{colors.surface-elevated}` — `#101012`): 注目の価格帯とゴースト ボタン サーフェスで使用される 2 番目の昇格ステップ。
• **Surface Deep** (`{colors.surface-deep}` — `#06060a`): コード ウィンドウの背景 — キャンバス自体よりもわずかに冷たくて暗い色で、温度による深さを示唆します。
• **ヘアライン** (`{colors.hairline}` — `rgba(255,255,255,0.06)`): 行間およびフィーチャー カードの周囲に使用される、ソフトな 1 ピクセルの半透明の白い仕切り。
• **強いヘアライン** (`{colors.hairline-strong}` — `rgba(255,255,255,0.14)`): カード、コード ウェル、およびフォーム入力上の構造的な 1 ピクセルの境界線。
• **Divider Soft** (`{colors.divider-soft}` — `rgba(255,255,255,0.04)`): フッター列間の低コントラストのディバイダー。

テキスト

• **インク** (`{colors.ink}` — `#fcfdff`): 暗いキャンバス上の主なテキストの色。真っ白なポップというよりは、紙をプリントしたような、ほんのりブルーでクールな印象。
• **本文** (`{colors.body}` — `rgba(252,253,255,0.86)`): 純粋なインクではシャープすぎると感じられる長い形式の本文テキスト。
• **Charcoal** (`{colors.charcoal}` — `rgba(252,253,255,0.7)`): キャプション、セカンダリ ナビゲーション ラベル。
• **ミュート** (`{colors.mute}` — `#a1a4a5`): テキストと非アクティブなラベルをサポートします。
• **Ash** (`{colors.ash}` — `#888e90`): 三次テキスト、フッター コピー。
• **ストーン** (`{colors.stone}` — `#464a4d`): 前景を無効にします。
• **On-Light** (`{colors.on-light}` — `#000000`): レアな電子メール モックアップの白いカード内のラベルの色。
• **オンライトミュート** (`{color