---
title: "Eddie design system"
variant: extended
source: https://eddie.eco/
captured_at: 2026-10-12
theme: light
industry: automotive
generator: Design DNA (https://four.wiralomi.com/style/eddie-eco)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Eddie · Design System

> Friendly electric mobility, framed with bold simplicity

**Theme:** light · **Industry:** automotive · **Source:** https://eddie.eco/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Eddie pairs oversized black typography and generous white space with soft pastel accents to make electric charging feel approachable. Rounded navigation, service cards, map imagery, and video-led sections guide visitors from the brand story to practical charging solutions.

## North star

Let oversized black type and open white space lead; use rounded pastel accents only to identify services and guide action.

## Overview

The page builds its identity from a restrained palette: white canvas and warm off-white surfaces carry most of the content, while black anchors headings, navigation, and pill-shaped calls to action. Lavender and acid lime act as recognizable service markers, with blue appearing in category cues and map media rather than as a dominant interface colour. Founders Grotesk gives the page a distinctive, compact sans-serif voice: very large, lightweight display text contrasts with bold headings and plain, readable body copy. Layout alternates centered brand statements with left-aligned, two-column feature compositions and broad media areas. Rounded corners soften the otherwise crisp typography, from small controls to large feature panels. Imagery mixes charging-related video, a map visualization, app-store badges, and real-world photography. Generous gaps separate sections, while subtle lavender-tinted shadows give selected pills and cards a gentle lift without making the page feel glossy or layered.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Charging Ink | `#000000` | `--color-charging-ink` | brand | Primary text, navigation, and the dark background of the main interest CTA. |
| Open Canvas | `#ffffff` | `--color-open-canvas` | surface | Main page canvas and contrast colour for black buttons and compact interface elements. |
| Warm Mist | `#f7f4f2` | `--color-warm-mist` | surface | Warm pale surface for navigation, cards, and the applications panel. |
| Soft Graphite | `#4d4c51` | `--color-soft-graphite` | neutral | Subtle dark button border and supporting dark interface detail. |
| Quiet Line | `#cdcbd0` | `--color-quiet-line` | neutral | Fine borders and hairlines separating otherwise open interface areas. |
| Stone Haze | `#e5e3df` | `--color-stone-haze` | surface | Muted section-band background that adds gentle tonal variation to the white canvas. |
| Eddie Lavender | `#d8d1ff` | `--color-eddie-lavender` | accent | Brand accent for the Eddie mark and selected service or feature surfaces. |
| Charge Lime | `#d2e534` | `--color-charge-lime` | accent | High-visibility accent for enterprise cues and selected promotional panels. |
| Footer Slate | `#767481` | `--color-footer-slate` | semantic | Muted footer text and secondary information, not a primary content colour. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Open Canvas) · `--color-surface` → `#f7f4f2` (Warm Mist) · `--color-surface-2` → `#e5e3df` (Stone Haze) · `--color-surface-3` → `#d8d1ff` (Eddie Lavender) · `--color-text` → `#000000` (Charging Ink) · `--color-border` → `#cdcbd0` (Quiet Line) · `--color-accent` → `#d8d1ff` (Eddie Lavender) · `--color-accent-2` → `#d2e534` (Charge Lime)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f7f4f2` | 19.18:1 | AAA |
| `#000000` | `#e5e3df` | 16.38:1 | AAA |
| `#000000` | `#d8d1ff` | 14.48:1 | AAA |
| `#d8d1ff` | `#ffffff` | 1.45:1 | fail |
| `#d8d1ff` | `#f7f4f2` | 1.32:1 | fail |
| `#d8d1ff` | `#e5e3df` | 1.13:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Founders Grotesk | `--font-body` | webfont | 400, 600, 700 | Display, headings, body copy, navigation, and links throughout the page. | Archivo |

- **Founders Grotesk:** Use a clean sans-serif voice with measured weights 400, 600, and 700; mix oversized light display text with bold headings. Case stays natural, with no conspicuous tracking.

