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

# Trunk · Design System

> Monochrome software, drawn like a world to explore

**Theme:** dark · **Industry:** devtools · **Source:** https://trunk.io/ · **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._

Trunk pairs a near-black, monochrome interface with a hand-drawn landscape that turns CI tooling into a distinctive visual narrative. Spacious typography, restrained borders, and bright white calls to action keep a long, product-led page easy to scan.

## North star

Let monochrome line art and product evidence provide character, while a near-black canvas and crisp white type keep every action legible.

## Overview

The page builds its identity from a near-black canvas, white type, and muted gray supporting text; color is deliberately held back so the product story and monochrome artwork carry attention. The opening hero reverses that darkness with a bright, hand-drawn landscape, then fades into the dark page beneath it. A Neue sans-serif face gives the headline strong presence without decorative styling, while smaller text stays compact and readable. The centered navigation and hero sit above a narrow, controlled content column, with broad vertical gaps separating product sections. Product screenshots, customer logos, and testimonial cards provide evidence of the software in use; they sit against dark surfaces rather than competing with the page. Thin charcoal borders define cards and interfaces where needed, while white pill-like buttons create the clearest interaction cue. Across the long page, recurring line-art dividers and restrained contrast make the layout feel continuous rather than fragmented.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Night Canvas | `#08090b` | `--color-night-canvas` | brand | Dominant page canvas, dark navigation and CTA surfaces, and the base tone of the footer. |
| Soft Ash | `#b3b3b5` | `--color-soft-ash` | neutral | Muted body copy and secondary links on dark backgrounds. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Primary headings and text, light Documentation CTA, and contrast against dark sections. |
| Border Charcoal | `#232323` | `--color-border-charcoal` | neutral | Hairline card outlines and subtle separators across dark interface surfaces. |
| Pure Black | `#000000` | `--color-pure-black` | surface | Black panel and footer areas; also sampled in product-card text and mockup regions. |
| Graphite Fade | `#2d2e2f` | `--color-graphite-fade` | neutral | Dark gray contribution to the measured navigation and gradient treatment, not a prominent standalone brand accent. |
| Cloud Gray | `#dddddd` | `--color-cloud-gray` | neutral | Secondary light-gray text, providing softer contrast than white. |
| Cool Mist | `#c1c5c8` | `--color-cool-mist` | neutral | Occasional subdued gray text; not a defining page color. |

### Semantic aliases

