---
title: "Lama Lama design system"
variant: extended
source: https://lamalama.com/
captured_at: 2026-10-12
theme: dark
industry: agency
generator: Design DNA (https://four.wiralomi.com/style/lamalama-nl)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Lama Lama · Design System

> A bold agency identity staged like a cinematic title sequence

**Theme:** dark · **Industry:** agency · **Source:** https://lamalama.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Lama Lama’s homepage pairs a dark, restrained interface with immersive, high-contrast moving imagery. Oversized uppercase headlines and compact utility navigation make the agency’s voice immediate without competing with the full-bleed visual.

## North star

Let one oversized, sharply set statement and cinematic full-bleed imagery lead; keep every control quiet and secondary.

## Overview

The visual strategy is built around contrast: a near-black charcoal canvas (#1a1c1c) supports warm off-white text (#f9f4eb), while pure black (#000000) appears as a secondary surface rather than a bright accent. The first viewport is a cinematic, full-bleed video frame, with the interface and copy layered over its tonal shifts. A large, heavy uppercase headline anchors the lower-left; a short paragraph sits separately toward the lower-right, creating an editorial, asymmetric composition. SuisseBPIntl carries the prominent display voice, while Sometype handles small navigation, labels and utility copy. The type system contrasts bold scale with tiny uppercase metadata. Navigation is compact and pinned high on the right, including a small contact action and visual preview tile. A thin horizontal rule and widely distributed micro-labels close the hero. Keep spacing deliberate and compact around controls, but leave broad negative space around the primary statement.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Charcoal Canvas | `#1a1c1c` | `--color-charcoal-canvas` | surface | Primary page canvas and dark ground behind the hero’s layered content. |
| Warm Chalk | `#f9f4eb` | `--color-warm-chalk` | brand | Headline, navigation, captions, and other high-contrast foreground text. |
| True Black | `#000000` | `--color-true-black` | neutral | Secondary dark surface and muted text presence; retain as a subtle interface tone. |

### Semantic aliases

`--color-canvas` → `#1a1c1c` (Charcoal Canvas) · `--color-surface` → `#000000` (True Black) · `--color-surface-2` → `#f9f4eb` (Warm Chalk) · `--color-text` → `#f9f4eb` (Warm Chalk) · `--color-text-muted` → `#000000` (True Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f9f4eb` | `#1a1c1c` | 15.62:1 | AAA |
| `#f9f4eb` | `#000000` | 19.17:1 | AAA |
| `#000000` | `#1a1c1c` | 1.23:1 | fail |
| `#000000` | `#f9f4eb` | 19.17:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Sometype | `--font-body` | webfont | 400, 500 | Body copy, navigation, captions, and compact utility labels. | Space Mono |
| SuisseBPIntl | `--font-display` | webfont | 400, 700 | Display headline and introductory heading. | Inter |

- **Sometype:** Use regular body text; small utility text is medium-weight, tightly tracked, and often uppercase.
- **SuisseBPIntl:** Display uses heavy weight, uppercase, tight negative tracking, and compressed line spacing.

### Type scale — Custom (ratio ≈ 2.121, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 700 | 0.8 | -0.02em | uppercase | SuisseBPIntl | Oversized all-caps hero statement. |
| h1 | 20px | 400 | 1.2 | -0.02em | — | SuisseBPIntl | Introductory heading or supporting page headline. |
| body | 16px | 400 | 1 | 0 | — | Sometype | Short explanatory hero paragraph. |
| caption | 10px | 500 | 1.8 | -0.02em | uppercase | Sometype | Small uppercase labels and metadata. |
| nav | 10px | 500 | 1.8 | -0.02em | uppercase | Sometype | Compact uppercase navigation and contact links. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 2, 4, 8, 10, 11, 12, 16, 20, 24, 32, 40, 80, 110, 160 px.
- Section rhythm 40px · element gap 4px · card padding — · max content width 1360px.

Use a wide, centered composition with a measured maximum content width of 1360px. The hero fills the viewport with media, while the headline occupies the lower-left and supporting copy aligns independently on the lower-right. Keep the compact floating navigation near the top-right, distinct from the main text block. A fine horizontal rule anchors a low strip of tiny metadata and links. The measured spacing system is compact around interface details but allows substantial open areas around the headline and imagery.

## Shape & elevation

- Radius: nav `4px` · xs `4px`
- No box shadows measured: the page is flat.

The interface reads as mostly flat: no measured shadows or gradient system defines the page. Separate content through contrast, placement, and image layering rather than card elevation. Use fine rules and restrained translucent-looking navigation treatments only where visible in the screenshot; keep component edges visually quiet.

## Imagery

Use full-bleed video or cinematic photographic footage as the defining surface, with high-contrast, mostly monochrome imagery and strong light-dark shapes. The first viewport shows a blurred landscape-like form; the page preview also indicates fluid, organic imagery with bright highlights. Treat the footage as a dramatic backdrop, not as a small framed card. Keep overlaid text legible against the image’s darker areas.

## Components

### Floating contact navigation

Small top-right utility area with a contact link and compact visual preview; use Sometype uppercase labels and warm off-white text.

### Agency statement

Oversized, bold uppercase display headline at the lower-left, set in SuisseBPIntl with tight tracking and compressed leading.

### Supporting paragraph

Short body-copy block aligned separately on the lower-right to balance the large headline without forming a conventional card.

### Hero metadata rail

Thin horizontal rule above a low strip of tiny uppercase labels, location details, social links, and compact status text.

### Text-only action link

Use understated uppercase Sometype labels for contact and social actions; avoid filled button styling.

### Measured component styles

- **Primary button** (“THIS IS US ( - )”): transparent background · text #f9f4eb · radius 0px · padding 8px 0px · 500 10px Sometype · uppercase
- **Link** (“INSTAGRAM INSTAGRAM INSTAGRAM”): transparent background · text #f9f4eb · radius 0px · padding 0px · 500 10px Sometype · uppercase
- **Navigation item** (“THIS IS US ( - )”): transparent background · text #f9f4eb · radius 0px · padding 0px · 400 16px Sometype

## Do

- Use full-bleed cinematic imagery as the hero’s dominant layer.
- Set the main statement in bold uppercase display type.
- Keep navigation small, high-contrast, and visually secondary.
- Separate headline and supporting copy into asymmetric zones.
- Use Warm Chalk (#f9f4eb) for text against dark areas.
- Anchor compact metadata with a fine horizontal rule.

## Don't

- Do not introduce bright accent colours absent from the measured palette.
- Do not place the hero inside a rounded card.
- Do not make utility navigation compete with the headline.
- Do not use soft shadows or ornamental gradients as a defining treatment.
- Do not crowd the hero statement with extra content.
- Do not treat illustration-only colours in media as brand colours.

## Agent prompt

Build a new page in the Lama Lama visual style. Use Charcoal Canvas (#1a1c1c) as the underlying page ground, Warm Chalk (#f9f4eb) for high-contrast type, and True Black (#000000) only as a secondary dark surface. Lead with cinematic full-bleed video or photography; place one large, bold uppercase SuisseBPIntl-like headline in the lower-left and a concise Sometype-like paragraph in a separate lower-right zone. Keep navigation small and compact near the upper-right, with understated text-only actions and an optional visual preview tile. Finish the hero with a thin rule and a low strip of tiny uppercase metadata. Maintain an asymmetric editorial composition, quiet edges, flat surfaces, and generous breathing room around the statement. Avoid invented accent colours, decorative cards, and shadow-heavy UI.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-viewport cinematic media with lower-left headline, lower-right paragraph, compact top-right navigation, and bottom metadata rail. | prominent agency introduction, contact and social links, metadata navigation | full-bleed video backdrop, oversized uppercase headline, floating compact navigation, thin divider rule |

## Source CSS custom properties (selected)

```css
--ll-grid-gap: 1.5rem;
--spacing-xs: max(calc(8 / 16 * 1rem), calc(12 / 1440 * 100vw));
--spacing-sm: max(calc(12 / 16 * 1rem), calc(16 / 1440 * 100vw));
--spacing-md: max(calc(16 / 16 * 1rem), calc(24 / 1440 * 100vw));
--spacing-lg: max(calc(24 / 16 * 1rem), calc(32 / 1440 * 100vw));
--spacing-xl: max(calc(32 / 16 * 1rem), calc(48 / 1440 * 100vw));
--spacing-2xl: max(calc(48 / 16 * 1rem), calc(64 / 1440 * 100vw));
--spacing-hero: max(calc(110 / 16 * 1rem), calc(90 / 1440 * 100vw));
--bgPrimary: 26 28 28;
--textPrimary: 249 244 235;
--textSecondary: 249 244 235;
--bgSecondary: 0 0 0;
--content-spacing: max(calc(40 / 16 * 1rem), calc(80 / 1440 * 100vw));
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/lamalama-nl