---
version: alpha
name: Rimac
description: Hypercar-dark design system — near-black canvas, TTSupermolotNeue uppercase display, Roboto body, white ghost CTAs, zero border radius, cinematic full-viewport photography.

colors:
  # Canvas
  background: "#0a0a0a"   # /* estimated — dominant near-black from full-viewport dark hero */
  surface: "#111111"       # /* estimated — slightly lighter panel surface */
  surface-mid: "#1a1a1a"   # /* estimated — card/section surface */

  # Text / ink
  ink: "#ffffff"
  ink-muted: "#b0b0b0"    # /* estimated — secondary body text on dark */
  ink-dim: "#6e6e6e"       # /* estimated — caption/tertiary on dark */

  # Brand accent — there is no chromatic accent; white is the sole UI color
  primary: "#ffffff"
  on-primary: "#0a0a0a"

  # Interactive states
  text-hover: "#ffffff"    # /* links stay white on hover; opacity or underline signals the state */
  focus-ring: "#ffffff"    # /* estimated */
  border: "#2a2a2a"        # /* estimated — hairline separator between dark sections */
  border-ghost: "#ffffff"  # /* ghost button border — extracted from dembrandt borders: rgba(255,255,255,0.5) → opaque approx */

  # Shadow tints
  shadow-soft: "#000000"   # was rgba(0,0,0,0.19) + rgba(0,0,0,0.23) — flattened to pure black

typography:
  display-hero:
    fontFamily: "TT Supermolot Neue, Barlow Condensed, Arial Narrow, sans-serif"
    fontSize: 54px
    fontWeight: 400
    lineHeight: 1.19
    letterSpacing: 9.72px
  display:
    fontFamily: "TT Supermolot Neue, Barlow Condensed, Arial Narrow, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 6px
  heading-section:
    fontFamily: "TT Supermolot Neue, Barlow Condensed, Arial Narrow, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 4px
  heading-sub:
    fontFamily: "TT Supermolot Neue, Barlow Condensed, Arial Narrow, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: 1.6px
  nav-link:
    fontFamily: "TT Supermolot Neue, Barlow Condensed, Arial Narrow, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 1.6px
  body-large:
    fontFamily: "Roboto, Google Sans, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  body:
    fontFamily: "Roboto, Google Sans, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.29
    letterSpacing: 0px
  body-small:
    fontFamily: "Roboto, Google Sans, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.4px
  button-ui:
    fontFamily: "TT Supermolot Neue, Barlow Condensed, Arial Narrow, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 1.6px
  caption:
    fontFamily: "Roboto, Google Sans, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.83
    letterSpacing: 0px

spacing:
  xs: 5px
  sm: 10px
  md: 20px
  lg: 40px
  xl: 60px
  2xl: 80px
  3xl: 120px

rounded:
  none: 0px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 15px 40px
  button-primary-hover:
    backgroundColor: "{colors.ink-muted}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 15px 40px

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 39px
    borderColor: "{colors.border-ghost}"
  button-ghost-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 39px

  button-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 0px
  button-text-hover:
    textColor: "{colors.ink-muted}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 0px

  card:
    backgroundColor: "{colors.surface-mid}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 40px

  card-hover:
    backgroundColor: "{colors.surface-mid}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 40px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 15px 20px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 15px 20px
    borderColor: "{colors.border-ghost}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 20px 40px

  badge:
    backgroundColor: "{colors.surface-mid}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 5px 10px
---

# Rimac Design System

## Overview

Rimac Automobili's website is the internet rendered as a dark room — a near-black canvas where everything waits in shadow until a hypercar tears through it at 258 mph. The page opens on a full-viewport shot of the Nevera R accelerating across a desert highway under a storm-grey sky; the entire viewport is occupied before a single word of navigation registers. This is a design system built on restraint and consequence: `{colors.background}` is a near-black almost indistinguishable from the car's carbon-fiber panels, and every interface element floats in that void as a precision instrument rather than a decorative surface. Nothing is rounded. Nothing glows. Nothing color-codes itself.

