# Heylow · Design system migration spec

> Source: https://heylow.world  ·  Curated by OpenDesign  ·  en

> This site is worth including as a prime example of a restrained, premium design system that uses typography, spacing, and a muted palette to communicate professionalism and considered craftsmanship.

## 1. Identity DNA

Heylow's design system is built like a piece of high-end, purpose-driven architecture: every material is considered, every line serves a function, and the entire structure is designed to last. It's a study in how restraint and clarity can communicate a premium, sustainable ethos without resorting to visual noise.

**One-liner:** A design & code partner for purpose-led organisations, helping them to show up as considered as their work.
**Keywords:** design · code · partner · purpose-led · low-carbon · built to last
**Analogy:** A high-end, purpose-driven creative studio that values clarity, elegance, and sustainability in both design and digital execution.

## 2. Color

The color system is a study in monochromatic warmth, built on a dark, earthy foundation that allows the content to breathe. High-contrast off-white text ensures absolute clarity against the deep background, while muted gray accents provide subtle structural definition.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0f0e0c` | main background |
| `--ink` | `#faf8f3` | body text |
| `--ink-soft` | `#a8a3a1` | secondary text |
| `--muted` | `#4a4643` | placeholder |
| `--line` | `rgba(74, 70, 67, 1.0)` | divider |

**Color principle:** Dark, warm, earthy monochromatic palette with high contrast text for clarity and focus.

The principle here is absolute focus: the palette is a quiet stage, not the performance itself.

## 3. Typography

Typography speaks with a clean, humanist sans-serif voice, maintaining a consistent weight of 400 across the system to cultivate a unified, calm demeanor. Scale and treatment are the primary tools, from massive, tightly-tracked display headings that command the viewport to generous, readable body copy.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 160px | 0.85 | 400 | -2px | Main logo/wordmark |
| h1 | 48px | 1.1 | 400 | -1px | Large headings |
| body | 20px | 1.6 | 400 | -0.25px | Main body copy and descriptive text |
| caption | 12px | 1.4 | 400 | 2px | Small labels, navigation, and metadata |

**Type rules:**
- Use tight tracking on large display text for a refined, modern feel.
- Maintain generous line-height (1.6) for body text to ensure readability.
- Navigation and small labels are uppercase with wide letter-spacing.
- All typography maintains a consistent weight of 400 for a calm, unified look.

## 4. Spacing

A strict 4px base grid governs all spacing, establishing a predictable and architectural rhythm that underpins the entire layout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A consistent 4px base grid is used for all spacing, providing a structured and predictable layout rhythm.

## 5. Surfaces

Surfaces are defined not by elevation or shadows, but by thin, 1px borders in muted earth tones that architecturally segment content. This approach maintains a flat, calm plane while clearly defining interactive zones and structural hierarchy.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** Thin, 1px borders in muted earth tones (#4a4643 or #faf8f3) are used to structure the layout and define interactive zones without heavy visual weight.

## 6. Layout

The layout skeleton is a strong, visible grid, often revealed through dashed borders that emphasize its structural precision. This framework creates a spacious, organized foundation where content has room to exist without clutter.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A strong, visible grid structure is revealed through dashed border lines, emphasizing architectural precision.

## 7. Motion & Interaction

Motion is employed as a subtle, functional layer—fading elements in and out or adjusting opacity to signal interactivity. The philosophy is one of minimal, purposeful animation that supports navigation without ever distracting from the content.

- **Durations:** micro 200ms · small 200ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0.0, 0.2, 1)`
- **Patterns:**
  - Subtle opacity transitions on hover.
  - Smooth fade-in/out for menu interactions.
  - Minimal, purposeful motion that doesn't distract from the content.

- **Hover:** Subtle opacity change to indicate interactivity.
- **Click:** Immediate feedback with minimal animation.
- **Transition:** All interactive elements use a smooth 0.2s ease-in-out transition.
- **Keyboard:** Standard tab navigation with visible focus states.

## 8. Voice & Don'ts

The editorial voice is professional, considered, and direct, matching the design's restrained elegance. Language is concise and impactful, with calls to action often presented as understated text links.

- **Tone:** Professional, considered, and thoughtful.
- **Headline style:** Direct, concise, and impactful.
- **CTA style:** Understated, action-oriented, and often presented as a simple text link.
- **Avoid:** Avoid loud, aggressive, or overly energetic language. / Avoid cluttering the interface with too many elements. / Avoid using bright, saturated accent colors that break the calm palette.

### Don'ts
- ❌ Don't use bright, saturated accent colors — screenshot shows a monochromatic, earthy palette.
- ❌ Don't use decorative or script fonts — screenshot shows a clean, humanist sans-serif.
- ❌ Don't use heavy drop shadows or gradients — screenshot shows flat surfaces with thin borders.
- ❌ Don't use uppercase text for body copy — screenshot shows uppercase only for small labels and navigation.
- ❌ Don't use thick, heavy borders — screenshot shows thin 1px lines in muted tones.
- ❌ Don't use complex, busy layouts — screenshot shows a spacious, grid-based structure with ample whitespace.

The system is defined as much by what it avoids as what it employs, deliberately omitting saturated accents, decorative typography, and visual clutter to preserve its core calm.

## System Prompt (paste into AI tool)

```
This is a portfolio website for a design & code partner agency called Heylow. The design is characterized by a calm, sophisticated, and considered aesthetic. Key colors are a deep, warm black (#0f0e0c) background with light, warm off-white text (#faf8f3) and muted gray accents (#a8a3a1, #4a4643). The typography uses a clean, humanist sans-serif font family at various weights, with a strong focus on bold, oversized display type for the wordmark. The layout is spacious and grid-based, with visible structural lines. Critical donts: Do not use bright, saturated accent colors; do not use decorative or script fonts; do not clutter the interface with unnecessary elements or heavy visual effects; do not use uppercase text for body copy; do not use heavy drop shadows; do not use complex, busy layouts.
```