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

# Hey Low · Design System

> Quiet structure for considered creative work

**Theme:** dark · **Industry:** design · **Source:** https://heylow.world/ · **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._

Hey Low presents its design and development practice through a dark, architectural grid and a sequence of selected client projects. Oversized wordmark lettering, restrained copy, fine rules, and vivid project imagery create a calm portfolio with a clear editorial rhythm.

## North star

Let a precise, quiet grid frame the work; keep interface color restrained so project imagery supplies the variation.

## Overview

The page is built on a near-black canvas, with warm off-white reserved for the oversized Hey Low wordmark and emphasized copy. Muted warm gray carries navigation, supporting text, and project links, while a subdued gray-brown hairline draws a precise modular grid across the long page. Typography stays light and unbolded: a geometric circular sans gives the hero and project descriptions a measured, contemporary voice, while small uppercase labels mark navigation and section context. The opening is deliberately asymmetric, balancing the large wordmark and open grid against a compact introduction on the right. Below, project descriptions and images occupy alternating cells, so client work provides the color and visual variety rather than decorative UI. Generous dark intervals let each project breathe; the overall density is comfortable despite the long, tightly ruled portfolio structure. Rounded plus controls are small exceptions to the otherwise flat, square-edged system.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Charcoal | `#0f0e0c` | `--color-soft-charcoal` | surface | Continuous page canvas and dominant background behind the grid, typography, and portfolio. |
| Ash Taupe | `#a8a3a1` | `--color-ash-taupe` | neutral | Muted navigation, supporting copy, and understated project links. |
| Warm Porcelain | `#faf8f3` | `--color-warm-porcelain` | brand | Wordmark, high-emphasis text, and light text on small controls. |
| Graphite Rule | `#4a4643` | `--color-graphite-rule` | semantic | Fine grid and section divider lines on the dark canvas. |

### Semantic aliases

`--color-canvas` → `#0f0e0c` (Soft Charcoal) · `--color-text` → `#faf8f3` (Warm Porcelain) · `--color-text-muted` → `#a8a3a1` (Ash Taupe) · `--color-border` → `#4a4643` (Graphite Rule)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#faf8f3` | `#0f0e0c` | 18.18:1 | AAA |
| `#a8a3a1` | `#0f0e0c` | 7.73:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| EuclidCircularA | `--font-body` | webfont | 400 | Primary page type for headings, navigation, labels, body copy, and links. | DM Sans |

- **EuclidCircularA:** Use regular weight throughout; navigation and eyebrow labels are uppercase with expanded tracking.

### Type scale — Perfect Fourth (ratio ≈ 1.329, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 26.5px | 400 | 1.3 | -0.009em | — | EuclidCircularA | Large brand wordmark and primary introductory heading. |
| h2 | 20px | 400 | 1.6 | 0 | — | EuclidCircularA | Project or supporting section headings. |
| body | 15px | 400 | 1.6 | 0 | — | EuclidCircularA | Introductory copy and project descriptions. |
| caption | 11.5px | 400 | 1.1 | 0.178em | uppercase | EuclidCircularA | Small uppercase labels such as selected work. |
| button | 20px | 400 | normal | 0 | — | Arial | Compact plus controls and skip-to-content text. |
| nav | 15px | 400 | 1.6 | 0.133em | uppercase | EuclidCircularA | Uppercase primary links in the top navigation. |
| link | 15px | 400 | 1.6 | 0 | — | EuclidCircularA | Project destination links and supporting inline links. |
| eyebrow | 15px | 400 | 1.6 | 0.133em | uppercase | EuclidCircularA | Small uppercase context labels above content. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 6, 12, 15, 16, 32 px.
- Section rhythm — · element gap 16px · card padding — · max content width 1294px.

A centered page frame uses a measured maximum width of 1294px and a modular, column-based grid. The hero places an oversized wordmark across the left and central area, with navigation and a short introduction aligned in the right column. Project rows alternate descriptive text and media within the same fine-lined structure. The page feels comfortable rather than dense: broad dark intervals separate groups, while alignment and hairlines keep the long scroll coherent.

