---
name: Aletagency
description: "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."
version: alpha

colors:
  background: "#E5DDC4"
  primary: "#000000"
  secondary: "#252525"
  neutral: "#A2A093"
  line: "rgba(0, 0, 0, 0.1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 23px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 11px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 11px
  md: 11px
  lg: 11px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A Copenhagen-based creative studio and production house with a curated, editorial digital presence.

*A digital mood board that serves as a curated, high-end portfolio*

## Colors

Muted, earthy neutral background with high-contrast black typography.

- **Background (`#E5DDC4`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#252525`)** — uses `ink-soft` token
- **Muted (`#A2A093`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 0.1)`)** — uses `line` token

## Typography

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

- Use wide letter-spacing for navigation and labels
- Reserve serif for expressive hero moments

## Layout

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

*Rhythm:* Generous vertical rhythm with massive whitespace around the core content

## Elevation & Depth

- 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

## Shapes

- `sm`: 11px
- `md`: 11px
- `lg`: 11px
- `pill`: 9999px

## Components

- **button:** Minimal, typography-based navigation links
- **card:** Oversized, photographic cards with subtle borders
- **chip:** Simple pill-shaped toggle for view modes (Linear/Random)
- **hero:** A dynamic, overlapping grid of project imagery with a centered text statement

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```