--- name: Sourcegraph tagline: Near-black code-intelligence canvas — PolySans display, coral-red accent, big quiet headlines. updated_at: 2026-05-28T22:15:59.462Z published_at: 2026-05-28T22:15:59.462Z author: webdesignhot source_url: https://sourcegraph.com spec: webdesignhot/0.1 quality: curated featured: false categories: [dev-tools] tags: [dark, structured, sans, developer, code-search] preview_swatch: ['#1a1817', '#f34e3f', '#ededed'] related: [] description: 'Sourcegraph''s marketing surface is a near-black `#1a1817` canvas — a warm, very-slightly-brown black rather than a cold blue-black — set in PolySans, the custom variable sans the company uses for both display and body. The signature is restraint at scale: enormous PolySans display headlines (80px / weight 500) sit calmly against the dark ground, near-white `#ededed` body text reads cleanly, and a single coral-red `#f34e3f` accent does all the chromatic work — primary CTAs, links, hover states, focus rings. The register is unmistakably developer-technical: a code-search and AI-coding tool (Cody) that markets itself the way it presents code — dark, dense where it counts, and quiet where most marketing shouts.' # Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger). # Maps role names to this entry's actual token names so role-aware # downstream tools resolve `theme.background` → entry's `bg`, etc. # Auto-generated by scripts/add-aliases.mjs — do not edit manually; # regenerate after changing color token names. aliases: background: bg foreground: text primary: brand primary-foreground: on-brand muted: text-muted border: border ring: focus-ring colors: bg: '#1a1817' # near-black warm canvas — oklch(0.16 0.003 27) bg-soft: '#211f1d' # subtle raised band / alternating section bg-elev: '#252321' # elevated band above canvas surface: '#222222' # card / secondary surface (secondary-dark token) surface-soft: '#1f1d1c' # nested surface inside cards surface-strong: '#2c2a28' # hover-state surface / inline rows text: '#ededed' # primary copy — near-white text-strong: '#ffffff' # display emphasis (rare) text-soft: '#b8b8b8' # subheads, supporting copy text-muted: '#a0a0a0' # captions, metadata text-faint: '#7a7672' # disabled / least-prominent brand: '#f34e3f' # Sourcegraph coral-red — rgb(243, 78, 63) brand-hover: '#ff6354' # lighter coral on hover brand-emphasis: '#d63b2d' # deeper coral for pressed / dense fills brand-soft: 'rgba(243, 78, 63, 0.12)' # tinted background for eyebrow/badge brand-soft-fg: '#ff7a6e' # lifted coral for text on dark when AAA needed on-brand: '#ffffff' # text on coral CTA link: '#f34e3f' # coral link (carries the single-accent system) link-hover: '#ff6354' border: '#34302d' # low-contrast hairline divider border-soft: '#2a2724' # nested / quiet divider border-strong: '#48433f' # input + secondary-button border focus-ring: '#f34e3f' # coral focus ring semantic-success: '#4ec77f' # success state (muted green) semantic-warning: '#e0a64b' # warning state (amber) semantic-danger: '#f34e3f' # danger reuses the brand coral semantic-info: '#5aa9f0' # info state (cool blue) diff-add-bg: 'rgba(78, 199, 127, 0.14)' # added-line tint in code blocks diff-remove-bg: 'rgba(243, 78, 63, 0.14)' # removed-line tint in code blocks shadow-tint: 'rgba(0, 0, 0, 0.55)' typography: display: family: '"PolySans", "PolySans Fallback", system-ui, -apple-system, sans-serif' weights: [500, 600, 700] body: family: '"PolySans", "PolySans Fallback", system-ui, -apple-system, sans-serif' weights: [400, 500, 600] mono: family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace' weights: [400, 500] scale: display-hero: { size: 80, weight: 500, lineHeight: 1.0, tracking: '-0.03em', family: display } display-lg: { size: 56, weight: 500, lineHeight: 1.05, tracking: '-0.025em', family: display } h1: { size: 48, weight: 500, lineHeight: 1.08, tracking: '-0.02em', family: display } h2: { size: 36, weight: 500, lineHeight: 1.15, tracking: '-0.015em', family: display } h3: { size: 28, weight: 600, lineHeight: 1.2, tracking: '-0.01em', family: display } h4: { size: 22, weight: 600, lineHeight: 1.3, tracking: '-0.005em', family: display } h5: { size: 18, weight: 600, lineHeight: 1.35, tracking: '0', family: body } body-lg: { size: 18, weight: 400, lineHeight: 1.6, tracking: '0', family: body } body: { size: 16, weight: 400, lineHeight: 1.6, tracking: '0', family: body } body-sm: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: body } lead: { size: 20, weight: 400, lineHeight: 1.55, tracking: '0', family: body } label: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0', family: body } eyebrow: { size: 12, weight: 600, lineHeight: 1.4, tracking: '0.08em', family: body, transform: 'uppercase' } button: { size: 15, weight: 500, lineHeight: 1.0, tracking: '0', family: body } button-sm: { size: 14, weight: 500, lineHeight: 1.0, tracking: '0', family: body } link: { size: 16, weight: 500, lineHeight: 1.5, tracking: '0', family: body } caption: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: body } code-body: { size: 14, weight: 400, lineHeight: 1.55, tracking: '0', family: mono } code-label: { size: 11, weight: 500, lineHeight: 1.4, tracking: '0.06em', family: mono, transform: 'uppercase' } radius: micro: 2 sm: 4 md: 8 lg: 12 xl: 16 featured: 24 pill: 9999 spacing: base: 4 xxs: 4 xs: 8 sm: 12 md: 16 lg: 24 xl: 32 xxl: 48 section-sm: 64 section: 96 section-lg: 128 scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128] layout: page-width: 1280 prose-width: 720 header-height: 64 motion: ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)' ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)' ease-entrance: 'cubic-bezier(0, 0, 0.2, 1)' duration-fast: 150 duration-standard: 240 duration-slow: 320 reduced-motion: 'respects prefers-reduced-motion: reduce — hover lifts collapse to color-only; on-scroll reveals fade without translate' breakpoints: mobile: 640 tablet: 1024 desktop: 1280 wide: 1536 shadows: ambient: 'rgba(0, 0, 0, 0.35) 0 1px 2px' standard: 'rgba(0, 0, 0, 0.45) 0 6px 16px' elevated: 'rgba(0, 0, 0, 0.55) 0 16px 40px' deep: 'rgba(0, 0, 0, 0.70) 0 28px 56px' ring: '0 0 0 2px #f34e3f' accessibility: contrast-text-on-bg: 15.1 # #ededed on #1a1817 — AAA contrast-text-on-brand: 3.5 # #ffffff on #f34e3f — AA large only (see §9) contrast-near-black-on-brand: 5.0 # #1a1817 on #f34e3f — AA normal contrast-brand-on-bg: 5.0 # #f34e3f on #1a1817 — AA normal / AAA large contrast-soft-on-bg: 8.9 # #b8b8b8 on #1a1817 — AAA contrast-muted-on-bg: 6.8 # #a0a0a0 on #1a1817 — AAA at body focus-ring: '2px solid #f34e3f with 2px offset on #1a1817' reduced-motion-honored: true keyboard-nav: 'tab order follows visual; skip-link visible on focus; Escape closes overlays; Cmd/Ctrl+K opens search' components: button-primary: background: '#f34e3f' text: '#ffffff' radius: 8 padding: '10px 16px' height: 40 font: button hover: 'background #ff6354' active: 'background #d63b2d' use: 'primary CTA — Get started / Book a demo, coral fill' button-secondary: background: '#222222' text: '#ededed' border: '1px solid #48433f' radius: 8 padding: '10px 16px' height: 40 font: button hover: 'background #2c2a28; border #5a544f' use: 'secondary action — Watch demo / Contact sales' button-ghost: background: 'transparent' text: '#ededed' border: '1px solid #34302d' radius: 8 padding: '10px 16px' height: 40 font: button hover: 'background rgba(237, 237, 237, 0.06); border #48433f' use: 'tertiary / quiet action on dark canvas' button-link: background: 'transparent' text: '#f34e3f' radius: 8 padding: '10px 8px' font: button hover: 'text #ff6354; underline' use: 'inline text CTA — Learn more →' card: background: '#222222' text: '#ededed' border: '1px solid #34302d' radius: 12 padding: 24 use: 'standard feature card on dark canvas' card-elevated: background: '#252321' text: '#ededed' border: '1px solid #34302d' radius: 16 padding: 32 hover: 'background #2c2a28; border #48433f' use: 'interactive / clickable feature tile' card-feature: background: '#1f1d1c' text: '#ededed' border: '1px solid #f34e3f' radius: 16 padding: 32 use: 'highlighted feature card — coral hairline border' input: background: '#1a1817' text: '#ededed' border: '1px solid #48433f' radius: 8 padding: '10px 12px' height: 40 focus: 'border #f34e3f; ring 0 0 0 2px rgba(243, 78, 63, 0.25)' use: 'email / search / form input' badge: background: '#222222' text: '#a0a0a0' border: '1px solid #34302d' radius: 9999 padding: '3px 10px' font: caption use: 'status / category badge — pill' badge-eyebrow: background: 'rgba(243, 78, 63, 0.12)' text: '#ff7a6e' border: '1px solid rgba(243, 78, 63, 0.22)' radius: 9999 padding: '4px 12px' font: eyebrow use: 'section eyebrow — coral-tinted taxonomy chip' nav-link: background: 'transparent' text: '#ededed' font: body padding: '6px 12px' hover: 'text #ffffff; background rgba(237, 237, 237, 0.06)' use: 'top-nav menu item (Products / Solutions / Resources / Pricing)' code-block: background: '#211f1d' text: '#ededed' border: '1px solid #34302d' radius: 8 padding: 16 font: code-body use: 'terminal / config / search-result sample with optional filename header' dark-mode: default lineage: summary: | Sourcegraph's marketing site is a near-black `#1a1817` canvas — a warm, very-slightly-brown black (around oklch 0.16 0.003 27) rather than the cold blue-black most dev tools default to — set entirely in PolySans, the custom variable sans the brand uses for both display and body. The chromatic system is radically reduced: one coral-red `#f34e3f` accent (the long-running "Sourcegraph red") carries every interactive moment — primary CTAs, links, hover states, focus rings, eyebrow tints — while near-white `#ededed` body and large quiet PolySans headlines do the rest. The display register is the signature: enormous headlines (80px at weight 500, not the heavier 700 most marketing reaches for) sit calmly against the dark ground with tight `-0.03em` tracking, reading as confident rather than loud. The lineage runs straight through the modern dev-tool dark-canvas lineage — Linear's near-black editorial restraint, Vercel's oversized display confidence — but Sourcegraph diverges on two axes: the black is warm not cool, and the accent is a coral-red pulled from a decade of brand equity rather than the genre-default cyan or violet. As a code-search and AI-coding company (Cody), Sourcegraph markets the way it presents code: dark, legible, dense where density matters, and quiet everywhere else. influences: - name: 'PolySans (Gradient Foundry)' role: 'Custom variable display + body type signature — the brand''s primary typeface' url: 'https://gradientfoundry.com/typefaces/polysans' - name: 'Linear' role: 'Pioneered the near-black dark-mode marketing canvas with single-accent restraint' url: 'https://linear.app' - name: 'Vercel' role: 'Confidence in oversized display headlines on a dark ground' url: 'https://vercel.com' - name: 'GitHub' role: 'Adjacent dev-platform dark canvas — diff-color accent vocabulary, code-native chrome' url: 'https://github.com' - name: 'Stripe' role: 'Developer-marketing rigor — tokenized system, technical-but-warm register' url: 'https://stripe.com' --- ## 1. Visual Theme & Atmosphere Sourcegraph's marketing canvas is a near-black `#1a1817` ground — and the warmth of that black is the first thing that distinguishes it. Where most developer tools reach for a cold blue-black (`#0d1117`, `#0a0a0a`), Sourcegraph picks a black that carries a faint brown undertone (around oklch 0.16 0.003 27). On screen it reads as charcoal warmed by a candle rather than charcoal lit by an LED. That single decision sets the temperature of the entire system: every surface, border, and shadow inherits the warmth, and the coral-red accent sits on top of it as if it belongs. The typography is the signature. Headlines are set in PolySans — the custom variable sans the brand uses for both display and body — at genuinely large sizes (80px for the hero) and, crucially, at weight 500 rather than the 700 most marketing sites reach for. The effect is a kind of quiet confidence: the headline is enormous, but it is not shouting. Tight `-0.03em` tracking pulls the letterforms together so the display copy reads as engineered rather than decorative. Near-white `#ededed` body text below it stays clean and legible at a comfortable 16px with generous 1.6 line-height. The chromatic system is radically reduced. There is exactly one accent — coral-red `#f34e3f`, the long-running "Sourcegraph red" — and it does all the work: primary CTAs, inline links, hover states, focus rings, and the faint tint behind section eyebrows. There is no secondary brand hue, no multi-color decorative palette, no gradient mesh. When you see coral on the page, it means "this is interactive" or "this matters." The discipline is the point: a single accent on a warm-black ground reads as a tool that knows exactly what it is. Spatially, the page is calm and well-spaced rather than dense. Sections breathe with 96px of vertical padding, feature cards sit on the `#222222` secondary surface with hairline `#34302d` borders, and the content caps at a comfortable 1280px. Because this is a code-intelligence product, code samples and search-result mockups appear throughout — rendered in monospace inside `#211f1d` code blocks — but they read as confident product demonstration, not wall-of-text intimidation. Reading the homepage feels like opening a tool built by people who write a lot of code and have strong opinions about restraint. Nothing is gratuitous. The black is warm because cold black is harsh on the eyes during long sessions. The accent is one color because more than one would compete. The headlines are large but light because the product's confidence doesn't need bold. Every choice points back to the same register: developer-technical, warm, and quietly sure of itself. **Key Characteristics:** - Warm near-black `#1a1817` canvas (oklch 0.16 0.003 27) — not the genre-default cold blue-black. - PolySans custom variable sans for both display and body — unified type voice. - Enormous quiet display headlines: 80px at weight 500 (not 700) with `-0.03em` tracking. - Single coral-red `#f34e3f` accent — the only chromatic color in the system. - Coral does everything interactive: CTAs, links, hover, focus ring, eyebrow tint. - Near-white `#ededed` body at 16px / 1.6 — clean and legible, not dense. - `#222222` secondary-dark surface for cards; hairline `#34302d` borders carry depth. - 8px CTA radius; 12–16px card radius — soft but not pillowy. - Section padding ladder 64 / 96 / 128 — calm, well-spaced cadence. - Monospace code blocks throughout — code-native, as befits a code-search tool. ## 2. Color Palette & Roles ### Canvas - **Background** (`#1a1817`): the primary canvas — a warm near-black (oklch 0.16 0.003 27). Every section, the page chrome, and inputs sit on this ground. - **Background Soft** (`#211f1d`): a barely-raised band for alternating sections and code-block surfaces; one step warmer-lighter than canvas. - **Background Elevated** (`#252321`): elevated band for grouped content sitting above the canvas. ### Text - **Text** (`#ededed`): primary copy on the dark canvas — near-white, slightly soft to ease long reading. - **Text Strong** (`#ffffff`): pure-white display emphasis; used sparingly on hero copy. - **Text Soft** (`#b8b8b8`): subheads and supporting copy below headlines. - **Text Muted** (`#a0a0a0`): captions, metadata, footer body. - **Text Faint** (`#7a7672`): disabled labels and least-prominent UI hints. ### Brand - **Brand / Accent** (`#f34e3f`): the Sourcegraph coral-red — rgb(243, 78, 63). Primary CTA fill, link color, focus ring, and the system's one and only chromatic accent. - **Brand Hover** (`#ff6354`): lighter coral on hover for CTAs and links. - **Brand Emphasis** (`#d63b2d`): deeper coral for pressed/active states and dense fills. - **Brand Soft** (`rgba(243, 78, 63, 0.12)`): tinted background for section eyebrows and coral badges. - **Brand Soft FG** (`#ff7a6e`): a lifted coral for accent text on the dark canvas where AAA contrast is needed (eyebrow labels, coral captions). - **On Brand** (`#ffffff`): text on the coral CTA fill. ### Interactive - **Link** (`#f34e3f`): inline link color — the same coral, keeping the single-accent system intact. - **Link Hover** (`#ff6354`): lighter coral with underline on hover. - **Focus Ring** (`#f34e3f`): 2px coral ring with 2px offset on the dark canvas. ### Surface & Borders - **Surface** (`#222222`): the secondary-dark card surface — standard feature cards and panels. - **Surface Soft** (`#1f1d1c`): nested surface inside cards (e.g. an inset code sample). - **Surface Strong** (`#2c2a28`): hover-state surface and inline rows. - **Border** (`#34302d`): the primary hairline divider — low-contrast, warm. - **Border Soft** (`#2a2724`): quiet nested divider. - **Border Strong** (`#48433f`): input borders and secondary-button outlines. ### Shadow - **Ambient** (`rgba(0, 0, 0, 0.35) 0 1px 2px`): subtle card seat. - **Standard** (`rgba(0, 0, 0, 0.45) 0 6px 16px`): hover elevation. - **Elevated** (`rgba(0, 0, 0, 0.55) 0 16px 40px`): modal / popover. - **Deep** (`rgba(0, 0, 0, 0.70) 0 28px 56px`): hero visual lift against the dark ground. ### Semantic - **Success** (`#4ec77f`): success state — a muted green that doesn't fight the warm canvas. - **Warning** (`#e0a64b`): warning state — amber. - **Danger** (`#f34e3f`): danger reuses the brand coral; on this canvas, red *is* the brand. - **Info** (`#5aa9f0`): info banners — a cool blue, the only other hue allowed, and only for status. - **Diff Add** (`rgba(78, 199, 127, 0.14)`): added-line tint inside code blocks. - **Diff Remove** (`rgba(243, 78, 63, 0.14)`): removed-line tint inside code blocks. ## 3. Typography Rules ### Font Family - **Display + Body (unified):** `"PolySans", "PolySans Fallback", system-ui, -apple-system, sans-serif`. PolySans is a custom variable grotesque (by Gradient Foundry) used for the entire type system — headlines and running copy share the same family, which is what gives the brand its unified voice. On the production site the family loads via the Next.js font pipeline (`__polySansVariable`). - **Mono:** `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace`. Used for code blocks, search-result samples, env-vars, and `kbd`. The system relies on the platform mono stack rather than a bespoke face — code is shown often enough that native-feeling monospace is the right call. - **Display weights:** 500 / 600 / 700 available; **500 is the default for the hero** — lighter than typical marketing. - **Body weights:** 400 (default) / 500 (labels, buttons, links) / 600 (eyebrows, small headings). ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | |---|---|---|---|---|---|---| | display-hero | PolySans | 80 | 500 | 1.0 | -0.03em | Homepage hero — large but quiet | | display-lg | PolySans | 56 | 500 | 1.05 | -0.025em | Section opener | | h1 | PolySans | 48 | 500 | 1.08 | -0.02em | Page h1 | | h2 | PolySans | 36 | 500 | 1.15 | -0.015em | Section heads | | h3 | PolySans | 28 | 600 | 1.20 | -0.01em | Sub-section heads | | h4 | PolySans | 22 | 600 | 1.30 | -0.005em | Card titles | | h5 | PolySans | 18 | 600 | 1.35 | 0 | Small headings / labels | | lead | PolySans | 20 | 400 | 1.55 | 0 | Hero subhead / intro lead | | body-lg | PolySans | 18 | 400 | 1.60 | 0 | Prominent body | | body | PolySans | 16 | 400 | 1.60 | 0 | Default body copy | | body-sm | PolySans | 14 | 400 | 1.50 | 0 | Footer body / fine print | | label | PolySans | 13 | 500 | 1.40 | 0 | Form labels, UI labels | | eyebrow | PolySans | 12 | 600 | 1.40 | 0.08em | Section eyebrow — uppercase | | button | PolySans | 15 | 500 | 1.00 | 0 | CTA button label | | button-sm | PolySans | 14 | 500 | 1.00 | 0 | Compact button | | link | PolySans | 16 | 500 | 1.50 | 0 | Inline link | | caption | PolySans | 12 | 500 | 1.40 | 0.02em | Supporting metadata | | code-body | Mono | 14 | 400 | 1.55 | 0 | Code block body | | code-label | Mono | 11 | 500 | 1.40 | 0.06em | Code-block filename header — uppercase | ### Principles - **One family does display and body.** PolySans carries the whole system; there is no separate marketing display face. The unified voice is part of the brand's restraint. - **Hero weight is 500, not 700.** The headline is enormous (80px) but light. The confidence comes from scale and tight tracking, not heft. This is the single most recognizable type decision. - **Negative tracking scales with size.** `-0.03em` at the hero loosens to `0` by body. Tight at display reads as engineered; neutral at body reads as legible. - **Generous body line-height.** Body runs at 1.6 — looser than dense dev-tool sites — because the canvas is dark and long reading benefits from air between lines. - **Uppercase only on eyebrows and code labels.** Eyebrows use `0.08em` tracking; everything else stays sentence case. - **Emphasis comes from weight 500–600, never 700+ in running copy.** Bold body text is avoided; emphasis is a half-step up, not a sledgehammer. - **Mono is platform-native.** Code is shown constantly, so the system uses the OS mono stack rather than a custom face — it should feel like the reader's own editor. ## 4. Component Stylings ### Buttons **Primary (Coral Fill)** — Background `#f34e3f`, text `#ffffff`, 8px radius, padding `10px 16px`, height 40px, button font (15/500). Hover background `#ff6354`; active `#d63b2d`. **Use:** primary CTA — Get started / Book a demo. The coral fill is the single loudest element on any page; one per section. **Secondary (Dark Outline)** — Background `#222222` (secondary-dark), text `#ededed`, 1px `#48433f` border, 8px radius, same metrics. Hover: background `#2c2a28`, border lightens to `#5a544f`. **Use:** Watch demo / Contact sales — the companion to the coral primary. **Ghost (Quiet)** — Transparent background, `#ededed` text, 1px `#34302d` border, 8px radius. Hover: `rgba(237, 237, 237, 0.06)` background, border `#48433f`. **Use:** tertiary or low-emphasis actions on the dark canvas. **Link Button (Inline CTA)** — Transparent background, `#f34e3f` coral text, 8px radius, tight padding. Hover: text `#ff6354` with underline; often paired with a trailing arrow ("Learn more →"). **Use:** inline text CTAs inside body copy and cards. ### Cards **Standard Card** — Background `#222222`, text `#ededed`, 1px `#34302d` border, 12px radius, 24px padding. **Use:** generic feature card on the dark canvas. **Elevated Card** — Background `#252321` (one tier up), 1px `#34302d` border, 16px radius, 32px padding. Hover: background `#2c2a28`, border `#48433f`. **Use:** interactive / clickable feature tile. **Feature Card (Coral Border)** — Background `#1f1d1c`, 1px `#f34e3f` coral hairline border, 16px radius, 32px padding. **Use:** highlighted feature card — the coral border signals "this one matters" without filling the card. ### Inputs & Forms **Text Input** — Background `#1a1817` (canvas), text `#ededed`, 1px `#48433f` border, 8px radius, padding `10px 12px`, height 40px. Focus: border `#f34e3f`, ring `0 0 0 2px rgba(243, 78, 63, 0.25)`. Placeholder uses `#7a7672` (text-faint). **Use:** email capture, search, form fields. ### Badges & Tags **Standard Badge** — Background `#222222`, text `#a0a0a0`, 1px `#34302d` border, 9999 radius (pill), `3px 10px` padding, caption font. **Use:** status / category chips. **Eyebrow Badge** — Background `rgba(243, 78, 63, 0.12)`, text `#ff7a6e` (lifted coral for contrast), 1px `rgba(243, 78, 63, 0.22)` border, 9999 radius, `4px 12px` padding, eyebrow font (12/600/0.08em uppercase). **Use:** the section-naming taxonomy chip above section headings — the brand's one coral flourish in chrome. ### Navigation **Top Nav** — Background `#1a1817` (transparent over canvas, may gain a subtle border on scroll), 64px height. Layout: Sourcegraph wordmark left, primary horizontal menu (Products / Solutions / Resources / Pricing) center-left, Sign in + a coral primary CTA (Get started / Book a demo) right. **Nav Link** — Transparent background, `#ededed` text, body font, padding `6px 12px`. Hover: text `#ffffff`, background `rgba(237, 237, 237, 0.06)`. Active/current item may carry a coral underline. ### Decorative **Code Block** — Background `#211f1d` (bg-soft), text `#ededed`, 1px `#34302d` border, 8px radius, 16px padding, platform mono 14/400. Optional filename header in mono 11/500/0.06em uppercase. Diff syntax: added lines on `rgba(78, 199, 127, 0.14)`, removed lines on `rgba(243, 78, 63, 0.14)`. Search-match highlights use the coral-soft tint. **Hero Band** — Full-width warm-black canvas. display-hero (80/500/-0.03em) headline, lead (20/400) subhead, two CTAs (coral primary + dark-outline secondary). 96–128px vertical padding. Often paired with a product/code visual lifted by the deep shadow. ## 5. Layout Principles ### Spacing System - **Base unit:** 4px. - **Scale:** 0 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128. - **Section padding ladder:** 64px (condensed) / 96px (normal) / 128px (spacious). - **Card padding:** 24px standard, 32px for elevated/feature cards. - **Inter-card gap:** 24px in feature grids. ### Grid & Container - **Max content width:** 1280px, centered. - **Prose width:** 720px for long-form reading (blog, docs intros). - **Header height:** 64px fixed. - **Feature grids:** 2–3 columns at desktop with 24px gaps; cards span 1–2 columns by importance. - **Hero:** single-column centered or split (copy left, visual right) above 1024px. ### Whitespace Philosophy Sourcegraph spaces calmly rather than densely. Body sits at a comfortable 16px with 1.6 line-height and sections breathe with 96px of vertical padding — the opposite of a cram-everything-in dashboard. The warm-black canvas does a lot of the visual quieting: against it, generous whitespace reads as composure, not emptiness. The one place density appears is inside code blocks and search-result mockups, where it signals the product's actual job. ### Section Cadence - Dark hero (large quiet headline + coral CTA + product visual) → social-proof logo band → feature grid on secondary-dark cards → code/search demonstration section → eyebrow-led product deep-dives → testimonial / customer-story cards → pricing or CTA band → footer. - Tonal continuity throughout — the entire marketing chrome is the warm-black canvas; no light sections break the register. - Coral appears once or twice per section (the CTA, an eyebrow, a feature-card border) and never floods. ## 6. Shapes & Radius Scale | Token | Value | Tier | Use | |---|---|---|---| | micro | 2px | Micro | Inline chips, tight pills, code-token highlights | | sm | 4px | Standard | Small controls, tags | | md | 8px | Comfortable | **Buttons, inputs** — the system's default control radius | | lg | 12px | Relaxed | Standard cards | | xl | 16px | Large | Elevated / feature cards | | featured | 24px | Featured | Hero visual frames, large media | | pill | 9999px | Pill | Badges, eyebrows, status chips | The radius ladder is gentle. Controls (buttons, inputs) settle at 8px — soft enough to feel modern, sharp enough to read as a tool. Cards step up to 12–16px. The 24px featured tier is reserved for large media frames in the hero. Pills stay scoped to badges and eyebrows. The rule is one radius per primitive: a button is always 8px, a card is always 12–16px — never cross-pollinated within a primitive. ## 7. Depth & Elevation | Level | Treatment | Use | |---|---|---| | 0 — Flat | `#1a1817` canvas | Body bands, footer, hero ground | | 1 — Soft band | `#211f1d` | Alternating sections, code blocks | | 2 — Card | `#222222` + 1px `#34302d` | Standard feature cards | | 3 — Elevated | `#252321` + 1px `#34302d` | Clickable tiles, grouped panels | | 4 — Hover | `#2c2a28` + 1px `#48433f` | Card / row hover state | | 5 — Overlay | `#252321` + 1px `#34302d` + elevated shadow | Modal, popover, dropdown | ### Shadow Philosophy Depth is built primarily from warm tonal steps — canvas `#1a1817` → soft `#211f1d` → card `#222222` → elevated `#252321` → hover `#2c2a28` — with hairline `#34302d` borders doing the secondary separation work. Real drop-shadows are reserved for genuinely floating elements: the hero product visual (deep shadow, lifting it off the canvas) and overlays like modals and dropdowns. Because the canvas is so dark, shadows run at high alpha (0.45–0.70) to register at all; a faint shadow simply disappears into the black. Flat chrome cards carry no shadow — their border and tonal step are enough. ## 8. Interaction & Motion ### Easing & Duration - **ease-standard:** `cubic-bezier(0.4, 0, 0.2, 1)` — the default for color and background transitions. - **ease-emphasized:** `cubic-bezier(0.2, 0, 0, 1)` — for card hover lifts and entrance. - **ease-entrance:** `cubic-bezier(0, 0, 0.2, 1)` — for on-scroll content reveals. - **duration-fast:** 150ms — color shifts on hover (links, buttons). - **duration-standard:** 240ms — card hover lift, surface changes. - **duration-slow:** 320ms — on-scroll reveals and hero visual entrance. ### Per-Component Micro-States - **Primary button hover:** background `#f34e3f` → `#ff6354`, no transform. 150ms. Active drops to `#d63b2d`. - **Secondary button hover:** background `#222222` → `#2c2a28`, border lightens. 150ms. - **Card hover:** background steps up one tonal tier, border lightens to `#48433f`, optional translateY(-2px). 240ms. - **Link hover:** color `#f34e3f` → `#ff6354`, underline fades in. 150ms. - **Input focus:** border `#48433f` → `#f34e3f`, coral ring fades in over 150ms. - **Eyebrow badge:** static — the coral tint is its whole presence; no hover change needed. ### Page Transitions On-scroll content reveals are subtle: feature cards and section copy fade in from slightly below (translateY(16px) → 0, opacity 0 → 1) over 320ms as they enter the viewport, often staggered across a grid. The hero product visual settles in with a gentle fade-and-rise on initial paint. Nothing is bouncy or attention-grabbing — motion supports the calm register rather than performing. ### Reduced Motion Respects `prefers-reduced-motion: reduce`. When set: - Card hover lifts collapse to color/border change only (no translate). - On-scroll reveals become instant fades with no translate. - The hero visual appears immediately with no rise animation. ## 9. Accessibility & A11y ### Contrast Pairs | Pair | Ratio | WCAG | |---|---|---| | `#ededed` text on `#1a1817` canvas | 15.1 | AAA | | `#b8b8b8` soft on `#1a1817` | 8.9 | AAA | | `#a0a0a0` muted on `#1a1817` | 6.8 | AAA at body, AA otherwise | | `#f34e3f` coral on `#1a1817` | 5.0 | AA normal, AAA large | | `#ff7a6e` lifted coral on `#1a1817` | 7.0 | AAA at body | | `#1a1817` near-black on `#f34e3f` coral | 5.0 | AA normal | | `#ffffff` white on `#f34e3f` coral | 3.5 | AA large only — see note | **Note on the primary CTA:** white text on the coral `#f34e3f` fill computes to 3.5:1 — which passes WCAG AA for large text (≥18px or ≥14px bold) but not for normal-size body text. The button label runs at 15px/500, so it sits right at the large-text boundary and is acceptable for a button, but it is the system's tightest pairing. Where a coral surface must carry small text, switch the text to near-black `#1a1817` (5.0:1) instead of white. For coral *text on the dark canvas*, prefer the lifted `#ff7a6e` (7.0:1) over the base brand red. ### Focus Indicators 2px solid `#f34e3f` coral ring with 2px offset on the dark canvas, applied to every interactive element — buttons, links, inputs, cards, nav. Never `outline: none` without a visible replacement. The coral ring is highly visible against the warm-black ground. ### ARIA Patterns - **Combobox:** `role="combobox"` + `aria-expanded` for the global search / docs search input. - **Listbox:** `role="listbox"` for autocomplete results; rows are `role="option"`. - **Dialog:** `role="dialog"` + `aria-modal="true"` + focus trap on demo-request modals and sign-in. - **Disclosure:** `aria-expanded` on nav dropdowns and FAQ accordions. - **Navigation:** top nav wrapped in `