# Erno Works · Design system migration spec

> Source: https://erno.works  ·  Curated by OpenDesign  ·  en

> This site is a prime example of a minimalist portfolio that uses typography and spacing to convey a sense of premium craft and clarity.

## 1. Identity DNA

The design system for Erno Works operates like a minimalist gallery: a quiet, precisely calibrated container where the architecture recedes, allowing the exhibited work to command full attention. Its logic is one of deliberate restraint, where every decision—from a border's opacity to a line height—serves the singular goal of clarity.

**One-liner:** A refined portfolio for a multidisciplinary design director emphasizing logic, clarity, and craft.
**Keywords:** design · direction · craft · clarity · logic
**Analogy:** A minimalist gallery showcasing high-end design work

## 2. Color

The palette is a study in reduction, built on a near-monochromatic scale that uses a slightly off-white ground and dark gray ink to create a neutral stage. This functional austerity ensures that no color competes with the portfolio's imagery.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#fafbfc` | main background |
| `--bg-quiet` | `#dfdcdc` | quiet area |
| `--ink` | `#202020` | body text |
| `--line` | `rgba(27, 27, 27, 0.13)` | divider |

**Color principle:** Minimalist and strictly functional, relying on a near-monochromatic palette to let the work stand out.

The principle is absolute neutrality, using only the essential tonal values to define space and hierarchy.

## 3. Typography

Typography is the system's primary voice, employing a consistent humanist sans-serif in light to regular weights. The scale is set with tight letter-spacing for display use, creating a refined, confident typographic presence without resorting to boldness.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 57.6px | 1.0 | 400 | -2.88px | Hero statement |
| h2 | 43.2px | 1.0 | 400 | -2.16px | Section headers |
| body | 21px | 1.1 | 400 | -0.32px | Navigation and project titles |

**Type rules:**
- All text uses a consistent humanist sans-serif
- Tight letter spacing is used for large display type
- Light to regular weights are preferred for a refined look

## 4. Spacing

Rhythm is established through generous whitespace, creating a vertical cadence that gives each element room to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace and vertical rhythm to create a calm, breathable layout

## 5. Surfaces

Depth is communicated not through shadow, but through the precise placement of elements and the use of thin, 1px dividers. The visual language is flat and graphic, with sharp, rectangular forms defining all containers.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** Thin, 1px lines used for subtle section dividers

## 6. Layout

The skeleton is a responsive grid that consolidates to a single column on mobile and expands into a multi-column showcase on desktop. This structure prioritizes the content, providing a clean and logical framework for the work to unfold.

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

**Skeleton:** A responsive grid that shifts from a single-column mobile layout to a multi-column desktop showcase

## 7. Motion & Interaction

Motion philosophy is one of subtlety and purpose, using only short opacity transitions to guide the eye. These restrained animations maintain the site's calm professionalism, avoiding any theatrical flourish that would distract from the content.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Subtle fade-in and opacity transitions for elements

- **Hover:** Subtle opacity changes on interactive elements
- **Click:** Standard link behavior
- **Transition:** Smooth, short opacity transitions on hover
- **Keyboard:** Standard browser focus states

## 8. Voice & Don'ts

The editorial voice is professional, confident, and understated, speaking in direct statements about design philosophy. Communication is stripped to its essentials, favoring simple text links over decorative UI elements.

- **Tone:** Professional, confident, and understated
- **Headline style:** Direct, first-person statements about design philosophy
- **CTA style:** Simple, unadorned text links
- **Avoid:** Overly complex or decorative elements / Bright, saturated colors / Dense blocks of text / Rounded corners on containers / Drop shadows on UI elements / Bold, heavy font weights

### Don'ts
- ❌ don't use bold font weights — screenshot shows light to regular weights used exclusively
- ❌ don't apply drop shadows to project images — screenshot shows completely flat imagery
- ❌ don't use rounded corners on cards or containers — screenshot shows sharp, rectangular edges
- ❌ don't introduce saturated accent colors — screenshot shows a strictly monochromatic and muted palette
- ❌ don't clutter the layout with dense text — screenshot shows ample whitespace and breathing room
- ❌ don't use decorative background patterns — screenshot shows solid, plain background colors

The system deliberately excludes bold weights, drop shadows, rounded corners, saturated colors, and dense text blocks, finding its strength in what it chooses not to do.

## System Prompt (paste into AI tool)

```
This is a minimalist portfolio for a design director. The palette is strictly monochromatic, using a slightly off-white background (#fafbfc), dark gray text (#202020), and subtle borders (rgba(27, 27, 27, 0.13)). Typography is a clean humanist sans-serif with tight letter-spacing for display text. Layout is spacious with generous whitespace. Critical don'ts: do not use bold weights, do not add shadows to images, and do not introduce saturated accent colors. The design relies on clarity and restraint to let the showcased work stand out.
```