Depanneur

# Depanneur — Style Reference
> Warm neighborhood corner store

**Theme:** light

Depanneur's design system evokes a warm, no-nonsense retail experience with a focused use of red as a brand signature. The UI opts for a direct, high-contrast monochrome base with a single, clear brand accent. Typography is functional and understated, favoring ample spacing and clear boundaries rather than decorative elements or complex layouts. Surfaces are predominantly white, providing a bright, inviting backdrop for sparse content.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Absolute Zero | `#000000` | `--color-absolute-zero` | Primary text, navigation links, outline borders, icon strokes — creates high contrast against light backgrounds |
| Alabaster | `#ffffff` | `--color-alabaster` | Page backgrounds, prominent surface accents, secondary navigation text |
| Dusty Gray | `#e5e5e5` | `--color-dusty-gray` | Subtle section dividers, inactive element borders, muted backgrounds |
| Brand Ruby | `#c62127` | `--color-brand-ruby` | Brand accents, footer copyright text, decorative elements within content — a singular vibrant red that punctuates the otherwise neutral palette |

## Tokens — Typography

### Helvetica Neue LT W05 55 Roman — All text roles: navigation, body text, footer links. Its consistent weight and generous line-height ensure clarity across functional elements. · `--font-helvetica-neue-lt-w05-55-roman`
- **Substitute:** Helvetica Neue
- **Weights:** 400
- **Sizes:** 14px, 16px
- **Line height:** 1.50
- **Letter spacing:** normal
- **Role:** All text roles: navigation, body text, footer links. Its consistent weight and generous line-height ensure clarity across functional elements.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| body-sm | 14px | 1.5 | — | `--text-body-sm` |
| body | 16px | 1.5 | — | `--text-body` |

## Tokens — Spacing & Shapes

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 10 | 10px | `--spacing-10` |
| 14 | 14px | `--spacing-14` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 66 | 66px | `--spacing-66` |
| 75 | 75px | `--spacing-75` |

### Border Radius

| Element | Value |
|---------|-------|
| default | 0px |

### Layout

- **Section gap:** 66px
- **Card padding:** 20px
- **Element gap:** 20px

## Components

### Navigation Link
**Role:** Primary navigation, footer links, and B2B contact. Understated interactive elements.

