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

# Traffic Productions · Design System

> Electric yellow, sharp type, unapologetic structure.

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

Traffic Productions pairs a vivid yellow opening with stark gray content bands and oversized, tightly tracked typography. Thin black outlines and restrained imagery keep the agency homepage graphic, direct, and editorial.

## North star

Let the oversized type, flat yellow-and-gray fields, and crisp black outlines define the page before adding imagery.

## Overview

The page is built around a striking alternation: a full-bleed yellow hero followed by broad light-gray content areas. Ink-black text and hairline borders provide the only consistent contrast, while the yellow returns as a strong highlight in later calls to action and footer labels. Suisse is used throughout in a single regular weight; display text is very large, uppercase, and tightly tracked, while body copy remains compact and clear. The layout favors expansive, mostly open section bands, with content aligned to the left and occasional paired columns. Borders act as visible structural rules around stacked content and service rows rather than as decorative card chrome. Imagery is secondary to typography and structure: portfolio visuals appear within work and service content, while the first screen relies on color and a small centered headline. The overall effect is intentionally flat, graphic, and high-contrast.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Traffic Ink | `#151515` | `--color-traffic-ink` | brand | Primary text, navigation, footer details, outlines, and the dark circular play button. |
| Studio Gray | `#f3f3f3` | `--color-studio-gray` | surface | Main canvas and the broad content, services, and footer backgrounds. |
| Electric Lemon | `#fff824` | `--color-electric-lemon` | accent | Full-bleed opening hero, video call-to-action band, and highlighted footer labels. |

### Semantic aliases

