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

# Agence Foudre · Design System

> Electric energy, human storytelling

**Theme:** light · **Industry:** agency · **Source:** https://www.agencefoudre.com/ · **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._

Agence Foudre pairs a muted lavender canvas with oversized condensed display type in vivid pink and deep green. Its spacious, off-center composition gives the agency identity room to breathe while compact case-study cards and service details add texture.

## North star

Keep the lavender field spacious and let oversized pink or green display type create the page’s visual charge.

## Overview

The page is built around a near-continuous lavender canvas (#d1cfe4), with few section changes so the composition reads as one expansive visual field. Pink (#db3c8a) supplies the main typographic energy: giant, tightly stacked display lettering, section headlines, badges, and the primary case-study action. Deep green (#00522d) appears as a strong counterpoint, most visibly in the enormous Foudre wordmark and small link accents. Beni’s very heavy, condensed display face creates compressed, poster-like headlines, while Clash Grotesk handles compact supporting copy, buttons, and labels. The opening is deliberately asymmetric: the wordmark dominates the top, secondary identity text sits low at left, and a small dark case card anchors the right. Large blank intervals separate content moments. Photography and video sit within modular case-study compositions, while cream and pale pink details soften the contrast. The overall effect is expressive and editorial, not a conventional boxed agency template.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Lavender | `#d1cfe4` | `--color-soft-lavender` | brand | Dominant page canvas spanning the hero and most content sections. |
| Electric Fuchsia | `#db3c8a` | `--color-electric-fuchsia` | brand | Primary display text, headings, badges, and filled case-study CTA. |
| Warm Porcelain | `#fff8f6` | `--color-warm-porcelain` | neutral | Light badge and button text, card details, and fine border accents. |
| Petal Pink | `#f29ebd` | `--color-petal-pink` | accent | Secondary pink emphasis and circular utility buttons. |
| Forest Green | `#00522d` | `--color-forest-green` | accent | Wordmark and sparse link accents; a strong contrast against lavender. |
| Blush Cream | `#fce5df` | `--color-blush-cream` | surface | Soft service badges and selected pale supporting text. |
| Olive Charcoal | `#444325` | `--color-olive-charcoal` | surface | Dark case-study card surface, distinct from the lavender page canvas. |

### Semantic aliases

`--color-canvas` → `#d1cfe4` (Soft Lavender) · `--color-text` → `#db3c8a` (Electric Fuchsia) · `--color-text-muted` → `#fff8f6` (Warm Porcelain) · `--color-text-subtle` → `#fce5df` (Blush Cream) · `--color-border` → `#fff8f6` (Warm Porcelain) · `--color-accent` → `#db3c8a` (Electric Fuchsia) · `--color-accent-2` → `#f29ebd` (Petal Pink) · `--color-accent-3` → `#00522d` (Forest Green) · `--color-on-accent` → `#fff8f6` (Warm Porcelain)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#db3c8a` | `#d1cfe4` | 2.74:1 | fail |
| `#fff8f6` | `#d1cfe4` | 1.45:1 | fail |
| `#fce5df` | `#d1cfe4` | 1.27:1 | fail |
| `#db3c8a` | `#d1cfe4` | 2.74:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Clash Grotesk | `--font-body` | webfont | 500, 700 | Body copy, labels, buttons, captions, and smaller headings. | DM Sans |
| Beni | `--font-display` | webfont | 900 | Display wordmark and oversized editorial section headlines. | Oswald |

- **Clash Grotesk:** Measured weights are 500 and 700. Keep supporting text compact and clear, with bold weight reserved for small headings and actions.
- **Beni:** Measured at weight 900 with compressed, heavy letterforms and tight line-height; headlines are visually stacked rather than tracked out.

### Type scale — Custom (ratio ≈ 1.688, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 130px | 900 | 0.7 | 0 | — | Beni | Oversized Foudre wordmark and hero-scale identity lettering. |
| h1 | 94px | 900 | 0.7 | 0 | — | Beni | Primary hero and major editorial headlines. |
| h2 | 46px | 900 | 0.7 | 0 | — | Beni | Large section titles and case-study headings. |
| h3 | 20px | 700 | 1.2 | 0 | — | Clash Grotesk | Service headings and smaller content titles. |
| body | 16px | 500 | normal | 0 | — | Clash Grotesk | Agency introduction and descriptive supporting copy. |
| caption | 12px | 500 | 0.85 | 0 | — | Clash Grotesk | Compact card labels and image details. |
| button | 12px | 700 | 0.85 | 0 | — | Clash Grotesk | Small, bold text inside rounded CTA buttons. |
| link | 10px | 500 | normal | 0 | — | Clash Grotesk | Tiny utility and inline link text. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 5, 7, 8, 10, 12, 15, 20, 30, 78, 120, 140 px.
- Section rhythm 140px · element gap 5px · card padding 11px · max content width —.

A full-width, single-column page sequence sits on a persistent canvas; measured maximum width is unspecified. The hero balances an oversized centered wordmark with lower-left identity copy and a compact case card at right. Later content shifts between left-aligned display headings, right-side copy, media, and multi-column service content. Preserve the exceptionally spacious section rhythm and low overall density rather than filling the long gaps with generic content. Alignment is intentionally asymmetric.

## Shape & elevation

- Radius: button `50%` · card `25px` · badge `10px` · xs `10px` · sm `25px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.4s cubic-bezier(0.17, 0.67, 0.3, 1.33)` on interactive elements.

The measured interface is predominantly flat, with no recorded shadow system or gradients. Use color blocks, spacing, and image placement to establish hierarchy. The case-study card is the main raised-looking element: a dark olive surface with rounded corners and inset image and text. Badges and buttons use measured rounded corners; avoid adding ornamental borders or heavy shadows.

## Imagery

Use real campaign and client photography, plus video where the section calls for it. Frame assets as case-study material within compact cards or larger media-led compositions; avoid generic decorative illustration. The opening case card combines a photograph, olive-charcoal panel, small cream labels, pale service pills, and a pink action. Treat media as editorial proof of work, while leaving the lavender surroundings largely unobstructed.

## Components

### Hero wordmark

Huge, heavy Beni lettering in Forest Green (#00522d), centered across the top against the uninterrupted lavender canvas.

### Utility controls

Small circular Petal Pink (#f29ebd) buttons at the upper corners, carrying minimal dark icons.

### Case-study card

A single Olive Charcoal (#444325) card with rounded corners, photo, compact cream text, blush service pills, and a Fuchsia CTA.

### Primary case CTA

Fuchsia (#db3c8a) rounded button with Warm Porcelain (#fff8f6) Clash Grotesk bold label.

### Service badge

Compact rounded label in Blush Cream (#fce5df) with Fuchsia (#db3c8a) text; alternate badges use a Fuchsia fill and cream text.

### Display section heading

Very heavy, condensed Beni headline in vivid pink or light cream, arranged in short stacked lines.

### Measured component styles

- **Primary button** (“Voir le case”): background #db3c8a · text #fff8f6 · radius 10px · padding 12px 10px · 700 12px Clash Grotesk
- **Secondary button**: background #f29ebd · text #00522d · radius 50% · padding 0px · 400 13.3333px Clash Grotesk
- **Card** (“Case du mois Le Sac du Berger Création d”): background #444325 · text #fff8f6 · radius 25px · padding 0px 15px 15px 15px · 500 10px Clash Grotesk
- **Badge** (“Vidéos”): background #db3c8a · text #fff8f6 · radius 10px · padding 12px · 500 12px Clash Grotesk

## Do

- Use Soft Lavender (#d1cfe4) as the dominant canvas.
- Set major headlines in oversized, heavy condensed display type.
- Use Electric Fuchsia (#db3c8a) for the main typographic emphasis.
- Keep Forest Green (#00522d) as a bold, selective counterpoint.
- Preserve wide empty intervals between major content moments.
- Build case cards from real imagery and compact labeled details.

## Don't

- Do not divide every section with a new background color.
- Do not center every heading or make the layout symmetrical.
- Do not replace the oversized display type with generic sans-serif headings.
- Do not add unmeasured shadows, gradients, or decorative borders.
- Do not spread small copy across large empty areas.
- Do not let illustration colors redefine the core brand palette.

## Agent prompt

Create a new page in Agence Foudre’s expressive social-agency style. Use Soft Lavender (#d1cfe4) as the near-continuous canvas, with Electric Fuchsia (#db3c8a) for oversized headings and key actions, and Forest Green (#00522d) as a selective typographic counterpoint. Set display copy in a heavy, condensed Beni-like face; use a clean Clash Grotesk-like sans serif for body text, labels, and buttons. Compose asymmetrically: pair large stacked headlines with compact supporting copy or real campaign imagery, and retain generous empty space between sections. Use Warm Porcelain (#fff8f6) and Blush Cream (#fce5df) for small text and badges. Reserve Olive Charcoal (#444325) for a case-study panel. Favor flat color, rounded compact controls, editorial media, and clear hierarchy; do not add unmeasured shadows or gradients.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Oversized centered wordmark; identity copy low left; compact case card low right. | corner utility buttons, case-study CTA | lavender canvas, green display wordmark, pink circular controls |
| 2 | video | Single-column, wide open field with short split headline and video presence. | brand-story introduction, video-led pause | lavender field, contrasting display text, minimal controls |
| 3 | feature-split | Left-aligned large headline paired with compact copy and media details. | agency introduction, supporting explanation | stacked pink heading, small body copy, lavender canvas |
| 4 | gallery | Long editorial work showcase with left-aligned title and repeated media-led case content. | browse client work, case links | large display title, photographic cards, compact labels |
| 5 | video | Full-bleed media moment within the continuing lavender page. | immersive video viewing | edge-to-edge imagery, minimal surrounding chrome |
| 6 | feature-grid | Three-column expertise content with left-aligned headline and supporting lists. | scan expertise areas, review service details | three-column layout, display heading, compact service lists |

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