# DESIGN REFERENCE: claude.ai --- ## METADATA ```yaml version: 1.0.0 generated: 2026-07-10 source_url: https://claude.ai analysis_timestamp: 2026-07-10T16:00:00Z design_epoch: 2025/2026 accessibility_level: WCAG 2.1 AA (inferred) mobile_first: true framework_detected: React (inferred) design_system_used: Anthropic Design System (custom) core_philosophy: warm‑canvas editorial, humanist AI interface ``` --- ## BRAND IDENTITY ### Brand Essence ``` A warm‑canvas editorial interface for Anthropic's Claude product — deliberately warm and humanist where most AI brands use cool blue + slate. The system anchors on a tinted cream canvas with serif display headlines, warm coral CTAs, and dark navy product surfaces. ``` ### Visual Hierarchy Principles ``` - Primary weight: Serif display headlines (Copernicus/Tiempos Headline) — large, elegant, editorial - Secondary weight: Humanist sans‑serif body text (StyreneB/Inter) — clean, readable, approachable - Tertiary weight: UI elements, buttons, navigation — minimal, unobtrusive - The cream/coral pairing provides brand voltage and warmth - Signature Anthropic black‑radial‑spike mark anchors the wordmark ``` ### Emotional Tone ``` Primary emotion: Trust Secondary emotion: Warmth Overall mood: Balanced, professional, intellectually grounded — communicates trustworthiness and technical sophistication without feeling cold or corporate ``` --- ## TYPOGRAPHY SYSTEM ### Primary Font Family (Display) ```yaml name: Copernicus / Tiempos Headline fallback: serif weights_used: 400 styles_used: normal usage: Display headlines (h1, h2, h3) — editorial, slab‑serif character ``` ### Secondary Font Family (Body) ```yaml name: StyreneB / Inter fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif weights_used: 400, 500 styles_used: normal usage: Body text, UI elements, navigation — humanist sans‑serif ``` ### Typographic Scale ```yaml display_xl: { size: 4rem, weight: 400, line-height: 1.05, tracking: -0.09375rem } # 64px display_lg: { size: 3rem, weight: 400, line-height: 1.1, tracking: -0.0625rem } # 48px display_md: { size: 2.25rem, weight: 400, line-height: 1.15, tracking: -0.03125rem } # 36px display_sm: { size: 1.75rem, weight: 400, line-height: 1.2, tracking: -0.01875rem } # 28px title_lg: { size: 1.375rem, weight: 500, line-height: 1.3, tracking: 0 } # 22px title_md: { size: 1.125rem, weight: 500, line-height: 1.4, tracking: 0 } # 18px title_sm: { size: 1rem, weight: 500, line-height: 1.4, tracking: 0 } # 16px body_md: { size: 1rem, weight: 400, line-height: 1.55, tracking: 0 } # 16px body_sm: { size: 0.875rem, weight: 400, line-height: 1.55, tracking: 0 } # 14px caption: { size: 0.75rem, weight: 400, line-height: 1.4, tracking: 0.02em } caption_uppercase: { size: 0.6875rem, weight: 500, line-height: 1.4, tracking: 0.06em } ``` ### Letter Spacing Classes ```yaml tight: -0.09375rem to -0.01875rem (scales with display sizes) normal: 0 wide: 0.06em ``` --- ## COLOR ARCHITECTURE ### Primary Palette (Warm Cream Base) ```yaml primary_100: { hex: #FAF9F5, rgb: (250,249,245), usage: Canvas background — tinted cream } primary_200: { hex: #F5F0E8, rgb: (245,240,232), usage: Soft surfaces } primary_300: { hex: #EFE9DE, rgb: (239,233,222), usage: Card backgrounds } primary_400: { hex: #E8E0D2, rgb: (232,224,210), usage: Strong cream surfaces } primary_500: { hex: #E6DFD8, rgb: (230,223,216), usage: Hairline borders } primary_600: { hex: #EBE6DF, rgb: (235,230,223), usage: Soft hairline } primary_700: { hex: #FFFFFF, rgb: (255,255,255), usage: On‑dark text, pure white surfaces } ``` ### Dark Palette (Navy Product Surfaces) ```yaml dark_100: { hex: #181715, rgb: (24,23,21), usage: Dark surfaces } dark_200: { hex: #252320, rgb: (37,35,32), usage: Elevated dark surfaces } dark_300: { hex: #1F1E1B, rgb: (31,30,27), usage: Soft dark surfaces } dark_text: { hex: #141413, rgb: (20,20,19), usage: Primary text and dark backgrounds } ``` ### Text Colors ```yaml ink: { hex: #141413, rgb: (20,20,19), usage: Primary text } body: { hex: #3D3D3A, rgb: (61,61,58), usage: Body text } body_strong: { hex: #252523, rgb: (37,37,35), usage: Strong body text } muted: { hex: #6C6A64, rgb: (108,106,100), usage: Muted text } muted_soft: { hex: #8E8B82, rgb: (142,139,130), usage: Soft muted text } on_primary: { hex: #FFFFFF, rgb: (255,255,255), usage: Text on primary accent } on_dark: { hex: #FAF9F5, rgb: (250,249,245), usage: Text on dark surfaces } on_dark_soft: { hex: #A09D96, rgb: (160,157,150), usage: Soft text on dark } ``` ### Accent Colors (Warm Coral + Teal) ```yaml primary_accent: { hex: #CC785C, rgb: (204,120,92), usage: Primary CTA, coral accent } primary_accent_active: { hex: #A9583E, rgb: (169,88,62), usage: Active/pressed states } primary_accent_disabled: { hex: #E6DFD8, rgb: (230,223,216), usage: Disabled states } accent_teal: { hex: #5DB8A6, rgb: (93,184,166), usage: Secondary accent } accent_amber: { hex: #E8A55A, rgb: (232,165,90), usage: Tertiary accent } success: { hex: #5DB872, rgb: (93,184,114), usage: Success states } warning: { hex: #D4A017, rgb: (212,160,23), usage: Warning states } error: { hex: #C64545, rgb: (198,69,69), usage: Error states } ``` ### Neutral Scale ```yaml white: { hex: #FFFFFF, rgb: (255,255,255), usage: Pure white backgrounds } cream: { hex: #FAF9F5, rgb: (250,249,245), usage: Canvas background } gray_100: { hex: #F5F0E8, rgb: (245,240,232), usage: Soft surfaces } gray_200: { hex: #EFE9DE, rgb: (239,233,222), usage: Card backgrounds } gray_300: { hex: #E8E0D2, rgb: (232,224,210), usage: Strong cream surfaces } gray_400: { hex: #E6DFD8, rgb: (230,223,216), usage: Hairline borders } gray_500: { hex: #B0AEA5, rgb: (176,174,165), usage: Secondary elements } gray_600: { hex: #8E8B82, rgb: (142,139,130), usage: Soft muted text } gray_700: { hex: #6C6A64, rgb: (108,106,100), usage: Muted text } gray_800: { hex: #3D3D3A, rgb: (61,61,58), usage: Body text } gray_900: { hex: #141413, rgb: (20,20,19), usage: Primary text, ink } ``` ### Color Relationships ```yaml contrast_ratios: text_on_primary: 4.5:1 (white on #CC785C) text_on_cream: 12.1:1 (#141413 on #FAF9F5) text_on_dark: 15.4:1 (#FAF9F5 on #141413) color_harmony: warm analogous (cream base with coral accent) accessibility_compliance: fully_compliant ``` --- ## SPACING & LAYOUT SYSTEM ### Base Unit ```yaml base_unit: 8px scaling_factor: 1.25 ``` ### Spacing Scale ```yaml spacing_0: { value: 0px, usage: No spacing } spacing_1: { value: 4px, usage: Tiny gaps } spacing_2: { value: 8px, usage: Small paddings } spacing_3: { value: 12px, usage: Element gaps } spacing_4: { value: 16px, usage: Standard spacing } spacing_5: { value: 24px, usage: Medium spacing } spacing_6: { value: 32px, usage: Large spacing } spacing_7: { value: 48px, usage: XL spacing } spacing_8: { value: 64px, usage: Section spacing } spacing_9: { value: 96px, usage: Hero spacing } spacing_10: { value: 128px, usage: Page margins } ``` ### Breakpoints ```yaml mobile_portrait: { min: 0px, max: 480px, columns: 4, gutter: 16px } mobile_landscape: { min: 481px, max: 768px, columns: 6, gutter: 24px } tablet: { min: 769px, max: 1024px, columns: 8, gutter: 32px } desktop: { min: 1025px, max: 1440px, columns: 12, gutter: 32px } widescreen: { min: 1441px, max: 1920px, columns: 12, gutter: 40px } ultrawide: { min: 1921px, columns: 16, gutter: 48px } ``` ### Container Widths ```yaml narrow: { max_width: 640px, padding: 16px } default: { max_width: 880px, padding: 24px } # editorial reading width wide: { max_width: 1120px, padding: 32px } full: { max_width: 100%, padding: 24px } ``` --- ## COMPONENT LIBRARY ### Navigation Components #### Primary Navigation ```yaml type: horizontal (desktop) / hamburger (mobile) position: static or sticky (top) height: 64px background: #FAF9F5 or transparent alignment: left (logo) / right (actions) submenu_style: dropdown (minimal) ``` #### Footer Navigation ```yaml type: horizontal (desktop) / stacked (mobile) position: bottom style: minimal, with subtle dividers ``` ### Button System #### Primary Button (Coral) ```yaml default: { bg: #CC785C, text: #FFFFFF, padding: 12px 24px, radius: 0.625rem } hover: { bg: #A9583E, text: #FFFFFF } active: { bg: #A9583E, text: #FFFFFF } focus: { outline: 2px solid #CC785C, offset: 2px } disabled: { bg: #E6DFD8, text: #FFFFFF, opacity: 0.6 } ``` #### Secondary Button ```yaml default: { bg: transparent, text: #141413, border: 1px solid #E6DFD8, padding: 12px 24px, radius: 0.625rem } hover: { bg: #F5F0E8, text: #141413 } active: { bg: #EFE9DE, text: #141413 } focus: { outline: 2px solid #CC785C, offset: 2px } disabled: { opacity: 0.5 } ``` #### Button Sizes ```yaml small: { padding: 8px 16px, font_size: 0.875rem, height: 36px } medium: { padding: 12px 24px, font_size: 1rem, height: 48px } large: { padding: 16px 32px, font_size: 1.125rem, height: 56px } ``` ### Cards ```yaml default: { bg: #FFFFFF, border: 1px solid #E6DFD8, radius: 0.625rem, padding: 24px } hover: { shadow: 0 4px 20px rgba(0,0,0,0.06) } variants: - feature: { bg: #F5F0E8, border: none, padding: 32px } - product: { bg: #FFFFFF, border: 1px solid #E6DFD8, radius: 0.625rem, padding: 20px } - testimonial: { bg: #FAF9F5, border: none, radius: 0.625rem, padding: 28px } ``` ### Form Elements ```yaml input: { bg: #FFFFFF, border: 1px solid #E6DFD8, radius: 0.625rem, padding: 12px 16px } input_focus: { border: 2px solid #CC785C, shadow: 0 0 0 3px rgba(204,120,92,0.2) } input_error: { border: 2px solid #C64545 } input_disabled: { bg: #F5F0E8, opacity: 0.7 } ``` ### Artifacts / Widgets ```yaml type: Interactive HTML widgets generated inline in conversation style: Live‑streaming HTML with cards, charts, and sliders technology: show_widget tool renders HTML inline ``` --- ## LAYOUT PATTERNS ### Page Structures ```yaml landing_page: - hero_section: { position: top, size: full‑width, content_type: display headline + subhead + CTA } - features: { columns: 3 (desktop), spacing: 32px } - showcase: { product model cards, dark navy surfaces } - cta_section: { position: before footer, style: centered with coral accent } - footer: { columns: 3 (desktop) } conversation_interface: - header: { position: top, height: 64px } - chat_area: { width: default container, scroll: main } - input_area: { position: bottom, sticky } - artifacts: { inline widgets, cards, charts } ``` ### Grid Systems ```yaml standard: { columns: 12, gap: 24px, alignment: center } ``` ### Section Patterns ```yaml hero: { height: auto (min 50vh), alignment: center, bg: #FAF9F5 } features: { columns: 3, alignment: center } showcase: { bg: dark navy surfaces, cards: model showcase } cta: { layout: centered, bg: #CC785C with white text } ``` --- ## MOTION & INTERACTION ### Transition Durations ```yaml instant: 50ms micro: 150ms fast: 200ms default: 300ms slow: 500ms macro: 750ms ``` ### Easing Curves ```yaml linear: cubic-bezier(0, 0, 1, 1) ease: cubic-bezier(0.25, 0.1, 0.25, 1) ease_out: cubic-bezier(0, 0, 0.58, 1) ease_in_out: cubic-bezier(0.42, 0, 0.58, 1) ``` ### Hover States ```yaml scale: { value: 1.03, duration: 150ms } lift: { value: -4px, duration: 150ms } color_shift: { speed: 150ms } ``` ### Streaming UI ```yaml type: Live HTML streaming as tokens arrive components: Cards, charts, and sliders appear progressively ``` --- ## RESPONSIVE BEHAVIORS ### Priority of Elements ```yaml mobile_priority: [hero headline, CTA, features, footer] tablet_priority: [hero, features, showcase, footer] desktop_priority: [hero, features, showcase, CTA, footer] ``` ### Collapse Points ```yaml navigation: 768px (hamburger appears) multi_column_layout: 768px (3 cols → 2 cols → 1 col) ``` ### Touch Targets ```yaml minimum_size: 44x44px spacing_between: 12px ``` --- ## ACCESSIBILITY FEATURES ### Semantic HTML Structure ```yaml landmarks: [
,
,