Garmin

Overview

Garmin's design system embodies **Purposeful Minimalism**—a philosophy that strips away visual noise to reveal essential information with precision and clarity. The brand serves athletes, adventurers, pilots, and drivers who depend on GPS technology to navigate complex environments; the UI must earn trust through unambiguous hierarchy, legible typography, and predictable interaction patterns. The aesthetic is utilitarian yet refined: a pure white canvas (rgb(255, 255, 255)) anchors the interface, while jet black (rgb(0, 0, 0)) provides commanding contrast for primary actions and critical data. Secondary accents in deep blue (#106fad) and warning red (#920000) signal status and urgency without distraction. The emotional response is confidence—users should feel they are in control of powerful, reliable technology.

Garmin's voice is direct, instructional, and performance-focused. Sentences are active and outcome-oriented: "Track your route. Conquer your goal." The brand avoids marketing hyperbole; instead, it speaks in the language of metrics, features, and results. Typography choices reinforce this: Oswald (condensed, geometric) for headlines conveys precision and forward momentum, while Roboto (humanist, open) for body text ensures accessibility and warmth. The color palette is deliberately restrained—no gradients, no transparency effects—because the product itself (GPS watches, marine displays, aviation instruments) demands clarity over decoration.

Colors

Garmin's color system is built on **High-Contrast Clarity**. The primary palette consists of pure white (#ffffff) as the dominant surface, pure black (#000000) as the primary action color, and carefully selected accent colors that signal function rather than emotion.

**Primary (Black, #000000)**: Used exclusively for primary CTAs (buttons with padding 8px 16px, height 40px), navigation elements, and critical text. On hover, primary buttons transition to a dark gray container (#333333) with white text, maintaining contrast ratio ≥ 7:1 per WCAG AA. Focus states apply a 4px blue ring (box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #3699f1) to ensure keyboard navigation is always visible.

**Secondary (Deep Blue, #106fad)**: Reserved for links, secondary CTAs, and interactive elements that require

Typography

Garmin's type system pairs **Oswald** (headlines, display) with **Roboto** (body, labels) to balance geometric precision with humanist warmth. Oswald is used at 40px (headline-lg, fontWeight 400) for hero titles like "SCHOOL'S OUT. LET'S BOUNCE!" and at 28px (headline-md) for section headers. The condensed letterforms (letterSpacing -0.02em) create a sense of forward momentum and urgency appropriate for performance-oriented products. Roboto serves body copy at 16px (fontWeight 400, lineHeight 24px) and labels at 14px (fontWeight 600, lineHeight 20px, letterSpacing 0.01em). For small labels over busy backgrounds (e.g., badge text on product images), apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) to ensure legibility. The system uses only two weights: 400 (regular) for body and display head

Layout

Garmin's layout system uses a **12-column fluid grid** with a fixed max-width of 1200px (--g-breakpoint-lg). The grid is anchored by consistent gutters: 16px on mobile (--g-spacing-md), scaling to 24px on tablet and desktop. Containers are centered with margin: 0 auto and padding: 0 16px on mobile, expanding to padding: 0 24px at breakpoints ≥ 768px. The spacing scale is semantic: xs (4px) for micro-interactions, sm (8px) for component padding, md (16px) for section margins, lg (24px) for major section separation, and xl (32px) for hero spacing. Cards use md (16px) padding internally and are separated by lg (24px) margins. The hero section (with the swimming pool image and "SCHOOL'S OUT" headline) spans full width with a 50% height ratio on desktop, collapsing to 60vh on mobile. All text c

Elevation & Depth

Garmin's depth model is **Shadow-Based Hierarchy** with three discrete levels, avoiding blur or transparency effects that would compromise clarity on technical displays. Level 1 (Base): No shadow; flat surfaces like input fields use only a 1px border in outline-variant (#d8d8d8). Level 2 (Raised Cards): box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.24) lifts cards 2–4px from the background, creating subtle separation. Level 3 (Hover/Elevated): On card hover, the shadow expands to 0 1px 3px 1px rgba(60, 64, 67, 0.2), 0 2px 8px 4px rgba(60, 64, 67, 0.1), signaling interactivity. The transition is sm

Shapes

Garmin's shape philosophy is **Architectural Precision**—minimal rounding that signals refinement without softness. The rounded scale uses: sm (2px) for subtle borders on inputs and small UI elements, DEFAULT (3px) for standard cards and buttons, md (4px) for larger interactive surfaces, and lg (8px) for modals or prominent containers. Buttons use 3px (DEFAULT) border-radius, creating a barely-perceptible softness that distinguishes them from sharp edges while maintaining a technical aesthetic. Cards use 3px as well, consistent with button styling. Input fields use 0px (no rounding) to align w

Components

Action Elements

**Button Primary** (backgroundColor: {colors.primary}, textColor: {colors.on-primary}, padding: 8px 16px, height: 40px, rounded: 3px): The dominant CTA uses pure black with white text. Font is label-md (14px, fontWeight 600). On hover, the background shifts to {colors.primary-container} (#333333) with a smooth transition (all 135ms ease). On focus, apply the focus ring: box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #3699f1. On active/pressed, reduce padding to 6px 14px and apply a subtle inset shadow (box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2)) to create a tactile "pressed" effect.

**Button Secondary** (backgroundColor: transparent, textColor: {colors.primary}, border: 1px solid {colors.primary}, padding: 8px 16px, height: 40px): Used for secondary actions and navigati

Do's and Don'ts

**Do**

• Do use pure black (#000000) for primary CTAs and critical text; it commands attention and maintains the technical aesthetic.
• Do apply the 4px blue focus ring (box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #3699f1) to all interactive elements for keyboard accessibility.
• Do constrain body text to max-width: 600px to maintain readability and prevent line lengths exceeding 75 characters.
• Do use Oswald (fontWeight 400) for headlines and Roboto (fontWeight 400 or 600) for body and labels; never mix weights arbitrarily.
• Do apply smooth transitions (135ms cubic-bezier(0.4, 0, 0.2, 1)) to hover states on cards and buttons to signal interactivity.
• Do use the spacing scale semantically: md (16px) for component padding, lg (24px) for section separation, xl (32px) for hero spacing.

**Don't**

• Don't use rounded corners on input fields; keep them sharp (border-radius: 0px) to align with the utilitarian design language.
• Don't apply drop shadows exceeding 8px blur radius; keep shadows grounded and avoid the 'floating' effect inappropriate for data-critical interfaces.
• Don't mix primary and secondary colors in a single CTA; use black for primary actions and blue only for secondary or tertiary interactions.
• Don't exceed two font weights (400 and 600); avoid using 300, 500, 700, or 800 to prevent visual chaos.
• Don't use transparency or glassmorphism effects; the interface must remain clear and legible on technical displays.
• Don't apply color to text for emphasis; use fontWeight: 600 or textDecoration: underline instead.