# Agence-awam.fr Design System

> High-contrast navy and floral-white canvas energized by a vibrant mint-green signal and geometric Sofia-pro typography.

**Source:** https://agence-awam.fr | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Agence Awam utilizes a "Floral White" (#fffbef) foundation rather than pure white to provide a warm, premium base for its high-contrast "Navy" (#160a6e) typography. The brand's primary energy comes from a saturated "Green" (#2adb8f) used for high-impact hero backgrounds and interactive signals. Typography is strictly geometric, pairing Sofia-pro for structured headings with "New awam" for specific display moments. Layouts are characterized by sharp 0px corners on major containers, contrasted by perfect 50% circles for interactive elements and specific 6px radii for content cards.

## Signature DNA
1. **The Floral Foundation** (The use of `#fffbef` as a global background instead of `#ffffff` creates a distinct, non-clinical warmth across all pages).
2. **Navy-on-Green Impact** (High-voltage hero sections use `#2adb8f` backgrounds with `#160a6e` text, a signature color pairing that defines the brand's "Amazing Mood").
3. **Geometric Circularity** (Interactive triggers and decorative accents use `50%` radius circles, often with `2px` borders, cutting through an otherwise sharp, grid-based layout).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--floral-white` | `#fffbef` | Primary page background | 1 | 1 | Computed style |
| `--white` | `#ffffff` | Secondary surface / Text | 80 | 0.8 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--navy` | `#160a6e` | Primary text, borders, buttons | 121 | 1 | CSS variable |
| `--green` | `#2adb8f` | Hero backgrounds, accent text | 10 | 1 | CSS variable |
| `--dark-navy` | `#0d0628` | Deep emphasis text, borders | 13 | 0.8 | Computed style |
| `--lavender` | `#d8d6ff` | Decorative surface (decorative_only) | 1 | 1 | CSS variable |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| sofia-pro | 300, 400, 500, 600, 700 | Heading, UI, Navigation | ITC Avant Garde Gothic | Licensed |
| New awam | 400, 500, 700 | Body, Display accents | Montserrat | Custom |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.mega}` | 70px | 20px | normal | 500 | Expertise titles | `a.title-expertise` |
| `{type.display.xl}` | 60px | 50px | normal | 700 | Main hero headings | `h2.title-m.title-real` |
| `{type.display.lg}` | 40px | 20px | normal | 400 | Large span accents | `span.text-span-3` |
| `{type.heading.md}` | 33px | 20px | normal | 700 | Section sub-heads | `span.text-span-4` |
| `{type.heading.sm}` | 25px | 40px | normal | 700 | Project titles | `h2.item-project__title` |
| `{type.button}` | 25px | 20px | normal | 500 | Primary CTA text | `a.btn.btn-blue` |
| `{type.heading.xs}` | 24px | 30px | normal | 700 | Article templates | `h3.article-template` |
| `{type.body.lg}` | 18px | 27px | normal | 300 | Description text | `div.text-description` |
| `{type.subheading}` | 16px | 20px | normal | 500 | Baseline subtitles | `h3.sous-titre-baseline` |
| `{type.body.sm}` | 14px | 20px | normal | 700 | Navigation links | `nav.section-11.is--nav` |

### Principles
1. **Heading weight variety**: Sofia-pro is used from 300 (light) to 700 (bold) to create hierarchy without changing font families.
2. **Tight Line Heights**: Display sizes (70px) often use extremely tight line-heights (20px) when applied to single-line links or titles.
3. **Navy as Default Ink**: Pure black is avoided; `#160a6e` or `#0d0628` serves as the primary text color.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xxs}` | 4px | 11 |
| `{space.xs}` | 5px | 52 |
| `{space.sm}` | 10px | 96 |
| `{space.md}` | 20px | 34 |
| `{space.lg}` | 40px | 32 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Main sections, large surfaces | `radius: 0px` |
| `{radius.card}` | 6px | Content cards, inputs | `radius: 6px` |
| `{radius.panel}` | 20px | Floating UI panels | `radius: 20px` |
| `{radius.full}` | 50% | Buttons, icons, decorative circles | `radius: 50%` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | Default state for all cards and surfaces | `shadow: none` |
| Brand Pop | `2px 4px 0px 3px #fad8f2` | Specific decorative emphasis | `rgb(250, 216, 242) 2px 4px 0px 3px` |