## Shape & elevation

- Radius: button `50%`
- No box shadows measured: the page is flat.

The interface is predominantly flat, with no measured shadow system. Thin graphite rules define cells and section boundaries rather than raised cards. Small circular plus controls sit over project imagery, but remain visually quiet; preserve the sense of layering through placement, not drop shadows.

## Imagery

Client project photography and website mockups are the primary color accents, including printed work, mobile interfaces, and garden or fashion sites. Media sits flush within grid cells and is shown with minimal framing or effects. The broad dark canvas around each image keeps attention on the projects; avoid adding illustration or decoration that competes with the portfolio.

## Components

### Top navigation

A compact uppercase WORK, ABOUT, CONTACT link group, aligned in the upper-right grid area and colored muted gray.

### Hero wordmark

Large warm off-white Hey Low lettering spans the upper-left and central grid, functioning as the main visual anchor.

### Introductory statement

A short multi-line description sits in the right column; supporting lines are muted and key closing phrases become off-white.

### Grid rules

Fine gray-brown hairlines divide the hero and portfolio into aligned rectangular cells against the dark canvas.

### Project row

Each portfolio entry combines compact descriptive copy and a flush project image in adjacent grid cells, with generous dark space between entries.

### Project link

A restrained muted-gray text link appears beneath project copy, without a filled button treatment.

### Plus control

A small circular plus control overlays project imagery as a discrete affordance.

### Measured component styles

- **Primary button** (“+”): background #100e0b · text #faf8f3 · radius 99999px · padding 1px 6px · 400 20px Arial
- **Secondary button** (“Skip to content”): transparent background · text #faf8f3 · border 1px solid #faf8f3 · radius 0px · padding 12px 16px · 400 20px EuclidCircularA
- **Link** (“Visit the website”): transparent background · text #a8a3a1 · radius 0px · padding 0px 0px 0px 16px · 400 15.0032px EuclidCircularA
- **Navigation item** (“WORK ABOUT CONTACT”): transparent background · text #a8a3a1 · radius 0px · padding 0px · 400 15.0032px EuclidCircularA · uppercase

## Do

- Use the dark canvas as the dominant page surface.
- Keep grid lines fine, quiet, and consistently aligned.
- Set primary text in warm off-white and supporting text in muted gray.
- Let client imagery provide most of the page's color.
- Use regular-weight sans-serif typography and restrained uppercase labels.
- Alternate project copy and images within the shared grid.

## Don't

- Do not introduce bright interface accents absent from the measured palette.
- Do not turn project entries into raised, rounded cards.
- Do not add decorative shadows or gradients.
- Do not bold every heading or link for emphasis.
- Do not crowd the page with extra badges or ornamental graphics.
- Do not make the layout a uniform stack of full-width images and text.

## Agent prompt

Build a new page in the Hey Low visual style: a dark, editorial portfolio composed on a precise modular grid. Use Soft Charcoal (#0f0e0c) as the continuous canvas, Warm Porcelain (#faf8f3) for the main wordmark and emphasized copy, Ash Taupe (#a8a3a1) for navigation and supporting text, and Graphite Rule (#4a4643) for fine dividers. Use a light, regular geometric sans throughout, with expanded-tracking uppercase navigation and small labels. Balance a large typographic anchor with compact introductory copy, then present work in alternating text-and-image cells. Keep spacing generous, surfaces flat, and project imagery flush to its grid cells. Avoid shadows, gradients, decorative accents, and card-like containers; preserve a quiet, structured rhythm.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | gallery | A long single-page grid with a wordmark-led hero, right-aligned introduction, and alternating project copy and imagery. | top-level navigation, project destination links, image-level plus controls | dark canvas, fine grid dividers, asymmetric hero, alternating project cells |

## Source CSS custom properties (selected)

```css
--colorborder: #4a4643;
--accent: #a3a394;
--primary: #faf8f3;
--background: #0f0e0c;
--primary-muted: #a8a3a1;
--primary-muted-light: #a8a3a1;
```

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