Ember Tag
#e8552bProduct-UI accent visible in feature mockups (agent tags, handoff markers) — the only chromatic punctuation, kept small and functional
Planhat
planhat.comWebsite preview
The design language
Planhat speaks in a near-monochrome editorial voice: a cinematic dark hero — photographic forest warmth fading into black — gives way to cool white space below, where content breathes between hairline borders and large, tightly-tracked display type. The system is almost entirely black, white, and a warm taupe; chromatic color is absent from the marketing surface, making any accent feel intentional when it appears. Type does the heavy lifting: a custom neo-grotesque variable face with aggressive negative tracking carries headlines up to 113px, while Inter handles UI and body at a compact rhythm. The overall feel is a printed annual report crossed with a darkroom — quiet authority, generous whitespace, and the confidence to leave large areas of the page nearly empty.
Color palette
accent
neutral
Obsidian
#000000Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color
Paper White
#ffffffPage canvas, card surfaces, filled-button text — the bright stage everything sits on
Deep Ink
#121211Secondary text and input field treatment — a near-black that softens long-form body copy without losing contrast
Graphite
#575551Muted helper text and secondary descriptions — a mid-gray that recedes behind Obsidian labels
Warm Stone
#958d7eTertiary text, subdued link and border accents — a desaturated taupe that warms the otherwise cold grayscale
Typography
Type scale
Minor Third (1.2) · 18px basedisplay
113px · 400 · 1 · -6.78px trackingThe quick brown fox jumps
heading-lg
60px · 400 · 1.1 · -2.7px trackingThe quick brown fox jumps
heading
48px · 400 · 1.1 · -1.68px trackingThe quick brown fox jumps
heading-sm
32px · 400 · 1.25 · -0.96px trackingThe quick brown fox jumps
subheading
24px · 400 · 1.2 · -0.48px trackingThe quick brown fox jumps
body-lg
18px · 400 · 1.4 · -0.36px trackingThe quick brown fox jumps
body
16px · 400 · 1.5 · -0.32px trackingThe quick brown fox jumps
body-sm
14px · 400 · 1.43 · -0.21px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Geigy LL Duplex Var
- Weights
- 400
- Sizes
- 18px, 24px, 32px, 48px, 60px, 113px
- Line height
- 1.00, 1.10, 1.20, 1.25, 1.40
- Letter spacing
- -0.06em at 113px, -0.045em at 60px, -0.035em at 48px, -0.03em at 32px, -0.02em at 24px
- Fallback
- Inter Tight or General Sans at matching weight, with manual tracking
- Features
- 'blwf' on, 'cv03' on, 'cv04' on, 'cv09' on, 'cv11' on
Display and editorial headings — a custom neo-grotesque variable face that sets the entire tone; aggressive negative tracking at 48–113px pulls letters tight for a compressed, architectural headline
Additional typeface
Inter
- Weights
- 400, 500
- Sizes
- 10px, 12px, 14px, 16px
- Line height
- 1.00, 1.20, 1.40, 1.43, 1.50
- Letter spacing
- -0.02em at 16px, -0.015em at 14px, -0.01em at 12px, 0.1em at 10px (uppercase labels)
- Fallback
- system-ui or Helvetica Neue
UI, body copy, form fields, button labels — the workhorse at 14–16px, with 10px reserved for uppercase eyebrow labels at expanded tracking
Additional typeface
system sans-serif
- Weights
- 400
- Sizes
- 12px
- Line height
- 1.20
Fallback and small utility rendering at 12px — appears in decorative or rendering contexts where Inter is not loaded
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Max width
- 1280px
- Section gap
- 64-80px
- Card padding
- 24-32px
- Element gap
- 8-12px
Border radius
tags
999pxcards
8pximages
4pxinputs
4pxbuttons
4pxSpacing scale
2px4px5px6px8px10px11px12px14px16px17px18px20px21px24px30px32px36px40px46px48px64px72px96px120pxGuidelines
Do
- Use Geigy LL Duplex Var for all display and heading text at 32px and above, with negative tracking between -0.02em and -0.06em scaled to size
- Keep the palette strictly monochromatic on marketing surfaces — black, white, and the Warm Stone taupe are the only permitted colors outside the hero photograph
- Set all button text to 10–12px Inter 500 uppercase with 0.1em tracking and a trailing chevron arrow for directional actions
- Maintain 4px radius on all interactive elements (buttons, inputs, tags) and 8px on cards and content panels
- Use 1px hairline #000000 borders for table-like grids and card dividers instead of background-color separation
- Let display headlines run to 48–60px on section intros and reserve 113px exclusively for hero-level statements
- Anchor every section with a 10px uppercase eyebrow label at 0.1em tracking, 16–24px above its heading
Don’t
- Do not introduce chromatic color on the marketing surface — if a color is needed, use it at functional-product level only (inside mockup illustrations), never on CTAs, headings, or background fills
- Do not use rounded radii above 8px on content cards — the system reads as architectural and precise, not soft or playful
- Do not set display type in Inter or any system font — the custom Geigy face with its stylistic alternates (cv03, cv04, cv09, cv11) is the brand signature
- Do not add drop shadows to cards or panels — separation is achieved through hairline borders and surface color shifts only
- Do not use letter-spacing looser than -0.01em on body text or positive tracking below 10px — the system relies on density and tightness
- Do not center-align body paragraphs or long-form descriptions — keep them left-aligned to maintain the editorial print feel
- Do not place text directly on the hero photograph without the dark gradient overlay — 60% black wash minimum is required for legibility
Components
Filled Dark Button
Primary navigation action (LOG IN)Solid #000000 background, white (#ffffff) text at 12px Inter 500, uppercase tracking +0.1em. 4px radius. 12px 20px padding. No shadow.
Outlined Ghost Button
Secondary action (REQUEST A DEMO) on light surfacesTransparent background, 1px #000000 border, #000000 text at 12px Inter 500 uppercase, 0.1em tracking, trailing chevron arrow. 4px radius. 12px 20px padding.
Outlined Light Button
Secondary action (REQUEST A DEMO) on dark heroTransparent background, 1px #ffffff border, #ffffff text at 12px Inter 500 uppercase, 0.1em tracking, trailing chevron. 4px radius. 12px 20px padding.
Top Navigation Bar
Persistent headerFull-width white bar, 64–72px height. Left: Planhat wordmark in Obsidian. Center: horizontal menu items at 14px Inter 400 with dropdown carets (Solutions, Platform, Customers, Explore, Pricing). Right: LOG IN filled dark button + REQUEST A DEMO outlined ghost button. Hairline #000000 1px bottom border.
Hero Section
Above-the-fold brand statementFull-viewport dark photographic background (forest/nature imagery with golden light) overlaid with ~60% black gradient wash. Eyebrow text in 10px uppercase white at 0.1em tracking. Headline in 60px Geigy Var 400, -0.045em tracking, white. Subtext in 18px Inter 400 white. CTA: outlined light button with chevron.
Logo Grid Card
Social proof / customer logos12-cell grid (2 rows × 6 columns), 1px #000000 hairline borders, #ffffff background. Each cell ~140px tall, centered monochrome logo at 60% black. No padding inside cells, no individual cell radius.
Feature Column Card
Three-column feature explanation with embedded product UI#f5f5f3 or #f0eeea background panel, 8px radius, 24–32px internal padding. Contains a product mockup illustration at top (stylized UI elements on neutral surface) and below: 18px Inter 400 title in Obsidian + 14px Inter 400 body in Graphite. No drop shadow; separation comes from hairline borders and surface color shift.
Section Heading Pair
Two-column section introLeft: 48px Geigy Var 400, -0.035em, Obsidian, 2–3 lines. Right: 18px Inter 400 Graphite, 1–2 sentence description. Generous gap between columns; vertically aligned to the grid.
Eyebrow Label
10px Inter 500 uppercase, 0.1em tracking, Obsidian. Sits 16–24px above its heading with 2px line-height-tight baseline.Product Mockup Panel
Embedded UI illustration within feature cardsNeutral-warm background (#f0eeea) containing floating card elements: small tag pills with 4px radius and faint borders, connecting lines, icon squares with 4px radius, occasional Ember Tag (#e8552b) accent on active/agent labels. All internal elements use 4px radius consistently.
Footer Link Group
Site map navigationVertical stack at 14px Inter 400, 8px row gap, Obsidian text. Section title in 12px Inter 500 uppercase, 0.1em tracking, Graphite.
Surfaces & elevation
Level 0
Page Canvas
#ffffffDefault light page background
Level 1
Card Surface
#f5f5f3Lightly tinted card and feature-block backgrounds (derived from white + warm undertone)
Level 2
Product Mockup Surface
#f0eeeaNeutral-warm panel behind embedded product UI illustrations
Level 3
Hero Overlay
#000000Dark photographic hero with semi-transparent black wash, text in white
The design avoids drop shadows almost entirely. Elevation is communicated through three mechanisms instead: (1) surface color shift (white → faint warm gray → deeper warm gray), (2) 1px hairline borders in Obsidian, and (3) generous negative space between elements. Where shadows do appear — inside embedded product-UI mockups — they are extremely soft and warm-tinted, serving as illustration detail rather than as a UI convention.
Layout & imagery
Layout
Max-width 1280px centered content with a persistent full-width top nav. The hero is the only full-bleed element: a full-viewport dark photographic background with left-aligned text block occupying roughly 45% of the viewport width. Below the fold, content flows in generous 64–80px vertical sections on pure white. Sections alternate between two patterns: (1) a two-column intro — large display headline left, short description right — followed by visual content, and (2) centered narrow text blocks. Feature explanations use a 3-column card grid. The logo grid is a 6×2 table-like layout with hairline borders. Navigation is a single horizontal bar with dropdown menus and a right-aligned CTA pair. The overall density is spacious despite the compact base spacing unit — large type and generous vertical gaps give each section room to breathe.
Imagery
Photography is reserved exclusively for the hero: a single full-bleed dark environmental shot — a misty forest with warm golden light filtering through — that sets a cinematic, almost editorial tone. Below the fold, there is no photography at all; the visual language shifts entirely to clean white space, hairline-bordered logo grids, and stylized product-UI mockups rendered as flat illustrations on neutral warm panels. Icons are simple monochrome line/solid glyphs at 16–20px. The product mockups themselves are mini product screenshots with subtle drop shadows and small chromatic accent tags (Ember Tag) — these are illustrative, not photographic.
Design notes
Agent Guide
**Quick Color Reference** - text: #000000 (Obsidian) - background: #ffffff (Paper White) - border: #000000 (Obsidian, 1px hairline) - muted text: #575551 (Graphite) - warm accent: #958d7e (Warm Stone) - primary action: no distinct CTA color **Example Component Prompts** 1. *Hero section*: Full-viewport dark photographic background (forest/nature with warm golden tones) overlaid with ~60% black gradient wash. Eyebrow at 10px Inter 500 uppercase white, 0.1em tracking. Headline at 60px Geigy Var 400 white, letter-spacing -2.7px, line-height 1.1. Subtext at 18px Inter 400 white. Ghost button: transparent background, 1px white border, white text 12px uppercase 0.1em, 4px radius, 12px 20px padding, trailing chevron. 2. *Section intro pair*: Left column headline at 48px Geigy Var 400 Obsidian, letter-spacing -1.68px, line-height 1.1, 2–3 lines. Right column description at 18px Inter 400 Graphite (#575551), line-height 1.4. 64–80px vertical gap above, on #ffffff canvas. 3. *Feature card with product mockup*: 8px radius panel with #f0eeea background, 24–32px internal padding. Top: stylized product UI illustration on neutral-warm surface — floating card elements with 4px radius, hairline borders, small tag pills. Bottom: 18px Inter 400 Obsidian title, 14px Inter 400 Graphite description. No shadow. 4. *Top navigation bar*: Full-width white bar, 64–72px height, 1px Obsidian bottom border. Left: Planhat wordmark in Obsidian. Center: menu items at 14px Inter 400 with dropdown carets. Right: filled dark button (#000000 bg, #ffffff text, 12px Inter 500 uppercase 0.1em, 4px radius, 12px 20px padding) labeled LOG IN, followed by outlined ghost button (1px Obsidian border, transparent bg, Obsidian text, same text style) labeled REQUEST A DEMO with chevron. 5. *Logo grid*: 6-column × 2-row table on #ffffff, 1px Obsidian hairline borders between cells, no internal cell padding, each cell ~140px tall with a centered monochrome logo at 60% black.
Typographic Signature
The headline face — Geigy LL Duplex Var — carries five active stylistic alternates (cv03, cv04, cv09, cv11, blwf) that subtly reshape letterforms for a neo-grotesque feel. Combined with aggressive negative tracking at display sizes (-0.06em at 113px), this creates the compressed, architectural quality that defines the brand. Never substitute a system grotesque here; the alternates are the differentiator. Body text in Inter at 14–16px with light negative tracking (-0.01em to -0.02em) keeps the density tight without crowding.
Similar brands
Linear
Same near-monochrome editorial system with a custom display typeface, hairline borders, and tight tracking on large headlines
Attio
Similar clean light-surface SaaS aesthetic with generous whitespace, precise grid layouts, and minimal chromatic accent
Vercel
Monochrome palette, large tightly-tracked display type, and architectural white-space-driven composition
Stripe
Editorial-grade typography, restrained neutral palette, and the confidence to leave large page areas visually empty
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
