# Evermade Fi · Design system migration spec

> Source: https://evermade.fi  ·  Curated by OpenDesign  ·  en

> The site is a perfect example of modern editorial web design, blending classic high-fashion typography with a digital-first, high-contrast aesthetic.

## 1. Identity DNA

The Evermade design system is a direct translation of a bold fashion editorial into a digital studio portfolio. It builds its identity on a clear tension: the formal weight of a high-contrast didone serif against the clean geometry of modern digital interfaces. This contrast defines every decision, from the massive type to the sharp component borders.

**One-liner:** An expressive agency portfolio defined by massive serif typography and a high-contrast, vibrant color palette.
**Keywords:** Creative Agency · Digital Studio · Bold · Expressive · High Contrast
**Analogy:** A bold fashion editorial meets a high-end digital agency portfolio.

## 2. Color

The color system is built on a deliberate, high-contrast foundation. Dark burgundy and soft peach establish a sophisticated, anchored palette, allowing a vibrant pink to act as a precise, expressive highlight rather than a dominant wash.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#2D070B` | main background |
| `--bg-soft` | `#FEF0E6` | card background |
| `--bg-quiet` | `#FFC7DE` | quiet area |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#2D070B` | secondary text |
| `--muted` | `#FF0389` | placeholder |
| `--accent` | `#FF0389` | single accent |
| `--line` | `rgba(45,7,11,1.0)` | divider |

**Color principle:** High-contrast and expressive, using dark burgundy and soft peach as anchors for vibrant pink highlights.

The principle is controlled vibrancy, using color to punctuate the editorial narrative rather than decorate it.

## 3. Typography

Typography is the system's primary voice, establishing a strict hierarchy between categories. Elegant, high-contrast serif type commands headlines and statements, while clean geometric sans-serif handles body copy, and monospace provides technical metadata.

- **Display:** didone-serif
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.1 | 400 | -0.48px | Massive hero statements and section headers |

**Type rules:**
- Combine elegant, high-contrast serif display types with clean geometric sans-serif for body copy.
- Use monospace fonts for metadata, labels, and secondary text.
- Strictly use uppercase transforms for navigation and category labels.

## 4. Spacing

Spacing operates on a principle of generous whitespace and strict grid alignment to support the bold typographic statements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace and strict grid alignment.

## 5. Surfaces

Surfaces are defined by depth through shadow and a strict economy of borders. Deep, layered shadows create a clear sense of elevation, while sharp, thin borders provide structural delineation without visual noise.

- **Radius:** sm 0px · md 0px · lg 0px · pill 9999px
- **Shadows:**
  - 0px 30px 70px 0px rgba(0,0,0,0.3)
  - 0px 4px 10px 0px rgba(0,0,0,0.1)
- **Borders:** Sharp, thin 1px borders often used in a subtle, semi-transparent manner.

## 6. Layout

The layout skeleton is an asymmetric editorial grid that deliberately breaks from rigid symmetry. It uses massive, overlapping type and off-center imagery to create dynamic, focused compositions within a spacious 12-column structure.

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

**Skeleton:** Asymmetric editorial grid featuring massive overlapping type and off-center imagery.

## 7. Motion & Interaction

Motion is philosophical, focusing on decelerated elegance for functional UI transitions. Hero reveals and image presentations receive longer, more dramatic easing to match the scale of the typography.

- **Durations:** micro 220ms · small 250ms · medium 1500ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - Smooth, decelerated transitions for UI state changes.
  - Longer, more dramatic easing for hero text and image reveals.

- **Hover:** Subtle background color shifts or slight spatial movements on interactive elements.
- **Click:** Immediate response with smooth, decelerated transitions.
- **Transition:** Smooth 0.25s ease-out transitions for standard interactions.
- **Keyboard:** Standard focus outlines, maintaining the clean UI aesthetic.

## 8. Voice & Don'ts

The editorial voice is confident and highly professional, using massive serif headlines to command attention and monospace text to deliver metadata with structured precision.

- **Tone:** Confident, bold, and highly professional.
- **Headline style:** Massive, expressive serif type that commands the viewer's attention.
- **CTA style:** Clean, uppercase, and monospace for metadata; bold sans-serif for primary actions.
- **Avoid:** Loud neon gradients / Rounded soft UI components / Playful or casual microcopy

### Don'ts
- ❌ Don't use soft, rounded UI components — screenshot shows sharp rectangular borders and strict pill shapes.
- ❌ Don't apply busy, complex backgrounds — screenshot shows solid dark burgundy or clean soft peach.
- ❌ Don't use playful, rounded sans-serifs for display text — screenshot shows high-contrast didone-serif.
- ❌ Don't clutter the layout with too many elements — screenshot shows generous whitespace and a focused editorial grid.
- ❌ Don't use casual, conversational UI labels — screenshot shows structured, uppercase monospace metadata.
- ❌ Don't use bright neon greens or blues — screenshot shows a focused palette of dark burgundy, pink, and peach.

The system deliberately avoids soft, rounded components, busy backgrounds, and any hint of playful or casual typography.

## System Prompt (paste into AI tool)

```
This design is a bold, expressive agency portfolio that leverages massive didone-serif typography and a high-contrast color palette. The primary anchors are dark burgundy (#2D070B) and soft peach (#FEF0E6), punctuated by a vibrant pink (#FF0389) accent. The typography strictly separates display (didone-serif) from body (geometric-sans) and metadata (monospace), creating a strong editorial hierarchy. Layouts are spacious and asymmetric, using a clean 12-column grid. Critical constraints: Never use rounded, soft UI shapes; strictly use sharp rectangular or full-pill forms. Never use casual or playful typography for display text; always lean into the formal, high-contrast serif. Avoid busy backgrounds; maintain the focus on massive type and clean imagery.
```