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

# Spring/Summer · Design System

> Warm Scandinavian restraint, punctuated by fearless red type.

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

A Copenhagen agency homepage pairs a warm, restrained canvas with urgent red typography and a curated stream of client work. Oversized campaign-like headlines, compact navigation, and real project imagery give the page an editorial portfolio character.

## North star

Keep the warm canvas quiet and let oversized, precise red typography organize the page around real work.

## Overview

The page is built on a single warm beige canvas (#dedcd3), keeping the long scroll visually continuous rather than dividing it into contrasting bands. Signal-red (#fe3939) carries the identity: navigation, introductory copy, links, and oversized uppercase display headlines all use it. Grotesk display lettering is deliberately huge and tightly stacked, while Montreal handles readable prose and compact interface labels; Supply adds a monospaced, technical note to small captions and project tags. The layout alternates dramatic typography with restrained project grids, client marks, and offset text-and-image compositions. Project photography is shown as editorial evidence, often in large rectangular frames, and may bring its own unrelated colors. Hairline link borders use a soft beige-gray (#e5e3dc); pale blush tones are minor details, not alternate section backgrounds. Generous open canvas around content lets the red typography lead without decorative shadows or heavy card chrome.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Copenhagen Sand | `#dedcd3` | `--color-copenhagen-sand` | brand | Continuous page canvas behind navigation, work, client marks, and contact content. |
| Signal Vermilion | `#fe3939` | `--color-signal-vermilion` | accent | Primary identity color for navigation, links, intro copy, and oversized headings. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Secondary text color observed in project tags; not a dominant page surface. |
| Soft Chalk | `#e5e3dc` | `--color-soft-chalk` | semantic | Fine link outlines and delicate separators against the beige canvas. |
| Dusty Blush | `#e5bbb4` | `--color-dusty-blush` | surface | Minor pale-pink border detail in navigation and footer; not a section fill. |
| Rose Haze | `#e8aaa4` | `--color-rose-haze` | surface | Subtle footer border accent, secondary to the red and beige palette. |

### Semantic aliases

`--color-canvas` → `#dedcd3` (Copenhagen Sand) · `--color-text` → `#fe3939` (Signal Vermilion) · `--color-text-muted` → `#ffffff` (Paper White) · `--color-border` → `#e5e3dc` (Soft Chalk) · `--color-accent` → `#fe3939` (Signal Vermilion)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#fe3939` | `#dedcd3` | 2.61:1 | fail |
| `#ffffff` | `#dedcd3` | 1.37:1 | fail |
| `#fe3939` | `#dedcd3` | 2.61:1 | fail |

### Gradients

- `linear-gradient(rgb(254, 57, 57), rgb(254, 57, 57))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Supply | `--font-supply` | webfont | 400 | Monospaced project tags and compact captions. | Space Mono |
| Montreal | `--font-body` | webfont | 400 | Navigation, body copy, links, and secondary headings. | DM Sans |
| Grotesk | `--font-display` | webfont | 400 | Oversized uppercase display headlines and award statements. | Archivo |

- **Supply:** Regular weight; small labels use restrained tracking and sentence case.
- **Montreal:** Regular weight throughout; modest positive tracking, with compact interface text and natural-case prose.
- **Grotesk:** Regular weight rendered at extreme scale; uppercase and tightly stacked with compressed line height.

### Type scale — Custom (ratio ≈ 2.778, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 386px | 400 | 0.75 | 0 | uppercase | Grotesk | Huge uppercase campaign-style statements, including the award headline. |
| h1 | 170.5px | 400 | 0.76 | 0 | uppercase | Grotesk | Primary oversized uppercase page or section headline. |
| h2 | 43px | 400 | 1.1 | 0.02em | — | Montreal | Section titles and prominent secondary editorial headings. |
| body | 18px | 400 | 1.4 | 0.02em | — | Montreal | Introductory and supporting agency copy. |
| caption | 10px | 400 | 1.26 | 0.01em | — | Supply | Small monospaced project labels and metadata. |
| button | 12px | 400 | 1.3 | 0.023em | — | Montreal | Compact text-only calls to action. |
| nav | 12px | 400 | 1.3 | 0.023em | — | Montreal | Small navigation links across the top bar. |
| link | 18px | 400 | 1.4 | 0.02em | — | Montreal | Inline project names and supporting text links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 3, 8, 10, 12, 13, 14, 20, 54 px.
- Section rhythm 54px · element gap 10px · card padding — · max content width —.

A broad, single-page composition uses the full viewport canvas, with content aligned to a consistent outer margin rather than a boxed card system. The work area moves into a twelve-column arrangement of project imagery; the client mark section uses a six-column rhythm. Other sections return to single-column editorial layouts, offsetting text and images or placing large type beside photography. Keep substantial breathing room between content groups; the measured section rhythm is 54 units, with a 10-unit element gap. Avoid inventing a fixed max width.

## Shape & elevation

- Radius: nav `4px` · link `3px` · xs `3px` · sm `4px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is predominantly flat: no measured shadows and no heavy card surfaces. Separate content through whitespace, alignment, and image edges. Fine outlines around small project links use #e5e3dc and a subtle 3px radius; navigation and the larger page structure remain unboxed. Layering comes from overlapping or offset image-and-type compositions, not simulated depth.

## Imagery

Use real client and agency photography, website captures, and brand work rather than decorative illustration. Project imagery appears in rectangular frames and as broad showcase moments; compositions may be offset against large red headlines or arranged in a horizontal portfolio grid. Preserve each project's own colors and imagery as contained content, not as a change to the site's brand palette. The photographed award moment is monochrome, while other case-study imagery remains vivid.

## Components

### Top navigation

Compact Montreal navigation in #fe3939 on the canvas, with brand at left and work/about links; keep treatment text-led and unobtrusive.

### Oversized statement

Grotesk uppercase display text in #fe3939, with very tight line stacking and image overlap or adjacency.

### Project gallery

Twelve-column work presentation with linked project imagery, compact Supply labels, and subtle #e5e3dc link borders.

### Client mark grid

Six-column arrangement of client identities with ample space and restrained tonal treatment against the canvas.

### Text-only CTA

Small Montreal link or button text in #fe3939 without a filled button background or shadow.

### Contact block

Short project invitation, contact details, and a large uppercase red question headline, all on the continuous canvas.

### Measured component styles

- **Primary button** (“What we do”): transparent background · text #fe3939 · radius 0px · padding 0px · 400 12px Montreal
- **Link** (“Websites”): transparent background · text #ffffff · border 1px solid #e5e3dc · radius 3px · padding 0px · 400 10px Supply
- **Navigation item** (“Spring/Summer™ What we do Our work About”): transparent background · text #fe3939 · radius 0px · padding 0px · 400 12px Montreal

## Do

- Use #dedcd3 as the continuous page canvas.
- Reserve #fe3939 for identity text, links, navigation, and key headlines.
- Make display statements oversized, uppercase, and tightly stacked.
- Pair real project imagery with editorial, text-led layouts.
- Use Supply for small monospaced labels and metadata.
- Separate sections with open space rather than filled bands.

## Don't

- Do not introduce unmeasured brand colors or section backgrounds.
- Do not turn every project into a shadowed card.
- Do not use pill-shaped controls or heavy button fills.
- Do not apply display typography to long body paragraphs.
- Do not mistake colors inside client imagery for site-wide brand colors.
- Do not force all content into centered, identical modules.

## Agent prompt

Build a new agency page in Spring/Summer’s editorial Copenhagen style. Use Copenhagen Sand (#dedcd3) as the continuous canvas and Signal Vermilion (#fe3939) for navigation, links, intro copy, and commanding display headlines. Set display statements in a heavy-looking but regular-weight condensed grotesk substitute, uppercase and tightly stacked; keep body copy in a clear modern sans and tiny metadata monospaced. Arrange real project imagery in spacious, asymmetric editorial compositions, with a multi-column work gallery and a restrained client-mark grid. Use Soft Chalk (#e5e3dc) only for delicate outlines, and keep Dusty Blush (#e5bbb4) and Rose Haze (#e8aaa4) incidental. Maintain open space between sections, minimal chrome, no shadows, and text-led CTAs. Treat colors within client work as image content, not new site colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Slim top bar with brand and links aligned across the page. | Persistent section navigation, Brand link | Small red text, Fine lower hairline |
| 2 | hero | Intro copy above oversized headline with an adjacent award photograph. | Award proof, Editorial introduction | Giant uppercase red type, Monochrome image |
| 3 | gallery | Twelve-column project presentation with image-led, varied-width entries. | Linked case studies, Project category labels | Large rectangular imagery, Small monospaced tags |
| 4 | logo-cloud | Six-column client mark arrangement with a small section heading. | Client credibility, Browse work link | Compact logo tiles, Quiet tonal contrast |
| 5 | stats | Open single-column canvas with a compact paragraph offset within the section. | Experience statement, Project count proof | Small red editorial copy, Generous negative space |
| 6 | feature-split | Full-width project visual followed by a large headline, overlapping imagery, and supporting copy. | Team introduction, Contact invitation | Uppercase red headline, Layered photography |
| 7 | feature-split | Open editorial composition combining team imagery with descriptive text. | Agency capabilities, Supporting team context | Unboxed image and text, Minimal red links |
| 8 | contact | Contact details and project invitation above a full-width display question. | Email and phone contact, Project enquiry prompt | Large uppercase red headline, Small utility links |

## Source CSS custom properties (selected)

```css
--color-white: 0 0% 100%;
--color-black: 0 0% 0%;
--color-grey: 0 0% 21%;
--color-beige: 43 49% 90%;
--color-yellow: 56 100% 50%;
--grid-gap: 1rem;
--page-transition-duration: .4s;
--ease-out: cubic-bezier(0,.55,.45,1);
--ease-in-out: cubic-bezier(.85,0,.15,1);
--theme-transition-duration: .4s;
--theme-transition-ease: ease-out;
--font-weight: 400;
--swiper-theme-color: #007aff;
--main-color: #2C622C;
--link-color: #234923;
--text-color: #222;
--hover-color: #234923;
--decline-color: #f6f6f6;
--decline-text: #000;
--footer-background: #f6f6f6;
```

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