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

# INK · Design System

> Quiet clarity, bold ideas, and immersive work.

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

INK pairs a restrained, typography-led introduction with immersive project media and a long-form portfolio. A white canvas and generous breathing room let the work provide the page’s colour and energy.

## North star

Keep the interface quiet and spacious so expressive, full-bleed project imagery carries the visual impact.

## Overview

The page uses white as its primary canvas, keeping the header and opening statement exceptionally quiet. Near-black text gives the main message contrast, while a softer warm grey distinguishes the introductory phrase. Good Sans is used in a light, unembellished manner: the large display statement has open line spacing and no tracked-out capitals, with smaller, understated project labels. The layout moves from a spacious, left-aligned hero into a full-bleed video, then a long portfolio feed with alternating image widths and generous gaps. Project imagery supplies saturated colour; bright blue and other measured accent hues appear in project or feature bands rather than defining the overall canvas. Cards remain flat, without shadows or rounded corners, and fine warm-grey rules provide the principal border treatment. The result is a calm frame for cinematic, varied work.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Charcoal | `#2e2a2b` | `--color-soft-charcoal` | neutral | Dark navigation and link text, including skip-link text. |
| Studio Ink | `#1d1d20` | `--color-studio-ink` | brand | Primary text, dark sections, and the filled cookie-consent button. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, navigation backdrop, and light text on dark buttons or menu. |
| Warm Hairline | `#e4e1d7` | `--color-warm-hairline` | neutral | Subtle card borders, section rules, and the cookie panel outline. |
| Signal Coral | `#fe5431` | `--color-signal-coral` | accent | Accent-colour section band; not a persistent page-wide control colour. |
| Electric Blue | `#007ae6` | `--color-electric-blue` | accent | Blue project or feature band, notably associated with the Joby Aviation section. |
| Bright Teal | `#00b7ac` | `--color-bright-teal` | accent | Accent-colour section band; secondary to the white portfolio canvas. |
| Deep Cobalt | `#192c76` | `--color-deep-cobalt` | accent | Occasional project or section colour, not a base interface colour. |
| Slate Blue | `#44687e` | `--color-slate-blue` | surface | Occasional coloured section surface within the portfolio-led page. |
| Pale Sky | `#b6d0e2` | `--color-pale-sky` | surface | Soft blue section surface, distinct from the predominantly white canvas. |
| Project Orange | `#ff8000` | `--color-project-orange` | accent | Sporadic colour within a project or section; not a global CTA colour. |
| Quiet Grey | `#afab9f` | `--color-quiet-grey` | neutral | Muted introductory text, including the lighter opening phrase. |
| Deep Red | `#c40421` | `--color-deep-red` | accent | Occasional project-section colour rather than a site-wide interface accent. |
| Midnight Blue | `#000064` | `--color-midnight-blue` | accent | Rare section colour within the varied project presentation. |
| Petrol Teal | `#123746` | `--color-petrol-teal` | accent | Rare project or section colour, not part of the dominant neutral system. |
| Vermilion Red | `#c91f1e` | `--color-vermilion-red` | accent | Occasional section colour; keep it contextual rather than applying it globally. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#44687e` (Slate Blue) · `--color-surface-2` → `#b6d0e2` (Pale Sky) · `--color-surface-3` → `#1d1d20` (Studio Ink) · `--color-surface-4` → `#e4e1d7` (Warm Hairline) · `--color-text` → `#1d1d20` (Studio Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#e4e1d7` (Warm Hairline) · `--color-accent` → `#fe5431` (Signal Coral) · `--color-accent-2` → `#007ae6` (Electric Blue) · `--color-accent-3` → `#00b7ac` (Bright Teal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1d1d20` | `#ffffff` | 16.82:1 | AAA |
| `#1d1d20` | `#44687e` | 2.82:1 | fail |
| `#1d1d20` | `#b6d0e2` | 10.5:1 | AAA |
| `#ffffff` | `#44687e` | 5.95:1 | AA |
| `#ffffff` | `#b6d0e2` | 1.6:1 | fail |
| `#ffffff` | `#1d1d20` | 16.82:1 | AAA |
| `#fe5431` | `#ffffff` | 3.22:1 | AA-large |
| `#fe5431` | `#44687e` | 1.85:1 | fail |
| `#fe5431` | `#b6d0e2` | 2.01:1 | fail |
| `#fe5431` | `#1d1d20` | 5.23:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Good Sans | `--font-body` | webfont | 400 | Display statement, body copy, navigation, project labels, links, and cookie controls. | Manrope |

- **Good Sans:** Use regular weight with clean, uncondensed forms; sentence case and open line spacing keep the oversized statement calm.

### Type scale — Custom (ratio ≈ 1.826, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 400 | 1.14 | 0 | — | Good Sans | Oversized opening statement and major display copy. |
| h1 | 22px | 400 | 1.6 | 0 | — | Good Sans | Supporting introductory heading or compact page-level heading. |
| body | 18px | 400 | 1.75 | 0 | — | Good Sans | General explanatory text and longer content. |
| caption | 12px | 400 | 1.75 | 0 | — | Good Sans | Small project captions and cookie-consent copy. |
| button | 18px | 400 | 1.75 | 0 | — | Good Sans | Cookie-consent action labels. |
| nav | 60px | 400 | 1.25 | 0 | — | Good Sans | Large full-screen menu links when navigation is opened. |
| link | 12px | 400 | 1.75 | 0 | — | Good Sans | Small utility and inline links. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 3, 8, 16, 24, 32, 64, 160 px.
- Section rhythm 256px · element gap 16px · card padding 24px · max content width 1376px.

