--- version: alpha name: GitLab description: A near-black canvas lit by signature tanuki orange and electric purple — GitLab Sans at aggressive negative tracking, a hero gradient that blooms from lavender to warm peach, and a sharp-yet-approachable 4–8px radius vocabulary that says "DevSecOps platform" without shouting it. colors: # Surface / canvas background: "#ffffff" # primary page canvas — clean white marketing surface surface: "#f2f1f5" # subtle off-white lift for feature tiles and tinted sections surface-deep: "#171321" # near-black hero and dark feature panels surface-overlay: "#1c1728" # slightly lifted version of deep surface (hover on dark) # Ink / text ink: "#171321" # primary dark text — the near-black brand anchor ink-secondary: "#74717a" # muted body and nav link text ink-muted: "#d1d0d3" # de-emphasized captions and secondary labels on dark on-primary: "#ffffff" # text on filled brand-color surfaces # Brand accent — GitLab orange primary: "#fc6d26" # signature tanuki orange — CTAs, highlights, category accents primary-deep: "#ee5c12" # gradient terminus / deeper orange on the hero glow primary-container: "#fde8d8" # warm tint for orange-tinted sections and tags # Brand accent — GitLab purple accent-purple: "#7759c2" # tanuki purple — logo, gradient stops, secondary accents accent-purple-light: "#eee7fd" # lavender surface tint — hero gradient base and feature cards accent-purple-soft: "#f6f3fe" # very faint purple wash for gradient blends # Link / interactive blue link: "#1883fd" # interactive link hover color, focus state blue link-default: "#0000ee" # raw link default (browser-inherited; used in rich text) # Semantic success: "#108548" # green — pipeline passing, success state warning: "#c17d10" # amber — warning state error: "#dd2b0e" # red — pipeline failing, error state info: "#0070c8" # blue — informational state # Borders border: "#d1d0d3" # hairline dividers, card edges on white border-strong: "#74717a" # stronger input and focus-ring outline # Shadow tints (opaque approximations; originals were rgba) shadow-soft: "#000000" # was rgba(0,0,0,0.05) — base shadow tint for card elevation shadow-mid: "#32325d" # was rgba(50,50,93,0.1) — used in raised card shadows typography: display-hero: fontFamily: "GitLab Sans, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 96px fontWeight: 660 lineHeight: 1.04 letterSpacing: -2.88px display: fontFamily: "GitLab Sans, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 64px fontWeight: 660 lineHeight: 1.06 letterSpacing: -1.92px heading-section: fontFamily: "GitLab Sans, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 40px fontWeight: 660 lineHeight: 1.05 letterSpacing: -0.8px heading-sub: fontFamily: "GitLab Sans, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 32px fontWeight: 400 lineHeight: 1.13 letterSpacing: -0.64px heading-3: fontFamily: "GitLab Sans, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 24px fontWeight: 580 lineHeight: 1.17 letterSpacing: -0.48px heading-4: fontFamily: "GitLab Sans, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 660 lineHeight: 1.25 letterSpacing: 0px body-large: fontFamily: "GitLab Sans, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.56 letterSpacing: 0px body: fontFamily: "GitLab Sans, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.50 letterSpacing: 0px button-ui: fontFamily: "GitLab Sans, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 660 lineHeight: 1.25 letterSpacing: 0px nav-link: fontFamily: "GitLab Sans, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 660 lineHeight: 1.50 letterSpacing: 0px caption: fontFamily: "GitLab Sans, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.10 letterSpacing: 0.13px code-mono: fontFamily: "GitLab Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace" fontSize: 14px fontWeight: 400 lineHeight: 1.57 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 24px 2xl: 32px 3xl: 48px 4xl: 64px 5xl: 96px rounded: none: 0px xs: 2px sm: 4px md: 8px lg: 16px pill: 9999px components: button-primary: backgroundColor: "{colors.surface-deep}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 11px 16px button-primary-hover: backgroundColor: "{colors.surface-overlay}" textColor: "{colors.on-primary}" button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 11px 16px border: 1px solid {colors.ink} button-secondary-hover: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" button-orange: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 11px 16px button-orange-hover: backgroundColor: "{colors.primary-deep}" textColor: "{colors.on-primary}" card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 24px card-tinted: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 24px card-dark: backgroundColor: "{colors.surface-deep}" textColor: "{colors.on-primary}" rounded: "{rounded.lg}" padding: 24px input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 8px 12px input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink-secondary}" typography: "{typography.nav-link}" padding: 11px 16px badge: backgroundColor: "{colors.accent-purple-light}" textColor: "{colors.accent-purple}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px badge-orange: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary-deep}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px link: textColor: "{colors.ink}" typography: "{typography.body}" padding: 0px link-hover: textColor: "{colors.link}" code-ref: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.code-mono}" rounded: "{rounded.xs}" padding: 2px 6px --- # GitLab Design System ## Overview GitLab's marketing site is built around a paradox: the brand that owns the entire DevSecOps lifecycle presents itself on a clean white canvas (`{colors.background}`) that could almost pass for a productivity app. But look closer and the signature authority comes through — the near-black `{colors.surface-deep}` primary button, the tanuki orange (`{colors.primary}`) that marks category and CTA moments, and the lavender-to-peach hero gradient that blooms across the page like a deployment pipeline running clean. The color temperature is warm-neutral: not GitHub's cold dark room, not a flashy startup palette, but a confident system that says its tools ship the work. The typographic backbone is **GitLab Sans**, the brand's own variable typeface (self-hosted as `GitLabSans.woff2`). It runs at a distinctive fractional weight of 660 — not the standard 600 semibold, not 700 bold, but a calibrated in-between that sits authoritative without tipping into heavy. The hero displays at 96px with -2.88px letter-spacing, pulled so tight the letters nearly kiss, and the tracking stays proportionally negative all the way down to 40px section headings. At body sizes it relaxes entirely to 0, switching from typographic architecture to readable prose. **GitLab Mono** handles all code surfaces with the same brand ownership over the monospace axis. Structurally, GitLab uses a sparse but decisive radius vocabulary: 4px on buttons and inputs, 8px for panels and containers, 16px for large cards. Nothing dramatic — no 60px decorative curves, no pill-shaped primary buttons. The product communicates precision without playfulness. Elevation is similarly restrained: a five-layer progressive shadow on the most-lifted cards keeps depth visible but controlled. The most expressive moment on the page is the hero gradient — a radial orange glow bleeding in from the right, a pink bloom from the lower left, and the purple-lavender base card — which does the emotional work the component system keeps muted. **Key Characteristics:** - White primary canvas (`{colors.background}`) with the near-black (`{colors.surface-deep}`) as the primary CTA fill — inverted from typical SaaS palettes - Signature tanuki orange (`{colors.primary}`) deployed sparingly as accent and secondary CTA color - GitLab purple (`{colors.accent-purple}`) anchors the gradient system and logo; lavender tint (`{colors.accent-purple-light}`) surfaces in feature cards and badges - **GitLab Sans** at weight 660 for all display and UI — a variable typeface calibrated to sit between semibold and bold - Aggressive negative tracking on display type: -2.88px at 96px, -1.92px at 64px — dense, engineered headlines - Zero tracking at body sizes — the system tracks in on heads and releases at text - **GitLab Mono** for code blocks — brand-owned monospace, not system fallback - 4–8px button and input radius — sharp enough for developer tooling, not brutally square - Radial orange and pink hero gradient as the primary expressive gesture on an otherwise controlled page - Multi-layer progressive shadow on cards (5 layers, nearly imperceptible at lower levels) - Full semantic color system (green/amber/red/blue) reflecting pipeline status vocabulary ## Colors ### Surface & Canvas - **White** (`{colors.background}`): The dominant marketing canvas — clean, neutral, developer-familiar. - **Off-White** (`{colors.surface}`): Subtle section tint for feature tiles, form backgrounds, and code snippets. - **Near-Black** (`{colors.surface-deep}`): Hero panels, the primary CTA button fill, and dark feature sections. GitLab's darkest brand surface. - **Lifted Dark** (`{colors.surface-overlay}`): Hover state on the near-black surface. ### Ink / Text - **Near-Black** (`{colors.ink}`): Primary text, headlines, and nav links on white. - **Muted Gray** (`{colors.ink-secondary}`): Navigation, secondary body, captions on white — the workhorse text neutral. - **Faded** (`{colors.ink-muted}`): Low-emphasis text on dark surfaces. ### Brand Accent — Orange - **Tanuki Orange** (`{colors.primary}`): The signature GitLab color — orange CTA buttons, accent category markers, hero gradient stop. Hover deepens to `{colors.primary-deep}`. - **Orange Container** (`{colors.primary-container}`): Warm tint for orange-category badges and section washes. ### Brand Accent — Purple - **Tanuki Purple** (`{colors.accent-purple}`): The tanuki logo color; appears in gradient blends, badges, and secondary accents. - **Lavender** (`{colors.accent-purple-light}`): The gradient base and feature-card tint — the soft purple the page breathes with. - **Ghost Lavender** (`{colors.accent-purple-soft}`): The near-invisible purple blend in the hero gradient. ### Interactive - **Link Blue** (`{colors.link}`): Link hover and focus states — the single interactive blue. ### Semantic States The pipeline vocabulary maps directly to GitLab's product: `{colors.success}` (passing), `{colors.warning}` (risk), `{colors.error}` (failing), `{colors.info}` (advisory). ### Borders & Shadow Tints - **Hairline** (`{colors.border}`): Card edges and dividers on white. - **Strong Border** (`{colors.border-strong}`): Input outlines and focus indicators. - **Shadow Tints** (`{colors.shadow-soft}`, `{colors.shadow-mid}`): Opaque stand-ins for the multi-layer card shadows (originals were rgba — flattened for the Google spec). ## Typography ### Font Families - **Primary**: `GitLab Sans` — brand's own variable typeface (self-hosted as `GitLabSans.woff2`), falling back to `Inter` then the system sans stack. - **Monospace**: `GitLab Mono` — brand-owned mono (self-hosted as `GitLabMono.woff2`), falling back to `ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono`. ### Hierarchy The complete type scale lives in the `typography:` token block. Reference tokens directly. | Token | Use | |---|---| | `display-hero` | 96px / 660 / -2.88px — marquee hero headline | | `display` | 64px / 660 / -1.92px — campaign-level headers | | `heading-section` | 40px / 660 / -0.8px — section titles | | `heading-sub` | 32px / 400 / -0.64px — section descriptors at regular weight | | `heading-3` | 24px / 580 — feature card headings | | `heading-4` | 18px / 660 — tight feature labels, sidebar heads | | `body-large` | 18px / 400 / 1.56 — lead paragraph copy | | `body` | 16px / 400 / 1.50 — standard body copy and inputs | | `button-ui` | 18px / 660 — button labels; fractional weight 660 matches the brand semibold | | `nav-link` | 14px / 660 — navigation items | | `caption` | 13px / 400 / 0.13px tracking — metadata, timestamps, fine print | | `code-mono` | 14px / 400 / GitLab Mono — code blocks and inline references | ### Principles - **Weight 660 is the brand weight**: GitLab Sans's fractional 660 appears on all CTAs, headings, and nav — it is the calibrated in-between that makes text feel precise rather than heavy. - **Track in, release out**: Aggressive negative tracking on display sizes (-2.88px at 96px) tightens down to 0 at body sizes — tracking is only a display-type tool. - **Own the mono**: GitLab Mono is brand, not a fallback — code surfaces use the house mono, not system defaults. - **Weight 400 on display headings**: `heading-sub` at 32px runs at weight 400, creating a deliberate featherweight contrast against the heavy 660 display above it. ## Layout ### Spacing System The full scale is in the `spacing:` token block. Base unit: 8px. The system leans on 8px, 16px, 24px, and 32px for component internals, stepping up to 48px, 64px, and 96px for inter-section rhythm. ### Grid & Container - Max content width: ~1280px, centered - Hero: full-width gradient canvas with centered content block - Feature sections: 2–3 column grid with tinted card rows - Dark sections (`{colors.surface-deep}`) appear as full-width bands between white content areas ### Whitespace Philosophy - **Functional, not expressive**: Whitespace clears space for content rather than making a design statement — GitLab's personality lives in its type and gradient, not in generous air. - **Dense features, open hero**: Feature grids pack tightly; the hero breathes with large vertical padding and the radial gradient carries visual weight. - **Section banding**: Alternating white/tinted/dark sections create rhythm without relying on whitespace alone. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow, `{colors.border}` hairline only | Most marketing cards, content sections | | Whisper (Level 1) | `0 3px 7px` at ~5% black | Lightly lifted surfaces | | Card (Level 2) | `0 13px 13px` + `0 29px 17px` progressive layers | Feature cards | | Raised (Level 3) | Five-layer cascade up to `0 81px 23px` at 0% opacity + `0 52px 21px` at 1% + deeper layers | The most elevated marketing panels | | Nav underlay | `0 -4px 20px` at 8% black | Sticky nav shadow when scrolled | | Focus Ring | 3px solid `{colors.border-strong}` | Interactive element focus | **Shadow Philosophy**: GitLab uses a five-layer progressive shadow on its highest-elevation cards — the layers start at 0% opacity and build to 5%, creating a depth that registers subconsciously rather than visibly. It communicates "lifted" without calling attention to itself. At most content levels the page is flat, relying on `{colors.border}` hairlines to separate surfaces. The nav acquires a bottom shadow on scroll to signal stickiness. ## Shapes The full radius scale is in the `rounded:` token block. | Token | Value | Use | |---|---|---| | `none` | 0px | Reserved | | `xs` | 2px | Cookie-banner and fine-detail elements | | `sm` | 4px | Buttons, inputs, small interactive elements | | `md` | 8px | Dropdown menus, tab panels, mid-size cards | | `lg` | 16px | Large feature cards and container panels | | `pill` | 9999px | Badges, status tags, segmented controls | GitLab's radius system is conservative and intentional: 4px for every interactive element, 8px for containers, 16px for cards. There are no dramatic curves — nothing approaches the 60px decorative extremes seen in consumer apps. The tight radii signal enterprise tooling; the pill exists only for status badges where category communication requires the round. ## Components The complete component spec lives in the `components:` token block. ### Button Variants - **`button-primary`** — The signature CTA: near-black (`{colors.surface-deep}`) fill, white text, 4px radius, 11px 16px padding. The inverted CTA pattern — no orange, just the brand dark. - **`button-secondary`** — White fill with near-black border — the ghost outline partner to the primary. - **`button-orange`** — Tanuki orange (`{colors.primary}`) fill for secondary "Try for free" CTAs and hero alternatives. Hover deepens to `{colors.primary-deep}`. ### Cards - **`card`** — White surface with 16px radius and hairline border. Standard feature card. - **`card-tinted`** — Off-white (`{colors.surface}`) fill for alternating section rhythm. - **`card-dark`** — Near-black surface for dark section panels with white text. ### Inputs - **`input`** — White fill, near-black text, hairline border, 4px radius. `input-focus` sharpens the outline to `{colors.border-strong}`. ### Navigation - **`nav-bar`** — White, `{colors.ink-secondary}` nav text in `{typography.nav-link}` (14px / 660). Acquires a bottom shadow on scroll. ### Badges & Tags - **`badge`** — Lavender fill (`{colors.accent-purple-light}`), purple text (`{colors.accent-purple}`), pill radius — the purple category marker. - **`badge-orange`** — Warm tint fill, deep orange text — the orange category variant. ### Links & Code - **`link`** — Near-black by default, shifts to link blue (`{colors.link}`) on hover — underline suppressed on default. - **`code-ref`** — Off-white chip, GitLab Mono, 2px radius — inline code references in prose. ## Do's and Don'ts ### Do - Set display headlines in GitLab Sans at weight 660 with proportional negative tracking — `{typography.display-hero}` at -2.88px is the anchor - Use `{colors.surface-deep}` (near-black) as the primary CTA fill — this is the brand's deliberate inversion - Reserve tanuki orange (`{colors.primary}`) for secondary CTAs, hero accents, and category markers — it's an accent, not the primary action fill - Use lavender (`{colors.accent-purple-light}`) and purple (`{colors.accent-purple}`) as gradient companions and card tints, never as dominant surfaces - Keep button and input radius at `{rounded.sm}` (4px) — the precision radius is part of the developer-tool identity - Use `{typography.code-mono}` (GitLab Mono) for all code surfaces — never system monospace - Apply the full semantic palette (`{colors.success}`, `{colors.warning}`, `{colors.error}`, `{colors.info}`) to match GitLab's pipeline status vocabulary - Track display type negatively, body text at zero — never apply negative tracking below 24px ### Don't - Don't use tanuki orange (`{colors.primary}`) as the primary CTA fill — that role belongs to the near-black `{colors.surface-deep}` - Don't loosen headline tracking — display text at zero tracking loses the architectural density that defines the brand - Don't substitute system monospace for GitLab Mono — the mono is brand-owned - Don't increase card radius beyond `{rounded.lg}` (16px) — no decorative oversized curves on feature cards - Don't use `{colors.accent-purple}` as a button color — purple is gradient/badge territory, not interactive action - Don't flatten the hero gradient to a solid — the radial orange and pink glow is the page's only emotional release - Don't scatter the semantic colors for decoration — success/warning/error/info map to pipeline states, not style choices - Don't use weight 700 or 800 for marketing headlines — GitLab Sans's character lives at the fractional 660 --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <425px | Single column; hero headline drops toward 40px; nav collapses to hamburger | | Mobile | 425–768px | Stacked feature cards; CTA buttons go full-width | | Tablet | 768–1024px | 2-column feature grids begin; hero stays centered | | Desktop | 1024–1280px | Full layout; section banding at full width | | Large | >1280px | Max ~1280px container centered; generous section padding (`{spacing.5xl}`) | ### Touch Targets - Buttons use `11px 16px` padding, producing comfortable tap targets on the 18px button font - Nav items at 14px with sufficient spacing for tap precision - Cards are full-width stacked on mobile, eliminating small tap-zone fragmentation ### Collapsing Strategy - **Navigation**: horizontal mega-nav collapses to hamburger; the black CTA button persists on mobile - **Hero**: headline shrinks proportionally; the radial gradient scales with its container - **Feature grids**: 3-column → 2-column → 1-column; tinted backgrounds maintain section banding at all widths - **Spacing**: inter-section padding compresses from 96px toward 48px on mobile ### Image Behavior - Product UI screenshots in feature cards use `object-fit: cover` and scale with the card grid - The hero gradient is CSS-only (radial-gradient) and scales perfectly at all widths - Logos and partner marks in the trust bar adapt to a scrolling row on narrow viewports --- ## Agent Prompt Guide ### Quick Color Reference - Background: White (`{colors.background}`) - Text: Near-Black (`{colors.ink}`) - Primary CTA fill: Near-Black (`{colors.surface-deep}`) - Brand accent / secondary CTA: Tanuki Orange (`{colors.primary}`) - Secondary text: Muted Gray (`{colors.ink-secondary}`) - Border: Hairline (`{colors.border}`) - Purple accent: Tanuki Purple (`{colors.accent-purple}`) - Lavender tint: `{colors.accent-purple-light}` ### Example Component Prompts - "Create a hero section on white (`{colors.background}`) with a radial orange glow blooming from the right and a pink bloom from the lower-left. Center a 96px GitLab Sans headline at weight 660, letter-spacing -2.88px, near-black (`{colors.ink}`) text. Below it, place an 18px body paragraph, then two buttons: a near-black primary (`{colors.surface-deep}` fill, white text, `{rounded.sm}` radius, `11px 16px` padding) and an outline secondary (white fill, near-black border, matching radius)" - "Build a feature card: white surface, `{rounded.lg}` radius, `{colors.border}` hairline edge, `{spacing.xl}` padding. Heading in GitLab Sans 24px weight 580 (`{typography.heading-3}`), body in 16px / 400 (`{typography.body}`). Optionally use `{colors.surface}` fill for the tinted alternating variant" - "Design a nav bar: white background, `{colors.ink-secondary}` nav links in `{typography.nav-link}` (14px / 660). Right-side CTAs: a near-black filled button (`{colors.surface-deep}`, white text, `{rounded.sm}`) and an orange ghost or filled variant for 'Try for free' (`{colors.primary}`)" - "Create a status badge: lavender fill (`{colors.accent-purple-light}`), purple text (`{colors.accent-purple}`), `{typography.caption}` (13px / 400), `{rounded.pill}` radius, `4px 10px` padding. For the orange variant: `{colors.primary-container}` fill, `{colors.primary-deep}` text" - "Render an inline code chip: off-white fill (`{colors.surface}`), near-black text, GitLab Mono (`{typography.code-mono}`, 14px), `{rounded.xs}` radius, `2px 6px` padding — for code references within prose" - "Design a dark feature band: `{colors.surface-deep}` background full-width, white text, 2–3 column card grid inside. Cards use `{colors.surface-overlay}` fill, `{rounded.lg}` radius, white `{typography.heading-4}` titles, `{colors.ink-muted}` body copy" ### Iteration Guide 1. Start on white (`{colors.background}`). If you've reached for a light gray or off-white canvas, correct it — the default page is clean white. 2. The primary CTA is near-black (`{colors.surface-deep}`), not orange. If your CTA button is orange, demote it to secondary. 3. Headlines are GitLab Sans weight 660 with proportional negative tracking — verify tracking is negative and that weight is 660, not 600 or 700. 4. Orange (`{colors.primary}`) is the accent spark — use it for the hero gradient, secondary "Try for free" buttons, and category badges. Don't let it dominate. 5. Purple (`{colors.accent-purple}`) and lavender (`{colors.accent-purple-light}`) live in gradients, the logo, and badges — not as button colors or surfaces. 6. The hero gradient is radial, not linear: orange glow from the right edge, pink bloom from lower-left, lavender base card. CSS radial-gradient, not a flat swatch. 7. Radius is 4px for interactive elements, 8px for menus, 16px for cards — nothing larger. If you've gone pill-shaped on a button, pull it back to `{rounded.sm}`. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by GitLab. Brand names and trademarks belong to their respective owners.