# Lamalama Nl · Design system migration spec

> Source: https://lamalama.nl  ·  Curated by OpenDesign  ·  en

> This site is a prime example of modern agency design, using extreme typographic scale and restrained color to create a powerful brand presence.

## 1. Identity DNA

Lamalama operates like a digital studio where high-impact photography and massive, tight-set typography are the primary building materials. The system's core identity is defined by a creative, bold, and unapologetic craft, distilled into the principle of going all in or not at all. This is not a toolkit for gentle suggestion, but a framework for assertion.

**One-liner:** A creative digital agency that goes all in or not at all.
**Keywords:** creative · bold · unapologetic · craft · agency
**Analogy:** A digital creative studio that pairs high-impact photography with massive, tight-set typography.

## 2. Color

The palette is a study in high-contrast dualism, pairing a deep, near-black ground with warm off-white text. This stark duality is designed to make typography and photography command attention.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#010101` | main background |
| `--bg-soft` | `#1a1c1c` | card background |
| `--bg-quiet` | `#f9f4eb` | quiet area |
| `--ink` | `#f9f4eb` | body text |
| `--ink-soft` | `#ffffff` | secondary text |
| `--muted` | `#999999` | placeholder |
| `--line` | `rgba(249, 244, 235, 0.2)` | divider |

**Color principle:** High-contrast dualism: deep black backgrounds with warm off-white text, designed to make large typography and photography pop.

The guiding principle is one of cinematic contrast, ensuring every element on the dark canvas is legible and impactful.

## 3. Typography

Typographic voice is established through two distinct categories: a heavy grotesque-sans for commanding headlines and a clean geometric-sans for body copy. The rules enforce strict left-alignment and a distinctive, uppercase tracking for all UI labels and metadata.

- **Display:** grotesque-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 0.95 | 700 | -2px | Hero headline |
| heading-1 | 40px | 1.0 | 500 | -0.8px | Secondary headlines |
| body | 16px | 1.5 | 400 | -0.2px | Body copy and UI labels |

**Type rules:**
- All UI labels and metadata use uppercase monospace-like tracking.
- Headlines are strictly left-aligned with tight leading.
- Body text maintains comfortable reading length at roughly 680px.

## 4. Spacing

A standard 4px grid underpins the rhythm, with generous whitespace used not as empty space, but as a structural frame for the bold typographic elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px base grid with generous whitespace to frame bold typographic elements.

## 5. Surfaces

Surfaces are rendered with a deliberate lack of ornament. Depth is conveyed through immersive photography and layered typography, not through shadows or decorative borders.

- **Radius:** sm 4px · md 0px · lg 0px · pill 9999px
- **Borders:** Minimal 1px solid borders used strictly for structural separation, not decoration.

## 6. Layout

The layout skeleton is asymmetric, anchored by a full-bleed immersive hero section and a grounded bottom navigation bar. Side-panel imagery and a strict left alignment create an editorial, rather than conventional, grid structure.

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

**Skeleton:** Asymmetric grid with a heavy hero section, anchored bottom nav bar, and side-panel imagery.

## 7. Motion & Interaction

Motion philosophy prioritizes fluidity and weight. All transitions are smooth and unified in duration, providing a sense of physical depth as sections change and dynamic backgrounds shift.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 1, 0.5, 1)`
- **Patterns:**
  - Smooth page transitions between sections.
  - Subtle hover states on interactive elements.
  - Dynamic background imagery changes.

- **Hover:** Subtle opacity or background-color shifts on interactive elements.
- **Click:** Immediate visual feedback via state changes.
- **Transition:** All interactive elements share a unified, smooth transition duration.
- **Keyboard:** Standard focus outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident, direct, and unapologetic, mirrored in all-caps, tightly tracked headlines and minimalist, action-oriented CTAs. The tone avoids passive language and excessive adjectives, favoring the impact of scale and placement.

- **Tone:** Confident, direct, and unapologetic.
- **Headline style:** All-caps, tightly tracked, massive scale.
- **CTA style:** Minimalist, action-oriented text in small uppercase pills.
- **Avoid:** Passive language / Excessive adjectives / Centered text blocks

### Don'ts
- ❌ Don't use centered text — screenshot shows strict left-alignment for all headlines and body copy.
- ❌ Don't use serif fonts — screenshot shows exclusively grotesque and geometric sans-serif categories.
- ❌ Don't use bright neon accents — screenshot shows a muted, high-contrast palette of off-white and deep black.
- ❌ Don't use heavy border-radius on buttons — screenshot shows pill shapes or subtle rounded corners.
- ❌ Don't use dense paragraph layouts — screenshot shows generous whitespace around text blocks.
- ❌ Don't use multiple font weights in body copy — screenshot shows a uniform weight for standard text.

The system deliberately excludes centered text blocks, serif fonts, bright neon accents, and dense paragraph layouts.

## System Prompt (paste into AI tool)

```
A bold, high-contrast creative agency website featuring massive grotesque typography and cinematic photography. The design relies on a deep black (#010101) background and warm off-white (#f9f4eb) text. Display typography uses a heavy grotesque-sans category with tight leading, while body copy uses a clean geometric-sans category. The layout is strictly left-aligned, avoiding centered elements to maintain a professional, editorial feel. Key interactions include smooth hover transitions and immersive, full-bleed hero sections. Critically, avoid using serif fonts, centered text, bright neon accents, or dense, cluttered layouts. The system emphasizes 'all-in' boldness through visual impact rather than busy UI patterns.
```