# Biron · Design system migration spec

> Source: https://biron.io  ·  Curated by OpenDesign  ·  en

> A refined example of minimalist portfolio design that uses typography and whitespace to create a premium feel.

## 1. Identity DNA

Biron operates as a digital gallery, where physical texture is implied through stark contrast and careful spacing. The system is built for a London-based visual designer, prioritizing raw aesthetics and refined interactions over decorative flair. Every decision serves the work itself.

**One-liner:** Minimalist dark portfolio showcasing raw aesthetics and refined digital experiences.
**Keywords:** Independent · Visual Designer · London · Raw Aesthetics · Refined Interactions
**Analogy:** Digital gallery with physical texture

## 2. Color

The palette is a strict monochrome, an extreme high-contrast scheme using only #000000 and #FFFFFF. This binary choice eliminates distraction and frames content with the clarity of a photographic negative.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--line` | `rgba(255,255,255,1)` | divider |

**Color principle:** Extreme high-contrast monochrome palette

The principle is total reduction—color is used only as a tool for legibility and emphasis, never as decoration.

## 3. Typography

The typographic voice is anchored by a transitional serif for headlines, set in lowercase or mixed case for an understated, editorial quality. Functional labels and navigation shift to uppercase, creating a clear hierarchy between content and interface.

- **Display:** transitional-serif
- **Body:** transitional-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 400 | 0px | Hero text |
| body | 18px | 1.2 | 400 | 0px | Body text |
| caption | 12px | 1.4 | 400 | 0px | UI labels |

**Type rules:**
- Text transform: uppercase for navigation and labels
- High contrast: White text on black background only

## 4. Spacing

The spatial rhythm is one of generous padding enclosing a tight internal cadence, creating breathing room without sacrificing connection.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 40 / 50 / 64 px
- **Rhythm:** Generous padding with tight internal rhythm

## 5. Surfaces

Surfaces are deliberately flat, devoid of visible shadows or borders. Depth is communicated through layering and motion alone, never through simulated three-dimensionality.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - 0px 0px 0px 0px transparent
- **Borders:** None visible

## 6. Layout

The layout skeleton is a full viewport frame with centered content blocks. Generous whitespace defines each section, allowing the work and typography to command attention.

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

**Skeleton:** Full viewport with centered content and generous whitespace

## 7. Motion & Interaction

Motion is treated as a refined interaction, not a spectacle. Elements transition through smooth opacity fades and transforms, with elegant timing functions ensuring reveals feel deliberate and unhurried.

- **Durations:** micro 220ms · small 666ms · medium 1000ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - Opacity fade-in
  - Transform translation

- **Hover:** None visible
- **Click:** None visible
- **Transition:** Smooth fade and transform transitions on elements
- **Keyboard:** None visible

## 8. Voice & Don'ts

The editorial voice is minimalist and professional, communicated through serif headlines and a restrained vocabulary. It avoids loudness and ornamentation, letting the work and the design system speak with quiet authority.

- **Tone:** Minimalist and professional
- **Headline style:** Serif, lowercase or mixed case, understated
- **CTA style:** None visible
- **Avoid:** Loud colors / Decorative elements / Complex layouts

### Don'ts
- ❌ Don't use rounded corners — screenshot shows sharp 0px edges
- ❌ Don't use drop shadows — screenshot shows flat, text-based layout
- ❌ Don't use bright accent colors — screenshot shows strict black and white palette
- ❌ Don't use decorative borders — screenshot shows clean, borderless sections
- ❌ Don't use center-aligned text everywhere — screenshot shows mixed alignment
- ❌ Don't use dense information layouts — screenshot shows massive whitespace

The system deliberately excludes rounded corners, drop shadows, bright accents, and decorative borders, committing fully to its raw, borderless aesthetic.

## System Prompt (paste into AI tool)

```
A minimalist portfolio site for a London-based visual designer. The design uses a strict black and white palette with a prominent transitional-serif font for headlines and UI labels. The layout relies heavily on whitespace and full-viewport sections with large background imagery. Key hex colors are #000000 for backgrounds and #FFFFFF for text. Critical donts: never use rounded corners, never add drop shadows, never introduce bright accent colors. Focus on raw aesthetics and refined interactions through subtle motion and high-contrast typography.
```