# BUGATTI — Design System
> Discover the home of BUGATTI. Experience the incomparable nature of the hyper luxury brand and all its offering.
- **Canonical:** https://uiuxskills.com/library/bugatti
- **Source:** https://www.bugatti.com/
- **Category:** Automotive
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-06-09T23:17:50.743Z

---

---
version: alpha
name: Bugatti
description: Official website for the hyper-luxury automotive brand Bugatti.
tone: Authoritative, sophisticated, and minimalist.
color-scheme: light
colors:
  primary: "#FFFFFF"
  surface: "#000000"
  surface-container: "#1A1A1A"
  on-surface: "#FFFFFF"
  outline: "#FFFFFF"
  surface-bright: "#333333"
  error: "#B3261E"
  success: "#1E8E3E"
  warning: "#F9A825"
  info: "#1976D2"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-md:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.75rem
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  xs: 6px
  sm: 12px
  md: 24px
  lg: 48px
  xl: 64px
  2xl: 96px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    typography: "{typography.label-md}"
    width: fit-content
  button-primary-hover:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.surface-bright}"
  badge:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-warning:
    backgroundColor: "{colors.warning}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-info:
    backgroundColor: "{colors.info}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
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

Bugatti's visual identity is defined by extreme minimalism, high-contrast monochrome palettes, and a focus on prestige. The brand uses a dark-mode-first aesthetic to emphasize the sculptural quality of its vehicles, creating an atmosphere of exclusivity and technical perfection.

## Colors

The color strategy relies on a stark, high-contrast monochrome palette to ensure the focus remains entirely on the imagery and the product.

