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

# Planhat · Design System

> Quiet editorial clarity, grounded in a dark landscape.

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

Planhat pairs expansive editorial typography with restrained monochrome interfaces and dramatic landscape imagery. Lime-green event accents punctuate an otherwise black-and-white page.

## North star

Use dramatic tonal contrast and oversized, tightly tracked editorial headlines, keeping everything else quiet and precise.

## Overview

The page builds contrast through large, quiet fields of white and deep black, with #000000 also anchoring the hero’s darkened mountain photograph. White typography and controls sit cleanly against the image, while the vivid #c0ff66 event strip acts as a deliberately isolated signal rather than a recurring interface colour. Oversized, tightly tracked display headlines provide an editorial voice; compact ABC Diatype labels and body copy keep navigation, captions and supporting information efficient. Content is centered within a broad desktop frame, but text blocks and product diagrams retain generous surrounding white space. The long scroll alternates between open white sections and a substantial black platform section, creating clear chapter changes without ornamental effects. Fine rules and thin outlined grids organize logos, metrics and cards. The overall impression is precise and understated: let imagery, scale and tonal contrast carry the emphasis, and keep interface details small and functional.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Ink | `#000000` | `--color-deep-ink` | brand | Primary text, navigation, inverse canvas and the extensive dark platform section. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, white section backgrounds, hero text and filled primary CTA. |
| Soft Mist | `#f3f3f3` | `--color-soft-mist` | surface | Pale neutral surface detected in the interface; use sparingly for subtle separation. |
| Warm Charcoal | `#403a35` | `--color-warm-charcoal` | neutral | Muted warm-toned text detail; subordinate to the black-and-white interface. |
| Electric Lime | `#c0ff66` | `--color-electric-lime` | accent | High-visibility event announcement strip below the hero; not a general-purpose surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Deep Ink) · `--color-surface-2` → `#f3f3f3` (Soft Mist) · `--color-text` → `#000000` (Deep Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-accent` → `#c0ff66` (Electric Lime)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f3f3f3` | 18.93:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#f3f3f3` | 1.11:1 | fail |
| `#c0ff66` | `#ffffff` | 1.18:1 | fail |
| `#c0ff66` | `#000000` | 17.74:1 | AAA |
| `#c0ff66` | `#f3f3f3` | 1.07:1 | fail |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABC Diatype Regular | `--font-body` | webfont | 400 | Body copy, supporting text, and compact interface labels. | Inter |
| ABC Diatype Medium | `--font-abc-diatype-medium` | webfont | 500 | Uppercase eyebrow and caption labels. | Inter |
| Geigy LL Duplex Var Variable Reg | `--font-display` | webfont | 400 | Display headlines and section headings. | Manrope |
| .\7f  \7f  | `--font-7f-7f` | system | 400 | System-font fallback where the custom webfonts are unavailable. | Arial |

- **ABC Diatype Regular:** Regular weight; small, tightly tracked body text keeps supporting information compact.
- **ABC Diatype Medium:** Medium weight; uppercase labels use generous tracking for a technical editorial feel.
- **Geigy LL Duplex Var Variable Reg:** Regular display weight; large headlines use strongly negative tracking and close line spacing.
- **.\7f  \7f :** Fallback only; retain the page’s compact, neutral sans-serif appearance.

### Type scale — Perfect Fifth (ratio ≈ 1.529, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 117px | 400 | 1 | -0.06em | — | Geigy LL Duplex Var Variable Reg | Large, expressive display headlines in prominent page sections. |
| h1 | 72px | 400 | 1.05 | -0.05em | — | Geigy LL Duplex Var Variable Reg | Hero headline introducing Pi and the customer agent. |
| h2 | 48px | 400 | 1.1 | -0.045em | — | Geigy LL Duplex Var Variable Reg | Major section headlines and platform statements. |
| h3 | 32px | 400 | 1.2 | -0.035em | — | Geigy LL Duplex Var Variable Reg | Secondary feature headings and card titles. |
| h4 | 24px | 400 | 1.25 | -0.03em | — | Geigy LL Duplex Var Variable Reg | Smaller content headings and supporting section titles. |
| body | 14px | 400 | 1.48 | -0.02em | — | ABC Diatype Regular | Paragraphs, product explanations and supporting content. |
| caption | 10px | 500 | 1.5 | 0.1em | uppercase | ABC Diatype Medium | Small uppercase labels, metadata and compact captions. |
| link | 10px | 400 | 1.5 | 0 | — | ABC Diatype Regular | Small navigation and inline link text. |
| eyebrow | 10px | 500 | 1.5 | 0.1em | uppercase | ABC Diatype Medium | Uppercase section identifiers above headline content. |

OpenType features in use: `"blwf", "cv03", "cv04", "cv09", "cv11"`, `"blwf", "cv03", "cv04", "cv09", "cv11", "lnum"`.

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 2, 4, 5, 6, 8, 10, 12, 24, 40, 48, 64 px.
- Section rhythm 40px · element gap 5px · card padding — · max content width 1200px.

The desktop page uses a broad centered content frame, measured at a maximum width of 1200px, with compact overall density but generous whitespace around major content. Hero copy is left aligned over full-bleed photography; most following sections return to white backgrounds and structured columns. A long black platform chapter interrupts the white scroll with centered headings and sparse diagram content. Thin rules organize logo cells, metric panels and feature cards. Use measured spacing values rather than adding arbitrary gaps: the supplied scale ranges from 2px to 64px, with a 40px section gap.

## Shape & elevation

- Radius: button `1px` · media `4px` · link `8px` · xs `1px` · sm `4px` · md `8px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.44, 0, 0.56, 1)` on interactive elements.

The design is largely flat: measured shadows are absent and decorative gradients are not a defining treatment. Separate content with fine hairlines, subtle outlined grids and clear shifts between white and black section backgrounds. Buttons are nearly square, with a measured 1px radius; avoid floating-card effects.

## Imagery

The hero is dominated by full-bleed aerial mountain photography, darkened so white navigation, headline and CTA remain legible. Elsewhere, favor sparse product diagrams, interface imagery and quiet logo treatments on white or black. Keep imagery broad and atmospheric rather than decorative; the lime announcement band is a separate graphic-like strip, not part of the photograph.

## Components

### Hero

Full-bleed dark mountain image behind a compact top navigation and left-aligned white headline, supporting copy and paired CTAs.

### Primary CTA

White button with black uppercase text; measured radius is 1px and padding is 10px 16px 10px 18px.

### Outline CTA

Transparent button with a fine light outline, white uppercase label and directional arrow, paired with the filled demo CTA.

### Event strip

Bright #c0ff66 full-width announcement immediately below the hero, divided into compact event, date, location and ticket link cells.

### Logo grid

Customer marks arranged in a sparse, white panel with thin grid rules and substantial empty cells.

### Dark platform section

Large black section using white headings and restrained diagram labels, with minimal linework and generous empty space.

### Footer

Multi-column link directory on white, using small uppercase group labels, compact text and a newsletter signup.

### Measured component styles

- **Primary button** (“REQUEST A DEMO”): background #ffffff · text #000000 · radius 1px · padding 10px 16px 10px 18px · 400 12px sans-serif
- **Link** (“THE LEADING CUSTOMER PLATFORM The next g”): transparent background · text #0000ee · radius 0px · padding 0px · 400 12px sans-serif
- **Input**: transparent background · text #000000 · radius 0px · padding 0px · 400 12px ABC Diatype Regular

## Do

- Lead with a darkened, atmospheric landscape when using a photographic hero.
- Keep display headlines oversized and tightly tracked.
- Use black and white as the primary page-wide contrast.
- Reserve Electric Lime #c0ff66 for a narrow, high-attention accent.
- Use compact uppercase labels to distinguish section metadata.
- Separate long page chapters with clear tonal shifts and generous whitespace.

## Don't

- Do not spread the lime accent across ordinary buttons or backgrounds.
- Do not add drop shadows or glossy gradients.
- Do not make every section a boxed card.
- Do not crowd large headlines with nearby supporting elements.
- Do not use bright imagery that competes with hero copy.
- Do not replace fine rules with heavy borders.

## Agent prompt

Build a new Planhat-style page with a restrained editorial SaaS aesthetic. Use Gallery White (#ffffff) and Deep Ink (#000000) as the main canvas and text contrast; reserve Electric Lime (#c0ff66) for a single announcement or similarly exceptional accent. Set prominent headlines in a high-character display sans, with tight tracking and compact line-height, and use a clean neutral sans for small body copy and uppercase metadata. Favor a centered, broad content frame, left-aligned hero copy, generous whitespace, thin rules, and clear white-to-black chapter transitions. If using a hero photo, choose atmospheric landscape imagery and darken it enough for crisp white text. Keep CTAs nearly square, avoid shadows and decorative gradients, and make interface details quiet and functional.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | footer | Four-column footer navigation and signup area on white, followed by a large closing brand statement and compact legal links. | Grouped navigation links, Newsletter signup, Legal and social links | Small uppercase column labels, Thin rules, Compact text, Black subscription button |

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