---
title: "Claude — Sign In design system"
variant: extended
source: https://claude.ai/login
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/claude-ai)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Claude — Sign In · Design System

> Quiet clarity for a thoughtful AI experience

**Theme:** light · **Industry:** ai · **Source:** https://claude.ai/login · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A restrained Claude sign-in page pairs editorial typography and an understated account form with documentary-style workplace imagery. Lower on the page, pricing cards, FAQs, and a dense footer extend the same calm visual system.

## North star

Use warm near-white space, editorial serif headlines, precise sans-serif interface text, and restrained borders to make the experience feel calm and trustworthy.

## Overview

The page is built on a warm near-white canvas (#fcfcfb), with near-black text and quiet gray supporting copy. The only measured text accent is a restrained blue used for links; the muted blue-gray card outline appears on a pricing option rather than defining the overall brand. Anthropic Sans carries navigation, forms, plan details, and footer content, while Anthropic Serif gives the hero and section headings a more editorial voice. A wide desktop composition balances a left-aligned sign-in area with a large rounded workplace photograph on the right. The form sits in a softly outlined, subtly elevated card, while the pricing section uses three white cards and fine borders to distinguish plans. Generous open space separates major sections, contrasting with the compact, information-dense footer. Keep decorative colour and effects secondary to typography, content, and photography.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Canvas | `#fcfcfb` | `--color-warm-canvas` | surface | Page-wide background behind the sign-in hero, pricing, FAQ, and footer. |
| Soft Ink | `#0b0b0b` | `--color-soft-ink` | neutral | Primary headings, navigation, plan text, and dark primary actions. |
| Quiet Graphite | `#52514e` | `--color-quiet-graphite` | neutral | Secondary interface copy, muted navigation actions, and supporting text. |
| Pale Rule | `#e3e3e2` | `--color-pale-rule` | semantic | Fine borders around standard plan cards and subtle interface divisions. |
| Warm Ash | `#898781` | `--color-warm-ash` | neutral | Low-emphasis helper text and footer details. |
| Link Blue | `#184f95` | `--color-link-blue` | accent | Small inline links such as Privacy Policy and usage-limit details. |
| Cloud Outline | `#cfdae7` | `--color-cloud-outline` | semantic | Blue-gray border distinguishing the highlighted Max plan card. |

### Semantic aliases

`--color-canvas` → `#fcfcfb` (Warm Canvas) · `--color-text` → `#0b0b0b` (Soft Ink) · `--color-text-muted` → `#52514e` (Quiet Graphite) · `--color-text-subtle` → `#898781` (Warm Ash) · `--color-border` → `#e3e3e2` (Pale Rule) · `--color-accent` → `#184f95` (Link Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0b0b0b` | `#fcfcfb` | 19.17:1 | AAA |
| `#52514e` | `#fcfcfb` | 7.73:1 | AAA |
| `#898781` | `#fcfcfb` | 3.5:1 | AA-large |
| `#184f95` | `#fcfcfb` | 7.89:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| anthropic-sans | `--font-body` | webfont | 400, 500, 600, 580 | Navigation, forms, buttons, body copy, pricing details, and footer. | Inter |
| anthropic-serif | `--font-display` | webfont | 400, 330 | Hero headline and prominent section headings. | Source Serif 4 |

- **anthropic-sans:** Mostly regular-weight sentence case; use clear, compact interface text without decorative tracking.
- **anthropic-serif:** Editorial serif at regular to light weights; retain natural letter spacing and sentence case.

### Type scale — Perfect Fourth (ratio ≈ 1.368, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 330 | 1.15 | 0 | — | anthropic-serif | Large editorial statement when a page needs a prominent opening headline. |
| h1 | 30px | 400 | 1.2 | 0 | — | anthropic-serif | Hero headline introducing the sign-in experience. |
| h2 | 24px | 580 | 1.33 | 0 | — | anthropic-sans | Pricing and FAQ section headings. |
| h3 | 20px | 433 | 1 | 0 | — | Anthropicons-Variable | Small icon-led or card-level headings where present. |
| body | 16px | 400 | 1.63 | 0 | — | anthropic-sans | Supporting descriptions, plan details, and explanatory copy. |
| caption | 12px | 400 | 1.25 | 0 | — | anthropic-sans | Fine print, legal notes, and compact secondary labels. |
| button | 15px | 400 | 1.33 | 0 | — | anthropic-sans | Sign-in, plan, and other action labels. |
| nav | 14px | 400 | 1.43 | 0 | — | anthropic-sans | Header navigation links and menu labels. |
| link | 14px | 400 | 1.43 | 0 | — | anthropic-sans | Inline policy and usage-limit links. |

OpenType features in use: `"liga" 0`, `"liga"`.

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 1, 4, 6, 8, 9, 12, 16, 20, 24, 32 px.
- Section rhythm 32px · element gap 6px · card padding 32px · max content width 1312px.

The desktop hero uses a broad two-column composition: sign-in content on the left and a large rounded photograph on the right. The header spans the page with the Claude mark at one edge and compact navigation and actions at the other. Lower sections stack vertically: centered pricing heading and selector, three plan cards, a narrow FAQ list, then a multi-column footer. The measured layout uses a 1312px maximum width, 32px section gaps and card padding, and a compact overall density, balanced by conspicuous open space around the hero and between major blocks.

## Shape & elevation

- Radius: button `10px` · input `10px` · card `24px` · nav `8px` · link `2px` · xs `2px` · sm `6px` · md `8px` · lg `10px` · xl `16px` · 2xl `24px`
- Shadow `inset` (other, nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, color(srgb 0.0431373 0.0431373 0.0431373 / 0.1) 0px 0px 0px 1px `
- Shadow `xl` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, color(srgb 0 0 0 / 0.0157) 0px 4px 24px 0px, color(srgb 0 0 0 / `
- Shadow `inset-2` (input): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, color(srgb 0.0431373 0.0431373 0.0431373 / 0.1) 0px 0px 0px 1px `
- Shadow `md` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, color(srgb 0 0 0 / 0.04) 0px 4px 20px 0px`
- Shadow `inset-3` (other): `color(srgb 0.0431373 0.0431373 0.0431373 / 0.1) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- Shadow `md-2` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.432719 -0.0298224 -0.124677 / 0.1) 0px 4px 24px 0px`
- Motion: standard transition `0.06s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat, with pale hairline borders defining inputs and cards. The form and pricing surfaces gain only faint, broad shadows rather than pronounced lift. Use rounded card and control edges, reserving the slightly blue-gray outline for the emphasized plan; avoid heavy drop shadows or layered glass effects.

## Imagery

The hero features a large, rounded documentary-style photograph of a person working at a desk amid notes and papers. Its subdued, cool workplace tones sit quietly against the warm canvas rather than introducing a strong graphic palette. Keep the image substantial and rectangular, with rounded corners and natural photographic detail; do not replace it with a bright illustration or decorative gradient.

## Components

### Header navigation

Claude mark sits left; compact Anthropic Sans navigation, a quiet Contact sales control, and a dark Try Claude action align on the right.

### Hero sign-in form

A softly elevated, rounded panel groups Google and Apple sign-in, an OR divider, email input, black Continue with email button, and muted legal copy.

### Hero media

Large workplace photograph beside the form, cropped into a rounded rectangle with no decorative frame.

### Plan selector

Centered section title above a compact two-option Individual and Team and Enterprise selector.

### Pricing cards

Three white cards present Free, Pro, and Max plans with icon, price, dark action, and check-list details; Max uses the measured #cfdae7 outline.

### FAQ list

Centered heading followed by a narrow list of question rows with understated disclosure indicators.

### Footer

A dense multi-column directory of product, solution, resource, and policy links, with brand mark and company details.

### Measured component styles

- **Primary button** (“Meet Claude ”): transparent background · text #52514e · radius 0px · padding 0px · 400 15px anthropic-sans
- **Link** (“Privacy Policy”): transparent background · text #184f95 · radius 2px · padding 0px · 400 12px anthropic-sans
- **Input**: background #fefefd · text #0b0b0b · radius 10px · padding 0px 16px · 400 15px anthropic-sans · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Card** (“Free Try Claude $0 Free for everyone Try”): background #ffffff · text #0b0b0b · border 1px solid #e3e3e2 · radius 24px · padding 32px · 400 14px anthropic-sans
- **Navigation item** (“Meet Claude  Platform  Solutions  Pri”): transparent background · text #0b0b0b · radius 0px · padding 0px · 400 14px anthropic-sans

## Do

- Keep the page canvas warm and nearly white.
- Use serif type for the main editorial headline.
- Keep form labels and navigation in clean sans-serif.
- Make the hero photograph prominent but subdued.
- Separate plan cards with thin, quiet outlines.
- Reserve blue for inline links and select plan details.

## Don't

- Do not introduce saturated colour bands or gradients.
- Do not use heavy shadows to separate ordinary surfaces.
- Do not crowd the hero with extra decorative elements.
- Do not make supporting copy compete with the headline.
- Do not turn the pricing cards into brightly coloured tiles.
- Do not treat colours inside the photo as interface tokens.

## Agent prompt

Build a new page in Claude’s restrained editorial interface style. Use Warm Canvas (#fcfcfb) as the dominant background, Soft Ink (#0b0b0b) for primary text and dark actions, Quiet Graphite (#52514e) and Warm Ash (#898781) for supporting copy, and Link Blue (#184f95) only for inline links. Use Anthropic Sans for interface and body text, with an editorial serif such as Source Serif 4 for prominent headings. Favor a wide, balanced desktop composition, clear alignment, generous separation between sections, and compact navigation. Use white cards with fine Pale Rule (#e3e3e2) borders and subtle shadows; reserve Cloud Outline (#cfdae7) for a highlighted surface. Keep photography documentary and naturally toned, controls rounded, and visual decoration minimal. Make hierarchy and readable content do the work.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | A full-page sequence with header, two-column sign-in hero, centered three-card pricing, FAQ, and multi-column footer. | social sign-in, email sign-in, plan comparison, FAQ disclosures | editorial hero, rounded form panel, three pricing cards, compact link-heavy footer |

## Source CSS custom properties (selected)

```css
--cds-page-bg: #fcfcfb;
--font-cjk-sans-sc: "PingFang SC";
--font-cjk-sans-tc: "PingFang TC";
--font-cjk-sans-jp: "Hiragino Sans";
--font-cjk-sans-kr: "Apple SD Gothic Neo";
--font-cjk-sans-fallback: "PingFang SC", "PingFang TC", "Hiragino Sans", "Apple SD Gothic Neo";
--font-cjk-serif-sc: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC";
--font-cjk-serif-tc: "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC";
--font-cjk-serif-jp: "Hiragino Sans", "Yu Gothic", Meiryo, "Noto Sans CJK JP";
--font-cjk-serif-kr: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR";
--cds-border: hsl(from #0b0b0b h s l / 10%);
--cds-font-weight-regular: 400;
--_brand-clay: 14.7692 63.1068% 59.6078%;
--_brand-clay-emphasized: 15.1111 54.2169% 51.1765%;
--new-page-greeting-font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem);
--df-ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
--df-bg-page-hsl: from var(--cds-surface-1) h s l;
--font-open-dyslexic: "OpenDyslexic", "Comic Sans MS", ui-serif, serif;
--font-anthropic-mono: "anthropic-mono", ui-monospace, monospace;
--cds-radius: calc(.5rem * 1);
--cds-shadow-sm: 0 1px 2px 0 hsl(from #0b0b0b h s l / 6%), 0 2px 8px 0 hsl(from #0b0b0b h s l / 8%);
--cds-shadow-md: 0 2px 4px 0 hsl(from #0b0b0b h s l / 7%), 0 6px 16px 0 hsl(from #0b0b0b h s l / 8%);
--cds-shadow-lg: 0 4px 8px 0 hsl(from #0b0b0b h s l / 8%), 0 12px 28px -2px hsl(from #0b0b0b h s l / 8%);
--cds-shadow-drop-ring: inset 0 0 0 2px #2a78d6;
--cds-shadow-drop-ring-danger: inset 0 0 0 2px #d03b3b;
--cds-shadow-drop-glow: inset 0 0 24px -2px hsl(from #2a78d6 h s l / 20%);
--cds-shadow-drop-glow-danger: inset 0 0 24px -2px hsl(from #d03b3b h s l / 20%);
--cds-font-mono: "anthropic-mono", ui-monospace, monospace, "SF Mono", ui-monospace, Menlo, Consolas, monospace;
--cds-font-mono-ui: "anthropic-mono", ui-monospace, monospace, "SF Mono", ui-monospace, Menlo, Consolas, monospace;
--cds-ease-out: cubic-bezier(.165, .84, .44, 1);
--cds-oncolor-200: #f8f8f7bf;
--cds-oncolor-300: #f8f8f780;
--cds-font-weight-medium: 500;
--cds-font-weight-semibold: 580;
--cds-font-weight-bold: 600;
--cds-font-grad-semibold: 180;
--cds-font-grad-bold: 200;
--cds-opacity-icon-secondary: .4;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/claude-ai