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

# Evermade · Design System

> Expressive editorial design grounded in digital craft

**Theme:** light · **Industry:** agency · **Source:** https://www.evermade.fi/ · **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._

Evermade’s homepage pairs a deep burgundy opening with oversized vivid-pink serif lettering, then settles into a warm, editorial portfolio experience. Quiet typography, generous open space, finely ruled client grids, and vivid project imagery make the agency’s work the focus.

## North star

Let expressive serif headlines and rich project imagery breathe against warm, quiet surfaces, keeping controls and labels precise and understated.

## Overview

The page opens with a full-bleed, near-black burgundy hero: oversized Instrument Serif lettering in vivid pink sits behind layered project imagery, while compact uppercase navigation stays discreet at the top. The rest of the site shifts to a warm peach canvas, using dark burgundy for copy and display type, white for occasional section surfaces, and pale pink for selected labels or text accents. Instrument Serif gives statements and case-study titles an editorial voice; Manrope keeps explanatory copy approachable, while DM Mono makes navigation, categories, and small labels feel precise. Content aligns to a wide central frame, alternating broad text-led passages with client marks, case-study images, and horizontally presented insight cards. Sections retain substantial breathing room rather than adding decorative containers. The client area uses a ruled grid, while project cards rely on their images and typography instead of heavy borders or shadows. Rounded pill controls provide the main interface accent.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Black Cherry | `#2d070b` | `--color-black-cherry` | brand | Primary ink and opening hero surface; also used for headings, body copy, outlines, and fine client-grid rules. |
| Warm Porcelain | `#fef0e6` | `--color-warm-porcelain` | surface | Main page canvas and contrasting surface for the hero contact pill and selected insight card. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Occasional light section surface; a supporting neutral rather than the dominant page canvas. |
| Electric Rose | `#ff0389` | `--color-electric-rose` | accent | Bright hero lettering and selected inline links; use sparingly against the dark opening surface. |
| Petal Pink | `#ffc7de` | `--color-petal-pink` | accent | Soft pink emphasis in selected text and insight-card links, not a broad section background. |

### Semantic aliases

`--color-canvas` → `#fef0e6` (Warm Porcelain) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#2d070b` (Black Cherry) · `--color-text` → `#2d070b` (Black Cherry) · `--color-border` → `#2d070b` (Black Cherry) · `--color-accent` → `#ff0389` (Electric Rose) · `--color-accent-2` → `#ffc7de` (Petal Pink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#2d070b` | `#fef0e6` | 16.41:1 | AAA |
| `#2d070b` | `#ffffff` | 18.31:1 | AAA |
| `#ff0389` | `#fef0e6` | 3.35:1 | AA-large |
| `#ff0389` | `#ffffff` | 3.73:1 | AA-large |
| `#ff0389` | `#2d070b` | 4.91:1 | AA |

### Gradients

