---
name: Build in Amsterdam
description: "Excellent example of editorial-influenced agency design that balances portfolio showcase with brand messaging through intentional typography scale and asymmetric composition"
version: alpha

colors:
  background: "#F2EFE6"
  primary: "#000000"
  tertiary: "#C38133"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 86.4px
    lineHeight: 0.85
    fontWeight: 400
    letterSpacing: "-3.456px"
  body:
    fontFamily: transitional-serif
    fontSize: 16px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "normal"
  caption:
    fontFamily: transitional-serif
    fontSize: 11px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 4px
  lg: 100px
  pill: 100px

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

---

## Overview

Premium digital agency specializing in flagship ecommerce experiences

*A high-end fashion editorial meets digital storefront*

## Colors

High-contrast monochrome with warm neutral accents

- **Background (`#F2EFE6`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#C38133`)** — uses `accent` token
- **Borders (`rgba(0,0,0,1.0)`)** — uses `line` token

## Typography

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

- Headlines: Neue Haas Grotesk Display, tightly tracked negative values
- Body: Reckless Neue transitional serif, elegant and readable
- Labels: Uppercase grotesque with standard weight

## Layout

Split-screen: Left side showcases work/portfolio, right side contains hero text and CTAs

*Rhythm:* Asymmetric grid with generous whitespace on right half

## Elevation & Depth

- Borders: 1px solid black on buttons and cards

## Shapes

- `sm`: 4px
- `md`: 4px
- `lg`: 100px
- `pill`: 100px

## Components

- **button:** Outlined rectangular buttons with uppercase text and thin black borders
- **card:** Image-based work cards with hover states, appearing as floating overlays
- **hero:** Massive typographic headline paired with serif body copy and split layout

## Do's and Don'ts

**Don't:**
- don't use bright saturated colors — screenshot shows muted warm neutrals with black accents
- don't use rounded corners everywhere — screenshot shows sharp rectangular buttons with 4px radius only on specific elements
- don't use sans-serif for body text — screenshot shows transitional serif (Reckless Neue) for paragraph copy
- don't use centered text alignment — screenshot shows left-aligned and right-aligned text with asymmetric grid
- don't use drop shadows on cards — screenshot shows flat borders and clean edges without shadow effects
- don't use decorative script fonts — screenshot shows only grotesque sans-serif and transitional serif

---

## System Prompt (paste into AI agent)

```
This is a premium digital agency (Build in Amsterdam) specializing in Shopify Plus ecommerce development. The visual identity centers on a warm off-white background (#F2EFE6) with black (#000000) typography and a signature amber accent (#C38133). Typography pairs Neue Haas Grotesk Display for massive headlines with tight negative tracking against Reckless Neue transitional serif for body copy. The layout uses a distinctive split-screen approach where work samples occupy the left half and brand messaging fills the right. Critical constraints: never use sans-serif for body paragraphs, avoid centered layouts, and maintain the warm neutral palette without introducing cool blues or greens. Buttons must remain outlined with thin 1px black borders. The amber accent appears only in specific UI elements like the circular menu trigger.
```