--- name: Gitpod tagline: Editorial dev-tool calm — light canvas, near-black navy text, ABC Diatype sans + Martina Plantijn serif, 8px radius. updated_at: 2026-05-28T23:12:29.333Z published_at: 2026-05-28T23:12:29.333Z author: webdesignhot source_url: https://www.gitpod.io spec: webdesignhot/0.1 quality: curated featured: false categories: [dev-tools] tags: [light, structured, sans, serif, developer, cloud-dev, editorial] preview_swatch: ['#f9f9f9', '#0a0e19', '#ffae33'] related: [vercel, linear, stripe] description: 'Gitpod — now rebranding to **Ona** (gitpod.io currently resolves to the Ona product, "Ona · Run background agents") — ships a deliberately editorial take on the developer-tool aesthetic. Where most cloud-dev sites lean dark-terminal, Gitpod commits to a light canvas (`#f9f9f9` near-white) with near-black *navy* text `#0a0e19` — a deep blue-black rather than neutral charcoal, which gives the whole surface a cooler, more considered cast than a true grayscale system. The typographic signature is the pairing: **ABC Diatype** (a grotesque sans by Dinamo) carries body and UI at a calm 18px / 400 / 1.55, while **Martina Plantijn** — a contemporary serif revival — sets the display headlines. That sans-grotesque-plus-serif-display pairing is unusual in dev tooling, where the convention is sans-only or sans-plus-mono; it reads as magazine-grade editorial confidence rather than terminal utility. CTAs come in a high-contrast inverted pair: a dark `#0a0e19` pill (white text, 8px radius) for the primary action and a translucent white `rgba(255, 255, 255, 0.85)` pill (dark text, 8px radius) for the secondary — both at the brand''s consistent 8px corner. The historical Gitpod orange (`#FFAE33`) survives as the brand accent — a single warm hue against the cool navy-and-near-white field, used for emphasis, links, and the occasional highlight rather than as a button fill. The result: a developer-product site that reads like an editorial spread, not a code editor.' # 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-secondary border: border ring: brand colors: bg: '#f9f9f9' # page canvas — near-white at ~98% lightness, faintly cool bg-pure: '#ffffff' # card / panel surface, pure white tier bg-elev: '#f2f2f3' # subtle elevation — section bands, inset blocks bg-deeper: '#ebebed' # third tier — code-fill, muted stripe rows bg-ink: '#0a0e19' # near-black navy inversion band, dark hero, footer surface: 'rgba(255, 255, 255, 0.85)' # translucent white card / secondary-CTA fill text: '#0a0e19' # primary text & headlines — near-black NAVY, not charcoal text-secondary: '#3a3f4b' # supporting copy, dense-row body text-tertiary: '#5b606c' # captions, meta text-faint: '#9499a3' # placeholder, disabled, faintest meta text-on-dark: '#f5f5f7' # text on the near-black navy band text-on-dark-soft: '#a7abb5' # secondary text on the dark band brand: '#ffae33' # Gitpod orange — the single warm accent (historical brand hue) brand-deep: '#ff8a00' # deeper orange for hover / pressed emphasis brand-soft: 'rgba(255, 174, 51, 0.12)' # soft orange wash — badges, highlight aura brand-tint: 'rgba(255, 174, 51, 0.06)' # subtlest orange tint link: '#0a0e19' # inline links — navy text, underline carries the affordance link-hover: '#ff8a00' # hover shifts to deeper orange on-brand: '#0a0e19' # navy text on the orange accent (orange is light) cta-bg: '#0a0e19' # primary CTA fill — inverted near-black navy cta-text: '#ffffff' # white text on the dark pill cta-bg-secondary: 'rgba(255, 255, 255, 0.85)' # secondary CTA — translucent white pill cta-text-secondary: '#0a0e19' # navy text on the white pill border: 'rgba(10, 14, 25, 0.12)' # default hairline — navy at 12% opacity border-soft: 'rgba(10, 14, 25, 0.06)' # quietest separation border-strong: 'rgba(10, 14, 25, 0.24)' # outlined buttons, focused inputs shadow-ambient: 'rgba(10, 14, 25, 0.04)' shadow-card: 'rgba(10, 14, 25, 0.06)' shadow-elev: 'rgba(10, 14, 25, 0.10)' scrim: 'rgba(10, 14, 25, 0.45)' success: '#1f9d55' # advisory green — build / agent success success-soft: 'rgba(31, 157, 85, 0.12)' warning: '#ffae33' # warnings reuse the brand orange warning-soft: 'rgba(255, 174, 51, 0.12)' danger: '#e5484d' # error / destructive danger-soft: 'rgba(229, 72, 77, 0.12)' typography: display: family: '"Martina Plantijn", Georgia, "Times New Roman", serif' weights: [300, 400, 500] body: family: '"ABC Diatype", system-ui, -apple-system, "Segoe UI", Roboto, 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: 400, lineHeight: 1.02, tracking: '-0.02em', family: display } display-lg: { size: 56, weight: 400, lineHeight: 1.06, tracking: '-0.018em', family: display } h1: { size: 40, weight: 400, lineHeight: 1.1, tracking: '-0.015em', family: display } h2: { size: 32, weight: 400, lineHeight: 1.18, tracking: '-0.012em', family: display } h3: { size: 24, weight: 500, lineHeight: 1.25, tracking: '-0.006em', family: display } h4: { size: 20, weight: 600, lineHeight: 1.3, tracking: '0', family: body } eyebrow: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0.06em', family: body, transform: uppercase } body-lg: { size: 18, weight: 400, lineHeight: 1.55, tracking: '0', family: body } body: { size: 16, weight: 400, lineHeight: 1.55, tracking: '0', family: body } body-sm: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: body } label: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0', family: body } button: { size: 15, weight: 500, lineHeight: 1.2, tracking: '0', family: body } caption: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: body } code: { size: 14, weight: 400, lineHeight: 1.6, tracking: '0', family: mono } radius: micro: 2 sm: 4 md: 8 lg: 12 xl: 16 pill: 9999 spacing: base: 4 scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96] 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)' duration-fast: 150 duration-standard: 240 duration-slow: 320 reduced-motion: 'respects prefers-reduced-motion: reduce' breakpoints: mobile: 640 tablet: 1024 desktop: 1280 wide: 1536 components: button-primary: { bg: cta-bg, text: cta-text, padding: '12px 20px', radius: 8 } button-secondary: { bg: cta-bg-secondary, text: cta-text-secondary, border: border, padding: '12px 20px', radius: 8 } button-ghost: { bg: transparent, text: text, padding: '12px 16px', radius: 8 } card: { bg: bg-pure, border: border, radius: 12, padding: 24 } input: { bg: bg-pure, border: border, text: text, radius: 8, padding: '10px 14px' } shadows: none: 'none' ambient: 'rgba(10, 14, 25, 0.04) 0 1px 2px' card: 'rgba(10, 14, 25, 0.06) 0 2px 4px, rgba(10, 14, 25, 0.04) 0 8px 24px -6px' elevated: 'rgba(10, 14, 25, 0.08) 0 6px 12px, rgba(10, 14, 25, 0.06) 0 16px 40px -10px' popover: 'rgba(10, 14, 25, 0.14) 0 12px 32px -8px' modal: 'rgba(10, 14, 25, 0.24) 0 28px 64px -16px' accessibility: contrast-text-on-bg: 17.8 # #0a0e19 on #f9f9f9 — AAA at all sizes contrast-text-on-pure: 18.6 # #0a0e19 on #ffffff — AAA contrast-text-secondary-on-bg: 10.2 # #3a3f4b on #f9f9f9 — AAA at body contrast-text-tertiary-on-bg: 6.4 # #5b606c on #f9f9f9 — AAA at body / AA all contrast-cta-text-on-cta: 17.6 # #ffffff on #0a0e19 — AAA at all sizes contrast-brand-on-bg: 1.6 # #ffae33 on #f9f9f9 — decorative only, never text contrast-text-on-brand: 11.0 # #0a0e19 on #ffae33 — AAA; navy-on-orange is the safe direction focus-ring: '2px solid rgba(255, 174, 51, 0.55) + 2px outline-offset' reduced-motion-honored: true touch-target-min: 44 dark-mode: optional # near-black navy band exists as a section treatment; full dark theme not the default lineage: summary: 'Gitpod (rebranding to Ona) draws its design DNA from editorial publishing more than from developer-terminal convention. The defining move is the type pairing — ABC Diatype, a clean grotesque sans by Swiss foundry Dinamo, against Martina Plantijn, a contemporary serif revival — which lands the site in magazine territory rather than IDE territory. The near-black NAVY text (`#0a0e19`, a blue-black rather than neutral charcoal) on a faintly cool near-white canvas (`#f9f9f9`) is a deliberate softening of the high-contrast dev-tool look pioneered by Vercel and Linear; Gitpod keeps the light canvas and the 8px geometry of that lineage but warms the system with a single orange accent (`#FFAE33`, the historical Gitpod brand hue) and cools the ink toward navy. The CTA pattern — an inverted dark pill paired with a translucent-white pill, both at 8px radius — is the contemporary dev-tool consensus (Vercel, Linear), executed here at a slightly larger, calmer scale. As the product transitions to Ona (background coding agents), the visual system carries forward: same editorial type pairing, same navy-and-near-white field, same orange accent.' influences: - name: 'ABC Diatype (Dinamo)' role: 'Body and UI grotesque — the calm, slightly mechanical sans that carries every paragraph and control' url: 'https://abcdinamo.com/typefaces/diatype' - name: 'Martina Plantijn (Dinamo)' role: 'Serif display face — the editorial headline voice that distinguishes the brand from sans-only dev tools' url: 'https://abcdinamo.com/typefaces/martina-plantijn' - name: 'Vercel' role: 'Light-canvas dev-tool register — inverted dark-pill primary CTA, hairline borders, 8px geometry on a near-white field' url: 'https://vercel.com' - name: 'Linear' role: 'Contrast-pill CTA discipline and restrained accent usage adapted to a light, editorial surface' url: 'https://linear.app' - name: 'Stripe' role: 'Developer-product-as-magazine register — editorial typography and generous whitespace in a technical product' url: 'https://stripe.com' - name: 'Gitpod brand (historical orange identity)' role: 'The warm orange accent (`#FFAE33`) that survives the Ona rebrand as the single chromatic flourish' url: 'https://www.gitpod.io' --- ## 1. Visual Theme & Atmosphere Gitpod's site reads like an editorial spread that happens to sell cloud development environments. The first thing that registers is the *light canvas* — a faintly cool near-white `#f9f9f9` — which immediately separates Gitpod from the dark-terminal convention that dominates developer tooling. Most cloud-dev products reach for a black or charcoal IDE-feeling surface; Gitpod commits to white-page calm. The second thing is the type. Headlines are set in **Martina Plantijn**, a contemporary serif revival, while body and UI run in **ABC Diatype**, a clean grotesque sans. That serif-display-plus-grotesque-body pairing is editorial-magazine grammar, not software-product grammar, and it gives every page a considered, published feeling. The ink is the third tell, and it's subtle. Body text is `#0a0e19` — not a neutral charcoal but a near-black *navy*, a deep blue-black. Against the cool near-white canvas the whole surface reads slightly cooler and more composed than a true grayscale system would; there's a quiet blue undertone running through the contrast. This is the same high-contrast light-mode discipline that Vercel and Linear established, but Gitpod cools it toward navy and warms the accent toward orange, landing somewhere more humane than either. The accent is deliberately rationed. The historical **Gitpod orange** (`#FFAE33`) is the single warm hue in an otherwise navy-and-near-white field. It appears as link-hover colour, emphasis highlight, badge fills, and the occasional illustrated flourish — but it never fills the primary button. The primary action is an inverted dark navy pill; the orange is a spice, not a staple. One warm hue against a cool field is the entire chromatic strategy. The CTA pattern is a clean inverted pair. The primary is a dark `#0a0e19` navy pill with white text at 8px radius ("Download", "Get started"); the secondary is a translucent white `rgba(255, 255, 255, 0.85)` pill with navy text at the same 8px radius ("Request a demo"). Both pills sit at the brand's consistent 8px corner — softer than Vercel's 6px, gentler than a true pill, squarely in the modern dev-tool comfort zone. The contrast pair carries the visual hierarchy without color: dark-on-light versus light-on-light. The brand is mid-transition. `gitpod.io` now resolves to **Ona** — the background-coding-agents product — and the page title reads "Ona · Run background agents." The slug and name remain Gitpod here for continuity, but the entry documents a system in motion: the visual language (editorial type pairing, navy ink, near-white canvas, orange accent, 8px geometry) carries forward intact into the Ona identity. The atmosphere is best summarized as *editorial-calm, navy-cooled, orange-spiced, serif-headlined, light-canvas, considered.* **Key Characteristics** - Light canvas — faintly cool near-white `#f9f9f9`, the opposite of the dark-terminal dev-tool default - Near-black **navy** text `#0a0e19` (blue-black, not neutral charcoal) — a cooler, more composed contrast - Editorial type pairing: **Martina Plantijn** serif display + **ABC Diatype** grotesque body - Single warm accent — historical Gitpod **orange** `#FFAE33` — rationed for emphasis, never a button fill - Inverted CTA pair: dark navy pill (white text) + translucent white pill (navy text), both 8px radius - Consistent **8px** radius across buttons and inputs — softer than Vercel's 6px, gentler than full pills - Hairline borders at navy-12%-opacity — quiet separation that keeps the ink-tone consistent - Calm 18px / 1.55 body — larger and airier than dense dashboard SaaS - Magazine-grade whitespace; the page breathes rather than packs - Rebranding to **Ona** — same system carried forward to the background-agents product ## 2. Color Palette & Roles ### Canvas / Surface - **Canvas** (`#f9f9f9`): the page background — faintly cool near-white at ~98% lightness. The single dominant surface; never cream, never warm. The cool cast pairs with the navy ink. - **Pure White** (`#ffffff`): card, panel, and modal surface — the elevation contrast against the canvas is the primary lift signal. - **Bg Elev** (`#f2f2f3`): subtle elevation — section bands, inset blocks, alternating stripes. - **Bg Deeper** (`#ebebed`): third tier — code-fill backgrounds, muted comparison rows. - **Surface (translucent)** (`rgba(255, 255, 255, 0.85)`): translucent white — the secondary-CTA fill and glassy nav/overlay surface. - **Bg Ink** (`#0a0e19`): the near-black navy inversion band — dark hero sections, footer, inverted feature blocks. ### Text - **Text** (`#0a0e19`): primary text and headlines — near-black *navy*, the brand's defining ink. 17.8:1 on canvas. - **Text Secondary** (`#3a3f4b`): supporting copy, dense-row body — a desaturated navy-grey. - **Text Tertiary** (`#5b606c`): captions, meta, timestamps. - **Text Faint** (`#9499a3`): placeholder, disabled, faintest meta — never load-bearing text. - **Text on Dark** (`#f5f5f7`): near-white text on the navy inversion band. - **Text on Dark Soft** (`#a7abb5`): secondary text on the dark band. ### Brand & Accent - **Brand Orange** (`#ffae33`): the historical Gitpod brand hue and the single warm accent — emphasis highlights, badge fills, illustrated flourishes, link-hover. Light enough that it always takes *navy* text, never white. - **Brand Deep** (`#ff8a00`): deeper orange for hover / pressed emphasis and for orange text that needs more weight against the light canvas. - **Brand Soft** (`rgba(255, 174, 51, 0.12)`): soft orange wash — badge backgrounds, highlight aura, selected-row tint. - **Brand Tint** (`rgba(255, 174, 51, 0.06)`): subtlest orange tint for very quiet emphasis. ### Interactive - **Link** (`#0a0e19`): inline links read as navy body with an underline carrying the affordance — color isn't the link signal at rest. - **Link Hover** (`#ff8a00`): hover shifts the link to deeper orange — the one place the accent touches running text. - **CTA Bg** (`#0a0e19`): primary CTA fill — inverted near-black navy. - **CTA Text** (`#ffffff`): white text on the dark pill. - **CTA Bg Secondary** (`rgba(255, 255, 255, 0.85)`): secondary CTA — translucent white pill. - **CTA Text Secondary** (`#0a0e19`): navy text on the white pill. ### Borders - **Border** (`rgba(10, 14, 25, 0.12)`): default hairline — navy at 12% opacity, keeping the divider tone within the ink family. - **Border Soft** (`rgba(10, 14, 25, 0.06)`): quietest separation, faint section dividers. - **Border Strong** (`rgba(10, 14, 25, 0.24)`): outlined buttons, focused inputs, high-emphasis dividers. ### Shadow Colors Shadows are navy-tinted (`rgba(10, 14, 25, …)`) rather than pure black, so elevation stays inside the ink family rather than reading as a neutral grey lift. - `rgba(10, 14, 25, 0.04) 0 1px 2px` — ambient - `rgba(10, 14, 25, 0.06) 0 2px 4px, rgba(10, 14, 25, 0.04) 0 8px 24px -6px` — card (dual-layer) - `rgba(10, 14, 25, 0.08) 0 6px 12px, rgba(10, 14, 25, 0.06) 0 16px 40px -10px` — elevated - `rgba(10, 14, 25, 0.14) 0 12px 32px -8px` — popover - `rgba(10, 14, 25, 0.24) 0 28px 64px -16px` — modal ### Semantic - **Success** (`#1f9d55` on `rgba(31, 157, 85, 0.12)`): advisory green — build success, agent task complete, healthy status. - **Warning** (`#ffae33` on `rgba(255, 174, 51, 0.12)`): warnings reuse the brand orange — the accent doubles as the caution hue. - **Danger** (`#e5484d` on `rgba(229, 72, 77, 0.12)`): errors, destructive actions, failed builds. ## 3. Typography Rules ### Font Family **Display**: `"Martina Plantijn", Georgia, "Times New Roman", serif`. Martina Plantijn is a contemporary serif revival from Swiss foundry Dinamo, used for hero and section headlines. Set at a light weight (the live probe shows display copy at weight 300), it gives headlines an editorial, almost literary register that is rare in developer tooling. The serif is the brand's single biggest differentiator: where peers set everything in a grotesque or geometric sans, Gitpod headlines with a serif. **Body**: `"ABC Diatype", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif`. ABC Diatype is a clean grotesque sans, also from Dinamo — slightly mechanical, highly legible, neutral enough to disappear into long-form reading. It carries body copy, UI labels, buttons, and captions at a calm 18px / 400 / 1.55. The grotesque-against-serif contrast is the editorial pairing's whole point: the serif sings, the sans recedes. **Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace`. A system monospace stack for code samples, CLI commands, and environment-variable references. Gitpod doesn't ship a proprietary mono; the system stack keeps code blocks neutral so the serif/sans pairing stays the identity. The defining discipline is the **two-face editorial pairing**: serif display, grotesque body. No third face; mono is reserved for literal code. ### Hierarchy | Role | Font | Size | Weight | Line Height | Tracking | Notes | |------|------|------|--------|-------------|----------|-------| | display-hero | Martina Plantijn | 80px | 400 | 1.02 | -0.02em | Hero headline — light serif, the brand's signature | | display-lg | Martina Plantijn | 56px | 400 | 1.06 | -0.018em | Major section opener | | h1 | Martina Plantijn | 40px | 400 | 1.10 | -0.015em | Page title, article title | | h2 | Martina Plantijn | 32px | 400 | 1.18 | -0.012em | Marketing section H2 | | h3 | Martina Plantijn | 24px | 500 | 1.25 | -0.006em | Card heading, sub-section | | h4 | ABC Diatype | 20px | 600 | 1.30 | 0 | Sub-card heading — switches to sans for small headings | | eyebrow | ABC Diatype | 13px | 500 | 1.40 | 0.06em | Uppercase section pre-label | | body-lg | ABC Diatype | 18px | 400 | 1.55 | 0 | Hero deck, lede — the brand's default body size | | body | ABC Diatype | 16px | 400 | 1.55 | 0 | Standard body | | body-sm | ABC Diatype | 14px | 400 | 1.50 | 0 | Card body, dense-row copy | | label | ABC Diatype | 13px | 500 | 1.40 | 0 | Form field label | | button | ABC Diatype | 15px | 500 | 1.20 | 0 | Button copy — slightly larger than dense SaaS | | caption | ABC Diatype | 12px | 500 | 1.40 | 0.02em | Image caption, footer micro | | code | mono | 14px | 400 | 1.60 | 0 | Code block / inline code | | inline-code | mono | 14px | 500 | 1.40 | 0 | Inline `code` references | | nav-link | ABC Diatype | 15px | 500 | 1.20 | 0 | Top-nav links | ### Principles - **Serif headlines, sans body.** The editorial pairing is the brand. Setting headlines in the sans collapses Gitpod into generic dev-tool grammar. - **Display weight stays light.** Martina Plantijn headlines run at 300–400, not 600–800. The serif reads as confident at light weights; bolding it loses the literary calm. - **Body holds at 18px / 400 / 1.55.** Larger and airier than dense dashboard SaaS — the page is meant to be read, not scanned. - **Sans takes over below H3.** H4 and smaller headings switch to ABC Diatype at 600 — the serif is reserved for the larger display tiers. - **Negative tracking compresses with size.** `-0.02em` at the hero, easing toward zero by H3; body and below sit at neutral tracking. - **Uppercase eyebrows in sans.** Section pre-labels use ABC Diatype 13px / 500 / 0.06em uppercase — the one place tracking opens up. - **Mono is for literal code only.** CLI commands, env vars, code snippets. Never used for eyebrows or labels — that would dilute the two-face system. - **No italic in display.** Serif headlines are set roman; italics carry quoted titles in body only. ## 4. Component Stylings ### Buttons **Primary (Dark Pill)** — `#0a0e19` navy fill, white text at 15px / 500, **8px radius**, 12×20px padding. The dominant action — "Download", "Get started", "Start free". Hover deepens subtly or lifts to pure black; **no scale transform** — the contrast carries the affordance. The inverted dark-on-light pill is the modern dev-tool primary, executed here at a calm 8px corner. **Secondary (Translucent White)** — `rgba(255, 255, 255, 0.85)` translucent white fill, navy `#0a0e19` text at 15px / 500, **8px radius**, 12×20px padding, optional 1px hairline border. The paired secondary — "Request a demo", "Talk to sales". The translucency lets the canvas read through faintly, giving it a glassier feel than the solid primary. **Outlined** — Transparent or canvas fill, navy text at 15px / 500, 1px `rgba(10, 14, 25, 0.24)` border, 8px radius, 12×20px padding. Hover deepens the border and adds a faint canvas fill. Use case: tertiary actions paired with the primary/secondary pair. **Ghost (Quiet)** — Transparent background, navy text at 15px / 500, 8px radius, 12×16px padding. Hover fills with `bg-elev` (`#f2f2f3`). Use case: nav links, footer secondaries, in-card actions. **Accent (rare)** — When the brand orange is used as a button (rare; reserved for high-emphasis moments like a launch banner), it's `#ffae33` fill with *navy* `#0a0e19` text at 8px radius — never white text, since the orange is too light for white to pass contrast. This is the exception, not the rule: the primary action is almost always the dark navy pill. ### Cards **Default Card** — `#ffffff` pure-white fill, 1px hairline border at `rgba(10, 14, 25, 0.12)`, **12px radius**, 24px padding, dual-layer navy-tinted shadow. The signature card across feature grids, integration tiles, and pricing. The white-on-canvas brightness contrast plus the hairline does most of the elevation work; the shadow is a quiet reinforcement. **Flat Card** — Same as default with `shadow: none`. Used for pricing cards and dense data tiles where multiple cards stack tightly; the border alone carries elevation. **Dark Card** — `#0a0e19` navy fill, `#f5f5f7` text, 1px border at `rgba(255, 255, 255, 0.08)`, 12px radius, 32px padding. Used for inverted highlight or testimonial blocks on the otherwise-light page; one or two per page. ### Inputs / Forms **Text Input** — `#ffffff` fill, navy text at 16px / 400, 1px border at `rgba(10, 14, 25, 0.12)`, **8px radius**, 10×14px padding (~44px height). Placeholder at `#9499a3` faint. On focus: border shifts to `border-strong` and a 2px orange focus ring appears (`rgba(255, 174, 51, 0.55)`) — the accent's primary functional role. **Select** — Same shape as the text input with a chevron at right (12px) in tertiary-text colour. **Textarea** — Same as text input, min-height ~96px, top-aligned placeholder. ### Badges / Tags / Pills **Accent Badge** — `rgba(255, 174, 51, 0.12)` soft-orange fill, deep-orange `#ff8a00` text at 12px / 500 / 0.02em, 4px radius, 2×8px padding. Use case: `NEW`, `BETA`, status flags — the one place the warm accent reliably appears. **Neutral Tag** — `#ebebed` (bg-deeper) fill, secondary-text colour, 13px / 500 ABC Diatype, 4px radius, 2×8px padding. Use case: integration labels, region tags, version chips. **Status Pill** — A 6px status dot (`success` green / `danger` red / `warning` orange) at left with a 13px / 500 label — used for environment / agent status. ### Navigation **Top Nav** — `rgba(255, 255, 255, 0.85)` translucent white fill with `backdrop-filter: blur(12px)`, **64px height**, 1px bottom hairline at `rgba(10, 14, 25, 0.12)`. Wordmark left. Center: nav links in ABC Diatype 15px / 500 ghost style. Right: ghost link + translucent-white secondary CTA + dark navy primary CTA pill. **Footer** — `#0a0e19` navy inversion band (or canvas, depending on page), multi-column link grid in ABC Diatype 14px / 400 at `text-on-dark-soft`, wordmark + status indicator + social links at the bottom. ## 5. Layout Principles ### Spacing System - Base unit: **4px** - Scale: `0 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96` - Section padding (vertical): 96px+ for major marketing bands; 48–64px between sub-sections; 24–32px between content blocks - Card internal padding: 24px on default cards; 32px on dark highlight cards - Inter-card gutters: 24px in 2-up grids; 16–24px in 3-up grids ### Grid & Container - Page width caps at **1280px** — generous but not dense; the editorial layout favours breathing room over information density - Reading column caps at **720px** (~70 characters) even inside the wider container - 12-column grid with 24px gutters - Hero treatment: light-canvas full-bleed, serif headline (often left-aligned), inverted CTA pair below, illustration or product still to one side ### Whitespace Philosophy Gitpod favours editorial breathing room over dashboard density. Hero sections carry 96px+ vertical padding; sections are generously guttered; the 18px body with 1.55 line-height keeps paragraphs airy. Where Vercel packs changelog rows at 88px and customer logos 4-up, Gitpod spaces content for *reading*, not scanning — the magazine register demands room. The page never feels packed. ### Section Cadence A typical page runs: 1. **Hero** — light canvas, 80px serif headline, 18px sans deck, inverted CTA pair (dark pill + translucent-white pill) 2. **Feature Grid** — white cards on canvas, hairline borders, serif card headings, sans body 3. **Code / Workflow Band** — `bg-elev` or `bg-deeper` background, mono code block at reading width, sans prose introducing it 4. **Dark Highlight Band** — rare `#0a0e19` navy inversion with near-white text and a single orange accent 5. **Integration / Logo Grid** — white tiles on canvas, monochrome logos 6. **Pricing** — flat cards in 3-up, hairline borders, navy primary CTA per card 7. **Closing CTA** — centered inverted pill on canvas, single dominant action 8. **Footer** — navy inversion band, multi-column link grid The alternation is brightness-and-warmth-based: canvas → white → elevated grey → navy → canvas, with the orange accent appearing as a single warm point per section. ## 6. Shapes & Radius Scale | Tier | Value | Use | |------|-------|-----| | Micro | 2px | Decorative dividers, focus indicators inside chips | | Small | 4px | Badges, tag chips | | Standard | 8px | Buttons, inputs, code chips — the dominant Gitpod radius | | Comfortable | 12px | Cards, panels, modals | | Large | 16px | Hero panels, large surfaces | | Pill | 9999px | Rare full-pill chips, status pills | Gitpod's signature shape is the **8px radius** — softer than Vercel's 6px button corner and gentler than a true pill, sitting squarely in the modern dev-tool comfort zone. It's consistent across buttons and inputs; cards step up to 12px. The 8px corner is the brand's tactile signature: rounded enough to feel friendly, square enough to feel engineered. ## 7. Depth & Elevation | Level | Treatment | Use | |-------|-----------|-----| | 0 — Flat | no shadow, canvas bg | Page canvas, body sections | | 1 — Hairline | 1px `rgba(10, 14, 25, 0.12)` border | Flat cards, pricing tiles, dense data | | 2 — Card | 1px border + `rgba(10, 14, 25, 0.06) 0 2px 4px, 0 8px 24px -6px` | Default feature cards | | 3 — Elevated | `rgba(10, 14, 25, 0.08) 0 6px 12px, 0 16px 40px -10px` | Dropdowns, hover-lifted cards | | 4 — Popover | `rgba(10, 14, 25, 0.14) 0 12px 32px -8px` | Menus, command palette | | 5 — Modal | scrim `rgba(10, 14, 25, 0.45)` + `rgba(10, 14, 25, 0.24) 0 28px 64px -16px` | Dialogs, sign-up modals | ### Shadow Philosophy Gitpod uses **navy-tinted, low-opacity shadows** rather than pure-black drops. Tinting the shadow with the ink colour (`rgba(10, 14, 25, …)`) keeps elevation inside the brand's cool ink family — a black shadow on this navy-and-near-white field would read as a foreign neutral. Cards lift primarily via the white-on-canvas brightness contrast plus the hairline border; the dual-layer shadow (a tight 2–4px ambient plus a wide 24px diffusion) is a quiet reinforcement, not the main signal. Heavy shadows are reserved for true overlay UI — popovers and modals — where the element needs to read as floating above the page rather than resting on it. ## 8. Interaction & Motion ### Easing Curves - **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — default for hover, focus, color transitions - **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — modal entry, toast slide-in ### Duration Buckets | Bucket | Value | Use | |--------|-------|-----| | Fast | 150ms | Focus ring fade, link-underline grow, hover color | | Standard | 240ms | Button hover, card border/shadow deepen | | Slow | 320ms | Scroll-reveal fade, dropdown reveal, modal content | ### Per-Component Recipes - **Primary CTA hover**: navy fill deepens toward pure black over 240ms standard. No scale, no shadow jump — the contrast carries it. - **Secondary CTA hover**: translucent-white fill firms toward opaque white + faint hairline border over 240ms. - **Link hover**: navy text shifts to deep orange `#ff8a00` over 150ms; underline holds. - **Card hover**: border deepens and shadow intensifies one tier over 240ms — minimal or no translate. - **Input focus**: 2px orange ring (`rgba(255, 174, 51, 0.55)`) fades in over 150ms; border firms to `border-strong`. - **Scroll-reveal**: sections fade + rise ~8px over 320ms emphasized when entering viewport — one-shot. - **Modal entry**: scrim fades over 240ms; content fades + scales 0.97→1.0 over 320ms emphasized. ### Page Transitions Anchor links use smooth-scroll; route changes feel near-instant with client-side prefetch. The sticky nav stays static across navigation. Motion is restrained throughout — the editorial calm extends to interaction; nothing bounces or overshoots. ### Reduced Motion Respects `prefers-reduced-motion: reduce`. All `translate` and `scale` transforms suppress, replaced with opacity-only fades or instant render. Scroll-reveal becomes static on mount. Modal scale-in becomes an instant fade. Durations halve. Nothing breaks; nothing disappears. ## 9. Accessibility & A11y ### Contrast Pairs | Pair | Ratio | Level | |------|-------|-------| | `#0a0e19` text on `#f9f9f9` canvas | 17.8 | AAA at all sizes | | `#0a0e19` text on `#ffffff` card | 18.6 | AAA at all sizes | | `#3a3f4b` secondary on `#f9f9f9` | 10.2 | AAA at body sizes | | `#5b606c` tertiary on `#f9f9f9` | 6.4 | AAA at body / AA all | | `#9499a3` faint on `#f9f9f9` | 3.0 | Fails AA body — placeholder/disabled only | | `#ffffff` CTA text on `#0a0e19` pill | 17.6 | AAA at all sizes | | `#0a0e19` navy text on `#ffae33` orange | 11.0 | AAA — navy-on-orange is the safe direction | | `#ffae33` orange on `#f9f9f9` canvas | 1.6 | Fails — decorative/fill only, NEVER text | | `#ff8a00` deep-orange link-hover on `#f9f9f9` | 2.6 | Fails AA at body — reinforce with underline | | `#f5f5f7` text on `#0a0e19` dark band | 17.0 | AAA at all sizes | The critical discipline: **the brand orange is never used as text on the light canvas** — at 1.6:1 it fails badly. Orange is a fill colour (badges, accents, focus rings) where navy text rides on top, or a link-hover reinforced by an underline so the affordance survives for low-vision and color-blind users. The navy-on-orange direction (11.0:1) is the only safe text-and-orange combination. ### Focus Indicators Focus ring is **2px solid `rgba(255, 174, 51, 0.55)` orange with 2px outline-offset** — the accent's single most important functional job. Against the cool navy-and-near-white field, the warm orange ring is unmistakable, and using the accent here (rather than a neutral) ties keyboard focus to the brand. On dark bands, the ring brightens to full-opacity orange for legibility. ### ARIA Patterns - **Top nav**: `