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

# 14islands · Design System

> Quiet monochrome, oversized type, and immersive work.

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

14islands presents its creative agency through a restrained monochrome canvas, striking oversized typography, and an immersive opening video. A spacious project portfolio and concise studio story keep the work, rather than interface decoration, at the center.

## North star

Let oversized, tightly tracked typography and generous white space frame the work; keep interface colour and decoration almost invisible.

## Overview

The page uses a deliberately narrow colour vocabulary: white carries most of the long portfolio canvas, pale grey marks the opening hero band, near-black anchors typography and navigation, and muted grey softens secondary copy. The palette creates hierarchy through contrast rather than coloured buttons or decorative accents. AftenScreen supplies the expressive large display and headline lettering, with tight negative tracking and regular weight; BentonSans handles compact uppercase navigation and captions. The opening hero uses a broad, asymmetrically placed two-line title, generous open space, and a media frame entering at the lower edge. Below it, text-led service and studio sections alternate with a long project sequence, then a split list of further work. Images and video provide the strongest colour, but remain project-specific rather than defining the brand palette. The page stays flat and spacious, relying on alignment, whitespace, and restrained hairlines instead of shadows or card chrome.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant portfolio canvas and the background for service, project, studio, and footer sections. |
| Near Ink | `#070707` | `--color-near-ink` | brand | Primary headline, navigation, project names, and footer text; the page’s strongest contrast. |
| Soft Pewter | `#a2a2a9` | `--color-soft-pewter` | semantic | Muted hero ampersand and secondary phrases, project categories, and supporting copy. |
| Mist Canvas | `#f2f2f2` | `--color-mist-canvas` | surface | Opening hero background, visually distinct from the white portfolio sections. |
| Footer Slate | `#797979` | `--color-footer-slate` | neutral | Sparse subdued footer text; secondary to near-black links and copy. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f2f2f2` (Mist Canvas) · `--color-text` → `#070707` (Near Ink) · `--color-text-muted` → `#a2a2a9` (Soft Pewter)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#070707` | `#ffffff` | 20.14:1 | AAA |
| `#070707` | `#f2f2f2` | 17.99:1 | AAA |
| `#a2a2a9` | `#ffffff` | 2.54:1 | fail |
| `#a2a2a9` | `#f2f2f2` | 2.27:1 | fail |

### Gradients

