14islands
A minimal, editorial studio site built on a white canvas with near-black ink text and a small set of warm, desaturated neutral accents (sand, off-white) rather than a typical tech-blue palette. The measured capture is color-only — no typography, spacing, radius, shadow, or component data was extracted by the frequency analyzer, and a large share of the \"accent\" swatches trace back to an embedded Twitter/X widget's own brand palette rather than to 14islands' own design language. This entry documents what was measured faithfully and flags the rest as gaps.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display-lg
56px · 600 · 1.1
The quick brown fox jumps
title
24px · 600 · 1.3
The quick brown fox jumps
body
16px · 400 · 1.5
The quick brown fox jumps
caption
13px · 400 · 1.4
The quick brown fox jumps
button
14px · 600 · 1
The quick brown fox jumps
nav-link
14px · 500 · 1.4
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 8px | |
| sm | 12px | |
| md | 16px | |
| lg | 24px | |
| xl | 32px | |
| xxl | 48px | |
| section | 80px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| sm | 4px | |
| md | 8px | |
| lg | 16px | |
| pill | 9999px |
FAQ
- What colors does 14islands use?
- 14islands's core palette includes #070707, #ffffff, #fafafa, #f2f2f2, #eaeaea. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the 14islands DESIGN.md.
- What font does 14islands use?
- 14islands's primary typeface is system-ui. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the 14islands design system?
- A minimal, editorial studio site built on a white canvas with near-black ink text and a small set of warm, desaturated neutral accents (sand, off-white) rather than a typical tech-blue palette. The m…