The desktop canvas is capped at the measured 1376px page width, with a spacious left-aligned hero and a simple header. The page unfolds in large vertical beats: introduction, full-bleed video, a coloured project feature, then a long portfolio feed. Portfolio entries use an asymmetric two-column rhythm, varying image proportions and alternating visual weight. The measured spacing system is generous, with a 256px section gap and 16px element gap; preserve ample white around captions and imagery rather than compressing the feed.

## Shape & elevation

- Radius: button `9999px` · nav `50%` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.8s cubic-bezier(0.77, 0, 0.43, 0.99)` on interactive elements.

The visual language is predominantly flat: no measured shadows or gradients. Separate content through whitespace and occasional fine warm-grey borders, not raised cards. The cookie panel is a plain white rectangle with a subtle border; its dark pill button supplies a small, clear focal point. Full-bleed media and solid section bands create depth through contrast, not layered effects.

## Imagery

Use cinematic, full-bleed video for the opening project transition, then a varied portfolio of high-quality project photography and rendered product imagery. Images span automotive, aviation, technology, sport, and brand campaigns. Crop each image with deliberate subject framing and let its native colours remain vivid; captions are small and restrained. The imagery, rather than decorative UI, brings colour and texture to the otherwise quiet page.

## Components

### Header

Minimal white header with the INK wordmark at the left and a compact circular menu control at the right.

### Introductory hero

Large left-aligned Good Sans statement on white, with a muted first phrase followed by dark supporting copy.

### Full-bleed project media

Wide video-led section that transitions from the white introduction into immersive project imagery.

### Project feature band

A distinct coloured project section, including the measured blue Joby Aviation feature.

### Portfolio feed

Long-form project gallery with varied image sizes, asymmetric two-column positioning, and small captions.

### Cookie consent panel

White bordered panel with compact copy, underlined policy links, a dark filled Accept all pill, and outlined Deny all pill.

### Measured component styles

- **Primary button** (“Accept all”): background #1d1d20 · text #ffffff · border 2px solid #1d1d20 · radius 999px · padding 0px 24px · 400 18px Good Sans
- **Secondary button** (“Deny all”): transparent background · text #1d1d20 · border 2px solid #1d1d20 · radius 999px · padding 0px 24px · 400 18px Good Sans
- **Link** (“Skip to main content”): transparent background · text #2e2a2b · radius 0px · padding 0px · 400 18px Good Sans
- **Card** (“We use cookies to give you the best onli”): transparent background · text #1d1d20 · border 1px solid #e4e1d7 · radius 0px · padding 24px · 400 12px Good Sans
- **Navigation item** (“Menu Home Work About Us People Join Us N”): transparent background · text #2e2a2b · radius 0px · padding 0px · 400 18px Good Sans

## Do

- Keep the main canvas white and uncluttered.
- Use Good Sans or a close, regular-weight geometric substitute.
- Set introductory copy large, left aligned, and generously spaced.
- Give video and project imagery room to dominate.
- Vary portfolio image widths while preserving an orderly two-column rhythm.
- Reserve accent colours for specific project or section bands.
- Use small restrained captions and thin borders where needed.

## Don't

- Do not fill the page with persistent bright accent colours.
- Do not add heavy shadows or gradient effects.
- Do not put every project into identical rounded cards.
- Do not center the hero copy or crowd it with controls.
- Do not overpower project captions with display typography.
- Do not treat colours inside project imagery as global interface colours.

## Agent prompt

Build a new agency page in INK’s restrained portfolio style. Use Gallery White (#ffffff) as the dominant canvas, Studio Ink (#1d1d20) for primary text, Soft Charcoal (#2e2a2b) for navigation, and Warm Hairline (#e4e1d7) for fine borders. Use regular-weight Good Sans or Manrope, with a large left-aligned opening statement and generous line spacing. Organize the page as spacious editorial sections, followed by immersive media and a long asymmetric two-column project gallery. Let project photography supply most colour; use measured accents such as Electric Blue (#007ae6) only for contextual project bands. Keep cards flat, captions small, and section spacing generous. Avoid gradients, heavy shadows, uniform rounded-card grids, and decorative interface clutter.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Spacious white opening section with a large, left-aligned text statement beneath a minimal header. | Clear brand introduction, Menu control | Muted lead phrase, Oversized dark copy, White canvas |
| 2 | video | Full-bleed cinematic video beneath the introductory section. | Immersive project preview | Edge-to-edge media, Natural image colour |
| 3 | product-showcase | Single project feature presented on a solid blue section band. | Featured case study | Electric blue surface, Minimal project identification |
| 4 | gallery | Long, spacious, asymmetric two-column gallery with varied image proportions and small captions. | Browse project work, Clickable project entries | Alternating image widths, White gutters, Small captions |

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