# Lando Norris — Design System
> Official hub for British racing star Lando Norris: breaking news, 2025 race wins, exclusive merch, videos and behind-the-scenes access.
- **Canonical:** https://uiuxskills.com/library/lando-norris
- **Source:** https://landonorris.com/
- **Category:** Automotive
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-12T19:05:36.460Z

---

---
version: alpha
name: Lando Norris Official
description: >-
  The official digital hub for McLaren F1 driver Lando Norris, featuring race stats, helmet designs,
  and exclusive content.
tone: Bold, authentic, fast-paced, and fan-centric.
color-scheme: light
colors:
  primary: "#D2FF00"
  surface: "#3B3C38"
  secondary: "#B2C73A"
  on-surface: "#FFFFFF"
  on-primary: "#000000"
  surface-dim: "#2A2B28"
  surface-bright: "#4D4E4A"
  error: "#FF4D4D"
  outline: "#5A5B57"
  focus-ring: "#D2FF00"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 48px
  display-md:
    fontFamily: sans-serif
    fontSize: 36px
  headline-lg:
    fontFamily: sans-serif
    fontSize: 30px
  headline-md:
    fontFamily: sans-serif
    fontSize: 24px
  headline-sm:
    fontFamily: sans-serif
    fontSize: 20px
  body-md:
    fontFamily: sans-serif
    fontSize: 16px
  label-sm:
    fontFamily: sans-serif
    fontSize: 12px
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.secondary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface-dim}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
  input-field:
    backgroundColor: "{colors.surface-dim}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.secondary}"
  badge:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.2)
  md: 0 4px 6px rgba(0,0,0,0.3)
  lg: 0 10px 15px rgba(0,0,0,0.4)
---

## Overview

The brand identity is high-energy, performance-driven, and distinctly modern. It leverages a bold, high-contrast palette of neon lime and deep charcoal to mirror the intensity of Formula 1, creating an immersive, fast-paced digital experience for fans.

## Colors

The color strategy centers on high-contrast pairings, using a signature neon lime to command attention against a dark, industrial charcoal base.

