/* ========================================================================= CLAUDE DESIGN SYSTEM — Foundations Colors + Typography tokens for the Claude.com (Anthropic) marketing surface. Fonts: Copernicus / StyreneB are licensed Anthropic typefaces and are NOT available as public webfonts. Documented open-source substitutes are used: - Display serif : Cormorant Garamond (substitute for Copernicus/Tiempos) - Body sans : Inter (substitute for StyreneB) - Mono : JetBrains Mono (matches the brand's code face) Swap the @import + --font-* vars when the licensed fonts are available. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ---------------------------------------------------------------------- COLOR — Brand & Accent ---------------------------------------------------------------------- */ --primary: #cc785c; /* signature Anthropic coral — primary CTA, coral callouts */ --primary-active: #a9583e; /* press / darker variant */ --primary-disabled: #e6dfd8; /* desaturated cream-tinted disabled */ --accent-teal: #5db8a6; /* sparing — terminal status, connection dots */ --accent-amber: #e8a55a; /* category badges, inline highlights */ /* ---------------------------------------------------------------------- COLOR — Surface ---------------------------------------------------------------------- */ --canvas: #faf9f5; /* default page floor — warm cream, NOT pure white */ --surface-soft: #f5f0e8; /* section dividers, soft bands */ --surface-card: #efe9de; /* feature / content cards — one step darker than canvas */ --surface-cream-strong: #e8e0d2; /* selected tabs, emphasized bands */ --surface-dark: #181715; /* code mockups, model cards, footer — dominant dark */ --surface-dark-elevated:#252320; /* elevated cards inside dark bands */ --surface-dark-soft: #1f1e1b; /* code-block bg inside larger dark cards */ --hairline: #e6dfd8; /* 1px border on cream surfaces */ --hairline-soft: #ebe6df; /* barely-visible same-band divider */ /* ---------------------------------------------------------------------- COLOR — Text ---------------------------------------------------------------------- */ --ink: #141413; /* all headlines + primary text — warm near-black */ --body-strong: #252523; /* emphasized paragraphs, lead text */ --body: #3d3d3a; /* default running text */ --muted: #6c6a64; /* sub-heads, breadcrumbs, secondary */ --muted-soft: #8e8b82; /* captions, fine-print, copyright */ --on-primary: #ffffff; /* text on coral */ --on-dark: #faf9f5; /* cream-tinted white on dark surfaces */ --on-dark-soft: #a09d96; /* footer body, secondary labels on dark */ /* ---------------------------------------------------------------------- COLOR — Semantic ---------------------------------------------------------------------- */ --success: #5db872; --warning: #d4a017; --error: #c64545; /* ---------------------------------------------------------------------- TYPE — Families ---------------------------------------------------------------------- */ --font-display: 'Cormorant Garamond', 'Tiempos Headline', Garamond, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* ---------------------------------------------------------------------- SPACING — base unit 4px ---------------------------------------------------------------------- */ --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-xxl: 48px; --space-section: 96px; /* ---------------------------------------------------------------------- RADIUS ---------------------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; /* buttons, inputs, tabs */ --radius-lg: 12px; /* content + product cards */ --radius-xl: 16px; /* hero illustration container */ --radius-pill: 9999px; --radius-full: 9999px; /* ---------------------------------------------------------------------- ELEVATION — color-block first, shadow rare ---------------------------------------------------------------------- */ --shadow-hover: 0 1px 3px rgba(20, 20, 19, 0.08); --ring-focus: 0 0 0 3px rgba(204, 120, 92, 0.15); /* coral focus ring */ } /* ========================================================================= SEMANTIC TYPE ROLES Display sizes are Copernicus-serif weight 400 with NEGATIVE letter-spacing. Negative tracking is non-negotiable — without it the serif reads off-brand. Cormorant runs a touch lighter than Copernicus, so display weights use 500. ========================================================================= */ .t-display-xl { font-family: var(--font-display); font-weight: 500; font-size: 64px; line-height: 1.05; letter-spacing: -1.5px; color: var(--ink); } .t-display-lg { font-family: var(--font-display); font-weight: 500; font-size: 48px; line-height: 1.1; letter-spacing: -1px; color: var(--ink); } .t-display-md { font-family: var(--font-display); font-weight: 500; font-size: 36px; line-height: 1.15; letter-spacing: -0.5px; color: var(--ink); } .t-display-sm { font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1.2; letter-spacing: -0.3px; color: var(--ink); } .t-title-lg { font-family: var(--font-body); font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--ink); } .t-title-md { font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.4; color: var(--ink); } .t-title-sm { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 1.4; color: var(--ink); } .t-body-md { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--body); } .t-body-sm { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.55; color: var(--body); } .t-caption { font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 1.4; color: var(--muted); } .t-caption-uppercase { font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 1.4; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); } .t-code { font-family: var(--font-mono); font-weight: 400; font-size: 14px; line-height: 1.6; } .t-button { font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 1.0; } .t-nav-link { font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 1.4; } /* ========================================================================= ELEMENT DEFAULTS — apply the roles to raw tags for quick prototyping ========================================================================= */ body { background: var(--canvas); color: var(--body); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1 { font-family: var(--font-display); font-weight: 500; font-size: 64px; line-height: 1.05; letter-spacing: -1.5px; color: var(--ink); margin: 0; } h2 { font-family: var(--font-display); font-weight: 500; font-size: 48px; line-height: 1.1; letter-spacing: -1px; color: var(--ink); margin: 0; } h3 { font-family: var(--font-display); font-weight: 500; font-size: 36px; line-height: 1.15; letter-spacing: -0.5px; color: var(--ink); margin: 0; } h4 { font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.4; color: var(--ink); margin: 0; } p { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--body); margin: 0; } a { color: var(--primary); text-decoration: none; } a:active { text-decoration: underline; } code, pre { font-family: var(--font-mono); font-size: 14px; line-height: 1.6; }