`--color-canvas` → `#08090b` (Night Canvas) · `--color-surface` → `#000000` (Pure Black) · `--color-surface-2` → `#ffffff` (Paper White) · `--color-text` → `#ffffff` (Paper White) · `--color-text-muted` → `#b3b3b5` (Soft Ash) · `--color-text-subtle` → `#dddddd` (Cloud Gray) · `--color-border` → `#232323` (Border Charcoal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#08090b` | 19.92:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#b3b3b5` | `#08090b` | 9.52:1 | AAA |
| `#b3b3b5` | `#000000` | 10.03:1 | AAA |
| `#b3b3b5` | `#ffffff` | 2.09:1 | fail |
| `#dddddd` | `#08090b` | 14.67:1 | AAA |
| `#dddddd` | `#000000` | 15.46:1 | AAA |
| `#dddddd` | `#ffffff` | 1.36:1 | fail |

### Gradients

- `radial-gradient(0px, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0))`
- `linear-gradient(rgb(8, 9, 11) 28.13%, rgb(10, 10, 10) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| neue | `--font-body` | webfont | 400, 500, 700, 300 | All page typography, including display headings, navigation, body copy, links, and buttons. | Inter |

- **neue:** A clean sans-serif with medium-weight display and navigation, regular supporting copy, and subtly tight headline tracking; casing stays natural.

### Type scale — Perfect Fourth (ratio ≈ 1.338, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 500 | 1 | -0.026em | — | neue | Large hero or section display headline. |
| h1 | 45px | 500 | 1 | 0 | — | neue | Primary page headline, including the hero title. |
| h2 | 36px | 400 | 0.94 | -0.028em | — | neue | Major product-section headings. |
| h3 | 24px | 700 | 1.5 | 0 | — | neue | Feature titles and emphasized card headings. |
| h4 | 18px | 400 | 1.3 | 0 | — | neue | Smaller supporting headings within product content. |
| body | 14px | 400 | 1.4 | 0 | — | neue | Default descriptive copy and supporting paragraphs. |
| caption | 13.5px | 400 | 1 | -0.013em | — | neue | Compact notes, labels, and low-emphasis supporting text. |
| button | 17px | 500 | 1.18 | -0.009em | — | neue | CTA labels such as Book demo and Documentation. |
| nav | 17px | 500 | 1.18 | 0 | — | neue | Top navigation labels and menu items. |
| link | 14px | 400 | 1.5 | 0 | — | neue | Inline secondary links within feature descriptions. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 3, 4, 5, 6, 8, 9, 12, 13, 14, 15, 18, 24, 36, 45 px.
- Section rhythm 263px · element gap 12px · card padding 27px · max content width 938px.

A centered, spacious composition uses a measured content maximum of 938px for much of the page, with wider visual bands and artwork extending beyond it. The navigation is a compact horizontal capsule, followed by a centered hero and logo row. Product sections repeat a clear heading, supporting line, large screenshot or feature cards, then smaller details. Generous section gaps separate these groups; card content is denser but remains aligned and orderly. The overall density is spacious, with consistent centered alignment.

## Shape & elevation

- Radius: button `18px` · card `24px` · media `50%` · nav `12px` · xs `3px` · sm `12px` · md `18px` · lg `24px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease-in-out` on interactive elements.

The interface is predominantly flat, with no measured shadows. Thin #232323 borders outline dark cards and separate some feature panels. Contrast, background transitions, and layered artwork create depth: the bright hero fades down into the near-black page, while screenshots sit visually above the surrounding canvas without heavy framing.

## Imagery

The hero uses monochrome, hand-drawn landscape line art with a winding path as a broad atmospheric backdrop. Product UI screenshots appear as dark, slightly angled showcase images, while customer marks and testimonial cards add proof. Illustrations and product imagery are treated as narrative or evidence rather than decorative color accents; subtle fades help imagery blend into the dark canvas.

## Components

### Capsule navigation

A centered, light navigation capsule holds the Trunk mark, menu links, sign-in, and a dark Book demo action.

### Hero CTA pair

A dark Book a demo button sits beside a white Documentation button; both use concise labels and rounded pill-like forms.

### Product showcase

Large dark product screenshots anchor feature sections, with a centered white learn-more action nearby.

### Feature cards

Dark cards use thin #232323 outlines and rounded corners, grouping short feature descriptions and inline links.

### Customer proof

Customer logos and testimonial cards appear in horizontal bands against the dark page, adding social proof between product sections.

### Newsletter form

The footer includes a compact email field and Subscribe action alongside grouped resource and company links.

### Measured component styles

- **Primary button** (“→ Documentation”): background #ffffff · text #08090b · radius 18px · padding 0px · 500 18px neue
- **Secondary button** (“Book demo”): background #08090b · text #ffffff · radius 999px · padding 0px · 500 17px neue
- **Link** (“Learn about quarantining”): transparent background · text #b3b3b5 · radius 0px · padding 0px · 400 14px neue
- **Input**: transparent background · text #ffffff · radius 0px · padding 0px 14.3px · 400 13.5px neue
- **Card** (“We would have never known how many flaky”): transparent background · text #ffffff · border 1px solid #232323 · radius 24px · padding 36px 18px · 400 16px neue
- **Navigation item** (“Platform”): transparent background · text #ffffff · radius 0px · padding 0px · 500 16px neue

## Do

- Use #08090b as the dominant interface canvas.
- Reserve bright white for key headings and primary contrast.
- Use muted gray for supporting copy and secondary links.
- Keep product screenshots and customer proof inside a spacious vertical rhythm.
- Use thin charcoal borders rather than heavy card shadows.
- Let monochrome line art bridge the hero and dark page.

## Don't

- Do not introduce a bright accent palette into the interface.
- Do not crowd the centered hero with extra content.
- Do not use heavy shadows to lift cards.
- Do not make every text element pure white.
- Do not let screenshots overwhelm the page hierarchy.
- Do not replace the hand-drawn monochrome mood with glossy stock imagery.

## Agent prompt

Build a new Trunk-style devtools page with a near-black #08090b canvas and a restrained monochrome palette. Use Paper White (#ffffff) for primary headings and high-contrast actions, Soft Ash (#b3b3b5) for secondary copy, and Border Charcoal (#232323) for subtle card outlines. Set all type in a clean Neue-like sans-serif such as Inter; keep headlines confident, supporting copy compact, and labels natural-case. Center the navigation and main content within a controlled column, then use broad section gaps to separate product stories. Pair large dark UI screenshots with concise feature cards and clear learn-more actions. Use hand-drawn monochrome line art as atmospheric narrative imagery, fading it into the dark canvas. Keep surfaces flat, avoid unnecessary color and shadows, and maintain a clear CTA hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Long single-column page: capsule navigation, illustrated hero, customer proof, product sections, testimonials, closing CTA, and footer. | primary demo CTA, documentation CTA, customer proof, feature links | dark canvas, monochrome line art, outlined cards, rounded buttons, screenshot showcases |

## Source CSS custom properties (selected)

```css
--color-white: #fff;
--color-gray-lightest: #fafafa;
--color-gray-lighter: #ddd;
--color-gray-light: #b3b3b5;
--color-gray: #89898d;
--color-gray-dark: #565656;
--color-gray-darker: #232323;
--color-gray-darkest: #08090b;
--color-black: #000;
--color-gray-blue: #c1c5c8;
--color-gray-blue-dark: #20232d;
--color-purple: #941df5;
--color-blue: #2f6eeb;
--color-green: #62c772;
--color-ci-green: #27ca68;
--color-orange: #f2a63b;
--color-reddish-orange: #ec592e;
--color-red: #eb544d;
--ease-soft: cubic-bezier(.645, .045, .355, 1);
--ease-power: cubic-bezier(.25, .46, .45, .94);
--duration-fast: .17s;
--duration-normal: .35s;
--duration-slow: .55s;
```

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