Lando Norris

Overview

Lando Norris's design system embodies 'Minimalist Velocity'—a contemporary aesthetic that strips away visual noise to emphasize precision, speed, and elite athletic performance. The brand serves a global audience of Formula 1 enthusiasts, sponsors, and media, translating the intensity of professional motorsport into a serene, high-contrast digital experience. The UI philosophy centers on organic geometric abstraction (flowing curves, layered shapes) paired with brutalist typography and a single electric lime accent (#d2ff00) that commands attention like a pit-lane signal. The emotional response is one of controlled energy: calm, focused, unapologetically modern.

Voice and tone are direct, confident, and spare. Lando's brand speaks in short declarative sentences, avoiding hyperbole. Example: 'Next race: Zandvoort. Pole position target.' The vocabulary is technical yet accessible—race terminology (grid, apex, stint) sits alongside everyday language. Personality traits: ambitious, British understatement, precision-obsessed, youthful but not frivolous. Every word earns its place; every pixel serves the narrative of elite performance.

Colors

The color system operates on a principle of 'controlled contrast.' The dominant surface palette—cream (#f4f4ed), off-white (#efefe5), and warm grays (#b9bbad, #535450)—creates a neutral, almost monastic canvas. Against this, the primary accent lime (#d2ff00) functions as a visual emergency signal: it appears only on critical CTAs (STORE button, race-day alerts), focus states, and brand moments. Secondary orange (#ff6b00) is reserved for urgency or secondary actions. The dark green tertiary (#282c20) anchors typography and provides depth without resorting to pure black (#111112 is used instead for text, preserving legibility at 14px body size). Surface stacking follows a strict hierarchy: surface-container-lowest (#ebeee0) for inputs and recessed elements, surface-container (#d2d5c8) for st

Typography

The type system is built on Mona Sans Variable, a geometric sans-serif that conveys modernity and precision without sacrificing warmth. Display (64px, 700 weight, -0.03em tracking) is reserved for hero moments and hero imagery; Headline-lg (42px, 700, -0.02em) anchors section introductions; Headline-md (32px, 600) breaks up content hierarchies. Body-lg (18px, 400, 0.01em) is used for introductory paragraphs and rich content; Body-md (14px, 400, 0.02em) is the workhorse for standard body copy and card descriptions. Label-md (14px, 600, 0.05em) and Label-sm (12px, 600, 0.08em) are applied to buttons, badges, and UI labels with increased letter-spacing to reinforce their functional role. On small labels over busy backgrounds (e.g., race-status badges on hero imagery), apply text-shadow: 0 2px

Layout

The page grid is a 12-column fluid layout with a max-width of 1280px, scaling fluidly between 992px (desktop) and 320px (mobile). Container padding is 24px on desktop, reducing to 16px on tablet and 12px on mobile. The spacing scale uses semantic tokens: 'gutter' (24px) separates major sections; 'lg' (40px) creates breathing room between hero and content; 'md' (24px) is the default card and component padding; 'sm' (12px) is used for internal component spacing (button padding, input padding). The design favors asymmetric white-space: hero sections occupy 60–70% of viewport height, with organic geometric shapes (circles, curves) bleeding off-canvas to create visual momentum. Content sections use a 2–3 column grid on desktop, collapsing to single-column on mobile. The container-max-width of 1

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic drop-shadows. Level 1 (Base): flat surfaces with no shadow, relying on 1px borders (outline-variant: #b9bbad) for definition. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, input fields, and interactive elements at rest. Level 3 (Hover/Active): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), applied on button-hover, card-hover, and modal overlays to signal elevation and interactivity. The shadow color is always black at 12–15% opacity, never tinted, to maintain the clean, technical aes

Shapes

The shape philosophy is 'Architectural Softness'—sharp enough to feel contemporary and precise, soft enough to avoid coldness. Border-radius follows a tiered system: buttons and inputs use 0.375rem (6px, computed as 6.4px at rendered size), creating a subtle roundness that feels refined without being bubbly. Cards and larger containers use 1rem (16px), providing visual breathing room. The full radius (9999px) is reserved for badges and pill-shaped elements. No element uses 0px radius; even the most minimal components have a 0.25rem (4px) corner radius to soften the grid. Organic shapes (hero b

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses #d2ff00 background with #282c20 text, 44px height, 12px vertical / 24px horizontal padding, and 0.375rem radius. On hover, the background shifts to #b2c73a (primary-container) and a 0 3px 8px rgba(0, 0, 0, 0.15) shadow appears. All button state changes transition over 150ms using cubic-bezier(0.65, 0.05, 0, 1) for a snappy, responsive feel. Button-secondary uses a transparent background with a 2px solid #d2ff00 border, same padding and height. On active state, apply transform: scale(0.98) to provide tactile feedback without visual distraction.

Containers & Surfaces Cards use a 1px solid #b9bbad border, 24px padding, 1rem radius, and 0 3px 8px rgba(0, 0, 0, 0.15) shadow. On hover, the background shif

Do's and Don'ts

**Do**

• Do use the lime accent (#d2ff00) sparingly—only on primary CTAs, focus states, and brand-defining moments; overuse dilutes its impact.
• Do maintain 7:1 minimum contrast between text and background; test all color combinations at 14px body-md size.
• Do apply the cubic-bezier(0.65, 0.05, 0, 1) easing curve to all interactive transitions (150ms for micro-interactions, 300ms for page transitions).
• Do use Mona Sans Variable at weights 400, 600, and 700 only; intermediate weights create visual inconsistency.
• Do layer organic geometric shapes (circles, curves) at 8–15% opacity in hero sections to create visual interest without competing with content.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff); always use #111112 for text and #f4f4ed for surfaces to maintain the warm, refined aesthetic.
• Don't apply shadows to more than two layers of depth; excessive shadows create visual clutter and undermine the minimalist philosophy.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii break the systematic rhythm.
• Don't animate opacity or scale on hover without also transitioning color; incomplete state changes feel unfinished.
• Don't use the secondary orange (#ff6b00) on primary CTAs; it's reserved for urgency, error states, and secondary actions only.