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

# AREA 17 · Design System

> Quietly confident typography meets expansive editorial space.

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

AREA 17’s homepage pairs confident typographic statements with broad white space and restrained navigation. Full-width imagery, fine rules, and muted link text create an editorial agency portfolio feel.

## North star

Let oversized, left-aligned typography and generous white space lead; keep interface decoration nearly invisible.

## Overview

The page is defined by a bright white canvas, despite dark-theme metadata: the screenshots show expansive white sections, with near-black typography and fine pale-gray separators. SuisseIntl supplies the visual voice, from the oversized opening statement to compact navigation and understated labels; headings use medium weight and subtly tight tracking, while links and body copy stay restrained. The layout favors broad, open blocks rather than boxed modules: a compact top navigation sits above a large left-aligned hero, followed by full-bleed documentary imagery and long intervals of white space. A vivid yellow announcement strip is visible over the hero image, but it reads as event-specific content rather than a core palette color. Later content uses muted gray category links and editorial update rows with aligned text and small media tiles. Blue, teal, and red measured accents appear in cards or portfolio imagery, not as dominant site chrome. Keep borders delicate and elevation nearly absent.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#1a1a1a` | `--color-soft-ink` | neutral | Primary wordmark, navigation, headings, and most body copy against the white canvas. |
| Deep Black | `#000000` | `--color-deep-black` | brand | Measured dark canvas and occasional dark section or card; not the dominant first-viewport background. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and broad open sections, especially the hero and editorial content. |
| Quiet Rule | `#e6e6e6` | `--color-quiet-rule` | neutral | Thin dividers and input outlines that separate content without creating strong boxes. |
| Muted Graphite | `#949494` | `--color-muted-graphite` | neutral | Secondary category and large link text, including the industries list. |
| Cloud Gray | `#f2f2f2` | `--color-cloud-gray` | surface | Subtle button and card fills, including understated utility controls. |
| Electric Blue | `#1248de` | `--color-electric-blue` | accent | Accent card background in measured components; treat as portfolio or card color, not a global page accent. |
| Stone Taupe | `#ada495` | `--color-stone-taupe` | semantic | Low-frequency color measured within card content; likely portfolio imagery, not core interface chrome. |
| Parchment | `#dcd7bc` | `--color-parchment` | semantic | Low-frequency card color likely belonging to portfolio artwork rather than the site-wide palette. |
| Midnight Violet | `#1d1950` | `--color-midnight-violet` | semantic | Sparse dark card color; use only when reproducing portfolio media, not general interface surfaces. |
| Sea Glass | `#6db7a8` | `--color-sea-glass` | accent | Measured accent appearing inside cards or project visuals, not prominent page chrome. |
| Vermilion | `#d33533` | `--color-vermilion` | accent | Sparse accent associated with card content or project imagery rather than the core UI. |
| Signal Coral | `#d64131` | `--color-signal-coral` | semantic | Low-frequency card color likely contained in project artwork; avoid using as a general CTA color. |

### Semantic aliases

`--color-canvas` → `#000000` (Deep Black) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#f2f2f2` (Cloud Gray) · `--color-text` → `#949494` (Muted Graphite) · `--color-text-muted` → `#1a1a1a` (Soft Ink) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#e6e6e6` (Quiet Rule) · `--color-accent` → `#1248de` (Electric Blue) · `--color-accent-2` → `#6db7a8` (Sea Glass) · `--color-accent-3` → `#d33533` (Vermilion)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#949494` | `#000000` | 6.92:1 | AA |
| `#949494` | `#ffffff` | 3.03:1 | AA-large |
| `#949494` | `#f2f2f2` | 2.71:1 | fail |
| `#1a1a1a` | `#000000` | 1.21:1 | fail |
| `#1a1a1a` | `#ffffff` | 17.4:1 | AAA |
| `#1a1a1a` | `#f2f2f2` | 15.55:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#f2f2f2` | 1.12:1 | fail |
| `#1248de` | `#000000` | 3.01:1 | AA-large |
| `#1248de` | `#ffffff` | 6.98:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SuisseIntl | `--font-body` | webfont | 500, 400 | Primary site typeface for navigation, headings, body copy, links, and controls. | Inter |
| ui-sans-serif | `--font-ui-sans-serif` | system | 400 | System sans-serif fallback and occasional measured editorial case-study link text. | Inter |

- **SuisseIntl:** Use measured regular and medium weights; headings are large and subtly tightly tracked, with natural sentence case.
- **ui-sans-serif:** Keep neutral, regular-weight rendering; it appears in a small share of text rather than as a distinct display face.

### Type scale — Perfect Fourth (ratio ≈ 1.362, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 55px | 500 | 1.1 | -0.015em | — | SuisseIntl | Opening brand statement; large, medium-weight, left-aligned text. |
| h2 | 42px | 500 | 1.1 | -0.014em | — | SuisseIntl | Major editorial statements and prominent section headings. |
| h3 | 32px | 500 | 1.15 | -0.013em | — | SuisseIntl | Secondary section titles and substantial content headings. |
| h4 | 20px | 500 | 1.4 | 0 | — | SuisseIntl | Compact subheadings and small content-group labels. |
| body | 16px | 400 | 1.4 | 0.004em | — | SuisseIntl | Supporting copy, announcement text, and footer details. |
| nav | 16px | 400 | 1.4 | 0.004em | — | SuisseIntl | Top-level navigation and utility links. |
| link | 42px | 500 | 1.1 | -0.014em | — | SuisseIntl | Large muted category links, including the industry list. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 4, 8, 12, 16, 24, 48, 85, 119 px.
- Section rhythm 48px · element gap 8px · card padding — · max content width 1408px.