The typographic identity splits into two registers: TT Supermolot Neue handles everything that needs to be felt — display headlines, navigation, CTAs — all uppercase, all widely tracked. At 54px with `{typography.display-hero}` letterSpacing of nearly 10px, "NEVERA AND NEVERA R" reads less like a headline and more like an engineering specification etched into metal. Roboto carries the descriptive weight — body copy, specs, captions — in its plainest register, weight 400 at 15–17px, doing nothing to call attention to itself. The pairing is deliberate: condensed geometric uppercase for impact, neutral humanist for clarity. No font weight variation is used for hierarchy; size and uppercase transformation do all the work.

The brand accent color is white. There is no blue, no electric orange, no EV-green. White is both the text color, the ghost-button border, the CTA fill, and the logo fill — it is the sole chromatic decision in a system that otherwise collapses all color into darkness. Ghost outline buttons with `{colors.border-ghost}` borders are the standard interactive element. On hover, that ghost fills white and the text inverts — a punchy moment reserved for clear commitment. The shadow system is borrowed directly from cinematic lighting: where shadows exist (rare, low-confidence, applied only to a single cookie consent panel), they are deep and dual-layered, echoing the studio lighting on the cars themselves.

**Key Characteristics:**
- Full-viewport hero sections (100vh) with cinematic dark car photography — no overlays, no scrims
- Near-black `{colors.background}` canvas — no warmth, no off-black tints, no gradients on UI chrome
- TT Supermolot Neue uppercase with extreme letter-spacing (`{typography.display-hero}`) as the sole display voice
- Roboto for all body, spec, and caption text — neutral, precise, typographically invisible
- Zero border radius across every element — sharp rectangular geometry mirrors the Nevera's body lines
- White (`{colors.primary}`) as the only chromatic UI color — used for text, borders, fills, logo
- Ghost outline button as the default CTA pattern; fills white on hover
- Spacing base-unit of 5px (not 8px) — a precise engineering scale
- 0.25s cubic-bezier transitions are the universal timing
- SVG icons + Font Awesome for UI chrome; no gradient icon fills

## Colors

### Primary
- **Void Black** (`{colors.background}`): The dominant canvas. Near-black, not pure black — the distinction is important: pure black would feel graphic; this shade feels like nightfall on a track.
- **Pure White** (`{colors.primary}`): The sole chromatic UI color. Used for text, outline borders, ghost-button fills on hover, and the Rimac wordmark. Unmodulated.

### Surfaces
- **Panel Dark** (`{colors.surface}`): Slightly lifted from the background — used for nav panels, form inputs, and dark overlays.
- **Card Dark** (`{colors.surface-mid}`): Card and section surface — the second step up the dark scale.

### Text Hierarchy
- **White** (`{colors.ink}`): All primary headlines, navigation, body copy, and CTA labels. White on dark, always.
- **Silver Mist** (`{colors.ink-muted}`): Secondary body text, spec metadata, supporting descriptions.
- **Steel** (`{colors.ink-dim}`): Captions, footnotes, disabled labels.

### Borders & States
- **Dark Rule** (`{colors.border}`): Hairline separators between dark sections — barely visible, structural.
- **Ghost Border** (`{colors.border-ghost}`): The visible edge of ghost-style CTAs and inputs on focus. Extracted from the site's `rgba(255,255,255,0.5)` border — mapped to opaque `{colors.border-ghost}` for token hygiene.

The palette deliberately avoids any chromatic brand accent. Where Tesla uses electric blue and Polestar acknowledges its non-color, Rimac doesn't bother explaining — the cars are the color, the darkness is the design.

## Typography