### Type scale — Perfect Fifth (ratio ≈ 1.459, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 119px | 400 | 0.8 | 0 | — | Founders Grotesk | Oversized brand wordmark and primary hero statement. |
| h1 | 67.5px | 600 | 0.8 | 0 | — | Founders Grotesk | Main page or feature headline, including prominent hero messaging. |
| h2 | 66.5px | 700 | 0.8 | 0 | — | Founders Grotesk | Major section titles and bold, high-priority feature headings. |
| h3 | 30px | 400 | 1.1 | 0 | — | Founders Grotesk | Supporting feature headings and secondary editorial statements. |
| h4 | 26.5px | 700 | 1 | 0 | — | Founders Grotesk | Compact card titles and smaller bold content headings. |
| body | 18px | 400 | 1.1 | 0 | — | Founders Grotesk | Explanatory copy, solution descriptions, and service details. |
| caption | 16px | 400 | 0.8 | 0 | — | Founders Grotesk | Small labels, category cues, and supporting interface text. |
| nav | 18px | 600 | 1.1 | 0 | — | Founders Grotesk | Primary navigation links and emphasized current destinations. |
| link | 18px | 700 | 1.1 | 0 | — | Founders Grotesk | Strong inline or card links, including solution calls to action. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 5, 7, 10, 13, 15, 20, 30, 40, 60, 100 px.
- Section rhythm 60px · element gap 10px · card padding 10px · max content width 1360px.

Use a centered content area capped at the measured 1360px page width, with broad white margins and a comfortable, low-density rhythm. The navigation and hero center the brand; subsequent sections alternate between full-width media and two-column feature layouts. Large centered section headings create pauses between content groups. Use the measured 60px section gap as the rhythm reference and the 10px element gap for compact clusters. Keep card interiors relaxed, with measured 30px padding where appropriate.

## Shape & elevation

- Radius: button `15px` · card `40px` · media `15px` · nav `9999px` · link `25px` · xs `15px` · sm `20px` · md `25px` · lg `40px` · pill `9999px`
- Shadow `md` (link, card, button): `rgba(198, 185, 237, 0.3) 5px 5px 20px 0px`
- Shadow `sm` (other): `rgba(198, 185, 237, 0.4) 3px 3px 5px 0px`
- Shadow `sm-2` (button): `rgba(0, 0, 0, 0.3) 0px 1px 4px -1px`
- Motion: standard transition `0.25s ease` on interactive elements.

Most sections are flat, separated by whitespace and occasional pale surface changes rather than borders or heavy shadows. Use the measured lavender-tinted shadow sparingly on select links, cards, and contact controls. Rounded card corners create the main sense of layering; keep borders fine and neutral.

## Imagery

Use charging-related video as broad, immersive media, with softly rounded edges where the media sits inside a panel. Support the story with map imagery and small service illustrations, app-store badges, and a real-world charging photograph. Keep image colour natural and subdued; lavender, blue, and lime icon backgrounds should read as interface markers rather than filters over photography.

## Components

### Announcement bar

A slim white strip at the top with centered acquisition news, compact bold press-release link, and a fine neutral divider.

### Pill navigation

A spacious white header with the Eddie/home mark at left and compact menu and black interest controls at right; use rounded control silhouettes.

### Hero identity

Center a large black Eddie wordmark and assistant statement; place a lavender Eddie mark inline and a row of small service-category pills beneath.

### Service category cues

Use compact rounded white pills with lavender, blue, or lime icon tiles to distinguish Multilogement, Publique, and Entreprise.

### Feature panel

Pair a strong heading and concise explanatory copy with video or media in a two-column composition; use a lavender feature surface where shown.

### Applications card

Place download messaging and Apple/Google store badges in a warm off-white rounded panel, paired with a bright lime promotional card.

### Footer identity

Finish with a centered electric-future statement and Eddie mark, followed by compact link groups, social icons, partner note, and oversized wordmark artwork.

### Measured component styles