A broad desktop composition uses a measured maximum content width of 1408px, with navigation spread across the top and major text aligned to the left. The opening statement occupies a generous white field before full-width imagery. Content later shifts between open single-column areas and two-column editorial arrangements, with update rows divided by fine horizontal rules. Measured spacing follows a comfortable rhythm; retain conspicuous gaps between sections rather than compressing content. The page feels deliberately sparse, with content anchored to the edges of broad columns rather than centered in cards.

## Shape & elevation

- Radius: button `8px` · input `8px` · card `8px` · media `8px` · nav `4px` · link `8px` · xs `4px` · sm `8px` · pill `9999px`
- Shadow `hairline` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(0, 0, 0) 0px 0px 0px 1px`
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is predominantly flat: no meaningful drop shadows are measured, and content relies on white space instead of stacked surfaces. Use thin #e6e6e6 rules to distinguish update rows and outlines. Cards may have softly rounded corners where measured, but avoid pronounced borders, floating panels, or layered effects.

## Imagery

Use documentary-style photography as large, edge-to-edge moments, including the prominent retail interior visible beneath the hero. Project and update imagery appears in smaller tiles aligned beside editorial text. Preserve natural photographic color and avoid heavy overlays or ornamental framing. Some measured accent hues belong to portfolio assets, so keep them inside media rather than spreading them across interface elements.

## Components

### Top navigation

Compact wordmark at the left with a row of restrained 16px links aligned to the upper right; use near-black text on white.

### Hero statement

Large, medium-weight SuisseIntl headline with tight tracking, left aligned in an expansive white field.

### Announcement strip

A bright event notice overlays the documentary image as a narrow, high-contrast yellow band; treat the yellow as campaign-specific.

### Industry link list

Large muted-gray category links in a simple vertical list, with no card containers or decorative icons.

### Latest updates

Editorial rows pair a small category label and text links with a project image tile; separate entries using pale hairlines.

### Contact and footer

A large left-aligned contact invitation leads into a sparse footer with compact social, legal, language, and newsletter links.

### Measured component styles

- **Primary button** (“Skip to main content”): background #f2f2f2 · text #1a1a1a · radius 8px · padding 16px 24px · 400 16px SuisseIntl
- **Link** (“AI and technology”): transparent background · text #949494 · radius 0px · padding 0px · 500 42px SuisseIntl
- **Input** (“Business headquarters location North Ame”): transparent background · text #1a1a1a · border 1px solid #e6e6e6 · radius 8px · padding 16px 48px 16px 16px · 400 16px SuisseIntl
- **Card**: background #f2f2f2 · text #1a1a1a · radius 8px · padding 0px · 400 16px ui-sans-serif
- **Navigation item** (“Header Navigation AREA 17 Clients Capabi”): transparent background · text #1a1a1a · radius 0px · padding 0px · 400 16px ui-sans-serif

## Do

- Use white as the dominant canvas.
- Set primary copy in near-black.
- Give major statements ample surrounding space.
- Align editorial content consistently to the left.
- Separate update rows with delicate gray rules.
- Keep project colors inside their associated imagery.

## Don't

- Do not interpret dark-theme metadata as a black first-viewport canvas.
- Do not add heavy shadows or layered panels.
- Do not turn every content item into a card.
- Do not use accent hues as broad interface backgrounds.
- Do not center the main statement or compress its whitespace.
- Do not use the campaign announcement yellow as a permanent brand color.

## Agent prompt

Build a new AREA 17-style agency page with a bright Gallery White (#ffffff) canvas and Soft Ink (#1a1a1a) typography. Use SuisseIntl or a close sans-serif substitute, reserving medium weight and subtly tight tracking for large, left-aligned statements. Keep navigation compact and unobtrusive. Organize content in broad editorial bands with generous gaps, a measured maximum width of 1408px, and occasional full-bleed documentary imagery. Use Muted Graphite (#949494) for secondary category links and Quiet Rule (#e6e6e6) for fine separators; Cloud Gray (#f2f2f2) can support restrained utility controls. Keep cards flat and sparsely rounded. Electric Blue (#1248de), Sea Glass (#6db7a8), and the red accents belong in project media, not general interface chrome. Favor confident type and whitespace over ornament.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | White hero field with upper-left wordmark, upper-right navigation, and a large left-aligned statement. | primary navigation, brand introduction | oversized headline, open white canvas, compact text navigation |
| 2 | video | Full-width media moment followed by a long, open section transition. | immersive brand storytelling | edge-to-edge imagery, dark media tones, high-contrast announcement strip |
| 3 | category-nav | Open editorial content with a vertical category list and later image-and-text update rows. | industry browsing, case-study discovery | large muted links, editorial update list, thin row dividers |
| 4 | cta | Two-column contact and footer content with a prominent left-aligned invitation. | contact conversion, newsletter subscription, social and legal navigation | large CTA headline, compact footer links, open columns |
| 5 | other | A quiet single-column final section with minimal visible content. | visual breathing room | plain white canvas, no visible card treatment |

## Source CSS custom properties (selected)

```css
--bg-dynamic: #fff;
--spacing-row-logo: 6.25rem;
```

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