Ink Black
#000000Primary text, hairline borders, filled button backgrounds, navigation rules — the structural line weight of the entire system
Postevand
postevand.com
Website preview
The design language
Postevand operates as an editorial gallery on bone paper — a completely achromatic environment where the product IS the color. Every interface element reduces to black, white, and a single warm off-white (#f0f1ef), creating a Scandinavian exhibition aesthetic where photography and oversized typography carry all the visual weight. The system is aggressively minimal: hairline black rules divide the canvas into grid cells, buttons are black rectangles that feel like printed labels, and there are zero decorative gradients or chromatic accents. Typography is the only expressive tool — a single sans-serif (Nimbus Sans) speaks in whisper-weight headlines and tight tracking, with the brand wordmark scaled to fill the viewport. Components are skeletal: ghost inputs, black filled buttons that double as text, and cards that are just rectangles on the bone-colored surface.
Color palette
neutral
Paper White
#ffffffPage canvas, input fills, modal surfaces, inverted text on black buttons
Bone
#f0f1efCard surfaces, secondary canvas tone — gives the white-on-white system a warm paper-like quality rather than sterile digital white
Graphite
#333333Secondary borders, subdued text — used when pure black is too heavy for hairline elements
Ash
#d7d7d7Input field borders, dividers, placeholder affordance — the lightest structural gray in the stack
Typography
Type scale
Minor Third (1.2) · 15px basedisplay
80px · 400 · 1 · -0.8px trackingThe quick brown fox jumps
heading
56px · 400 · 1 · -0.56px trackingThe quick brown fox jumps
subheading
32px · 400 · 1 · -0.32px trackingThe quick brown fox jumps
text-30
30px · 400 · 1The quick brown fox jumps
body
16px · 400 · 1.4 · -0.16px trackingThe quick brown fox jumps
text-13
13px · 400 · 1.54The quick brown fox jumps
text-12
12px · 400 · 1.4The quick brown fox jumps
caption
10px · 400 · 1.2 · 0.1px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Nimbus Sans D OT
- Weights
- 400, 700
- Sizes
- 10, 12, 16, 32, 56, 80
- Line height
- 1.00–1.40
- Letter spacing
- -0.01em at display sizes (32–80px), 0.01em at small sizes (10–12px)
- Fallback
- Inter, Helvetica Neue, Arial
Primary typeface for all UI and display — weights 400 for body and nav, 700 for headlines and button labels. The single sans-serif carries the entire brand voice; no serif, no display variant, no decorative cuts
Additional typeface
Helvetica
- Weights
- 300, 400
- Sizes
- 13, 16, 30
- Line height
- 1.54–1.60
- Letter spacing
- 0.006–0.008em
- Fallback
- Helvetica, Arial
System fallback for form inputs and secondary body copy — only appears where native form rendering takes over
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Section gap
- 60-80px
- Card padding
- 20px
- Element gap
- 20px
Border radius
cards
0pxbadges
0pxinputs
0pxbuttons
0pxSpacing scale
1px4px10px12px15px20px24px30px36px40px60px67px70px80px180pxGuidelines
Do
- Use 0px border-radius on every interactive element and card — the system is architecturally sharp, not soft
- Set body type at 16px Nimbus Sans 400, nav and meta at 12px uppercase with 0.01em letter-spacing
- Use #000000 for all borders, text, and filled buttons — never introduce a second color for structure
- Divide page sections with 1px black hairline grid lines rather than background color changes or whitespace alone
- Place the brand wordmark at 56–80px Nimbus Sans 700 with -0.01em tracking as a compositional element, not just a logo
- Use #f0f1ef (Bone) as the only non-white surface tone for cards and secondary panels
- Set button padding to 20px vertical × 67px horizontal for primary actions; the generous horizontal padding makes buttons feel like printed labels
Don’t
- Do not introduce any chromatic color — the system is 0% colorful by design and any hue breaks the gallery aesthetic
- Do not use border-radius above 0px on cards, buttons, inputs, or images — sharpness is the system's identity
- Do not add box-shadows or elevation effects — the surface stack (white → bone → black) communicates depth through tonal contrast only
- Do not use a second typeface family for display or editorial copy — Nimbus Sans carries the entire voice
- Do not use letter-spacing above 0.01em or below -0.01em — tracking stays tight and controlled
- Do not create colored hover, focus, or active states — the black-on-white binary is the only state system
- Do not use gradients, decorative backgrounds, or textured surfaces — the system is flat and printed
Components
Top Navigation Bar
Persistent site header with brand mark, primary nav, and utility linksFull-width white bar with 1px black bottom border. Logo left, nav links center (SHOP, IMPACT, 3% PLEDGE), utility links right (WHOLESALE, BAG (0)). Nav links are 12px Nimbus Sans 400 uppercase with 0.01em tracking and 20px horizontal padding. Height approximately 60px.
Hero Product Banner
Full-viewport brand statement with oversized wordmark overlayEdge-to-edge product photography (water carton against sky/cloud) with the 'Postevand™' wordmark at ~80px Nimbus Sans 700 in white, anchored bottom-left and bleeding off the right edge. The image fills the viewport; the type functions as a watermark over the product.
Black Filled Button
Primary action — Subscribe, Add to Cart, form submissionSolid #000000 rectangle, 0px radius, 20px vertical × 67px horizontal padding. Label in white Nimbus Sans 400, 16px. No hover state changes the color — the button is always black. Functions as a printed label rather than an interactive element.
Ghost Email Input
Newsletter signup field inside modal1px #d7d7d7 border, 0px radius, 12px padding all sides, full width. Placeholder 'Email address' in 16px Nimbus Sans 400. No focus ring color change — the border simply darkens to black on focus. The skeletal restraint makes the black Subscribe button below it the visual anchor.
Newsletter Modal
Centered overlay for email captureWhite card, 0px radius, ~40px padding, centered on the page over a semi-transparent backdrop. Heading 'Join our monthly newsletter' in 32px Nimbus Sans 700, black. Subtext in 16px Nimbus Sans 400. Close button (×) in top-right corner as a bare character, not an icon button.
Section Divider Grid
Editorial section break using hairline rules1px black lines forming a grid overlay across the page — vertical and horizontal hairlines segment content into cells, creating a printed-page or gallery-wall composition. No background color change between sections; the lines do all the structural work.
Product Card
Individual product display in grid layoutsBone (#f0f1ef) background, 0px radius, 20px padding, optional 1px black border. Product image fills card; product name below in Nimbus Sans 700, price in Nimbus Sans 400. No shadow, no elevation — the card is defined purely by the warm off-white surface against the white page.
Editorial Headline Block
Large display copy in content sectionsNimbus Sans 700 at 56px, black, line-height 1.00, letter-spacing -0.01em. Anchored to grid cells defined by the hairline system. Functions as a poster headline — tight tracking and heavy weight create a gallery-catalogue presence.
B-Corp Certification Badge
Trust mark in footer/overlayCircular badge with 'Certified B Corporation' text, fixed position bottom-right. Black and white, matching the system's monochromatic discipline. Small, unobtrusive — it is a credential, not a design element.
Cookie Consent Bar
Bottom-fixed privacy noticeFull-width white bar with 1px black top border. Text left ('This website uses cookies...') in 12px Nimbus Sans 400 with underlined 'Privacy Policy' link. Three actions right: PREFERENCES, REJECT, ACCEPT — all as plain text links, 12px uppercase, 0.01em tracking. No filled buttons in the consent flow.
Utility Nav Link
Top-right account/in commerce linksWHOLESALE, BAG (0) links in 12px Nimbus Sans 400 uppercase, black, with 20px horizontal padding. The (0) cart count is inline with the label, separated by a space. Vertical divider line between left-group and right-group nav items.
Surfaces & elevation
Level 1
Page Canvas
#ffffffPrimary page background — pure white, the exhibition wall
Level 2
Card Surface
#f0f1efProduct cards and secondary panels — warm bone tone creates a printed-paper quality
Level 3
Inverted Surface
#000000Filled buttons, text on light — the only dark surface in the system
The system is intentionally flat. No box-shadows, no drop shadows, no glow effects. Depth is communicated exclusively through the three-tone surface stack (white → bone → black) and 1px hairline borders. This editorial print-inspired approach treats the screen as a page, not a window.
Layout & imagery
Layout
The page operates on a full-bleed, grid-anchored layout with no max-width container. The hero is a full-viewport image with an oversized wordmark overlay bleeding off the right edge. Below the hero, a 1px black hairline grid divides the page into cells, and content sits within those cells rather than in free-flowing sections. The newsletter modal is centered on the page as an overlay. Navigation is a fixed top bar with a 1px black bottom border. The layout rhythm is gallery-like: generous vertical space between sections, hairline dividers instead of background bands, and text/images positioned on the grid rather than centered in containers. Section gaps of 60-80px create breathing room; the 1px lines do the structural work that background color changes do in conventional designs.
Imagery
Photography is the only color in the system. Product shots are tight, high-key crops on neutral or sky backgrounds — the water carton is photographed against cloud-blue sky in the hero, creating an organic color accent that the interface itself never attempts to replicate. Lifestyle and environmental photography is used editorially: large, full-bleed, and unframed by containers. The product packaging is white with black sans-serif type, echoing the interface's own visual language. No illustrations, no icons beyond a close (×) character, no decorative graphics — every visual element is a photograph or a typographic composition.
Design notes
Agent Guide
**Quick Color Reference** - text: #000000 - background: #ffffff - card surface: #f0f1ef - border: #000000 (structural) / #d7d7d7 (input/divider) - accent: none — system is fully achromatic - primary action: no distinct CTA color **3-5 Example Component Prompts** 1. **Newsletter Modal**: Centered white card, 0px radius, 40px padding. Heading 'Join our monthly newsletter' at 32px Nimbus Sans 700, #000000. Subtext at 16px Nimbus Sans 400, #000000. Email input below: 1px #d7d7d7 border, 0px radius, 12px padding, placeholder 'Email address' in 16px Nimbus Sans 400. Black filled button beneath: #000000 background, white text at 16px Nimbus Sans 400, 0px radius, 20px vertical × 67px horizontal padding, label 'Subscribe'. 2. **Top Navigation Bar**: Full-width white bar, 60px height, 1px #000000 bottom border. Logo 'Postevand™' left at 12px Nimbus Sans 400. Center nav links: SHOP, IMPACT, 3% PLEDGE in 12px Nimbus Sans 400 uppercase, 0.01em tracking, 20px horizontal padding. Right utility links: WHOLESALE, BAG (0) in same style. No background color, no shadow. 3. **Hero Banner**: Full-viewport-width image (water carton against blue sky) filling the screen height. 'Postevand™' wordmark overlaid at 80px Nimbus Sans 700, white, -0.01em letter-spacing, anchored bottom-left and extending past the right edge of the viewport. No border, no container. 4. **Product Card**: #f0f1ef background, 0px radius, 20px padding. Product photo fills card width. Product name below in 16px Nimbus Sans 700, #000000. Price in 16px Nimbus Sans 400, #000000. No shadow, no border. 5. **Editorial Section Headline**: 'Lifecycle assessment results: Proven better' at 56px Nimbus Sans 700, #000000, line-height 1.00, letter-spacing -0.01em. Positioned within a grid cell defined by 1px black hairline dividers. No background, no container — the text sits directly on the white canvas.
Similar brands
Aesop
Same editorial apothecary aesthetic — achromatic palette, oversized serif/sans typography, generous whitespace, product photography on neutral backgrounds, and hairline grid compositions
Mismo
Scandinavian design language with bone-colored product cards, black-on-white typography, zero chromatic accents, and a gallery-like page structure with hairline dividers
Studio Bergini
Extreme typographic minimalism where the wordmark itself functions as hero artwork, achromatic palette, and print-editorial layout rhythm with 1px structural lines
By Far
High-contrast black-and-white ecommerce with oversized display type, sharp 0px radii, skeletal components, and full-bleed editorial photography
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
