# 14islands · Design system migration spec

> Source: https://14islands.com  ·  Curated by OpenDesign  ·  en

> Exemplary minimalist agency design that uses extreme typographic scale and restraint as its primary design language.

## 1. Identity DNA

The 14islands design system operates like a high-end architectural firm for digital products, where every decision is deliberate and nothing is decorative. Its identity is built on **premium minimalism** and digital craft, using restraint as its primary tool for creating impact.

**One-liner:** A minimalist design agency showcasing premium digital products and experiences through restrained typography and bold photography.
**Keywords:** premium · minimalist · digital craft · design-led
**Analogy:** A high-end architectural firm for digital products

## 2. Color

The color system is a strict monochromatic discipline, using a light gray field, near-black ink, and a single muted accent to create a neutral stage. This near-monochromatic palette relies on extreme typography scale and high-chroma project photography to provide all the visual impact.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F2F2F2` | main background |
| `--ink` | `#070707` | body text |
| `--ink-soft` | `#A2A2A9` | secondary text |
| `--muted` | `#A2A2A9` | placeholder |
| `--line` | `rgba(7, 7, 7, 1)` | divider |

**Color principle:** Near-monochromatic palette relying on extreme typography scale and high-chroma project photography for impact.

The governing principle is color as a neutral container, never as a primary source of expression or decoration.

## 3. Typography

Typographic voice is defined by geometric and humanist sans-serif choices at massive scales with tight negative tracking. The system employs a clear hierarchy from hero headlines down to small metadata, using type as the primary structural element.

- **Display:** geometric-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 180px | 0.8 | 400 | -9px | Hero headlines and primary statements |
| heading | 100px | 1.0 | 400 | -4px | Section titles |
| subhead | 75px | 1.0 | 400 | -3px | Secondary headings and large labels |
| body | 16px | 2.16 | 400 | 0px | Primary readable text and navigation |
| caption | 12px | 1.4 | 400 | 0px | Small labels and metadata |

## 4. Spacing

Spacing follows a loose vertical rhythm, using generous padding as the primary method for creating hierarchy and grouping content.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Loose vertical rhythm with generous padding around primary elements.

## 5. Surfaces

Surfaces are flat and borderless, creating a clean digital plane where content floats in a carefully measured field. Separation between sections is achieved solely through strategic white space and the placement of full-bleed imagery.

- **Radius:** sm 4px · md 4px · lg 5px · pill 999px
- **Borders:** No visible borders; relies on spacing and image edges for separation.

## 6. Layout

The layout skeleton is built on an asymmetric 12-column grid that breaks from rigid symmetry. Full-width hero sections provide dramatic entry points, while project galleries adopt a more structured two-column format.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Asymmetric grid with full-width hero sections and 2-column project galleries.

## 7. Motion & Interaction

Motion is treated as a subtle layer of feedback, not as decoration. All transitions use smooth cubic-bezier easing, applying transform and opacity changes to maintain a sense of refined precision.

- **Durations:** micro 200ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.46, 0.45, 0.94)`
- **Patterns:**
  - Smooth transform transitions on hover
  - Subtle fade-ins on scroll

- **Hover:** Cursor changes to pointer; subtle scale or color transitions on interactive elements
- **Click:** Standard link navigation
- **Transition:** Smooth cubic-bezier easing for transforms and color changes
- **Keyboard:** Standard tab navigation through menu links

## 8. Voice & Don'ts

The editorial voice is professional, confident, and minimal, mirroring the visual system's clarity. Headlines are large, geometric, and set in lowercase or sentence-case, while calls-to-action are understated text links, often in uppercase small caps.

- **Tone:** Professional, confident, and minimal
- **Headline style:** Large, lowercase or sentence-case geometric sans-serif with tight tracking
- **CTA style:** Understated text links, often uppercase small caps
- **Avoid:** Decorative elements / Excessive color / Cluttered layouts

### Don'ts
- ❌ Don't use multiple accent colors — screenshot shows a strict monochrome palette with light gray and black.
- ❌ Don't center-align all text — screenshot shows mixed alignments including left-aligned and asymmetric layouts.
- ❌ Don't use heavy drop shadows — screenshot shows completely flat surfaces with no depth effects.
- ❌ Don't use rounded container corners — screenshot shows sharp edges or very minimal rounding.
- ❌ Don't use thick borders to separate sections — screenshot shows separation through white space and image placement.
- ❌ Don't use busy decorative patterns — screenshot relies entirely on clean typography and photography.

The system deliberately does not pursue decoration, excessive color, or visual clutter, trusting the core elements of type, image, and space to communicate fully.

## System Prompt (paste into AI tool)

```
14islands is a premium design agency website characterized by extreme typographic scale, a near-monochromatic palette (bg: #F2F2F2, ink: #070707, muted: #A2A2A9), and generous white space. The design uses geometric and humanist sans-serif fonts at massive scales (up to 180px) with tight negative tracking. Layouts are asymmetric with full-bleed photography project cards. Critical donts: avoid multiple accent colors, avoid centering all text, avoid heavy shadows, avoid thick borders, avoid decorative patterns, and avoid rounded corners on cards.
```
