---
name: Lamalama Nl
description: "This site is a prime example of modern agency design, using extreme typographic scale and restrained color to create a powerful brand presence."
version: alpha

colors:
  background: "#010101"
  primary: "#f9f4eb"
  secondary: "#ffffff"
  neutral: "#999999"
  bg-soft: "#1a1c1c"
  bg-quiet: "#f9f4eb"
  line: "rgba(249, 244, 235, 0.2)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 80px
    lineHeight: 0.95
    fontWeight: 700
    letterSpacing: "-2px"
  heading-1:
    fontFamily: geometric-sans
    fontSize: 40px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-0.8px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.2px"

rounded:
  sm: 4px
  md: 0px
  lg: 0px
  pill: 9999px

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

---

## Overview

A creative digital agency that goes all in or not at all.

*A digital creative studio that pairs high-impact photography with massive, tight-set typography.*

## Colors

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

- **Background (`#010101`)** — uses `bg` token
- **Primary text (`#f9f4eb`)** — uses `ink` token
- **Secondary text (`#ffffff`)** — uses `ink-soft` token
- **Muted (`#999999`)** — uses `muted` token
- **Borders (`rgba(249, 244, 235, 0.2)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Standard 4px base grid with generous whitespace to frame bold typographic elements.

## Elevation & Depth

- Borders: Minimal 1px solid borders used strictly for structural separation, not decoration.

## Shapes

- `sm`: 4px
- `md`: 0px
- `lg`: 0px
- `pill`: 9999px

## Components

- **button:** Semi-transparent pill button with blur or solid backgrounds for calls to action.
- **card:** Image-driven cards with no borders, relying on photography for structure.
- **chip:** Uppercase text pills used for tags and metadata.
- **input:** Minimal border-bottom inputs for forms.
- **hero:** Full-bleed immersive section with oversized typography over cinematic imagery.

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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