# Aletagency · Design system migration spec

> Source: https://aletagency.com  ·  Curated by OpenDesign  ·  en

> This site is a perfect example of a refined, high-end agency portfolio that uses photographic curation and massive whitespace to establish a premium brand identity.

## 1. Identity DNA

The system is a digital mood board, functioning as a curated, high-end portfolio for a Copenhagen-based creative studio. Its identity is rooted in photographic curation and storytelling, built on a foundation of refined production.

**One-liner:** A Copenhagen-based creative studio and production house with a curated, editorial digital presence.
**Keywords:** Creative · Storytelling · Production · Copenhagen
**Analogy:** A digital mood board that serves as a curated, high-end portfolio

## 2. Color

The palette is a study in restraint, built around a warm, muted beige background that serves as a neutral canvas for high-contrast black typography. This earthy foundation establishes a quiet, confident backdrop for the photographic work.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#E5DDC4` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#252525` | secondary text |
| `--muted` | `#A2A093` | placeholder |
| `--line` | `rgba(0, 0, 0, 0.1)` | divider |

**Color principle:** Muted, earthy neutral background with high-contrast black typography.

Color is used not for decoration, but to establish a muted, editorial atmosphere that defers to the imagery.

## 3. Typography

The typographic voice separates expressive moments from functional navigation. A transitional serif is reserved for the slight poetry of headline statements, while a humanist sans-serif handles the utilitarian needs of the interface.

- **Display:** transitional-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 23px | 1.0 | 400 | -0.5px | Hero statement |
| body | 11px | 1.5 | 400 | 0px | General text |

**Type rules:**
- Use wide letter-spacing for navigation and labels
- Reserve serif for expressive hero moments

## 4. Spacing

Vertical rhythm is generous, with massive whitespace around core content defining the system's measured pace.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical rhythm with massive whitespace around the core content

## 5. Surfaces

Depth is communicated through minimal, soft elevation and a reliance on spatial separation rather than heavy decoration. The surface language is clean, using subtle borders and shadows to imply hierarchy without clutter.

- **Radius:** sm 11px · md 11px · lg 11px · pill 9999px
- **Shadows:**
  - rgba(0, 0, 0, 0.1) 0px 1px 3px 0px
  - rgba(0, 0, 0, 0.06) 0px 1px 2px 0px
- **Borders:** Minimal, relying on spacing for separation

## 6. Layout

The layout skeleton is centered, allowing generous padding to frame a dynamic, overlapping masonry-style grid of project imagery. This structure prioritizes the visual weight of the photographs, arranging them in a curated, non-linear composition.

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

**Skeleton:** Centered content with generous padding and a masonry-style image arrangement

## 7. Motion & Interaction

Motion philosophy is restrained and functional, focusing on smooth transitions for UI state changes like color and opacity. The primary interaction is tactile, with a drag-to-explore gallery that invites direct, physical engagement with the content.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Cursor changes to 'grab' to indicate draggable gallery

- **Hover:** Subtle color transitions on interactive text elements
- **Click:** Drag-to-explore interaction on the main gallery
- **Transition:** Smooth transitions for color and opacity changes
- **Keyboard:** Standard tab navigation

## 8. Voice & Don'ts

The editorial voice is professional, sophisticated, and understated. Headlines use a serif-based, slightly poetic style, while calls to action are clean, sans-serif, and uppercase.

- **Tone:** Professional, sophisticated, and understated
- **Headline style:** Serif-based, slightly poetic statements
- **CTA style:** Clean, sans-serif, uppercase labels
- **Avoid:** Loud marketing jargon / Complex layout patterns / Cluttered interfaces

### Don'ts
- ❌ don't use bright accent colors — screenshot shows a strictly muted, earthy palette
- ❌ don't apply heavy drop shadows — screenshot shows minimal, soft elevation only
- ❌ don't use a strict grid for images — screenshot shows a dynamic, overlapping layout
- ❌ don't use decorative sans-serif fonts — screenshot uses a functional humanist sans for UI
- ❌ don't clutter the interface — screenshot prioritizes massive whitespace and breathing room
- ❌ don't use all caps excessively — screenshot reserves it strictly for navigation and toggles

The system deliberately avoids clutter, loud marketing jargon, and decorative complexity, trusting the curation and whitespace to carry the narrative.

## System Prompt (paste into AI tool)

```
This site is a Copenhagen-based creative agency portfolio that prioritizes a refined, editorial aesthetic. The primary background is a warm, muted beige (#E5DDC4) paired with stark black typography (#000000). The font system utilizes a transitional serif for expressive moments and a humanist sans-serif for functional UI elements. Critically, the design avoids bright accents, heavy shadows, and cluttered grids, instead utilizing massive whitespace, subtle borders, and overlapping photographic cards. Navigation is minimalist and uppercase, and interactions focus on a tactile 'grab-to-explore' gallery.
```