### Font Family
- **Display / UI**: `TT Supermolot Neue` (self-hosted variable TTF), fallbacks: `Barlow Condensed, Arial Narrow, sans-serif` — a condensed geometric grotesque used exclusively in uppercase with extreme positive tracking.
- **Body / Spec**: `Roboto` (self-hosted woff2), fallbacks: `Google Sans, Arial, sans-serif` — used at weights 400 and 500 only; never bold.
- No variable-axis usage detected. No OpenType features beyond standard.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Full-viewport hero headlines — "NEVERA AND NEVERA R" at 54px, 9.72px tracking, uppercase |
| `display` | Section openers, model designation blocks |
| `heading-section` | Feature section heads, specification group titles |
| `heading-sub` | Eyebrow labels, category markers, uppercase callouts at 13px/600 |
| `nav-link` | Navigation items, footer columns, uppercase UI labels |
| `body-large` | Intro taglines, pull quotes — Roboto 20px |
| `body` | Standard descriptive copy — Roboto 17px/1.29 |
| `body-small` | Technical specification text, feature descriptions — Roboto 15px |
| `button-ui` | CTA and button labels — TTSupermolot 13px uppercase, 1.6px tracking |
| `caption` | Legal, footnotes, image credits — Roboto 12px |

### Principles
- **Uppercase is structural, not decorative**: Every token in TT Supermolot Neue uses `text-transform: uppercase` — the font's letterforms are always displayed as capitals. This is non-negotiable.
- **Tracking is the hierarchy signal**: Display type tracks at ~9.72px; nav and CTAs track at 1.6px; body copy (Roboto) tracks at 0–0.4px. The delta from 9.72px to 0px is the entire typographic hierarchy.
- **No weight contrast**: Roboto uses only 400 and 500 (medium for specs). TT Supermolot uses 400 and 600 (for eyebrow labels). No bold. Size and case do the work.
- **Two-font system, hard split**: TT Supermolot Neue never appears below 13px; Roboto never appears in uppercase UI roles. The boundary is clean.
- **Line-height locks at display sizes**: Hero runs at 1.19 — dense, architectural. Body opens to 1.29–1.47 for reading comfort.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 5px (confirmed from dembrandt spacing data — `5px`, `10px`, `20px`, `40px` are the dominant values).

Rimac's spacing reads as precision-engineered rather than generous. Where Polestar breathes with 96–160px section gaps, Rimac compresses — sections butt against each other tightly. The dark background absorbs the compression; you don't feel claustrophobic because the canvas is infinite.

### Grid & Container
- Max content width: approximately 1440px (breakpoint detected at 1440px)
- Hero: full-bleed, 100vh, edge-to-edge — no container constraint
- Content panels: left-aligned spec lists with small offset overlays typical of automotive editorial
- Breakpoints: 319px, 480px, 768px, 1024px, 1140px, 1440px, 1920px, 2560px — wide coverage including ultra-wide

### Whitespace Philosophy
- Negative space is atmospheric, not generous: the dark canvas makes small gaps feel vast
- Content often overlaps photography — text sits over the vehicle without a scrim
- Dense spec blocks compress into tight grids; full-viewport photography provides the visual reset between them

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Default for all panels, cards, navigation |
| Hairline (Level 1) | `1px solid {colors.border}` | Horizontal section separators, rule lines |
| Ghost Edge (Level 2) | `1px solid {colors.border-ghost}` | Ghost buttons, focused inputs |
| Card Shadow (Level 3) | `rgba(0,0,0,0.19) 0 10px 20px, rgba(0,0,0,0.23) 0 6px 6px` | Rare: cookie banner, floating overlays |
| Photography Depth | Full-viewport cinematic imaging | The dominant depth signal — replaces all box-shadow use on hero |

**Shadow Philosophy**: Rimac's depth system operates through two mechanisms exclusively — hairline borders and photography. The dual-layer box-shadow recorded by dembrandt appears only on a cookie consent panel (a third-party component, not the brand's own system). The brand's actual layering is achieved through tonal surfaces (`{colors.background}` → `{colors.surface}` → `{colors.surface-mid}`) stepped in near-invisible increments, and by the sheer dimensional depth of the car photography itself. Shadows on UI chrome would be redundant when the hero image already contains 180mph of visual momentum.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything — buttons, cards, inputs, nav, badges, images |

Rimac is the most rectilinear system in the Auto category. No element carries any border radius. Corners are square because the Nevera's carbon bodywork meets at hard angles, and the digital interface mirrors that manufacturing precision. Ghost buttons have sharp corners that underline their technical seriousness. Even badges and pill-shaped tags are absent — category labels appear as plain uppercase text.