Text in Absolute Zero (#000000) at 14px or 16px, weight 400. No discernible border or background, relying on color contrast for visibility. Hover state is implied to be a subtle color change (e.g., #e3e3dc based on --black-hover hint), while active/current states are not explicitly styled in a unique way from the data.

### Divided Section
**Role:** Creates clear vertical separation between page sections.

A horizontal divider line in Dusty Gray (#e5e5e5) with a default thickness of 1px, providing subtle visual breaks across the neutral canvas.

## Do's and Don'ts

### Do
- Use Absolute Zero (#000000) for all primary text elements to maintain high contrast and readability.
- Apply Alabaster (#ffffff) as the default background for all page content, upholding the bright brand theme.
- Employ Dusty Gray (#e5e5e5) for all subtle visual dividers and inactive UI element borders.
- Introduce Brand Ruby (#c62127) exclusively as a functional accent color, such as for copyright text or specific brand highlights.
- Maintain a comfortable vertical rhythm using 66px as the primary section gap between major content blocks.
- Keep all interactive elements, like navigation links, text-based and styled with Absolute Zero (#000000) as their default state.
- Utilize Helvetica Neue LT W05 55 Roman weight 400 for all typography, ensuring a consistent and clean textual presence.

### Don't
- Avoid using multiple chromatic colors; limit brand expression strictly to Brand Ruby (#c62127).
- Do not add shadows or complex gradients to UI elements; flatten surfaces to align with the direct aesthetic.
- Refrain from using heavily decorative fonts or extreme typographic manipulations; maintain the functional and clean typographic style.
- Do not deviate from the established spacing values of 20px for element gaps and 66px for section gaps, unless explicitly creating a tighter component.
- Avoid circular or heavily rounded elements; the dominant shape aesthetic is implied to be sharp/minimal-radius. (Radius is 0px by default).
- Do not use dark backgrounds for main content sections; the system is designed around a light theme.
- Introduce additional border colors or varied line styles beyond Dusty Gray (#e5e5e5) for dividers or borders.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#ffffff` | Primary page background. |
| 1 | Subtle Muted | `#e5e5e5` | Background for secondary content areas or subtle divisions, creating minimal visual separation. |

## Imagery

This site features product-focused photography and potentially video, demonstrated by the bottles and glasses. The imagery is realistic, well-lit, and appears product-centric with clear branding elements visible on the bottles. There are no apparent abstract graphics or complex illustrations. Iconography (e.g., in the header) is minimalist and monochromatic, likely outlined or filled in Absolute Zero (#000000) to blend with the text. Imagery serves to showcase products and is positioned decoratively within content areas.

## Layout

The layout appears to be full-bleed horizontally but with implicit content containment, suggesting a maximum width rather than stretching content edge-to-edge. The hero section uses full-bleed video or photography as a background with minimal UI elements overlaid. Sections are separated by consistent vertical spacing (66px), though explicit dividers are also used. Navigation is a minimalist top bar, with additional navigation links appearing in footer sections, characterized by stacked, left-aligned links, and minimal styling.

## Agent Prompt Guide

Quick Color Reference:
text: #000000
background: #ffffff
border: #e5e5e5
accent: #c62127
primary action: no distinct CTA color

Example Component Prompts:
1. Create a header navigation: background Alabaster (#ffffff). Links (Beverages, Merchandise, Get in touch, B2B) are Absolute Zero (#000000), Helvetica Neue LT W05 55 Roman, weight 400, size 14px. Depanneur logo (placeholder) centered. All navigation items have 20px padding left/right, and a 10px vertical padding.
2. Create a footer copyright text: Brand Ruby (#c62127), Helvetica Neue LT W05 55 Roman, weight 400, size 14px. This block should be centered on an Alabaster (#ffffff) background.
3. Create a conceptual 'secondary section divider': a full-width line 1px thick, in Dusty Gray (#e5e5e5), with a vertical spacing of 66px above and below.

## Similar Brands

- **Sweetgreen** — Similar use of a dominant white background with high-contrast black text and a single, vibrant accent color for branding.
- **Everlane** — Emphasizes minimalist, utilitarian typography with a strong focus on content clarity over decorative UI elements.
- **Patagonia (online store)** — Combines a clean, direct visual approach with functional navigation and a high-contrast legible type treatment.
- **Trader Joe's (informal brand aesthetic)** — Conveys a 'neighborhood store' vibe through an understated digital aesthetic, relying on product imagery and straightforward UI.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-absolute-zero: #000000;
  --color-alabaster: #ffffff;
  --color-dusty-gray: #e5e5e5;
  --color-brand-ruby: #c62127;

  /* Typography — Font Families */
  --font-helvetica-neue-lt-w05-55-roman: 'Helvetica Neue LT W05 55 Roman', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --text-body: 16px;
  --leading-body: 1.5;

  /* Typography — Weights */
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-10: 10px;
  --spacing-14: 14px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-66: 66px;
  --spacing-75: 75px;

  /* Layout */
  --section-gap: 66px;
  --card-padding: 20px;
  --element-gap: 20px;

  /* Named Radii */
  --radius-default: 0px;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-subtle-muted: #e5e5e5;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-absolute-zero: #000000;
  --color-alabaster: #ffffff;
  --color-dusty-gray: #e5e5e5;
  --color-brand-ruby: #c62127;

  /* Typography */
  --font-helvetica-neue-lt-w05-55-roman: 'Helvetica Neue LT W05 55 Roman', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --text-body: 16px;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-10: 10px;
  --spacing-14: 14px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-66: 66px;
  --spacing-75: 75px;
}
```