Bugatti

Difficulty:
Industry
Bugatti Effect Preview

Effect Preview

Design Tokens

Key tokens derived from official brand references and this style's prompt. Copy them or pair with the DESIGN.md below.

Colors

  • primaryBrand

    Primary actions & highlights

  • on-primaryDerived

    Text on primary

  • secondaryDerived

    Chips, badges & soft emphasis

  • on-secondaryDerived

    Text on secondary

  • neutralPrompt

    Page canvas

  • on-neutralDerived

    Text on canvas

  • surfaceDerived

    Cards, panels & elevated containers

  • on-surfaceDerived

    Text on surface

  • borderDerived

    Borders & dividers

Radius & Shapes

Prompt
sm · 12px
md · 24px
lg · 24px
full

Interactive controls use fully rounded pill shapes.

Spacing

Derived
  • sm8px
  • md12px
  • lg24px

Elevation

Derived

Depth is expressed through hairline borders and tonal layering.

Typography

Derived
  • Ag

    Headings 32px · bold

    Inter

  • Ag

    Body 16px · regular

    Inter

  • Ag

    Labels 13px · medium

    Inter

Bugatti is the French hypercar marque, and its pages are a darkened hall: a page-wide cinema black (#000000) canvas with no gradients, tints, or accents. The 288px ALL-CAPS Bugatti Display headline is the most extreme scale in the catalog, a three-font custom family splits sculptural display from monospace labels and text body, and the palette is only black, white, and a single #999999 gray, with transparent pill buttons ringed by 1px white.

AutomotiveMinimal

Prompt Template

Base Template
Design a Bugatti-inspired interface. - Cinema-black #000000 canvas for the entire page — no gradients, no tints, no accents; - 288px Bugatti Display ALL-CAPS headline — the most extreme display scale in the catalog; - Three-font custom family: Bugatti Display (sculptural), Bugatti Monospace (UI labels), Bugatti Text Regular (body); - Monochrome-only palette: black, white, and a single #999999 mid gray for tertiary/disabled; - Pill buttons at 9999px radius — transparent with a 1px white border, padding 12px 24px. Colors: #000000, #000, #ffffff, #999999. Typography: (.

Variant Prompts

📱 Mobile
Design a mobile app with Bugatti aesthetics. Use Bugatti color identity with #000000 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Bugatti style. Use Bugatti color identity with #000000 accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Bugatti design language. Use Bugatti color identity with #000000 accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Bugatti visual identity. Use Bugatti color identity with #000000 accents. Compelling, conversion-focused.

Usage Examples

Bugatti App

Web
Build a web app with Bugatti design language and brand color system.

Bugatti Dashboard

Dashboard
Create a dashboard using Bugatti style with data visualization and ( typography.

✅ Best For

  • Automotive
  • Hypercar immersive pages
  • Minimal black-and-white premium showcases

❌ Avoid For

  • Everyday productivity tools
  • Colorful consumer e-commerce

DESIGN.md File

A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.

Download