*   Primary (#FFFFFF): The core color for all text, primary CTAs, and high-contrast UI elements.
*   Surface (#000000): The foundational background color for the entire site.
*   Surface-container (inferred) (#1A1A1A): Used for card backgrounds and section containers to provide subtle depth against the black surface.
*   On-surface (#FFFFFF): Standard text color for readability on black backgrounds.
*   Outline (#FFFFFF): Used for subtle borders, dividers, and structural lines.
*   Surface-bright (inferred) (#333333): Used for hover states and interactive elements to provide a muted, sophisticated transition.
*   Error (inferred) (#B3261E): Semantic color for critical alerts.
*   Success (inferred) (#1E8E3E): Semantic color for positive status indicators.
*   Warning (inferred) (#F9A825): Semantic color for cautionary information.
*   Info (inferred) (#1976D2): Semantic color for informational elements.

## Typography

The typography uses a clean, sans-serif approach to maintain an authoritative and legible voice across all touchpoints.

*   Display-lg (inferred): Reserved for high-impact hero headlines.
*   Display-md: The primary choice for section titles.
*   Headline-lg (inferred): Used for sub-headlines that require visual weight.
*   Headline-md (inferred): Used for card titles and secondary structural headings.
*   Body-sm: Used for metadata, captions, and fine print.
*   Label-md (inferred): The standard weight and size for button labels.
*   Label-sm: Used for small UI labels and status badges.

## Layout

The site utilizes a high-impact, full-bleed grid system designed for large-scale imagery, with {spacing.md} serving as the base gutter for grid layouts. The section order follows a deliberate narrative flow: hero, featured-content, brand-story, product-grid, sur-mesure, social-feed, and footer. The hero pattern features full-screen immersive imagery with minimal text overlay and a single primary CTA. Responsive behaviour is mobile-first, scaling images and typography proportionally to ensure the brand's premium aesthetic remains intact across all viewports.

## Elevation & Depth

Subtle single-layer shadows are used to create depth while maintaining a flat, minimalist appearance. Elevation is used sparingly to lift interactive elements from the dark background.

*   elevation.sm (inferred) — subtle hover lift for small UI elements.
*   elevation.md (inferred) — standard lift for cards and interactive containers.
*   elevation.lg — primary lift for cards that require focus or prominence.

## Shapes

The brand uses sharp, precise corners to reflect the engineering precision of the vehicles. All UI elements prioritize rectangular, architectural forms over organic shapes.

The {rounded.sm} token is the standard for all card components and input fields, ensuring a consistent, crisp look. Pill-shaped elements and large radii like {rounded.full} are strictly avoided to maintain the brand's sophisticated, industrial aesthetic.

## 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
Buttons use {colors.primary} for backgrounds and {colors.surface} for text to maximize impact. They are used for primary calls to action and should always maintain a {typography.label-md} style.

### Card
Cards utilize {colors.surface-container} to differentiate content from the background. They must use {rounded.sm} corners and can be elevated using {elevation.lg} when they are the primary focus of a section.

### Input Field
Input fields feature a {colors.surface} background with a {rounded.sm} border. On focus, the border should transition to {colors.primary} to indicate active state.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary CTAs. | Use low-contrast color combinations. |
| Apply {typography.display-md} for section headers. | Use {typography.body-md} for primary headlines. |
| Use {rounded.sm} for all card components. | Use soft, rounded corners like {rounded.full}. |
| Maintain high contrast with {colors.primary} on {colors.surface}. | Use bright, saturated colors outside of status indicators. |
| Use {spacing.md} as the base gutter for grid layouts. | Clutter the interface with excessive spacing. |
| Apply {elevation.lg} to cards that require focus. | Use drop shadows on flat text elements. |
| Use {colors.outline} for subtle dividers. | Use thick, heavy borders on UI components. |
| Use {colors.surface-bright} for hover states. | Use primary colors for hover states. |

## Content Style

CTA labels are imperative, concise, and action-oriented, focusing on the immediate next step for the user.

Headings are phrased to be sophisticated, legacy-focused, and aspirational, reflecting the brand's status as a leader in hyper-luxury automotive engineering.

Copy density is kept to a minimum, relying on high-impact imagery to tell the story and using whitespace to allow the content to breathe.

## Imagery & Icons

Imagery consists of high-end automotive photography with dramatic, professional lighting. This is paired with clean, vector-based iconography and sharp wordmarks. The treatment is mixed, balancing emotional, lifestyle-oriented photography with technical, minimalist graphical assets.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Bugatti, a hyper-luxury automotive brand with an authoritative, minimal, and high-contrast visual identity. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{typography.display-md}`, `{rounded.sm}` — never hardcode hex values, font sizes, or pixel radii.
2. Respect the `components:` block exactly. Do not invent variants (e.g. ghost buttons, pill buttons) the spec does not list.
3. Follow the Layout narrative: full-bleed hero, `{spacing.md}` base gutter, mobile-first scaling. The section order (hero → featured-content → brand-story → product-grid → sur-mesure → social-feed → footer) is fixed.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts — such as requesting rounded corners or saturated colors — surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook) exists, those values take precedence.

## Output contract

**Must:**
- Use token names for all colors, type styles, spacing, radii, and elevation.
- Render hover, focus, and disabled states for every interactive component the spec defines — including `button-primary-hover`, `input-field-focus`, and `link-hover`.
- Use `{rounded.sm}` on cards and inputs; apply `{elevation.lg}` to cards requiring focal prominence.
- Write CTA labels as imperative, concise actions per the Content Style section.
- Maintain `{colors.primary}` on `{colors.surface}` contrast across all text and CTA elements.

**Must NOT:**
- Invent colors, radii, or font tokens absent from the spec.
- Apply `{rounded.full}` or any large radius; the brand enforces sharp, architectural corners.
- Use bright or saturated colors outside `{colors.error}`, `{colors.success}`, `{colors.warning}`, and `{colors.info}` semantic roles.
- Add emoji, decorative elements, or marketing filler copy.
- Rewrite headings, button labels, or navigation items — these belong to the product team.
- Alter the defined page section order or navigation structure.

## When in doubt
- If the spec does not define a value, ask the user before introducing one.
- Prefer composing existing components over creating new tokens.
- For ambiguous backgrounds, default to `{colors.surface-container}`; for text on dark surfaces, use `{colors.on-surface}`.
- For unspecified breakpoints, follow mobile-first with one breakpoint at 768px.
- Use `{colors.surface-bright}` exclusively for hover transitions — never `{colors.primary}` on hover per the Do's and Don'ts.