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

# Postevand · Design System

> Quiet monochrome framing for a more sustainable everyday product.

**Theme:** light · **Industry:** food-beverage · **Source:** https://postevand.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._

Postevand pairs a restrained black-and-white interface with expansive lifestyle photography to foreground plant-based water packaging. A compact uppercase navigation and oversized brand display give the page a clean, editorial character.

## North star

Keep the interface quiet and flat so oversized type and full-bleed product photography carry the story.

## Overview

The visual strategy keeps the interface nearly monochrome: white is the main canvas, black carries navigation and text, and a very light gray-green marks occasional section or card surfaces. Blue and other saturated hues appear mainly in the hero photograph, so treat them as image content rather than recurring interface accents. Nimbus Sans D OT supplies a consistent voice, from compact uppercase navigation to oversized, regular-weight display lettering. The opening image runs edge to edge and uses the product-in-hand scene as the page’s strongest colour and texture. Fine black dividers structure the header and split content without adding shadows or decorative containers. The overall layout is spacious and low-density, with large blank white areas around content; keep type and imagery direct, and avoid introducing extra colour, gradients, or ornamental effects.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Carbon Ink | `#000000` | `--color-carbon-ink` | neutral | Navigation, headings, body text, and the fine black rules dividing header and content. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Primary page canvas and header background; also supports open whitespace around content. |
| Soft Sage Mist | `#f0f1ef` | `--color-soft-sage-mist` | surface | Occasional muted section and card background, providing a subtle break from the white canvas. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Paper White) · `--color-surface` → `#000000` (Carbon Ink) · `--color-surface-2` → `#f0f1ef` (Soft Sage Mist) · `--color-text` → `#000000` (Carbon Ink) · `--color-border` → `#000000` (Carbon Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f0f1ef` | 18.53:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Nimbus Sans D OT | `--font-body` | webfont | 400, 700 | The page-wide typeface for display, headings, body copy, captions, and navigation. | Montserrat |

- **Nimbus Sans D OT:** Use regular weight for most text; display and headings have subtly tight negative tracking. Navigation is small and uppercase.

### Type scale — Perfect Fifth (ratio ≈ 1.495, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | 1 | -0.01em | — | Nimbus Sans D OT | Oversized brand wordmark over the opening lifestyle image. |
| h1 | 56px | 400 | 1.2 | -0.01em | — | Nimbus Sans D OT | Primary page headline and prominent introductory messaging. |
| h2 | 42px | 400 | normal | -0.013em | — | Nimbus Sans D OT | Major section headings, including lifecycle and impact content. |
| h3 | 40px | 400 | normal | -0.02em | — | Nimbus Sans D OT | Secondary feature or product-story headings. |
| body | 16px | 400 | 1.4 | 0 | — | Nimbus Sans D OT | Explanatory product, materials, and sustainability copy. |
| caption | 10px | 400 | 1.4 | 0 | — | Nimbus Sans D OT | Compact supporting labels and image details. |
| nav | 12px | 400 | 1 | 0 | uppercase | Nimbus Sans D OT | Small uppercase labels in the primary navigation. |

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 1, 4, 6, 10, 20, 22, 28, 40, 60, 67, 180 px.
- Section rhythm 40px · element gap 1px · card padding — · max content width —.

A compact horizontal header sits above a full-bleed photographic hero. Content below uses a divided, multi-column editorial structure, with thin black rules defining boundaries rather than filled-in cards. Text is left-aligned, and the page maintains a notably low visual density, leaving broad stretches of white canvas around content. Keep section transitions calm and use the light gray-green surface selectively. No measured maximum content width is available, so preserve the screenshot’s generous, edge-to-edge feeling rather than imposing an invented container size.

## Shape & elevation

- No box shadows measured: the page is flat.

The page is predominantly flat, with no measured shadows or rounded corners. Use thin black dividers for structural separation, especially in the header and split content. Keep cards square and restrained; contrast comes from white versus pale gray-green surfaces and from photography, not floating panels or layered effects.

## Imagery

The hero is a full-width lifestyle photograph showing a person holding a Postevand carton against a blue sky. Large white brand lettering overlays the lower part of the image, while the B Corp mark sits within the photograph. Product and campaign imagery is central; saturated blues and incidental skin tones belong to photography, not the core interface palette.

## Components

### Top navigation

White horizontal header with the Postevand wordmark, small uppercase links for Shop, Impact, 3% Pledge, and Wholesale, plus a Bag count. Separate key areas with fine black rules.

### Photographic hero

Edge-to-edge campaign image with a person holding the carton, oversized white Postevand lettering, and a small certification mark.

### Editorial feature area

Multi-column content introduces lifecycle results and product benefits, using left-aligned headings and restrained black text.

### Product information card

Square-cornered, flat card treatment; white or #f0f1ef surfaces sit behind compact black product copy.

### Structural dividers

Fine black lines distinguish navigation zones and split content without shadows or decorative framing.

### Measured component styles

- **Card** (“A Postevand carton has a 18% lower clima”): background #ffffff · text #000000 · radius 0px · padding 0px · 400 12px Nimbus Sans D OT
- **Navigation item** (“SHOP IMPACT 3% PLEDGE WHOLESALE BAG (0)”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px Nimbus Sans D OT

## Do

- Use white as the dominant page canvas.
- Set interface text and rules in #000000.
- Reserve #f0f1ef for subtle section or card contrast.
- Use Nimbus Sans D OT throughout the interface.
- Keep navigation small, uppercase, and visually compact.
- Let product photography run edge to edge where the story calls for it.

## Don't

- Do not promote photographic blues into recurring UI colours.
- Do not add gradients, ornamental shadows, or floating panels.
- Do not round card corners.
- Do not crowd the page with dense content or decorative elements.
- Do not replace the restrained divider-based structure with heavy borders.

## Agent prompt

Build a new Postevand-style page with a quiet, editorial visual system. Use #ffffff as the main canvas, #000000 for navigation, copy, and fine dividing rules, and #f0f1ef only for occasional soft section or card surfaces. Set all interface typography in Nimbus Sans D OT, or a close sans-serif substitute; keep navigation compact and uppercase, and give large headings subtly tight tracking. Create a simple horizontal header and use generous open space around left-aligned content. Where imagery is appropriate, let an authentic product or lifestyle photograph dominate the width; treat its colours as photography, not UI accents. Keep containers flat and square-cornered, with no shadows or gradients. Preserve a low-density rhythm and let the product, typography, and image do the visual work.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | feature-grid | Full-bleed hero leads into a spacious, divided multi-column editorial section with left-aligned headings. | Top-level shop and impact navigation, Lifecycle proof points, Product-benefit browsing | White canvas, Oversized image-overlay wordmark, Fine black dividers, Selective pale gray-green panels |

## Source CSS custom properties (selected)

```css
--banner-spacing: 4rem;
--color-beige: #f0f1ef;
--color-beige-dark: #d7d9d3;
--color-black: #000000;
--color-blue: #7ca7ce;
--color-green: #008000;
--color-red: #ff0000;
--color-white: #ffffff;
--duration-instant: .15s;
--duration-fast: .2s;
--duration-medium: .5s;
--duration-long: .8s;
--font-family-primary: "Nimbus Sans D OT","Helvetica Neue","Helvetica","Arial",sans-serif;
--font-size-base: 1.2rem;
--font-size-small: 1rem;
--font-size-medium: 1.6rem;
--font-size-big: 3.2rem;
```

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