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

# HNST · Design System

> Honest denim, framed in crisp white and red.

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

HNST pairs a clean, white storefront with a vivid red identity and oversized fashion photography. Compact uppercase navigation and restrained editorial copy keep the focus on the denim and the people wearing it.

## North star

Keep the canvas quiet and white so vivid red branding and candid denim photography carry the page.

## Overview

The page is built around a bright white canvas, which gives the oversized lifestyle photography room to dominate without making the storefront feel cluttered. Brand red is the key accent: it appears in the HNST wordmark, the central SHOP NOW button, the TRENDING heading, and a strong footer band. Near-black text provides crisp contrast, while gray is used sparingly for navigation and fine separation. Typography mixes Poppins for tracked uppercase navigation and display moments, Verdana for emphatic uppercase statements, and Raleway for readable body copy. The hero uses a wide, edge-to-edge fashion photograph with a centered red CTA and small carousel controls. Below it, editorial text sits alongside a product-focused image, followed by a centered section heading and a broad product image. Generous white space separates these blocks; the footer closes the page with a solid red field and compact white labels.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Dominant page canvas, open content backgrounds, and reverse text in the red footer and CTA. |
| Soft Ink | `#0e0e0e` | `--color-soft-ink` | neutral | Primary headings and dark navigation details, providing strong contrast on white. |
| HNST Red | `#ac0d00` | `--color-hnst-red` | brand | Wordmark, SHOP NOW button, TRENDING heading, and the full-width footer band. |
| Quiet Gray | `#d7d7d7` | `--color-quiet-gray` | semantic | Fine navigation divider and subtle hairline separation. |
| Rust Accent | `#892500` | `--color-rust-accent` | accent | Minor warm-red navigation accent; keep it subordinate to the dominant brand red. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#0e0e0e` (Soft Ink) · `--color-text` → `#0e0e0e` (Soft Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#d7d7d7` (Quiet Gray) · `--color-accent` → `#ac0d00` (HNST Red) · `--color-accent-2` → `#892500` (Rust Accent) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0e0e0e` | `#ffffff` | 19.3:1 | AAA |
| `#ffffff` | `#0e0e0e` | 19.3:1 | AAA |
| `#ac0d00` | `#ffffff` | 7.47:1 | AAA |
| `#ac0d00` | `#0e0e0e` | 2.58:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Verdana | `--font-display` | system | 700 | Bold uppercase editorial statements and eyebrow-style copy. | Arial |
| Poppins | `--font-poppins` | webfont | 600, 700 | Display headings, navigation, captions, and compact uppercase labels. | Montserrat |
| Raleway | `--font-body` | webfont | 400, 700 | Body copy and the SHOP NOW button label. | Lato |

- **Verdana:** Use bold uppercase with noticeably expanded tracking for concise, emphatic statements.
- **Poppins:** Use semibold or bold; uppercase labels and navigation carry wide letter spacing.
- **Raleway:** Keep body copy regular and readable; use bold uppercase styling for the CTA label.

### Type scale — Golden Ratio (ratio ≈ 1.642, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 62px | 700 | 1.2 | 0.065em | uppercase | Poppins | Large uppercase display headings, including the TRENDING section title. |
| h1 | 24px | 700 | 1.3 | 0.067em | uppercase | Verdana | Bold uppercase editorial ambition and brand-story statements. |
| h2 | 20px | 600 | 1.25 | 0.05em | uppercase | Poppins | Secondary uppercase headings within content sections. |
| body | 14px | 400 | 1.79 | 0 | — | Raleway | Editorial paragraphs and descriptive supporting copy. |
| caption | 13px | 600 | 1.15 | 0.154em | uppercase | Poppins | Small tracked uppercase labels and compact supporting headings. |
| nav | 13px | 600 | 1.15 | 0.154em | uppercase | Poppins | Tracked uppercase primary navigation and menu labels. |
| eyebrow | 24px | 700 | 1.3 | 0.067em | uppercase | Verdana | Short, bold uppercase introductory statements. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 15, 20, 23, 30, 32, 40, 46, 50, 55, 114 px.
- Section rhythm 40px · element gap — · card padding — · max content width 1100px.

