Bone White
#ffffffPage canvas, card surfaces, heading text on dark sections, overlaid text on photography
Base Design
basedesign.comWebsite preview
The design language
Base Design operates as a stark, print-inspired editorial system: a pure two-tone canvas where black and white alternate as full-bleed sections without mediation. Typography carries every visual decision — a single custom grotesque (BaseGrotesk) speaks in one voice across 12px nav labels and 65px display wordmarks, with consistent 0.01em tracking tightening the rhythm. Photography is the only color, presented as oversized documentary frames that bleed to the edges and let white text sit directly on the image. Components are almost invisible: pill-shaped buttons, hairline rules, and zero decorative chrome. The system feels like flipping through a brutalist monograph — nothing is colored, everything is composed.
Color palette
neutral
Lamp Black
#000000Primary text, display wordmarks, full-bleed dark section backgrounds, hairlines, border rules, button borders
Fog
#abababMuted secondary text, inactive link borders, de-emphasized helper text
Typography
Type scale
Minor Third (1.2) · 15px basedisplay
65px · 300 · 1.15The quick brown fox jumps
text-60
60px · 300 · 1.17The quick brown fox jumps
heading-lg
50px · 500 · 1.17The quick brown fox jumps
heading
32px · 700 · 1.2The quick brown fox jumps
heading-sm
30px · 300 · 1.2The quick brown fox jumps
subheading
25px · 300 · 1.3The quick brown fox jumps
body
18px · 400 · 1.33The quick brown fox jumps
body-sm
16px · 400 · 1.4The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
BaseGrotesk
- Weights
- 300, 400, 500, 700
- Sizes
- 12, 16, 18, 25, 30, 32, 50, 60, 65
- Line height
- 1.15 (display), 1.20 (headings), 1.30–1.40 (body)
- Letter spacing
- 0.0100em across all sizes — consistent positive tracking tightens the grotesque's natural width
- Fallback
- Inter, Neue Haas Grotesk, or Söhne
Sole typeface for everything — navigation, body copy, buttons, and the 60–65px display wordmark. Weight 300 carries body and large display copy, 500 is reserved for active states and emphasis, 700 appears in button labels and the page title. Custom grotesque with squared geometry; substitute with Inter or Neue Haas Grotesk.
Spacing & shape
Spacing
- Density
- spacious
- Base unit
- 6px
- Section gap
- 40px
- Card padding
- 20px
- Element gap
- 7px
Border radius
tags
54pxcards
0pximages
0pxbuttons
54pxSpacing scale
7px8px20px22px25px30px35px40px65pxGuidelines
Do
- Use BaseGrotesk weight 300 at 60–65px for the page or brand wordmark — the oversized light-weight grotesque is the signature
- Maintain a strict two-tone palette: #000000 and #ffffff only, with #ababab reserved for de-emphasized secondary text
- Alternate full-bleed white and full-bleed black sections without gradients, borders, or transitions between them
- Set every button to 54px border-radius — the pill shape is a defining element, not a style choice
- Let photography bleed to the viewport edges with 0px radius and overlay white text directly on the image with no background plate
- Use 0.01em positive letter-spacing consistently across all type sizes and weights
- Keep navigation text at 12–16px and separate links with 25–30px horizontal margins — the nav should feel like quiet marginalia
Don’t
- Never introduce chromatic color — no blues, reds, greens, or any accent hue anywhere in the system
- Never use box-shadows, gradients, or glow effects to create depth — use black/white contrast instead
- Never round card or image corners — the system uses 54px pills and 0px everything else
- Never use more than two type sizes in a single composition — the rhythm relies on confident scale jumps
- Never add borders thicker than 1px — hairlines are the only structural lines
- Never fill the inverted button on a black background with #000000 — it will disappear
- Never decorate the global nav with a logo mark, background fill, or border — it should read as floating text on white
Components
Primary Pill Button
Filled action for primary navigation moments (e.g., project launches, contact, index entry)Pill shape with 54px border-radius, solid black (#000000) background, white (#ffffff) text at 16–18px weight 700, padding 8px vertical / 20–22px horizontal. No shadow, no border. Sits as the singular chromatic-free accent — a black mark on white paper.
Ghost Outlined Button
Secondary or alternative action with restrained presencePill shape (54px radius), transparent background, 1px solid black (#000000) border, black text. Same 8px / 20–22px padding as the primary variant. Used when the filled version would compete with primary content.
Minimal Top Nav
Global navigation — anchor for the entire siteFull-bleed horizontal row on white. Left cluster: site title plus 5–6 small text links (Work, About, Approach, News, Contact) at 12–16px weight 400, separated by 25–30px horizontal margins. Right cluster: utility links (Search, Index) at the same size, right-aligned. No background fill, no border, no logo mark — typography alone defines the bar.
Display Wordmark
Hero or page-title identity — the dominant visual element on landingBaseGrotesk weight 300 at 60–65px, line-height 1.15, color #000000. Renders the brand name ('Base') as an oversized typographic object that bleeds across the viewport. No decoration — the letterforms ARE the design.
Full-Bleed Documentary Photo
Atmospheric image that fills the viewport edge-to-edgePhotograph cropped to viewport width with 0px radius and no border. White (#ffffff) text overlay sits directly on the image, centered both axes, weight 300–400 at 50px. Text uses no background plate — it relies on the photographic value contrast to remain legible.
Black Editorial Section
Full-bleed dark band for thought-leadership, statements, or transitionsSolid #000000 background spanning the full viewport. Centered white (#ffffff) body text at 30–50px weight 300, line-height 1.20–1.30. Acts as a visual breath and tonal pivot between white content sections. No imagery, no decorative elements.
Inverted Pill Button
Primary action on dark or photographic sectionsSame 54px pill radius and padding as the primary button but inverted: white (#ffffff) background, black (#000000) text at 16–18px weight 700. Used when a black-filled button would disappear into a black background.
Hairline Rule
Section divider, underline, or subtle separation1px solid #000000 line used to separate sections, underline active nav items, or frame content. No fill, no padding — just a pure horizontal mark.
Page-Title Block
Identifies the current page (e.g., 'Base', 'Work') below the global navSmall 12–16px weight 500 label aligned left, 7px below the nav bar. Functions as a breadcrumb-style page indicator without visual noise.
Overlay Caption
Short statement set in white over photography or dark sectionsCentered white text, 50px weight 300, line-height 1.15, letter-spacing 0.01em. Multi-line stacks are vertically and horizontally centered in the container. Examples in the system: 'A Family of Makers' and 'Read our latest thought-leadership articles, trend features, interviews, and other musings.'
Surfaces & elevation
Level 1
Paper
#ffffffDefault page canvas and most content sections
Level 2
Ink
#000000Alternating full-bleed dark bands for editorial contrast and thought-leadership callouts
Elevation does not exist in this system. Depth and hierarchy are achieved exclusively through black/white contrast, scale, and full-bleed alternation. No box-shadows, no elevation tokens, no surface tints — components sit flat on the paper or flat on the ink.
Layout & imagery
Layout
Full-bleed layout with no max-width container — content scales edge-to-edge at every breakpoint. The hero is a massive typographic wordmark (60–65px Base) that bleeds across the viewport, overlapped by a contained full-bleed photograph with centered text. Sections alternate as full-viewport bands: white band, then a full-bleed photo, then a black editorial band with centered white text. Navigation is a minimal top bar (no sticky behavior evidenced, no logo) with text-only links clustered left and right. Content rhythm is spacious and editorial — each section is a full-screen moment rather than a compact information block. No multi-column card grids; each section asserts itself as a single full-bleed composition.
Imagery
Photography is the only non-textual visual element. All imagery is documentary in tone: behind-the-scenes agency work, panel discussions, people in their studios. Treatment is full-bleed (0px corner radius) with white sans-serif text overlaid directly on the image. No duotones, no filters, no color grading beyond natural tones. Icons are absent or extremely minimal. The photographic density is high — each section is dominated by either a single full-bleed photo or a solid black/white field, never small thumbnails in grids.
Design notes
Agent Guide
## Quick Color Reference - text: #000000 (primary), #ababab (muted) - background: #ffffff (paper), #000000 (ink band) - border: #000000 hairline - accent: none - primary action: no distinct CTA color ## 3-5 Example Component Prompts 1. **Display Wordmark Hero** — Render the brand name at 65px BaseGrotesk weight 300, color #000000, letter-spacing 0.01em, line-height 1.15. Let it overflow the viewport naturally. Below it, layer a full-bleed photograph (0px radius) with 50px white text centered, weight 300, line-height 1.15. No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 3. **Inverted Pill Button (dark section)** — 54px border-radius, #ffffff background, #000000 text at 18px weight 700, same 8px / 22px padding. 4. **Black Editorial Band** — Full-bleed #000000 section, centered white (#ffffff) text at 32px weight 300, line-height 1.30, letter-spacing 0.01em. No images, no decoration. Acts as a visual breath between content sections. 5. **Minimal Top Nav** — Full-bleed white row, no border or background. Left cluster: site title in 16px weight 500 followed by nav links (Work, About, Approach, News, Contact) in 12–16px weight 400, separated by 25–30px margin-right. Right cluster: Search and Index in the same size, right-aligned. No logo, no icons.
Similar brands
Pentagram
Identical zero-chromatic agency aesthetic — pure black and white, oversized display type as the hero, full-bleed documentary photography, and flat editorial section composition
Manual (manualcreative.com)
Same monochrome typographic system with custom grotesque at extreme display sizes and minimal nav as floating text on white
Wieden+Kennedy
Full-bleed black/white editorial bands alternating with documentary photography and centered overlay text in a custom sans-serif
Bureau Borsche
Brutalist typographic agency identity — oversized wordmarks, no color, hairline rules, and pill-shaped buttons
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