*   Primary (#D2FF00): Signature neon lime used for key CTAs and highlights.
*   Surface (#3B3C38): Deep charcoal base for the site background.
*   Secondary (#B2C73A): Muted lime variant for secondary accents.
*   On-Surface (inferred) (#FFFFFF): Primary text color for high contrast against charcoal.
*   On-Primary (inferred) (#000000): Text color for elements using the primary lime background.
*   Surface-Dim (inferred) (#2A2B28): Darker surface variant for cards and containers.
*   Surface-Bright (inferred) (#4D4E4A): Lighter surface variant for hover states.
*   Error (inferred) (#FF4D4D): Standard error color for validation.
*   Outline (inferred) (#5A5B57): Border color for UI elements.
*   Focus-Ring (inferred) (#D2FF00): Focus ring color matching the primary brand color.

## Typography

Typography is clean, sans-serif, and functional, prioritizing legibility and impact through varied scale and weight.

*   Display-lg (inferred): Used for hero headlines.
*   Display-md (inferred): Used for section headers.
*   Headline-lg (inferred): Used for sub-headers.
*   Headline-md (inferred): Used for card titles.
*   Headline-sm (inferred): Used for secondary labels.
*   Body-md (inferred): Standard body text.
*   Label-sm (inferred): Used for small UI labels and metadata.

## Layout

The layout is highly experimental, utilizing a vertical-first scroll experience that challenges standard web conventions. It features a grid-based approach for the helmet gallery and a full-bleed imagery strategy for editorial content. The site follows a specific section order: nav, hero, editorial-content, gallery, and footer. Responsive design is mobile-first, with explicit handling for device rotation.

## Elevation & Depth

Depth is used sparingly, primarily to distinguish interactive cards from the background. The shadows are inferred to be slightly heavier than standard to match the high-contrast, aggressive aesthetic.

*   elevation.sm — card lift.
*   elevation.md — dropdown/popover.
*   elevation.lg — modal/drawer overlay.

## Shapes

The design uses a mix of sharp, aggressive corners for UI elements and full-pill shapes for buttons, reflecting a balance between technical precision and athletic fluidity. The `rounded` scale ranges from `sm` (2px) for subtle UI corners to `full` (9999px) for primary action buttons.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Primary buttons use `{colors.primary}` with `{rounded.full}` to ensure high visibility and a fluid aesthetic. Secondary buttons utilize a transparent background with a `{colors.primary}` border to maintain a minimalist, technical feel.

### Card
Cards use `{colors.surface-dim}` as a base to establish depth against the main background, framed by a subtle `{colors.outline}` border. Elevated cards use `{colors.surface}` to signify interactivity or focus.

### Input Field
Input fields follow the dark UI theme, using `{colors.surface-dim}` with an `{colors.outline}` border that shifts to `{colors.focus-ring}` upon interaction to provide clear user feedback.

### Badge
Badges use `{colors.surface-bright}` to stand out from the background, providing a neutral container for metadata or status labels.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Never use `{colors.primary}` for body text. |
| Apply `{typography.display-lg}` for hero headlines. | Avoid using `{typography.body-md}` for headers. |
| Use `{colors.surface-dim}` for card backgrounds. | Do not use soft, rounded corners on navigation. |
| Ensure all interactive elements have a `{colors.focus-ring}` state. | Never mix `{colors.error}` with `{colors.primary}`. |
| Use `{spacing.md}` for consistent component padding. | Avoid excessive use of `{elevation.lg}`. |
| Apply `{rounded.full}` to all primary action buttons. | Do not use thin, light-weight fonts for headings. |
| Use `{colors.outline}` for subtle UI borders. | Avoid using low-contrast text on `{colors.surface}`. |
| Use `{typography.label-sm}` for button labels. | Never use `{colors.secondary}` for primary CTAs. |

## Content Style

CTA style is imperative, action-oriented, and short. Labels should be direct, using verb-first phrasing to drive user engagement.

Heading tone is punchy, benefit-driven, and legacy-focused. Headlines should be concise, aiming to capture the high-energy, fast-paced nature of the brand.

Copy density is minimalist, scannable, and highly visual. Prioritize short paragraphs and bulleted lists to maintain the rhythm of the vertical-first scroll experience.

## Imagery & Icons

The imagery style is mixed, combining high-quality photography of racing events with clean, vector-based helmet illustrations and signature graphics. Iconography should be minimal and sharp, adhering to the brand's technical and performance-driven aesthetic. Logo lockups must remain consistent, ensuring the signature lime color is used for key brand identifiers.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Lando Norris Official, a bold, minimal, high-energy F1 fan hub. Match its aggressive, performance-driven tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.display-lg}`, `{spacing.md}` — never hardcode hex values, px sizes, or font strings.
2. Use only component variants defined in the spec (`button-primary`, `button-secondary`, `card`, `card-elevated`, `badge`, `badge-error`). Do not invent new variants.
3. Apply `{rounded.full}` to all primary action buttons; use `{rounded.sm}` or `{rounded.md}` for inputs, cards, and navigation — never soft corners on nav per the Do's and Don'ts.
4. Follow the section order from Layout: nav → hero → editorial-content → gallery → footer. Do not reorder or add sections.
5. Treat the Do's and Don'ts table as authoritative. Surface any conflict with a user request before proceeding.

## Output contract

**Must:**
- Use named tokens for every color, size, radius, spacing, and shadow value.
- Cover hover, focus, and disabled states for all interactive components when the spec defines them (e.g., `button-primary-hover`, `input-field-focus`, `{colors.focus-ring}` on all interactive elements).
- Apply `{spacing.md}` as the default component padding; use the full `{spacing.xs}`–`{spacing.2xl}` scale for all gaps.
- Use `{typography.label-sm}` for button labels; `{typography.display-lg}` for hero headlines only.
- Match CTA copy style: short, verb-first, imperative.

**Must NOT:**
- Invent colors, fonts, radii, or shadows outside the spec.
- Use generic utility defaults (e.g., `gray-500`, `rounded-md`) when a brand token exists.
- Mix `{colors.error}` with `{colors.primary}` in the same component.
- Use `{colors.primary}` for body text or `{colors.secondary}` for primary CTAs.
- Add emoji, filler copy, or marketing language.
- Rewrite page copy, button labels, headings, or navigation items.

## When in doubt
- If a value isn't in the spec, ask before inventing one.
- For backgrounds, default to `{colors.surface-dim}` for containers and `{colors.surface}` for elevated cards.
- For text on dark surfaces, default to `{colors.on-surface}`; for text on lime, use `{colors.on-primary}`.
- Tokens marked "(inferred)" are visual approximations; defer to any authoritative source file if available.
- Default to mobile-first layout; one explicit breakpoint at 768px unless Layout notes specify otherwise.