- `radial-gradient(25% 150% at 28.9298% 13.9203%, rgb(254, 240, 230), rgba(0, 0, 0, 0))`
- `radial-gradient(25% 150% at 16.6893% 12.381%, rgb(254, 240, 230), rgba(0, 0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Instrument Serif | `--font-display` | webfont | 400 | Display headlines, introductory statements, section titles, and project headlines. | Cormorant Garamond |
| DM Mono | `--font-mono` | webfont | 300, 500 | Navigation, uppercase eyebrows, category labels, badges, and pill-button text. | Space Mono |
| Manrope | `--font-body` | webfont | 400 | Body copy, descriptions, project text, and standard links. | Inter |

- **Instrument Serif:** Regular weight; large editorial forms, tight negative tracking, and natural mixed-case styling.
- **DM Mono:** Light labels and medium buttons; uppercase with noticeably open tracking, especially in navigation.
- **Manrope:** Regular weight with neutral tracking; use sentence case for readable supporting text.

### Type scale — Perfect Fifth (ratio ≈ 1.48, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 128px | 400 | 1.1 | -0.01em | — | Instrument Serif | Oversized hero statement and other high-impact display moments. |
| h1 | 60px | 400 | 1.1 | -0.01em | — | Instrument Serif | Primary page or section headline in Instrument Serif. |
| h2 | 48px | 400 | 1.1 | -0.01em | — | Instrument Serif | Major editorial section headline or introduction. |
| h3 | 32px | 400 | 1.4 | -0.01em | — | Instrument Serif | Project titles and supporting editorial headings. |
| h4 | 22px | 400 | 1.4 | 0 | — | Manrope | Compact supporting headings and card subheads. |
| body | 18px | 400 | 1.4 | 0 | — | Manrope | Agency description, explanatory paragraphs, and card copy. |
| caption | 11px | 300 | 1.4 | 0.009em | uppercase | DM Mono | Small uppercase metadata and project category labels. |
| button | 14px | 500 | 1 | 0.1em | uppercase | DM Mono | Uppercase DM Mono labels on pill-shaped actions. |
| nav | 14px | 300 | 1.6 | 0.1em | uppercase | DM Mono | Compact uppercase primary navigation and language links. |
| link | 18px | 400 | 1.4 | 0 | — | Manrope | Inline text links within copy and insight content. |
| eyebrow | 14px | 300 | 1.6 | 0.1em | uppercase | DM Mono | Small uppercase section identifiers above content. |
| code | 11px | 300 | 1.4 | 0.009em | uppercase | DM Mono | Tiny uppercase mono metadata-style labels. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 4, 5, 8, 12, 14, 16, 21, 24, 36, 41, 78 px.
- Section rhythm 104px · element gap 8px · card padding — · max content width 1316px.

Use a wide, centered content frame, with the measured page max width of 1316px as the outer guide. The opening viewport is a dark, full-bleed hero; the long body returns to a continuous warm canvas. Alternate centered editorial statements with broad client and project grids, keeping headings mostly left-aligned within content groups. Use generous section gaps and ample internal breathing room. Client marks sit in a ruled grid; work and insight cards form denser image-led rows. Maintain the measured spacious density without inventing extra layout dimensions.

## Shape & elevation

- Radius: button `9999px` · badge `9999px` · nav `9999px` · xs `8px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.25s cubic-bezier(0.19, 1, 0.22, 1)` on interactive elements.

The interface is mostly flat, relying on surface contrast, imagery, and thin rules rather than shadow. The client-logo area uses fine dark grid lines; project cards stay visually open. Use pill-shaped outlines or fills for controls, and reserve overlapping layers for the hero imagery instead of applying elevation to every card.

## Imagery

Treat imagery as a key part of the agency portfolio: use prominent project visuals, including device mockups, interface compositions, editorial photography, and playful illustrated scenes. The hero layers a central portrait-led project tile and a smaller insight preview over an oversized blurred pink statement. In later sections, keep images rectangular and let their distinct palettes speak; avoid adding decorative image frames that compete with the work.

## Components

### Primary navigation

Compact uppercase links sit across the top of the hero, with language selection and a warm-filled, dark-text CONTACT pill aligned to the right.

### Hero composition

A full-bleed burgundy field pairs oversized pink serif lettering with layered project media; a smaller insight preview anchors the lower-left area.

### Editorial introduction

Centered small mono eyebrow and serif-led agency statement sit on the warm canvas, followed by a vertically stacked expertise word group.

### Client logo grid

Client marks occupy a ruled, multi-column grid with a central reassurance message and surrounding logo cells.

### Project cards

Rectangular case-study images lead into compact client names, serif project titles, and small uppercase mono category tags.

### Insight carousel

A horizontally presented row of image-led insight cards uses serif headlines, tiny category labels, a progress rule, and an outlined MORE INSIGHTS pill.

### Expertise badge

Small uppercase DM Mono labels appear inside rounded pills; dark-section instances use the warm canvas color for their text.

### Measured component styles

- **Primary button** (“CONTACT”): background #fef0e6 · text #2d070b · border 1px solid #fef0e6 · radius 9999px · padding 8px 24px · 500 14px DM Mono · uppercase
- **Secondary button** (“MORE INSIGHTS MORE INSIGHTS”): transparent background · text #2d070b · border 1px solid #2d070b · radius 9999px · padding 16px 32px · 500 16px DM Mono · uppercase
- **Link** (“strategy”): transparent background · text #ff0389 · radius 0px · padding 0px · 400 18px Manrope
- **Card** (“MESSUKESKUS A seamless event platform fo”): transparent background · text #2d070b · border 1px solid · radius 0px · padding 0px · 400 18px Manrope
- **Badge** (“DESIGN”): background #ffdbe1 · text #2d070b · radius 9999px · padding 4px 12px · 300 11px DM Mono · uppercase
- **Navigation item** (“Main EXPERTISE WORK INSIGHTS SOLUTIONS A”): transparent background · text #2d070b · radius 0px · padding 0px · 400 18px Manrope

## Do

- Use Black Cherry #2d070b for primary copy and the opening hero surface.
- Keep Warm Porcelain #fef0e6 as the long-form page canvas.
- Set display statements and project titles in an expressive serif.
- Use DM Mono uppercase labels for navigation, categories, and actions.
- Let project images carry their own color and visual character.
- Give editorial blocks generous breathing room and clear alignment.
- Use fine rules for grid structure and pill shapes for key controls.

## Don't

- Do not make the body a uniform white or generic gray canvas.
- Do not use Electric Rose #ff0389 as a broad background color.
- Do not add heavy card shadows or thick decorative borders.
- Do not turn mono navigation and metadata into large display text.
- Do not force project images into uniform color treatments.
- Do not crowd the spacious editorial sections with dense UI.
- Do not add measurements or component dimensions beyond the supplied data.

## Agent prompt

Build a new agency page in Evermade’s editorial visual language. Use Black Cherry #2d070b for primary ink and any dramatic opening surface, with Warm Porcelain #fef0e6 as the main canvas. Reserve Electric Rose #ff0389 for selective high-impact lettering or links; use Petal Pink #ffc7de as a softer text accent and Gallery White #ffffff only for occasional light sections. Pair Instrument Serif-style display typography with Manrope-like readable copy and DM Mono-like uppercase navigation, labels, and pill actions. Organize content inside a wide centered frame, alternating spacious editorial statements with ruled client grids and image-led project cards. Keep surfaces mostly flat: use fine rules, minimal borders, and no prominent shadows. Give portfolio imagery room to lead, and keep navigation and metadata compact.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed dark opening with compact top navigation, oversized centered lettering, and layered project previews. | Primary navigation, Language switch, Contact action, Featured insight link | Dark hero canvas, Pink serif display, Rounded contact pill, Overlapping media |
| 2 | other | Centered editorial copy on a warm, largely open canvas. | Section eyebrow, Agency introduction | Warm canvas, Serif statement, Compact mono label |
| 3 | feature-grid | Large vertically stacked expertise words lead into a broad ruled client-logo grid. | Expertise overview, Client credibility | Oversized serif labels, Thin grid rules, Client logo cells |
| 4 | gallery | A wide featured project followed by smaller image-led case-study cards. | Case-study browsing, Project categorization | Large rectangular media, Serif project titles, Small mono tags |
| 5 | content-feed | Horizontal insight-card row with a progress rule and centered outlined action. | Browse insights, Horizontal card scanning, More insights action | Image-led cards, Serif headlines, Thin progress line, Outlined pill button |
| 6 | other | A large, visually quiet stretch of the warm canvas with minimal visible content. | Visual pause | Open canvas, Minimal content |
| 7 | contact | Open contact and social links arranged in a broad single-column closing section. | Contact discovery, Social navigation | Editorial headings, Link list, Warm canvas |

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--overflow-slider-arrows-gap: .5rem;
--overflow-slider-autoplay-background: #000;
--overflow-slider-dots-gap: 0.5rem;
--overflow-slider-dot-inactive-color: rgba(0,0,0,.1);
--overflow-slider-dot-active-color: rgba(0,0,0,.8);
--overflow-slider-fade-color: #fff;
--overflow-slider-scroll-indicator-button-color: rgba(0,0,0,.75);
--overflow-slider-scroll-indicator-bar-color: rgba(0,0,0,.25);
--em-block-logo-grid-color-border: #ccc;
--ess-color-danger: #c0392b;
--ess-slice-overlay-color: #000;
--ess-slice-fade-color-rgb: 0,0,0;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
```

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