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

# Agence K72 · Design System

> Oversized editorial type meets cinematic imagery

**Theme:** dark · **Industry:** agency · **Source:** https://k72.ca/ · **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._

K72 opens with a full-screen cinematic scene, layering oversized French headline typography over immersive photography. A stark black navigation block, white outlined project links, and compact supporting copy make the composition feel bold yet restrained.

## North star

Let one cinematic full-bleed image carry the page, with oversized white editorial type and only essential navigation layered over it.

## Overview

The homepage uses a deliberately spare black-and-white interface over cinematic, full-bleed photography. Pure black (#000000) anchors the navigation block and serves as the measured canvas; white (#ffffff) carries the logo, navigation, headline, body copy, and outlined links. The snowy forest footage introduces cool gray tones, but these belong to the imagery rather than the measured brand palette. A very large, light-weight Lausanne headline dominates the upper portion, set in uppercase and broken into short, emphatic lines. The composition floats this type directly over the image instead of placing it in a card or panel. Small explanatory copy sits low and to the right, while pill-shaped outlined project and agency links span the lower edge. The layout favors a single immersive focal point, generous open image area, and widely separated content rather than conventional columns or stacked cards. A restrained lime ellipse appears in the screenshot as an image or motion detail, not a measured interface color.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Pure Black | `#000000` | `--color-pure-black` | brand | Measured canvas and black menu panel; keeps interface surfaces stark and visually quiet. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Logo, navigation, oversized headline, supporting copy, and outlined pill links. |

### Semantic aliases

`--color-canvas` → `#000000` (Pure Black) · `--color-text` → `#ffffff` (Gallery White) · `--color-border` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Lausanne | `--font-body` | webfont | 400, 300 | Display headlines, navigation, body copy, and oversized project links | Inter |

- **Lausanne:** Use light display weights and regular supporting text; headlines and project links are uppercase, while navigation and copy stay mixed case.

### Type scale — Custom (ratio ≈ 2.139, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 137px | 300 | 0.87 | 0 | uppercase | Lausanne | Oversized uppercase hero statement layered over the full-screen image. |
| h1 | 93.5px | 400 | 0.7 | 0 | uppercase | Lausanne | Primary hero headline, set in large uppercase lines. |
| h2 | 20px | 400 | 1.5 | 0 | — | Lausanne | Supporting introductory copy and secondary text. |
| body | 14px | 400 | 1.5 | 0 | — | Lausanne | Compact agency description over the lower-right image area. |
| nav | 16px | 400 | 1.5 | 0 | — | Lausanne | Menu label and small project or agency navigation. |
| link | 93.5px | 400 | 0.7 | 0 | uppercase | Lausanne | Large uppercase outlined project and agency entry links. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 5, 10, 21, 25, 27, 28, 40, 144 px.
- Section rhythm 144px · element gap — · card padding — · max content width 1132px.

A single full-bleed hero fills the initial viewport, with interface elements layered directly over the image. The measured page maximum width is 1132px, though the visual composition extends edge to edge. Position the logo at the top left and a compact black menu panel at the top right. Center the giant headline across the upper area, place short supporting copy at the lower right, and anchor the outlined links along the bottom. Spacious image areas do the work of section rhythm; measured density is spacious.

## Shape & elevation

- Radius: link `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.215, 0.61, 0.355, 1)` on interactive elements.

The interface is largely flat, with no measured shadows or gradients. Separation comes from contrast against the photography, a solid black menu panel, and crisp white outlines around large pill links. Keep layering direct and editorial rather than introducing cards, soft shadows, or decorative surface effects.

## Imagery

Use cinematic, full-bleed photographic or video scenes as the dominant page surface. The screenshot shows a snowy conifer landscape and suspended dark signage, while the scaled page image shows a different dark, atmospheric scene; treat these as changeable project footage, not fixed brand assets. Preserve natural cool tones and contrast, and layer white typography over legible portions of the frame.

## Components

### Wordmark

Compact white K72 mark at the upper-left edge, placed directly over the hero image.

### Menu control

White MENU label with a minimal line icon, housed in a black top-right block.

### Hero headline

Very large uppercase Lausanne text, light in weight and arranged in short lines over the image.

### Intro copy

Small white agency description aligned near the lower-right edge of the hero.

### Outlined navigation links

Oversized uppercase PROJETS and AGENCE links, white text inside white outlined pill shapes.

### Location and time

Small globe icon followed by a city and local-time label along the bottom-left edge.

### Measured component styles

- **Primary button** (“MENU”): transparent background · text #ffffff · radius 0px · padding 0px 25px 0px 0px · 400 16px Lausanne
- **Link** (“PROJETS”): transparent background · text #ffffff · border 3px solid #ffffff · radius 93506.4px · padding 20.6px 28.1px 0px 28.1px · 400 93.6px Lausanne · uppercase
- **Navigation item** (“PROJETS (17) AGENCE”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Lausanne

## Do

- Use cinematic photography as the hero’s dominant surface.
- Set the main statement in oversized uppercase Lausanne-style sans serif.
- Keep interface text and borders pure white.
- Reserve black for the measured canvas and menu panel.
- Overlay content directly on imagery where contrast allows.
- Use outlined pill links for major project navigation.

## Don't

- Do not add unmeasured brand colors to interface elements.
- Do not place the hero headline inside a card.
- Do not dilute the composition with many small panels.
- Do not use heavy shadows or gradient treatments.
- Do not make supporting copy compete with the headline.
- Do not mistake image colors for the brand palette.

## Agent prompt

Build a new agency page in K72’s cinematic editorial style. Use a full-bleed photographic or video hero and keep the interface palette to Pure Black (#000000) and Gallery White (#ffffff); let other colors come only from the image. Layer a very large, light-weight uppercase sans-serif headline directly over the scene, with compact regular-weight navigation and supporting copy. Place the logo at the upper left, a black-backed menu control at the upper right, concise copy low on one side, and prominent white outlined pill links near the bottom. Preserve generous open image space and strong contrast. Keep surfaces flat: no card grid, soft shadow, or invented accent color. Treat any scene-specific color or graphic detail as part of the media, not the interface system.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed hero with layered headline, corner navigation, lower-right copy, and bottom-aligned outlined links. | Menu access, Project and agency navigation | Full-screen imagery, Oversized uppercase headline, White outlined pill links |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
```

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