Use a centered desktop content frame capped at the measured 1100px, with the hero photograph spanning the viewport. The header aligns the wordmark left and a compact navigation row right. Follow the hero with an editorial split: statement text on one side and a portrait-oriented denim image on the other. Center the TRENDING heading above a wide product image. Keep the page comfortably sparse, with clear white intervals between sections and a full-width footer.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s ease-out` on interactive elements.

The measured system has no shadows or gradients. Treat the page as mostly flat: white content areas meet directly, with a subtle gray navigation hairline. Use image edges and full-width color bands for structure instead of raised cards; the red footer and CTA are solid, unshadowed blocks.

## Imagery

Use candid fashion photography as the primary visual asset: the hero is a tightly framed, full-width lifestyle shot, while the next editorial image emphasizes a model holding up denim. Product imagery follows in a broad, pale setting. Preserve natural fabric texture, believable skin tones, and clean crops; avoid illustration or decorative overlays that compete with the clothes.

## Components

### Header navigation

White header with the red HNST wordmark at left and compact uppercase links at right. Use tracked Poppins-style labels, dark text, and a restrained gray divider.

### Hero carousel

Viewport-wide lifestyle image with white side arrows, small pagination dots, and a centered red SHOP NOW CTA. Keep controls legible without obscuring the photograph.

### Editorial split

Pair a short bold uppercase brand statement with a portrait-oriented denim photograph, leaving ample white space around both.

### Trending showcase

Center an uppercase red section heading above a broad product photograph on a light, unobtrusive background.

### Footer

Full-width solid red band with compact white LEGAL and FOLLOW US headings, small links, social icons, and a quiet copyright line.

### Measured component styles

- **Primary button** (“SHOP NOW”): background #ac0d00 · text #ffffff · radius 0px · padding 0px 46px · 700 13px Raleway · uppercase
- **Link**: transparent background · text #ffffff · radius 0px · padding 0px · 500 11px Poppins · uppercase
- **Navigation item** (“HOME ABOUT US SUSTAINABILITY SHOP HOME A”): transparent background · text #868686 · radius 0px · padding 0px · 400 14px Raleway

## Do

- Keep the main canvas white and visually quiet.
- Reserve brand red for identity, key headings, and primary actions.
- Let large, authentic denim photography lead the composition.
- Use short uppercase statements as editorial accents.
- Keep navigation compact, tracked, and aligned to the header edge.
- Separate content blocks with generous white space.

## Don't

- Do not add gradients or decorative shadows.
- Do not introduce colors outside the measured palette as interface colors.
- Do not put every image inside a bordered card.
- Do not let copy compete with the hero photograph.
- Do not overdecorate the carousel or add prominent overlays.
- Do not use dense navigation or oversized body paragraphs.

## Agent prompt

Build a new HNST-style fashion storefront page with a crisp white canvas (#ffffff), near-black text (#0e0e0e), and the brand red (#ac0d00) reserved for the logo, primary CTA, section emphasis, and strong color bands. Use Rust Accent (#892500) only for subtle warm navigation details and Quiet Gray (#d7d7d7) for fine separators. Set Poppins for tracked uppercase navigation and headings, Verdana for emphatic uppercase editorial statements, and Raleway for body copy and CTA text. Lead with a wide, candid denim photograph, then use a spacious text-and-image editorial split and a clean product showcase. Keep the layout centered and comfortable, with flat surfaces, no shadows or gradients, and a compact red footer with white labels. Prioritize authentic photography and restrained interface chrome.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width fashion photograph beneath a white header; centered CTA with side arrows and pagination dots. | carousel navigation, primary shopping CTA | edge-to-edge photography, red button, white arrows, pagination dots |
| 2 | feature-split | Spacious white content area with an editorial text-and-image split, followed by a centered product showcase. | brand-story introduction, product discovery | bold uppercase copy, portrait denim photo, centered red heading, wide product image |
| 3 | footer | Full-width red footer with compact legal and social columns, followed by a small copyright line. | legal links, social links | solid red band, white uppercase labels, compact link groups |

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
```

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