--- version: alpha name: Logitech G description: Gaming peripherals brand running a near-black arena canvas, the signature Logitech G electric-blue accent on full-pill CTAs, the custom Brown typeface in bold uppercase labels, and cinematic product photography that makes hardware look like campaign art. colors: # Canvas / surfaces background: "#0a0b0d" # near-black arena — visual estimation from screenshot dark field surface: "#1b1b1b" # card and panel surface; extracted from btn bg rgb(27,27,27) surface-mid: "#303133" # mid-dark panel — extracted from dembrandt palette rgb(48,49,51) surface-light: "#eaebed" # light-band neutral — dembrandt _raw #eaebed count 278 # Ink / text ink: "#ffffff" # primary text on dark canvas ink-secondary: "#9598a2" # secondary/supporting copy — palette rgb(149,152,162) ink-muted: "#6a6d78" # footer text, metadata — palette rgb(106,109,120) on-surface-light: "#303133" # text on light bands — dembrandt surface-mid color # Brand accent — Logitech G Electric Blue primary: "#00b8fc" # signature Logitech G blue — dembrandt semantic.primary on-primary: "#000000" # black on electric blue (high contrast confirmed by dembrandt) primary-dark: "#009cd6" # hover state — dembrandt palette hover for primary primary-deep: "#003041" # deep accent — dembrandt palette rgb(0,48,65) # CSS variable accents brand-accent-teal: "#00fdcf" # --brand-accent CSS var; secondary accent, teal-mint brand-toggle: "#cbd4dc" # --brand-radio-toggle-bg; toggle/switch resting state # Semantic error: "#ff4444" # estimated — standard error state /* estimated */ focus-ring: "#3b82f6" # --tw-ring-color base; focus ring blue /* was rgba(59 130 246 / .5) — Google format requires hex */ # Borders border: "#303133" # panel dividers, extracted surface-mid border-subtle: "#4b4c51" # subtle separator — extracted from border combination rgb(75,76,81) border-light: "#d3d5db" # light band borders — input border rgb(211,213,219) # Shadow tint shadow-soft: "#000000" # drop shadow base tint typography: display-hero: fontFamily: "BrownLogitechWebPan, Brown, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 96px fontWeight: 700 lineHeight: 0.96 letterSpacing: 0em display: fontFamily: "BrownLogitechWebPan, Brown, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 68px fontWeight: 700 lineHeight: 0.96 letterSpacing: 0em heading-section: fontFamily: "BrownLogitechWebPan, Brown, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 48px fontWeight: 700 lineHeight: 0.96 letterSpacing: 0em heading-sub: fontFamily: "BrownLogitechWebPan, Brown, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 36px fontWeight: 700 lineHeight: 0.96 letterSpacing: 0em body-large: fontFamily: "BrownLogitechWebPan, Brown, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 24px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0em body: fontFamily: "BrownLogitechWebPan, Brown, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0em body-small: fontFamily: "BrownLogitechWebPan, Brown, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.15 letterSpacing: 0em nav-link: fontFamily: "BrownLogitechWebPan, Brown, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.15 letterSpacing: 0em button-ui: fontFamily: "BrownLogitechWebPan, Brown, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 1.15 letterSpacing: 0.42px caption: fontFamily: "BrownLogitechWebPan, Brown, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.15 letterSpacing: 0em label-upper: fontFamily: "BrownLogitechWebPan, Brown, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 12px fontWeight: 700 lineHeight: 1.15 letterSpacing: 0em spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 24px 2xl: 40px 3xl: 64px section: 80px rounded: none: 0px sm: 4px md: 12px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 17px 40px button-primary-hover: backgroundColor: "{colors.primary-dark}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 17px 40px button-secondary: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 17px 40px border: none button-secondary-hover: backgroundColor: "{colors.surface-mid}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 17px 40px button-ghost: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 14px 37px border: 3px solid {colors.primary} button-ghost-hover: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 14px 37px border: 3px solid {colors.primary} button-outline-dark: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 14px 37px border: 3px solid {colors.ink} nav: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" nav-item-hover: textColor: "{colors.primary}" card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.md}" padding: 24px card-hover: backgroundColor: "{colors.surface-mid}" rounded: "{rounded.md}" padding: 24px input: backgroundColor: "{colors.surface-light}" textColor: "{colors.on-surface-light}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 12px 28px border: none input-focus: backgroundColor: "{colors.surface-light}" textColor: "{colors.on-surface-light}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 12px 28px border: 1px solid {colors.on-primary} badge: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label-upper}" rounded: "{rounded.pill}" padding: 4px 12px badge-dark: backgroundColor: "{colors.surface-mid}" textColor: "{colors.ink}" typography: "{typography.label-upper}" rounded: "{rounded.sm}" padding: 4px 10px link-default: textColor: "{colors.ink}" typography: "{typography.body}" link-hover: textColor: "{colors.primary}" typography: "{typography.body}" --- # Logitech G Design System ## Overview Logitech G's design language is built around a single atmospheric premise: make the hardware feel like an event. The canvas is a near-black void — `{colors.background}` — deep enough that product photography appears to materialize out of darkness rather than sit on a background. This is not a dark mode that someone toggled on; it is the brand's native state, the visual equivalent of a gaming arena with the house lights cut. Photography carries the drama: mice and headsets rendered in moody editorial lighting, keyboards with per-key RGB bleeding into soft fog. The site is less e-commerce than it is a product launch on continuous loop. The brand accent is `{colors.primary}`, a vivid electric blue that reads as the color of a glowing gaming peripheral in a dark room. It is used with precision — reserved almost entirely for primary CTAs and the signature Logitech G logo mark. The defining UI move is the full-pill button: `{rounded.pill}` on every CTA, which gives the call-to-action an unexpectedly friendly, almost inflated quality against the otherwise angular visual field. This sets Logitech G apart from competitors like Razer (hard corners) and creates a distinctive physical button personality. Typography is handled entirely in Brown — a custom Logitech sub-variant called `BrownLogitechWebPan` — across all four weights (Light, Regular, Medium, Bold). There is no secondary typeface; Brown handles everything from 96px cinematic hero headings down to 12px legal captions. The system places `{typography.button-ui}` labels in uppercase with tracked spacing on the pill CTAs, which anchors the gaming-hardware context without reaching for heavy condensed display type. **Key Characteristics:** - Near-black `{colors.background}` arena canvas — hardware photography materializes from darkness, no visible card edges needed - `{colors.primary}` electric blue as the single brand-accent color — applied only to primary CTAs and the G-logo mark - `{rounded.pill}` on all buttons — the most distinctive UI choice in the system, soft counter-rhythm against the dark field - Brown (BrownLogitechWebPan) at four weights as the sole typeface — no font pairing, weight does the hierarchy work - `{typography.button-ui}` uppercase labels with `0.42px` tracking on all CTA pill buttons - Light bands (`{colors.surface-light}`) used for email collection modals and utility contexts — a white island within the dark arena - Tailwind-based spacing system anchored at 12px dominant rhythm, scaling to `{spacing.section}` (80px) between major sections - Cards use `{rounded.md}` (12px) — the only non-pill radius in active use, applied to product image tiles - Motion is moderate: 0.15s–0.5s, all `ease`, with button transitions on opacity/transform/border-color at 0.5s - A secondary teal accent (`{colors.brand-accent-teal}`, `#00fdcf`) exists as a CSS variable but appears only in contextual highlight moments, not as a primary brand color - Product series have distinct sub-identity (PRO Series, SIM Racing, ASTRO) but all resolve to the same design token layer - Nav is translucent-over-dark, with white text labels turning `{colors.primary}` blue on hover ## Colors ### Canvas & Surfaces - **Near-Black Arena** (`{colors.background}`): The full-page canvas. Product photography saturates this field without needing card chrome. - **Dark Surface** (`{colors.surface}`): Card interiors, modal panels, the email capture popup background. Extracted from the on-site dark button fill. - **Mid Surface** (`{colors.surface-mid}`): Hover state surfaces, dividers, secondary panel backgrounds. - **Light Band** (`{colors.surface-light}`): The white-utility field for modals, email inputs, and inline forms. ### Brand Accent - **Electric Blue** (`{colors.primary}`): The Logitech G signature — applied to the primary CTA fill, the G-logo mark, and active nav hover states. Its saturation is close to the perceived glow of RGB lighting on hardware. - **Electric Blue Dark** (`{colors.primary-dark}`): The hover state for primary buttons. Perceptibly deeper to register as pressed without leaving the blue family. - **On Primary** (`{colors.on-primary}`): Black text on the blue CTA. Confirmed high contrast by dembrandt analysis. - **Deep Accent** (`{colors.primary-deep}`): A near-navy deep blue used in certain branded sub-contexts and the dark hero overlay. ### Text - **Ink** (`{colors.ink}`): Primary white text on dark canvas — headings, nav labels, product names. - **Ink Secondary** (`{colors.ink-secondary}`): Mid-grey supporting copy and specification labels. - **Ink Muted** (`{colors.ink-muted}`): Footer metadata, legal text, and timestamps. - **On Surface Light** (`{colors.on-surface-light}`): Dark text for use on light-band panels and modal inputs. ### Semantic & CSS Accents - **Focus Ring** (`{colors.focus-ring}`): Tailwind ring blue, used on keyboard-focus states for accessibility compliance. - **Brand Teal** (`{colors.brand-accent-teal}`): CSS-variable accent (`--brand-accent`), a bright mint-teal that appears on contextual highlight moments and toggle components. - **Border** (`{colors.border}`): Panel separators and divider lines on the dark canvas. - **Border Light** (`{colors.border-light}`): Thin rule on the light-band input context. ## Typography ### Font Family - **Everything**: `BrownLogitechWebPan` — a custom Logitech sub-variant of the Brown typeface, self-hosted in four woff2 files (Light, Regular, Medium, Bold). Fallbacks: `Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial`. There is no secondary typeface anywhere in the system; weight alone creates the hierarchy. - **OpenType behavior**: Uppercase treatment via `text-transform: uppercase` on CTA and label contexts — no `font-feature-settings` variation detected. ### Hierarchy The complete type scale is in the `typography:` token block above. Reference tokens directly. | Token | Use | |---|---| | `display-hero` | 96px / 700 — cinematic campaign headings and hero series titles | | `display` | 68px / 700 — product family headers and large section titles | | `heading-section` | 48px / 700 — feature specification sections and mid-page anchors | | `heading-sub` | 36px / 700 — sub-feature headings and product naming | | `body-large` | 24px / 400 — lead marketing copy and feature introductions | | `body` | 18px / 400 — standard product descriptions and UI prose | | `body-small` | 16px / 400 — nav labels, supporting notes, dense spec text | | `nav-link` | 16px / 400 — horizontal navigation items | | `button-ui` | 14px / 700 / 0.42px tracking — all CTA pill button labels, uppercase | | `caption` | 12px / 400 — legal copy, footnotes, image captions | | `label-upper` | 12px / 700 / uppercase — product category labels and badge text | ### Principles - Brown handles all typographic work — no font pairing at any level. The single-family discipline gives the site a unified voice that can range from cinematic hero to dense legal copy without tonal inconsistency. - Weight 700 is the brand voice — Bold Brown for all headings, button labels, and category tags. - Weight 400 carries the utility layer — body, nav, and supporting copy. - The `{typography.button-ui}` 0.42px letter-spacing on uppercase labels is load-bearing: it lets the 14px text breathe inside the wide pill buttons. - No italics used across the site; the system achieves tonal range through weight, size, and uppercase transforms alone. ## Layout ### Spacing System The full spacing scale is in the `spacing:` token block above. Base unit: 4px (Tailwind-derived). The dominant rhythm is 12px for component internals, scaling through `{spacing.xl}` (24px) and `{spacing.2xl}` (40px) for card padding, with `{spacing.section}` (80px) for major section-to-section gaps. The density is controlled: tight component padding (12px) that doesn't crowd the photography-first layout, combined with generous section spacing that gives each product family its own breathing room. ### Grid & Container - Max content width: approximately 1640px (dembrandt largest breakpoint) - Tailwind-based responsive grid; product tiles collapse across 4 → 3 → 2 → 1 column at breakpoints - Full-bleed hero sections span edge-to-edge; product photography fills the viewport - Series-navigation rows use horizontal scroll at smaller viewports ### Whitespace Philosophy - Photography-first: white space is created by the dark field, not by explicit padding. Cards have no visible borders — products float on the canvas. - Section spacing (`{spacing.section}` 80px) separates product families with a clear visual beat. - Modal and utility contexts (email capture, newsletter) use a light-band approach for contrast. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow; dark canvas absorbs any edge | Hero sections, full-bleed product photography | | Card (Level 1) | Background color step from `{colors.background}` to `{colors.surface}` | Product tiles and feature cards | | Card Hover (Level 2) | Background steps to `{colors.surface-mid}` + subtle `rgba(0,0,0,0.3) 0px 15px 15px -15px` | Hovered product cards, raised panels | | Modal (Level 3) | `{colors.surface}` panel on a dark scrim | Email capture, consent overlays | | Focus Ring | `rgba(59,130,246,0.5) 0px 0px 0px 6px` with white outer ring | Keyboard-focused inputs; Tailwind ring system | **Shadow Philosophy**: Logitech G barely needs shadows. On a near-black canvas, elevation is communicated by background color stepping — from `{colors.background}` to `{colors.surface}` to `{colors.surface-mid}`. The one extracted shadow (`rgba(0,0,0,0.3) 0px 15px 15px -15px`) is a bottom-only directional drop — used beneath cards where they need to separate from sections below, not above. The focus ring uses the Tailwind ring utility: white outer ring + blue semi-transparent inner ring. ## Shapes The full radius scale is in the `rounded:` token block above. | Token | Value | Use | |---|---|---| | `none` | 0px | Rarely used; full-bleed image crops | | `sm` | 4px | Input fields and small utility elements | | `md` | 12px | Product image tiles and content cards | | `pill` | 9999px | All buttons — the system's signature shape | The shape system is effectively binary: `{rounded.md}` for containers and `{rounded.pill}` for interactions. Pill buttons are the visual signature of Logitech G — an unexpectedly soft choice for a gaming brand that creates a friendly, premium feel distinct from the hard-corner approaches used by gaming competitors. The 12px card radius is consistent and restrained. ## Components The complete component spec lives in the `components:` token block above. ### Button Variants - **`button-primary`** — `{colors.primary}` electric-blue fill, `{colors.on-primary}` black label, `{rounded.pill}` corners, uppercase Brown Bold. The dominant CTA: "SHOP NOW", "SHOP G512 X 75". Hover darkens to `{colors.primary-dark}`. - **`button-secondary`** — `{colors.surface}` dark fill, `{colors.ink}` white label, `{rounded.pill}` corners. Used for adjacent secondary actions ("UNLOCK 15% OFF" in the dark popup). - **`button-ghost`** — Transparent fill with 3px `{colors.primary}` blue border and white label. Used on dark hero sections where the brand accent border creates a glowing outline effect. - **`button-outline-dark`** — Transparent fill with 3px `{colors.ink}` white border. Used for decline/dismiss actions ("DECLINE OFFER"). ### Cards Product cards use `{colors.surface}` with `{rounded.md}` corners — the chrome nearly disappears, letting product photography dominate. Hover state steps the surface to `{colors.surface-mid}`. No card border in the primary pattern; the surface-to-canvas contrast creates implicit separation. ### Inputs Text inputs (email capture context) use `{colors.surface-light}` white background with `{rounded.sm}` 4px radius and no visible border at rest. Focus state adds a 1px black border and applies the Tailwind ring system (`{colors.focus-ring}` blue semi-transparent). ### Badges / Tags The primary badge uses `{colors.primary}` fill with `{rounded.pill}` — inheriting the button's pill personality for inline callouts. Dark context badges use `{colors.surface-mid}` with `{rounded.sm}`. ### Navigation Full-width translucent nav bar sits over the dark canvas. White nav-link text (`{typography.nav-link}`) turns `{colors.primary}` electric blue on hover. The G-logo mark in the nav doubles as a brand anchor and is consistently rendered in `{colors.primary}`. ## Do's and Don'ts ### Do - Use `{rounded.pill}` on every button — it is the system's most recognizable UI choice and must not be replaced with rounded-rectangular alternatives. - Apply `{colors.primary}` exclusively to primary CTAs and the G-logo mark. Its rarity against the dark canvas is what gives it punch. - Let product photography fill the canvas without card borders — the dark field (`{colors.background}`) creates implicit separation. - Use Brown Bold (`{typography.button-ui}`) uppercase with `0.42px` tracking on all button labels. The tracking is essential for 14px uppercase to read cleanly inside the wide pill shape. - Apply `{rounded.md}` (12px) to product image tiles and content cards consistently — it softens the photography without approaching the button's pill radius. - Step elevation through surface colors (`{colors.surface}` → `{colors.surface-mid}`) rather than using drop shadows on the dark canvas. - Use `{spacing.section}` (80px) between product family sections — the generous gap is what creates the arena rhythm. - Reserve `{colors.surface-light}` for functional utility contexts (email modals, input fields) — it creates a deliberate "brightness island" contrast. ### Don't - Don't use hard square corners (`{rounded.none}`) on buttons — this directly contradicts the system's pill signature and will read as a generic gaming-brand cliché. - Don't introduce a second typeface — Brown handles the full range; adding another font breaks the single-voice discipline. - Don't apply `{colors.primary}` as a large background fill (other than the CTA button) — an electric-blue panel would overwhelm the carefully controlled accent economy. - Don't use the `{colors.brand-accent-teal}` (`#00fdcf`) teal as a primary button or CTA color — it exists only as a highlight/toggle accent, not a call-to-action signal. - Don't use card borders on the dark canvas — the surface-step elevation system makes them redundant, and borders break the "hardware floating in darkness" product photography aesthetic. - Don't set Brown in sentence case for button labels — uppercase is functional in this system, encoding action-state. - Don't use large drop shadows on product cards — the one real shadow in the system is directional and bottom-only; stacked or ambient shadows undermine the flat-dark aesthetic. - Don't lighten the hero canvas to a mid-grey — the system's drama depends on the near-black field staying close to `{colors.background}`. --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile | <600px | Single column; nav collapses to hamburger; hero copy stacks below image; buttons go full-width | | Mobile Large | 600–768px | Two-column product tiles; hero text overlay appears | | Tablet | 768–1024px | Three-column product grid; condensed nav | | Desktop | 1024–1240px | Four-column product grid; full horizontal nav with all series links | | Large Desktop | 1240–1640px | Full layout; wide hero imagery; max-width container kicks in at 1640px | ### Touch Targets - Pill buttons with `17px 40px` padding provide generous touch area — well above the 44px minimum height threshold. - Nav items are spaced to meet minimum 44px height for mobile tap targets. ### Collapsing Strategy - Navigation collapses to a hamburger icon revealing a full-screen `{colors.background}` overlay with stacked series links. - Product grids collapse from 4 → 3 → 2 → 1 columns across the range. - Hero sections maintain full-bleed photography; text overlay reflows below the image on mobile. - Section spacing (`{spacing.section}`) compresses to `{spacing.2xl}` (40px) at mobile viewports. ### Image Behavior - Product photography is always shot against dark backgrounds matching the canvas — no visible image borders needed. - Hero images use object-fit cover and maintain cinematic aspect ratios; focal points are center-weighted for portrait crop compatibility. - Product thumbnails maintain 4:3 or square aspect ratios within the tile grid. --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` — the near-black arena - Primary text: `{colors.ink}` — white - Secondary text: `{colors.ink-secondary}` - Brand accent: `{colors.primary}` — electric blue - On accent: `{colors.on-primary}` — black - CTA hover: `{colors.primary-dark}` - Border: `{colors.border}` - Card surface: `{colors.surface}` ### Example Component Prompts - "Build a Logitech G hero section: `{colors.background}` full-viewport dark canvas, full-bleed product photography spanning the frame, a `{typography.display-hero}` 96px Bold Brown headline in `{colors.ink}` white, a supporting line in `{typography.body-large}` at `{colors.ink-secondary}`, and a `{components.button-primary}` electric-blue pill CTA with uppercase Brown Bold label. Add `{spacing.section}` 80px vertical padding." - "Create a Logitech G product card: `{colors.surface}` background, `{rounded.md}` corners, no visible border, product image on dark background at top, product name in `{typography.heading-sub}` Brown Bold `{colors.ink}`, series label in `{typography.label-upper}` uppercase `{colors.ink-secondary}`, and a `{components.button-primary}` pill CTA at the bottom. Hover steps the background to `{colors.surface-mid}`." - "Design a Logitech G pill button: `{colors.primary}` fill, `{colors.on-primary}` black label in `{typography.button-ui}` uppercase Brown Bold with 0.42px letter-spacing, `{rounded.pill}` corners, `17px 40px` padding. Hover transitions to `{colors.primary-dark}` at `0.5s ease`." - "Make a Logitech G ghost button for a dark hero: transparent fill, `3px solid {colors.primary}` blue border, `{colors.ink}` white label in `{typography.button-ui}` uppercase Brown Bold, `{rounded.pill}` corners, `14px 37px` padding. Hover fills with `{colors.primary}` and sets text to `{colors.on-primary}`." - "Create a Logitech G email capture modal: `{colors.surface}` dark panel with `{rounded.md}` corners, centered within the dark canvas, `{typography.heading-section}` heading in `{colors.ink}`, a `{components.input}` white-fill email input with `{rounded.sm}` corners, a `{components.button-primary}` pill submit CTA, and a `{components.button-outline-dark}` dismiss button below. Spacing between elements: `{spacing.md}` (12px)." - "Build a Logitech G navigation bar: full-width `{colors.background}` dark background, G-logo mark in `{colors.primary}` electric blue on the left, horizontally spaced nav items in `{typography.nav-link}` Brown Regular `{colors.ink}` white that turn `{colors.primary}` on hover at `0.3s ease`, search and cart icons on the right." ### Iteration Guide 1. Start with `{colors.background}` near-black as the page canvas — apply to body and all structural containers. This is the foundation the photography drama depends on. 2. Place `{colors.primary}` electric blue on exactly one primary action per section: the pill CTA button. Secondary buttons use the dark-surface or ghost variant, never another hue. 3. Make every button `{rounded.pill}` — this is non-negotiable and the single most visible brand differentiator in the UI layer. 4. Set all type in Brown Bold (700) for headings and button labels; Brown Regular (400) for body, nav, and supporting copy. Never introduce a second typeface. 5. Uppercase all button labels with `{typography.button-ui}` tracking (0.42px) — these labels sit inside wide pill shapes and need the spacing to breathe. 6. Elevation on dark canvas: step surfaces from `{colors.background}` → `{colors.surface}` → `{colors.surface-mid}` for cards, panels, and hover states. Skip drop shadows except for the bottom-edge directional shadow on cards that need explicit separation. 7. Use `{spacing.section}` (80px) to separate product family sections — the generous gap creates the arena pacing that makes each product launch feel distinct. --- ## 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 Logitech G. Brand names and trademarks belong to their respective owners.