## Components

### Tier 1: Foundational

#### Primary Surface (Dark)
**Role:** High-contrast section containers
**Pages observed:** https://agence-awam.fr
**Spec:** Background: `#160a6e` / Text: `#ffffff` / Radius: `0px` / Padding: `40px`
**States observed:** Default: captured | Hover: not captured

#### Circular Trigger
**Role:** Navigation toggles and icon buttons
**Pages observed:** https://agence-awam.fr
**Spec:** Background: `transparent` / Border: `2px solid #160a6e` / Radius: `50%` / Typography: `Sofia-pro 14px`
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns

#### Content Card
**Role:** Project and article previews
**Pages observed:** https://agence-awam.fr
**Spec:** Background: `#ffffff` / Text: `#160a6e` / Radius: `6px` / Padding: `5px 10px`
**States observed:** Default: captured | Hover: not captured

#### Hero Section
**Role:** Primary landing impact
**Pages observed:** https://agence-awam.fr
**Spec:** Background: `#2adb8f` / Text: `#160a6e` / Radius: `0px` / Typography: `Sofia-pro 60px Bold`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Floating Panel
**Role:** Cookie consents or utility overlays
**Pages observed:** https://agence-awam.fr
**Spec:** Background: `#ffffff` / Radius: `20px` / Shadow: `none`
**States observed:** Default: captured

#### Contact Item
**Role:** Footer or menu contact links
**Pages observed:** https://agence-awam.fr
**Spec:** Typography: `Sofia-pro 30px Light (#160a6e)`
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | Not captured (fluid observed) |
| Section Padding | 40px |
| Element Gap | 10px / 20px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Typography scales to fit; circular triggers maintain 50% ratio |
| Desktop | 1440px | Multi-column grid for cards; 40px section padding |

## Imagery & decoration
The brand uses full-width photography of people and office environments to balance the technical geometric UI. Decorative elements are limited to 50% radius circles and the occasional "Brand Pop" shadow in pink (#fad8f2).

## Do's
- Use `#fffbef` (Floral White) for all large-scale light backgrounds.
- Set display headings in Sofia-pro with a weight of 500 or 700.
- Use `#2adb8f` (Green) for primary brand energy in hero sections.
- Maintain sharp `0px` corners for section-level containers.
- Use `50%` radius for all interactive icon containers.

## Don'ts
- **Wrong:** Using `#ffffff` as the main page background. **Right:** Use `#fffbef`. **Reason:** Pure white breaks the warm "Amazing Mood" brand identity.
- **Wrong:** Using `#2adb8f` (Green) for primary body text. **Right:** Use `#160a6e` (Navy). **Reason:** Contrast and legibility requirements.
- **Wrong:** Rounding section corners. **Right:** Keep at `0px`. **Reason:** Sharp containers are a core structural motif.
- Do not use `#d8d6ff` (Lavender) for functional UI; it is decorative only.
- Do not use standard 4px or 8px radii for buttons; use `50%` (circular) or `0px`.

## Similar brands
- **Locomotive** (Typography-first, bold color blocks)
- **Finsweet** (Geometric structure, high-contrast navy/white)
- **Active Theory** (Sharp edges, saturated accent colors)

## Quick start

### CSS Custom Properties
```css
:root {
  --navy: #160a6e;
  --green: #2adb8f;
  --floral-white: #fffbef;
  --dark-navy: #0d0628;
  --radius-card: 6px;
  --radius-full: 50%;
  --font-heading: "sofia-pro", sans-serif;
  --font-body: "New awam", sans-serif;
}
```

### Tailwind v4
```javascript
@theme {
  --color-navy: #160a6e;
  --color-green: #2adb8f;
  --color-floral: #fffbef;
  --font-sofia: "sofia-pro";
  --radius-card: 6px;
}
```

## Known gaps
- Hover states for primary buttons were not explicitly captured in the evidence.
- Mobile-specific font size transitions for the 70px display type are not documented.
- Grid column counts for desktop layouts were not explicitly defined in tokens.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://agence-awam.fr | 1440px / 390px | 2026-06-06 |