`--color-canvas` → `#f3f3f3` (Studio Gray) · `--color-text` → `#151515` (Traffic Ink) · `--color-border` → `#151515` (Traffic Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#151515` | `#f3f3f3` | 16.46:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Suisse | `--font-body` | webfont | 400 | Display, headings, body copy, navigation, and links across the page. | Inter |

- **Suisse:** Regular weight throughout; large display and heading text use tight negative tracking, with uppercase display and navigation.

### Type scale — Golden Ratio (ratio ≈ 1.565, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 108px | 400 | 0.89 | -0.04em | uppercase | Suisse | Oversized uppercase statements and service names. |
| h1 | 84px | 400 | 0.93 | -0.03em | — | Suisse | Primary section headline or prominent page statement. |
| h2 | 54px | 400 | 0.96 | -0.03em | — | Suisse | Section headings such as the about introduction. |
| h3 | 30px | 400 | 1 | -0.02em | — | Suisse | Project and client headings within the work section. |
| body | 18px | 400 | 1.17 | -0.03em | — | Suisse | Introductory copy and supporting service descriptions. |
| nav | 18px | 400 | 1 | -0.02em | uppercase | Suisse | Uppercase navigation labels and compact footer links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 5, 6, 8, 12, 15, 18, 20, 34, 47 px.
- Section rhythm 44px · element gap 20px · card padding — · max content width 1400px.

The page uses a broad, centered composition with a measured maximum content width of 1400px. The opening is full bleed, with its small headline centered in a large yellow field; subsequent content is predominantly left aligned and arranged in one or two columns. Sections follow a comfortable rhythm, with roomy bands and clear separation rather than dense card layouts. The services area becomes a sequence of outlined rows, while the footer uses paired blocks and a long horizontal legal strip. Keep the structure open and graphic, not grid-heavy.

## Shape & elevation

- Radius: button `50%`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.6s cubic-bezier(0.075, 0.82, 0.165, 1)` on interactive elements.

The visual system is flat: no measured shadows or gradients. Use thin, crisp dark outlines to define large rows and content bands, keeping surfaces flush with the background. Layering comes from section order, image placement, and contrast between yellow and gray, not from raised cards.

## Imagery

The opening viewport is typographic and color-led, with no visible photography. Work and services sections contain portfolio imagery, but it supports the content rather than replacing the strong type-and-border system. Preserve image assets as editorial project previews within the broader layout; avoid introducing ornamental illustrations, gradients, or 3D effects unsupported by the page.

## Components

### Hero statement

A full-bleed Electric Lemon (#fff824) opening field with a compact, centered, dark typographic statement.

### Section heading

Large Suisse text with tight negative tracking; use clear left alignment for content sections.

### Work list

Client and project headings, supporting lists, and portfolio images arranged in a spacious two-column content area.

### Service rows

Large uppercase service names sit in separate, thinly outlined horizontal bands on Studio Gray (#f3f3f3).

### Play CTA

Electric Lemon (#fff824) media band with a centered circular Traffic Ink (#151515) button and light label.

### Footer navigation

Large split contact lettering, compact uppercase link groups, yellow-highlighted labels, and a bordered legal strip.

### Measured component styles

- **Primary button** (“Click and play”): background #151515 · text #f3f3f3 · radius 9999px · padding 0px · 400 29.9952px Suisse
- **Link** (“MORE ABOUT US”): transparent background · text #151515 · radius 0px · padding 0px · 400 18px Suisse · uppercase
- **Navigation item** (“TRAFFIC PRODUCTIONS© TRAFFIC PRODUCTIONS”): transparent background · text #151515 · radius 0px · padding 0px · 400 18px Suisse · uppercase

## Do

- Use Electric Lemon (#fff824) as a large, flat color field.
- Set display statements in oversized, tightly tracked Suisse or a close substitute.
- Keep body copy and navigation regular-weight and legible.
- Use Traffic Ink (#151515) for text and crisp outlines.
- Build service content as open, outlined rows rather than raised cards.
- Let portfolio images support, not dominate, the typographic system.

## Don't

- Do not add gradients or drop shadows.
- Do not introduce colors outside the measured palette as brand colors.
- Do not use rounded cards; reserve the measured pill-like radius for the circular CTA.
- Do not make the hero busy with imagery or extra controls.
- Do not replace thin outlines with heavy filled panels.
- Do not loosen the display typography into generic, widely tracked headings.

## Agent prompt

Build a new page in the Traffic Productions visual style. Use Electric Lemon (#fff824) for a bold, flat hero or key CTA field, Studio Gray (#f3f3f3) for the main canvas, and Traffic Ink (#151515) for all primary text and crisp outlines. Use Suisse if available, or Inter as a free substitute; keep weights regular, display text oversized and tightly tracked, and navigation uppercase. Favor broad open sections, left-aligned content, and occasional two-column layouts over dense cards. Structure services as outlined horizontal rows. Keep elevation flat with no shadows or gradients, and use project imagery as supporting editorial material rather than decoration. Make the strongest visual impression through color blocks, typography, and clean structural lines.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed yellow opening field with a small centered typographic statement. | Focused opening message | Bright flat background, Centered dark headline |
| 2 | feature-split | Light-gray two-column introduction with a section heading and concise agency description. | Agency overview, More-about link | Left-aligned heading, Open two-column layout |
| 3 | product-showcase | Two-column project content with client headings, service lists, and portfolio imagery. | Client-led case studies, Project detail links | Large client labels, Supporting image set |
| 4 | other | Single-column service introduction on the light-gray background. | Service category discovery | Oversized uppercase label, Portfolio thumbnails |
| 5 | other | Continuation of the outlined, single-column service sequence. | Service category discovery | Large uppercase label, Thin outlined band |
| 6 | video | Large yellow media band with a centered circular play control. | Click-to-play media | Yellow backdrop, Dark round CTA |
| 7 | footer | Large split contact headline above compact link columns and a full-width legal strip. | Contact navigation, Location links, Legal and privacy links | Oversized contact lettering, Yellow-highlighted labels, Outlined footer bands |

## Source CSS custom properties (selected)

```css
--color-black: #151515;
--color-error: #E90000;
--color-gray: #F3F3F3;
--color-gray-blue: #C5CBD1;
--color-gray-dark: #A5ADB6;
--color-gray-90: #e5e5e5;
--color-white: #ffffff;
--color-yellow: #FFF824;
--font-max-size: 7.500vw;
--font-max-line: 0.89;
--font-max-letter: -0.04em;
--font-xl-size: 5.833vw;
--font-xl-line: 0.93;
--font-xl-letter: -0.03em;
--font-lg-size: 3.750vw;
--font-lg-line: 0.96;
--font-lg-letter: -0.03em;
--font-3md-size: 2.500vw;
--font-3md-line: 1;
--font-3md-letter: -0.02em;
--font-md-size: 1.667vw;
--font-md-line: 0.94;
--font-md-letter: -0.02em;
--font-base-size: 1.250vw;
--font-base-line: 1;
--font-base-letter: -0.02em;
--font-base-size-p: 1.250vw;
--font-base-line-p: 1.17;
--font-base-letter-p: -0.03em;
--font-xs-size: 0.833vw;
--font-xs-line: 1.17;
--font-xs-letter: -0.01em;
--content-spacing-x: 0.833vw;
--content-spacing-y: 0.972vw;
--project-spacing-t: 2.361vw;
--project-spacing-b: 13.889vw;
--project-spacing-x: 0;
--font-2xl-size: 14.400vw;
--font-2xl-line: 1;
--font-2xl-letter: -0.02em;
```

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