- **Primary button** (“Ça m'intéresse”): background #000000 · text #ffffff · border 1px solid #4d4c51 · radius 25px · padding 10px 20px · 400 18px Founders Grotesk
- **Secondary button** (“Contact”): background #ffffff · text #000000 · border 1px solid #ffffff · radius 15px · padding 10px 15px · 400 18px Founders Grotesk · shadow rgba(198, 185, 237, 0.3) 5px 5px 20px 0px
- **Link** (“Télécharger dans l’App Store”): transparent background · text #000000 · radius 0px · padding 0px · 400 18px Founders Grotesk
- **Card** (“Accueil”): background #f7f4f2 · text #000000 · radius 25px · padding 10px · 400 18px Founders Grotesk
- **Navigation item** (“Solutions Multilogement Publique Entrepr”): transparent background · text #000000 · radius 0px · padding 0px · 400 18px Founders Grotesk

## Do

- Keep the page canvas predominantly white.
- Use black for primary text and the main CTA.
- Reserve lavender and lime for clear accents.
- Pair oversized headlines with concise supporting copy.
- Use rounded corners on pills and feature cards.
- Give each section generous breathing room.

## Don't

- Do not fill every section with colour.
- Do not use gradients as a substitute for the flat palette.
- Do not crowd the hero with extra copy or controls.
- Do not add heavy shadows to every card.
- Do not recolour photography with strong brand tints.
- Do not use rigid, sharp-cornered card styling.

## Agent prompt

Build a new Eddie-style page with Founders Grotesk or a close sans-serif substitute. Start with an open white canvas (#ffffff), Charging Ink (#000000) typography, and a sparse rounded header. Use Warm Mist (#f7f4f2) for quiet panels; reserve Eddie Lavender (#d8d1ff) and Charge Lime (#d2e534) for service markers and selected feature surfaces. Organize content into spacious sections: a bold centered introduction, clear feature blocks, and practical actions. Alternate centered statements with two-column media and copy layouts. Use natural charging photography, map visuals, or video without heavy colour treatment. Keep corners rounded, borders discreet, and lavender-tinted shadows limited to a few controls. Prioritize readable copy, clear calls to action, generous whitespace, and a friendly rather than technical tone.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Slim announcement strip above a two-sided header with home mark, navigation, menu, and CTA. | current-page cue, menu control, interest CTA | announcement link, rounded nav controls, black pill button |
| 2 | hero | Centered oversized brand statement with a compact row of three service-category cues. | brand introduction, service discovery | large display type, inline logo mark, pastel icon pills |
| 3 | video | Full-width media area directly below the hero. | immersive brand viewing | rounded media edge, quiet surrounding canvas |
| 4 | feature-split | Two-column story combining a headline and copy with video or supporting media. | brand explanation, mission storytelling | lavender feature surface, split media composition |
| 5 | stats | Map-led, largely single-column experience with clustered stats, icons, and app links. | map-based exploration, quick service access | map visualization, number markers, store badges |
| 6 | other | A centered heading on its own, separated by generous whitespace. | section transition | large centered type, open white canvas |
| 7 | feature-split | Vertically sequenced service stories with alternating media and copy emphasis. | solution discovery, audience segmentation | service labels, bold headings, compact dark CTAs |
| 8 | cta | Two-column card section pairing an app-download panel with a lime contact feature. | app download, lead generation | warm neutral card, lime feature panel, store badges |
| 9 | footer | Centered brand statement above multi-column links, social details, partner note, and wordmark artwork. | footer navigation, social discovery, brand reinforcement | oversized closing headline, compact link groups, large wordmark |

## Source CSS custom properties (selected)

```css
--color-White: #ffffff;
--color-Black: #000000;
--color-Scarpa-Flow: #4d4c51;
--color-Manatee: #9a98a1;
--color-Jumbo: #767481;
--color-French-Gray: #cdcbd0;
--color-Medium-Purple: #9891ff;
--color-Dull-Lavender: #b7b2ff;
--color-Biloba-Flower: #d8d1ff;
--color-Snuff: #e5e3ff;
--color-Sulu: #d2e534;
--color-Texas: #e0ee69;
--color-Corn-Field: #eef69f;
--color-Spring-Sun: #fcffd4;
--color-Aqua-Island: #89cdf3;
--color-Powder-Blue: #a2d8f5;
--color-Jagged-Ice: #bbe2f7;
--color-Iceberg: #d4edf9;
--color-Dawn-Pink: #ddcdbf;
--color-Beige: #f1eae4;
--color-Pampas: #f7f4f2;
--color-Orange: #fe7324;
--color-Tan-Hide: #fc975c;
--color-Rose-Bud: #f9bb95;
--color-Sidecar: #f7dfcd;
--container-gap-base: 4rem;
--radius-xxxs: .6rem;
--radius-2xs: .8rem;
--radius-xs: 1.5rem;
--radius-sm: 2rem;
--radius-rg: 2.5rem;
--radius-md: 3rem;
--radius-lg: 3.5rem;
--radius-xl: 4rem;
--radius-2xl: 6rem;
--grid-gap: 2rem;
--grid-gap-half: calc(2rem / 2);
--grid-gap-third: calc(2rem / 3);
--grid-gap-2X: calc(2rem * 2);
--grid-gap-4X: calc(2rem * 4);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/eddie-eco