- `linear-gradient(rgb(7, 7, 7) 0px, rgb(7, 7, 7) 0px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| AftenScreen | `--font-body` | webfont | 400 | Display, headline, and body copy throughout the hero and editorial sections. | DM Sans |
| BentonSans | `--font-bentonsans` | webfont | 400 | Compact uppercase navigation and small caption labels. | Barlow |

- **AftenScreen:** Regular weight; measured display and headline use tight negative tracking. Keep large phrases crisp and unembellished.
- **BentonSans:** Regular weight with neutral tracking; use uppercase for navigation and captions, keeping labels visually secondary.

### Type scale — Custom (ratio ≈ 1.943, base 26.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 100px | 400 | 1 | -0.04em | — | AftenScreen | Oversized opening words and expressive hero typography. |
| h1 | 75px | 400 | 1 | -0.04em | — | AftenScreen | Primary hero headline and prominent section statements. |
| body | 26.5px | 400 | 1.3 | -0.04em | — | AftenScreen | Service, studio, and other large editorial copy. |
| caption | 12px | 400 | 1.4 | 0 | uppercase | BentonSans | Small uppercase project and editorial labels. |
| nav | 12px | 400 | 1.4 | 0 | uppercase | BentonSans | Compact uppercase header navigation. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 4, 10, 17, 20, 25, 42, 54, 100, 108, 160 px.
- Section rhythm 100px · element gap 10px · card padding — · max content width 1332px.

A spacious single-page editorial layout within a measured maximum width of 1332px. The hero begins on a pale-grey band with navigation at the top, a small statement offset to the right, and oversized staggered typography above a wide media frame. White sections follow with a two-column service introduction, a long single-column project showcase, and a later two-column project list. Large measured section gaps preserve a deliberately low-density rhythm.

## Shape & elevation

- Radius: xs `4px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)` on interactive elements.

The interface is predominantly flat: measured data reports no shadows and no defined border colour. Keep sections visually separated by white space and the opening pale-grey band, not elevated cards. Fine horizontal rules appear in the later project list as subtle separators; preserve restrained media framing without adding ornamental chrome.

## Imagery

A wide video frame closes the opening hero and introduces vivid project-specific imagery against the otherwise quiet canvas. Portfolio work is presented as visual evidence, with imagery and media allowed to retain their own colours rather than being forced into a brand treatment. The rest of the page relies heavily on restrained text listings and open space.

## Components

### Header navigation

Place the wordmark at the left and compact uppercase links across the top, with Contact separated toward the right. Use near-black text without filled controls.

### Hero statement

Set a very large, regular-weight two-line title asymmetrically across the grey opening band; use muted grey selectively for the ampersand.

### Hero video frame

Use a broad media frame below the headline, with the video’s own imagery supplying colour and contrast.

### Service introduction

Pair a large editorial service statement with a smaller supporting paragraph and a plain text services link.

### Featured project listing

Present projects as a spacious sequence on white, keeping project names dark and their categories muted.

### Additional project list

Arrange further projects in two columns and separate the right-side list with delicate horizontal rules.

### Contact footer

Use a large invitation and prominent email address, with compact copyright and social links along the bottom.

### Measured component styles

- **Link** (“SERVICES”): transparent background · text #070707 · radius 0px · padding 0px · 400 16px BentonSans
- **Navigation item** (“WORK”): transparent background · text #070707 · radius 0px · padding 0px · 400 12px BentonSans · uppercase

## Do

- Use #ffffff for the long portfolio canvas.
- Reserve #f2f2f2 for the opening hero band.
- Set major copy in near-black #070707.
- Use muted grey #a2a2a9 for secondary phrases and categories.
- Make the hero title oversized and asymmetrically aligned.
- Preserve generous whitespace between project entries.
- Let project media retain its own colours.

## Don't

- Don’t introduce bright interface accent colours.
- Don’t add shadows or raised-card styling.
- Don’t turn every project into a boxed card.
- Don’t center all hero typography into a conventional banner.
- Don’t make secondary labels compete with headlines.
- Don’t crowd the long portfolio with dense grids.
- Don’t treat colours inside project imagery as brand palette.

## Agent prompt

Build a new page in the 14islands visual style: minimal, editorial, monochrome, and spacious. Use Gallery White (#ffffff) as the main canvas and Mist Canvas (#f2f2f2) for a distinct opening band. Set large, regular AftenScreen-like headlines in Near Ink (#070707), with tight tracking and occasional Soft Pewter (#a2a2a9) emphasis; use a restrained BentonSans-like uppercase style for small navigation and captions. Establish hierarchy through scale, asymmetrical alignment, and whitespace rather than coloured buttons, shadows, or cards. Let one broad media area carry vivid project imagery, then present work as spacious text-led listings with muted categories and subtle separators. Keep navigation compact, sections long and calm, and the contact close direct and prominent. Treat imagery colours as project-specific, not brand tokens.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Pale-grey full-width opening band with top navigation, offset microcopy, and oversized staggered title. | top navigation, brand statement | near-black display type, muted ampersand, open negative space |
| 2 | video | Full-width video section directly below the hero, spanning the content area. | immersive video | wide media frame, project-colour imagery |
| 3 | feature-split | White two-column section with a large left statement and smaller right-side copy. | service link | editorial headline, compact supporting text |
| 4 | product-showcase | Long white portfolio sequence with generous vertical gaps and project entries. | project browsing, linked work | spacious project labels, muted categories |
| 5 | comparison | White two-column section with a secondary project list and delicate horizontal separators. | additional project links | two-column layout, hairline dividers |
| 6 | feature-split | White two-column editorial section with a large studio statement and smaller supporting copy. | culture link | large statement copy, small uppercase detail |
| 7 | contact | White two-column contact area with a large invitation, prominent email, and compact bottom row. | email contact, social links | large direct copy, minimal footer links |

## Source CSS custom properties (selected)

```css
--ease-cubic: cubic-bezier(0.66,0,0.34,1);
--ease-cubic-in: cubic-bezier(0.55,0.055,0.675,0.19);
--ease-cubic-out: cubic-bezier(0.215,0.61,0.355,1);
--ease-cubic-in-out: cubic-bezier(0.645,0.045,0.355,1);
--ease-circ-in: cubic-bezier(0.6,0.04,0.98,0.335);
--ease-circ-out: cubic-bezier(0.075,0.82,0.165,1);
--ease-circ-in-out: cubic-bezier(0.785,0.135,0.15,0.86);
--ease-expo-in: cubic-bezier(0.95,0.05,0.795,0.035);
--ease-expo-out: cubic-bezier(0.19,1,0.22,1);
--ease-expo-in-out: cubic-bezier(1,0,0,1);
--ease-quad-in: cubic-bezier(0.55,0.085,0.68,0.53);
--ease-quad-out: cubic-bezier(0.25,0.46,0.45,0.94);
--ease-quad-in-out: cubic-bezier(0.455,0.03,0.515,0.955);
--ease-quart-in: cubic-bezier(0.895,0.03,0.685,0.22);
--ease-quart-out: cubic-bezier(0.165,0.84,0.44,1);
--ease-quart-in-out: cubic-bezier(0.77,0,0.175,1);
--ease-quint-in: cubic-bezier(0.755,0.05,0.855,0.06);
--ease-quint-out: cubic-bezier(0.23,1,0.32,1);
--ease-quint-in-out: cubic-bezier(0.86,0,0.07,1);
--ease-sine-in: cubic-bezier(0.47,0,0.745,0.715);
--ease-sine-out: cubic-bezier(0.39,0.575,0.565,1);
--ease-sine-in-out: cubic-bezier(0.445,0.05,0.55,0.95);
--ease-back-in: cubic-bezier(0.6,-0.28,0.735,0.045);
--ease-back-out: cubic-bezier(0.175,0.885,0.32,1.275);
--ease-back-in-out: cubic-bezier(0.68,-0.55,0.265,1.55);
--ease-back-out-more: cubic-bezier(0.56,0.91,0.465,1.65);
--color-almost-black: #070707;
--color-almost-black--rgb: 7,7,7;
--color-background: #f2f2f2;
--color-background--rgb: 242,242,242;
--color-grey-highlight-dark: #797979;
--color-grey-highlight-dark--rgb: 121,121,121;
--color-grey-highlight-light: #a2a2a9;
--color-grey-highlight-light--rgb: 162,162,169;
--color-sand-highlight: #a59d92;
--color-sand-highlight--rgb: 165,157,146;
--color-sand: #eae5df;
--color-sand--rgb: 234,229,223;
--color-white: #fff;
--color-white--rgb: 255,255,255;
```

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