---
version: "1.0.0"
name: Geely Auto Australia
description: Design tokens and component architecture extracted from geely.com.au. Minimalist, premium automotive design characterized by true deep black canvas (#050505), signature warm travertine sand CTA buttons (#E5DDD5), extended geometric display typography, and left-hairline telemetry spec docks.
colors:
  primary: "#E5DDD5" # Warm Travertine Sand
  primary-hover: "#D8CFC6"
  primary-fg: "#000000"
  bg-canvas: "#050505"
  surface-card: "#101216"
  surface-light: "#F5F3F1"
  text-primary: "#FFFFFF"
  text-secondary: "#C8CCD2" # 8.2:1 contrast against #050505
  text-muted: "#8A909A"     # 4.6:1 contrast against #050505
  border-subtle: "rgba(255, 255, 255, 0.22)"
  border-solid: "#FFFFFF"
typography:
  font-primary:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
    fontSize: "16px"
    lineHeight: "1.5"
  font-display:
    fontFamily: "Sora, 'Plus Jakarta Sans', -apple-system, sans-serif"
    fontWeight: "700"
    letterSpacing: "-0.01em"
  font-mono:
    fontFamily: "JetBrains Mono, 'Space Mono', monospace"
    fontSize: "14px"
rounded:
  button: "6px"
  card: "8px"
  pill: "9999px"
---

# Geely Auto Australia Design System

## 1. Core Visual Principles
- **True Black Canvas:** Deep black background (`#050505`) that eliminates dashboard noise and provides a dramatic showcase stage for vehicle imagery.
- **Warm Travertine Sand Accents:** Unlike aggressive saturated colors, Geely uses warm organic travertine (`#E5DDD5`) for primary conversion CTAs, delivering an upscale European aesthetic.
- **Left-Hairline Telemetry Docks:** Performance figures are structured with clean 1px left borders (`rgba(255, 255, 255, 0.22)`) rather than enclosed box cards.

## 2. Component Catalog

### Primary Conversion CTA Button
```html
<a href="/build" class="geely-btn-primary">Build Your Geely →</a>
```
- Background: `#E5DDD5`
- Text Color: `#000000` (Font weight 600, 15px)
- Border Radius: `6px`
- Padding: `12px 26px`
- Hover: Background `#D8CFC6`, `transform: translateY(-2px)`

### Secondary Ghost Button
```html
<a href="/explore" class="geely-btn-ghost">Explore Vehicle</a>
```
- Background: `transparent`
- Text Color: `#FFFFFF`
- Border: `1px solid rgba(255, 255, 255, 0.6)`
- Border Radius: `6px`
- Padding: `12px 26px`

### Left-Hairline Telemetry Spec Dock
```html
<div class="geely-spec-dock">
  <div class="geely-spec-item">
    <span class="geely-spec-kicker">From</span>
    <div class="geely-spec-val">1.6 L/100 km</div>
    <span class="geely-spec-desc">Combined WLTP Consumption</span>
  </div>
</div>
```
- Left border: `1px solid rgba(255, 255, 255, 0.22)`
- Value: Display font bold, `28px`, white
- Microcopy: 12px muted text