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

# EPIC agency · Design System

> A vivid canvas for bold ideas and stories

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

EPIC’s homepage pairs a saturated aqua canvas with deep teal typography, expressive display lettering, and playful project artwork. A spacious editorial flow connects the featured work, video, agency introduction, services, and compact footer.

## North star

Keep the aqua canvas continuous and let deep teal typography, fine rules, and expressive project artwork do the structural work.

## Overview

The page is built on a continuous aqua canvas (#a3fffe) that makes the identity unmistakable from the first viewport through the footer. Deep teal (#005368) carries the logo, navigation, headline, body copy, thin dividers, links, and outlined pill buttons, keeping contrast consistent without relying on filled CTA blocks. Sang Bleu gives the hero and section titles an editorial, high-contrast character; Inter handles navigation, metadata, and supporting copy. Oversized display typography overlaps the featured illustration, while small uppercase labels and letter-spaced captions punctuate the open layout. Project artwork supplies softer colors such as pale yellow and blue, but these read as content illustration rather than core brand colors. A large black video panel provides the page’s strongest tonal interruption. Generous blank space separates the hero, video, agency statement, services artwork, and footer, allowing each moment to feel deliberate rather than card-heavy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Teal | `#005368` | `--color-deep-teal` | brand | Primary text, logo, navigation, link text, hairline rules, and outlined buttons. |
| Electric Aqua | `#a3fffe` | `--color-electric-aqua` | brand | Dominant page canvas, carrying the hero and continuing through lower sections. |
| Video Black | `#000000` | `--color-video-black` | surface | Large video-player surface; a concentrated dark break in the otherwise aqua page. |
| Soft Gray | `#d4d4d4` | `--color-soft-gray` | neutral | Minor text color detected in measurement; not a defining page-wide brand color. |
| Muted Gold | `#bc994e` | `--color-muted-gold` | accent | Occasional service link accent; use sparingly against the dominant teal and aqua. |

### Semantic aliases

`--color-canvas` → `#a3fffe` (Electric Aqua) · `--color-surface` → `#000000` (Video Black) · `--color-text` → `#005368` (Deep Teal) · `--color-border` → `#005368` (Deep Teal) · `--color-accent` → `#005368` (Deep Teal) · `--color-accent-2` → `#bc994e` (Muted Gold)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#005368` | `#a3fffe` | 7.51:1 | AAA |
| `#005368` | `#000000` | 2.44:1 | fail |
| `#005368` | `#a3fffe` | 7.51:1 | AAA |
| `#005368` | `#000000` | 2.44:1 | fail |

### Gradients

- `linear-gradient(rgb(0, 83, 104), rgb(0, 83, 104))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| inter | `--font-body` | webfont | 400, 700, 600 | Navigation, body copy, labels, metadata, buttons, and supporting interface text. | Inter |
| sang-bleu | `--font-display` | webfont | 400, 900, 700 | Oversized project headline and editorial display or statement typography. | Bodoni Moda |

- **inter:** Regular weight for copy, with semibold navigation; small uppercase captions use widely tracked lettering.
- **sang-bleu:** High-contrast serif display, used at very large scale; measured headings include regular and heavy weights.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 120px | 900 | 1.2 | 0 | — | sang-bleu | Oversized editorial display lettering for standout titles. |
| h1 | 80px | 900 | 1 | 0 | — | sang-bleu | Featured project headline, prominent and tightly set. |
| h2 | 42px | 400 | 1.65 | 0 | — | sang-bleu | Large agency statements and section-level editorial copy. |
| h3 | 18px | 400 | 1.7 | 0 | — | inter | Supporting subsection headings in sans serif. |
| body | 14px | 400 | 1.56 | 0 | — | inter | Agency descriptions and general explanatory text. |
| caption | 10px | 400 | 3 | 0.5em | uppercase | inter | Tiny uppercase metadata labels with generous tracking. |
| button | 14px | 400 | 1.65 | 0 | — | inter | Compact text inside outlined pill actions. |
| nav | 14px | 400 | 1.65 | 0 | — | inter | Header and footer navigation links. |
| link | 14px | 400 | 1.65 | 0.036em | — | inter | Inline and editorial links, occasionally highlighted in gold. |
| eyebrow | 10px | 400 | 3 | 0.5em | uppercase | inter | Small uppercase section labels above main content. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 2, 4, 5, 6, 7, 9, 10, 12, 14, 15, 18, 20, 32, 50, 80 px.
- Section rhythm 80px · element gap 5px · card padding 20px · max content width —.

Use a centered, broad content frame with consistent side alignment and a thin header rule. The hero balances a large illustrated project and overlapping headline against a narrow journal list. Subsequent content shifts through full-width horizontal dividers, a broad video panel, and a centered agency statement. The page has comfortable density and extensive open space between blocks. Preserve the long vertical rhythm; avoid compressing the distinct hero, video, services, and footer moments into a dense grid.

## Shape & elevation

- Radius: button `9999px` · link `50%` · xs `4px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is predominantly flat, with no measured shadow system. Separate areas using thin deep-teal rules and ample breathing room instead of raised cards. The black video player is the clearest surface contrast; project art layers visually with the headline but does not create a general card treatment.

## Imagery

The featured project uses a colorful, flat illustration of a farmer framed by a soft circular backdrop; the artwork overlaps with the oversized title. Lower down, a restrained line-art services illustration appears against the same aqua canvas. A wide black video player forms a separate media moment. Keep imagery playful and graphic, with content-specific colors treated as illustration rather than new brand tokens.

## Components

### Header

Compact brand mark at left, spaced uppercase slogan centered, and outlined language pill plus menu icon at right; finish with a thin teal divider.

### Featured project hero

Large Sang Bleu project title overlaps illustrative artwork; pair an outlined VISIT PROJECT pill and a text link beneath it.

### Journal list

Narrow right-side feed with a small uppercase label, a see-all link, and three dated entries separated by teal rules.

### Video panel

Broad black media surface with a centered circular play affordance and small playback controls.

### Agency statement

Centered editorial paragraph in Sang Bleu, with selected phrases emphasized in heavier deep-teal lettering.

### Services transition

Sparse line-art illustration leads into a centered services label and large serif title, framed by horizontal rules.

### Footer

Compact agency contact details, policy links, social icons, and a small outlined newsletter action on the aqua canvas.

### Measured component styles

- **Primary button** (“EN”): transparent background · text #005368 · border 1px solid #005368 · radius 20px · padding 4px 12px · 600 13px inter · uppercase
- **Link** (“14 SEPTEMBER 2026 GA4 & Traffic IA: Prac”): transparent background · text #005368 · border 1px solid #005368 · radius 0px · padding 10px 0px · 400 18px inter
- **Card** (“EPIC Agency Rue Wiertz 38 box 12, B-4000”): transparent background · text #005368 · border 1px solid #005368 · radius 0px · padding 80px 0px 0px 0px · 400 14px inter
- **Navigation item** (“General terms”): transparent background · text #005368 · radius 0px · padding 0px · 400 14px inter

## Do

- Keep the aqua canvas continuous across major sections.
- Use deep teal for text, rules, and outlined controls.
- Reserve Sang Bleu-style serif typography for expressive headlines.
- Set utility copy and navigation in clean Inter-like sans serif.
- Use fine horizontal rules to divide content areas.
- Leave generous open space around major visual moments.

## Don't

- Do not introduce a dark overall theme.
- Do not turn outlined actions into large filled buttons.
- Do not treat illustration colors as core brand palette colors.
- Do not crowd the journal list or footer with extra decoration.
- Do not add shadows or raised-card styling.
- Do not replace the editorial display type with generic sans-serif headings.

## Agent prompt

Build a new agency page in EPIC’s visual language. Use Electric Aqua (#a3fffe) as the uninterrupted canvas and Deep Teal (#005368) for typography, fine dividers, navigation, links, and outlined pill actions. Keep the layout broad and editorial: a compact header, a visually dominant project or idea with expressive illustration, and a restrained secondary information column. Use Sang Bleu-style high-contrast serif display typography for headlines and Inter for navigation, metadata, and body copy. Add small uppercase, letter-spaced labels and preserve substantial whitespace between major blocks. A dark media panel may use Video Black (#000000); use Muted Gold (#bc994e) only as a restrained text accent. Keep surfaces flat, avoid shadows, and let artwork—not interface chrome—supply secondary colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Illustrated featured project and overlapping serif headline sit beside a narrow journal feed under a ruled header. | project visit action, view all projects, dated journal links | aqua canvas, oversized serif title, outlined pill, thin rules |
| 2 | other | Long aqua sequence with a video panel, centered agency statement, sparse services artwork, then a compact footer. | video playback, service discovery, newsletter signup | black video surface, section dividers, editorial statement, outlined controls |

## Source CSS custom properties (selected)

```css
--c-foreground: #005368;
--c-foreground-rgb: 0, 83, 104;
--c-background: #a3fffe;
--c-background-rgb: 163, 255, 254;
```

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