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

# Caserne · Design System

> Quiet canvas, confident creative work.

**Theme:** light · **Industry:** agency · **Source:** https://caserne.com/en · **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._

Caserne’s homepage pairs a restrained editorial shell with a long, image-led showcase of creative projects. Oversized type, generous whitespace, and varied project imagery keep the studio’s work—not interface decoration—in focus.

## North star

Keep the interface quiet and spacious so the distinctive creative work supplies nearly all of the colour and visual energy.

## Overview

The page uses a pale off-white canvas (#f6f6f6) as a consistent ground, with near-black type (#000000) establishing a sharp editorial hierarchy. Muted gray (#949494) softens secondary copy and metadata, while fine gray rules separate the client list and footer without enclosing the portfolio in cards. Plain is the sole measured typeface: regular weight, compact tracking, and restrained line heights create a clean, contemporary voice. The opening statement is large and horizontally placed beside generous empty space; the portfolio then unfolds as a sequence of image-led projects with changing image widths and positions. Photography, campaign artwork, product imagery, and video carry their own strong colours, so the interface stays neutral rather than competing. A spacious section rhythm gives each project room to register. Navigation sits in a compact rounded grouping, while project captions and labels remain small and quiet. The result feels like a studio’s curated work archive rather than a conventional storefront or dashboard.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#f6f6f6` | `--color-gallery-white` | brand | Primary page canvas and continuous background behind the project portfolio. |
| Studio Ink | `#000000` | `--color-studio-ink` | neutral | Main statement, navigation, project titles, client names, and footer text. |
| Rule Gray | `#c5c5c5` | `--color-rule-gray` | neutral | Thin section separators and subtle boundaries; keep rules visually quiet. |
| Caption Gray | `#949494` | `--color-caption-gray` | neutral | Secondary statement words, project metadata, muted links, and supporting labels. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Occasional light text within project media; not a dominant interface surface. |
| Slate Mist | `#737c7c` | `--color-slate-mist` | surface | A muted color sampled from project media, not a defining interface surface. |
| Moss Shadow | `#4f573f` | `--color-moss-shadow` | surface | Olive tone found in project imagery; treat as artwork colour, not site chrome. |
| Blush Paper | `#fcded1` | `--color-blush-paper` | surface | Pale peach sampled from project artwork, not a recurring page background. |
| Olive Signal | `#648636` | `--color-olive-signal` | accent | Green present in portfolio media; do not use as a global interface accent. |
| Oxide Red | `#6a201b` | `--color-oxide-red` | accent | Deep red sampled from project artwork, rather than a standard CTA colour. |
| Soft Cement | `#b0b1b0` | `--color-soft-cement` | surface | Neutral gray found in imagery; secondary to the page’s black-and-off-white system. |
| Sage Tint | `#dbddc5` | `--color-sage-tint` | surface | Pale green-gray appearing within portfolio media only. |
| Warm Umber | `#695c4e` | `--color-warm-umber` | surface | Earthy brown sampled from project imagery, not a structural UI colour. |
| Lavender Art | `#a897be` | `--color-lavender-art` | surface | Lavender from campaign artwork; reserve it for image content. |
| Graphite Art | `#50535a` | `--color-graphite-art` | surface | Dark slate sampled from portfolio media, not the primary text colour. |
| Blue Haze | `#80939f` | `--color-blue-haze` | surface | Muted blue-gray found in imagery; not a recurring interface accent. |

### Semantic aliases

`--color-canvas` → `#f6f6f6` (Gallery White) · `--color-surface` → `#737c7c` (Slate Mist) · `--color-surface-2` → `#4f573f` (Moss Shadow) · `--color-surface-3` → `#fcded1` (Blush Paper) · `--color-surface-4` → `#648636` (Olive Signal) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#949494` (Caption Gray) · `--color-text-subtle` → `#ffffff` (Paper White) · `--color-border` → `#c5c5c5` (Rule Gray) · `--color-accent` → `#648636` (Olive Signal) · `--color-accent-2` → `#6a201b` (Oxide Red)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f6f6f6` | 19.43:1 | AAA |
| `#000000` | `#737c7c` | 4.9:1 | AA |
| `#000000` | `#4f573f` | 2.77:1 | fail |
| `#000000` | `#fcded1` | 16.51:1 | AAA |
| `#949494` | `#f6f6f6` | 2.81:1 | fail |
| `#949494` | `#737c7c` | 1.41:1 | fail |
| `#949494` | `#4f573f` | 2.5:1 | fail |
| `#949494` | `#fcded1` | 2.38:1 | fail |
| `#ffffff` | `#f6f6f6` | 1.08:1 | fail |
| `#ffffff` | `#737c7c` | 4.28:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Plain | `--font-body` | webfont | 400 | All measured headings, body copy, navigation, links, and captions. | Inter |

- **Plain:** Regular weight throughout; tight negative tracking, compact line-height, and sentence case. Use scale and placement rather than bold weight for hierarchy.

### Type scale — Augmented Fourth (ratio ≈ 1.414, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 30px | 400 | 1 | -0.015em | — | Plain | Opening studio statement and prominent page-level display copy. |
| h2 | 20px | 400 | 1 | -0.022em | — | Plain | Project titles and secondary section headings. |
| body | 15px | 400 | 1.05 | -0.03em | — | Plain | Project descriptions, service labels, and general supporting copy. |
| caption | 12px | 400 | 1.05 | -0.037em | — | Plain | Small project metadata and secondary image captions. |
| nav | 15px | 400 | 1 | -0.03em | — | Plain | Compact primary navigation links. |
| link | 30px | 400 | 1 | -0.015em | — | Plain | Prominent project links and studio wordmark links. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 5, 6, 8, 10, 12, 20, 30, 180 px.
- Section rhythm 96px · element gap 6px · card padding — · max content width 1063px.

The page sits on a spacious, pale canvas and uses a measured maximum content width of 1063px. The opening statement is aligned to the right of the introductory area, while the project sequence alternates centered wide images with smaller images positioned asymmetrically. Project sections are separated by generous vertical intervals rather than panels. Captions sit close to their images. The client list becomes a restrained multi-column text block, followed by a simple split footer. Overall density is low, with varied media sizes creating rhythm.

## Shape & elevation

- Radius: button `4px` · nav `9999px` · xs `6px` · pill `9999px`
- Shadow `inset` (nav, footer): `rgba(0, 0, 0, 0.1) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.05) 0px -1px 1px 0px inset`
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is mostly flat: no recurring card shadows or raised panels are evident. A thin gray border provides quiet separation in the lower client and footer areas. Navigation uses a compact pill-shaped treatment with a very subtle inset shadow. Let imagery and whitespace create depth instead of adding interface elevation.

## Imagery

Project imagery is the primary source of colour: campaign posters, brand applications, product stills, photography, and video appear in a varied editorial sequence. Images retain their original visual identity rather than receiving a common colour overlay. Some are broad and centered; others are smaller and offset. The opening media includes a stark black field, while later project artwork supplies brighter greens, reds, and pastels.

## Components

### Header navigation

A small studio mark and wordmark sit alongside compact links; the measured navigation treatment is pill-shaped with a subtle inset shadow.

### Opening statement

Large, regular-weight Plain text aligned to the right in the first viewport, with selected words softened in gray.

### Project feature

Image-led project entry with a prominent title, small service or category labels, and understated supporting caption.

### Project gallery

An editorial sequence of wide and smaller media, varied in position and scale rather than contained in uniform cards.

### Selected clients

A heading and dense multi-column client list, separated from surrounding content by a fine gray rule.

### Footer contact

Minimal closing area with a brief greeting, contact prompt, small copyright, and understated destination links.

### Measured component styles

- **Primary button**: background #f7f7f7 · text #ffffff · radius 3.75px · padding 0px · 400 15px Plain
- **Link** (“Branding Campaign Strategy Avril Superma”): transparent background · text #000000 · radius 0px · padding 0px · 400 15px Plain
- **Navigation item** (“Projects”): transparent background · text #000000 · radius 0px · padding 0px · 400 15px Plain

## Do

- Use Gallery White (#f6f6f6) as the dominant canvas.
- Set primary text in Studio Ink (#000000).
- Keep metadata quiet in Caption Gray (#949494).
- Give project imagery generous space and varied placement.
- Use thin Rule Gray (#c5c5c5) separators sparingly.
- Use typography and whitespace for hierarchy, not heavy decoration.

## Don't

- Do not turn every project into a uniform boxed card.
- Do not apply portfolio artwork colours as global UI accents.
- Do not add heavy shadows or layered panels.
- Do not make captions compete with project titles or images.
- Do not use bold weights where measured text is regular.
- Do not compress the generous vertical pacing.

## Agent prompt

Build a creative-agency portfolio page with Caserne’s quiet editorial character. Use Gallery White (#f6f6f6) as the canvas, Studio Ink (#000000) for primary text, Caption Gray (#949494) for secondary copy, and Rule Gray (#c5c5c5) for rare hairlines. Use a clean sans-serif close to Plain, regular weight, with tight tracking and compact line-height. Place a prominent studio statement above an image-led project sequence; vary image sizes and alignment rather than using a uniform card grid. Let project artwork retain its own colours, and keep captions small and subdued. Preserve large areas of whitespace between sections. Finish with a restrained client list and simple contact footer. Avoid decorative gradients, strong shadows, loud interface accents, and dense controls.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Pale introductory canvas with compact header and statement aligned to the right. | studio introduction, primary navigation | small wordmark, pill navigation, large statement |
| 2 | gallery | A featured project image and title on a single-column pale section. | project discovery, project link | large media, title and caption |
| 3 | gallery | Three project images arranged as a varied editorial sequence. | browse projects, open case study | mixed image widths, quiet captions |
| 4 | gallery | Two projects with contrasting media proportions and asymmetric positioning. | project discovery, follow case-study link | offset imagery, small metadata |
| 5 | gallery | Two smaller image-led works and compact labels on the continuous canvas. | browse projects, view work | paired media, minimal captions |
| 6 | gallery | One centered wide project image with a small title and caption. | open project, project discovery | featured media, caption beneath image |
| 7 | gallery | Three image-led projects arranged with differing image sizes and alignments. | browse project range, open case study | asymmetric media, project labels |
| 8 | gallery | Two project presentations combining video and graphic-led media. | watch project media, open project | video showcase, large logo artwork |
| 9 | gallery | One substantial centered image with a restrained title and caption. | view project, project discovery | featured image, small caption |
| 10 | logo-cloud | Fine-rule-separated client section with a heading and multiple text columns, followed by a minimal footer. | scan client list, contact studio | multi-column names, divider line, simple footer links |

## Source CSS custom properties (selected)

```css
--foreground: #000;
--border: rgba(0,0,0,.2);
--gap: 10px;
--rounded-in: 5px;
--rounded-out: 6px;
--swiper-theme-color: #007aff;
```

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