# Build in Amsterdam · Design system migration spec

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

> Excellent example of editorial-influenced agency design that balances portfolio showcase with brand messaging through intentional typography scale and asymmetric composition

## 1. Identity DNA

The identity of Build in Amsterdam operates like a high-end fashion editorial meeting a digital storefront—a rigorous visual system that frames commerce through the lens of brand culture. Every element serves dual duty: showcasing portfolio work while reinforcing the agency's position as a premium digital partner.

**One-liner:** Premium digital agency specializing in flagship ecommerce experiences
**Keywords:** digital agency · Shopify partner · brand building · premium commerce
**Analogy:** A high-end fashion editorial meets digital storefront

## 2. Color

A high-contrast monochrome palette anchors the system in stark black and warm off-white, with a signature amber accent reserved for precise moments of emphasis. This restraint ensures the portfolio imagery commands attention while the brand maintains its sophisticated, editorial tone.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F2EFE6` | main background |
| `--ink` | `#000000` | body text |
| `--accent` | `#C38133` | single accent |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** High-contrast monochrome with warm neutral accents

The principle is one of deliberate contrast and selective warmth, allowing content to breathe within a controlled chromatic field.

## 3. Typography

Typography is the system's primary voice, pairing the monumental presence of Neue Haas Grotesk Display with the elegant readability of Reckless Neue transitional serif. This pairing creates a clear hierarchy: the grotesque delivers declarative headlines while the serif carries descriptive body copy with refined authority.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 86.4px | 0.85 | 400 | -3.456px | hero headlines |
| body | 16px | 1.2 | 400 | normal | body copy and descriptions |
| caption | 11px | 1.2 | 500 | normal | navigation and UI labels |

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

## 4. Spacing

Spacing follows an asymmetric rhythm, with generous whitespace on the right half of the split-screen creating visual balance against dense portfolio imagery.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 100 px
- **Rhythm:** Asymmetric grid with generous whitespace on right half

## 5. Surfaces

Surfaces are defined by crisp, minimal boundaries—1px solid black borders on buttons and cards establish edges without decorative weight. The absence of drop shadows keeps the focus on content, maintaining the system's flat, editorial quality.

- **Radius:** sm 4px · md 4px · lg 100px · pill 100px
- **Borders:** 1px solid black on buttons and cards

## 6. Layout

The layout is fundamentally a split-screen composition, where the left side functions as a portfolio showcase and the right half contains the typographic hero and calls to action. This binary structure creates a consistent visual rhythm while allowing flexibility in content presentation.

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

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

## 7. Motion & Interaction

Motion serves readability and delight through smooth, purposeful transitions rather than decorative flourish. Opacity fades, transform-based hovers, and staggered reveals are governed by consistent cubic-bezier easing, ensuring interactions feel measured and premium.

- **Durations:** micro 100ms · small 250ms · medium 500ms
- **Easing:** `cubic-bezier(0.45, 0.02, 0.09, 0.98)`
- **Patterns:**
  - Smooth opacity transitions for portfolio overlays
  - Transform-based hover effects on interactive elements
  - Staggered reveal animations for work items

- **Hover:** Subtle transform shifts on cards and buttons
- **Click:** Immediate visual feedback with opacity changes
- **Transition:** Consistent cubic-bezier easing across all interactive elements
- **Keyboard:** Standard tab navigation through interactive elements

## 8. Voice & Don'ts

The editorial voice is confident and authoritative, expressed through direct, declarative statements in massive uppercase type. Language remains sophisticated and minimal, with CTAs stripped to essential uppercase labels that match the system's crisp visual language.

- **Tone:** Confident, sophisticated, and authoritative
- **Headline style:** Direct, declarative statements in massive uppercase type
- **CTA style:** Minimal, uppercase text labels with thin borders
- **Avoid:** playful language / excessive punctuation / emoji / exclamation marks / casual tone

### Don'ts
- ❌ 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

The system deliberately avoids playful language, excessive punctuation, centered layouts, and decorative fonts—each omission reinforcing its commitment to authoritative simplicity.

## System Prompt (paste into AI tool)

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