## Components

The full component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-ghost}`, `{components.card}`).

### Button Variants

- **`button-primary`** — White fill, black text, zero radius. The assertive CTA: "ORDER" or "CONFIGURE". Rare — used only where decisive commitment is appropriate.
- **`button-ghost`** — Transparent fill, white outline border (`{colors.border-ghost}`), white uppercase text. The dominant pattern. Fills white on hover. Used for "DISCOVER", "LEARN MORE", "EXPLORE".
- **`button-text`** — No border, no fill, white uppercase text with subtle tracking. Used for tertiary navigation actions.

### Cards
- **`card`** — `{colors.surface-mid}` background, zero radius, generous internal padding. No shadow. Full-bleed image often serves as the card's primary content.

### Inputs
- **`input`** — Dark surface, no radius, hairline border at rest. Focus border upgrades to full `{colors.border-ghost}` white. Roboto body type.

### Badges / Tags
No badge component. Category and status signals are conveyed through uppercase `{typography.heading-sub}` text labels directly — no container, no fill, no pill.

### Navigation
- **`nav-bar`** — Transparent over hero, darkens to `{colors.background}` on scroll. Rimac shield icon left, hamburger/menu icon right (minimal). Navigation links in TTSupermolot 13px uppercase. No mega-menu visible at extraction; likely off-canvas.

## Do's and Don'ts

### Do
- Use `{colors.background}` as an absolute — near-black, not pure black, not charcoal with warmth
- Apply `text-transform: uppercase` to every instance of TT Supermolot Neue — the font requires it
- Use `{typography.display-hero}` letterSpacing (9.72px) for all hero-scale headlines — the wide tracking IS the brand voice
- Keep ghost outline buttons (`{components.button-ghost}`) as the default CTA pattern — fills are reserved for primary commitment
- Maintain `{rounded.none}` on every element — zero border radius is non-negotiable
- Let car photography supply all visual richness — the interface defers completely to the vehicle imagery
- Use `{colors.ink}` (white) as the only text color — no tinted headings, no colored sub-heads
- Keep Roboto strictly in body and spec roles — never uppercase, never as a display font

### Don't
- Don't introduce any chromatic accent color — not blue, not orange, not EV-green
- Don't add border radius to any element — not even 1px or 2px
- Don't use shadows on brand UI chrome — the dual-layer shadow belongs only to third-party overlays
- Don't use TT Supermolot Neue in mixed case — it is uppercase only, always
- Don't apply gradient fills, atmospheric washes, or tinted overlays on photography
- Don't use font weight bold (700+) — 400 and 500 are the maximum
- Don't introduce warm or tinted dark backgrounds — the canvas stays spectrally neutral near-black
- Don't add soft or pill-shaped elements — the system is entirely rectilinear
- Don't center body paragraphs — Rimac's prose is left-aligned, matching engineering documentation

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile XS | <350px | Single-column, hero type drops to ~24px, CTA full-width |
| Mobile | 350–480px | Single-column, hero 28–32px, hamburger nav |
| Mobile Lg | 480–768px | Single-column, 36px hero, full-width ghost CTAs |
| Tablet | 768–1024px | 2-column spec grids, hero 40px, nav expands partially |
| Desktop | 1024–1440px | Full nav, hero 54px, spec grids 3–4 col, 1140px container |
| Large Desktop | 1440–1920px | Max type scale, full-bleed imagery, 1440px container |
| Ultra Wide | >1920px | 2560px breakpoint detected — layout likely locks at 1920px max |

### Touch Targets
- Ghost CTA buttons: minimum 48px height, full-width on mobile
- Nav hamburger: minimum 44px square tap target
- Specification links: 17px body text with 1.29 line-height; spacing supplies the tap area

### Collapsing Strategy
- Navigation: collapses to hamburger at ≤1024px; likely opens a full-screen dark overlay menu
- Hero: full-viewport height maintained at all breakpoints; type scales down proportionally
- Spec grids: 3–4 column collapses to 2-column (tablet) to single-column (mobile)
- Photography: full-bleed treatment preserved at every breakpoint; aspect ratios shift to portrait on narrow viewports
- Ghost CTAs: stack vertically on mobile, side-by-side on desktop

### Image Behavior
- Hero photography: 100vh, edge-to-edge, no padding at any breakpoint
- Car renders: dark background composites — no studio-sweep treatment; environmental photography is preferred
- `object-fit: cover` maintains cinematic crop quality across all viewport sizes

---

## Agent Prompt Guide

### Quick Color Reference
- Background canvas: `{colors.background}`
- Primary text / ink: `{colors.ink}`
- Secondary text: `{colors.ink-muted}`
- Ghost button border: `{colors.border-ghost}`
- Primary CTA fill: `{colors.primary}`
- Card surface: `{colors.surface-mid}`
- Section separator: `{colors.border}`

### Example Component Prompts

- "Create a full-viewport dark hero section with background `{colors.background}`. Overlay a centered headline 'NEVERA R' in TT Supermolot Neue 54px weight 400, uppercase, letterSpacing 9.72px, color `{colors.ink}`. Below it, a Roboto 17px body paragraph in `{colors.ink-muted}`, max-width 480px. Under the text, a ghost CTA button: transparent fill, `1px solid {colors.border-ghost}`, TT Supermolot 13px uppercase 1.6px tracking, color `{colors.ink}`, padding 15px 40px, zero border-radius. On hover: fill transitions to `{colors.primary}`, text to `{colors.on-primary}` in 0.25s cubic-bezier(0.25,0.46,0.45,0.94)."
- "Design a specification card on `{colors.surface-mid}` with zero border-radius, no shadow. Left column: section label in TTSupermolot 13px uppercase 1.6px tracking `{colors.ink-muted}`. Below it: spec number at 40px TTSupermolot 400 `{colors.ink}` (e.g. '1914'). Beneath the number: a unit label 'hp' in Roboto 15px 400 `{colors.ink-muted}`. Padding 40px."
- "Build a navigation bar on `{colors.background}`, height 80px, horizontal padding 40px. Left: Rimac shield logo SVG in `{colors.ink}`. Right: hamburger icon in `{colors.ink}`. Nav links in TTSupermolot 13px uppercase 1.6px tracking `{colors.ink}`. No border, no shadow at rest. On scroll: add `1px solid {colors.border}` bottom edge."
- "Create an uppercase eyebrow label + headline pairing. Eyebrow: TTSupermolot 13px weight 600 uppercase 1.6px tracking `{colors.ink-muted}` — e.g. 'TECHNOLOGY'. Below: headline at 40px TTSupermolot 400 uppercase 6px tracking `{colors.ink}`. Gap between: 20px. No gradient, no accent color."
- "Design a ghost CTA row: two side-by-side ghost buttons, each `1px solid {colors.border-ghost}`, TTSupermolot 13px uppercase 1.6px tracking, padding 15px 40px, zero radius. Left button labeled 'DISCOVER', right button labeled 'CONFIGURE'. On hover: fill swaps to `{colors.primary}`, text to `{colors.on-primary}`, transition 0.25s cubic-bezier(0.25,0.46,0.45,0.94). Background: `{colors.background}`."

### Iteration Guide

1. Start with `{colors.background}` — near-black, not pure black. Every element floats in this void.
2. Apply TT Supermolot Neue uppercase with wide tracking immediately on any display text — the letterSpacing is the brand signal; without it, the type reads wrong.
3. Default to ghost outline buttons (`{components.button-ghost}`) unless the action is primary/decisive — then use solid white fill (`{components.button-primary}`).
4. Zero border radius is absolute — if your framework default adds radius, explicitly reset with `border-radius: 0`.
5. Text hierarchy comes from size and tracking only — never from color variation, never from bold weight.
6. Let photography fill the page before adding UI chrome — if the page doesn't start with a full-viewport dark vehicle image, the system isn't working.
7. Ghost border (`{colors.border-ghost}`) is the only visible separation tool besides photography — use hairline `{colors.border}` for structural dividers, white border for interactive chrome.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Rimac. Brand names and trademarks belong to their respective owners.