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

# Duties · Design System

> Bold typography, calm canvas, expressive work.

**Theme:** light · **Industry:** design · **Source:** https://www.duties.xyz/ · **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._

Duties presents an Oslo brand and Framer studio through oversized condensed type, a warm off-white canvas, and a long, image-led project portfolio. Monospaced labels and hairline dividers bring an orderly studio-document feel to the otherwise spacious, expressive layout.

## North star

Let oversized, expressive typography lead; keep the surrounding canvas quiet, spacious, and precisely annotated.

## Overview

The visual strategy contrasts an exceptionally large, condensed display face with a nearly monochrome, warm off-white and charcoal palette. The hero gives the headline room to dominate, while tiny uppercase monospaced labels anchor the edges and mark status, project categories, and footer navigation. Content unfolds as a long portfolio: large, varied project images sit in a loose, asymmetrical grid, with generous blank intervals separating them. Photography and illustration retain their own vivid or tonal palettes, but remain framed by the quiet neutral page rather than becoming brand colours. Hairline rules define section boundaries without cards, shadows, or heavy containers. The result feels like a printed creative-studio portfolio translated into a web page: typography supplies the identity, images provide variety, and restrained alignment and recurring metadata keep the experience legible.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Parchment | `#f1f0ee` | `--color-studio-parchment` | surface | Page canvas and recurring section background; the warm near-white grounds the headline, portfolio, information blocks, and footer. |
| Carbon Ink | `#252525` | `--color-carbon-ink` | neutral | Primary headline, body copy, labels, footer lettering, and dark filled controls; use as the page's consistent ink. |

### Semantic aliases

`--color-canvas` → `#f1f0ee` (Studio Parchment) · `--color-text` → `#252525` (Carbon Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#252525` | `#f1f0ee` | 13.46:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| PP Neue Montreal SemiBold | `--font-body` | webfont | 600 | Main body copy and prominent supporting text | Inter |
| PP Neue Montreal Mono Medium | `--font-mono` | webfont | 500, 400 | Uppercase metadata, captions, navigation, and code-style labels | Space Mono |
| PP Neue Montreal Regular | `--font-display` | webfont | 400 | Lightweight headings and introductory copy | Inter |
| AS Therma Bold Condensed | `--font-as-therma-bold-condensed` | webfont | 700 | Oversized uppercase hero display headline | Oswald |

- **PP Neue Montreal SemiBold:** Semibold sans-serif with restrained tracking; keep supporting copy compact and easy to scan.
- **PP Neue Montreal Mono Medium:** Medium-weight monospace, commonly uppercase; use small labels as precise annotations.
- **PP Neue Montreal Regular:** Regular sans-serif; preserve a quieter contrast against the heavy display headline.
- **AS Therma Bold Condensed:** Bold, very condensed uppercase display with tight negative tracking and compact line spacing.

### Type scale — Custom (ratio ≈ 2.981, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 160px | 700 | 0.8 | -0.067em | uppercase | AS Therma Bold Condensed | Oversized uppercase hero headline |
| h1 | 28px | 400 | 1.05 | 0 | — | PP Neue Montreal Regular | Introductory heading or supporting lead |
| body | 18px | 600 | 1.15 | 0 | — | PP Neue Montreal SemiBold | Studio descriptions and service explanations |
| caption | 12px | 500 | 1.15 | 0 | uppercase | PP Neue Montreal Mono Medium | Uppercase project labels and compact metadata |
| code | 12px | 500 | 1.15 | 0 | uppercase | PP Neue Montreal Mono Medium | Compact uppercase navigation and utility labels |

OpenType features in use: `"blwf", "cv03", "cv04", "cv09", "cv11", "dlig", "ss04", "ss07", "ss08", "zero"`, `"blwf", "cv03", "cv04", "cv09", "cv11"`, `"ss07", "ss08"`.

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 1, 2, 4, 5, 8, 10, 20, 40, 80 px.
- Section rhythm 240px · element gap 10px · card padding — · max content width 1420px.

The measured page max width is 1420px, with a spacious overall density and a 240px section gap. The opening headline is flush toward the left and occupies only a portion of the wide canvas, leaving a broad field of negative space. Below, portfolio imagery alternates between wide and split compositions with narrow gutters and small labels. Later information and about sections shift into sparse columns, while the footer distributes navigation and contact details across five columns.

## Shape & elevation

- Radius: button `2px` · media `1px` · link `2px` · xs `1px` · sm `2px` · md `5px`
- No box shadows measured: the page is flat.

The interface is predominantly flat: no measured shadows or gradients, and no raised card system. Thin horizontal rules divide major bands, while images provide the main visual depth and texture. Keep controls simple, with a subtle 2px button radius and minimal framing.

## Imagery

The portfolio combines project photography, device mockups, graphic identity work, and occasional playful illustration. Images are presented in broad, rectangular frames, often paired in unequal widths; their own colors and textures remain vivid against the neutral page. Small project names and service tags sit close to the imagery, while substantial blank space separates successive projects.

## Components

### Hero display

Large uppercase condensed headline aligned to the left on the warm neutral canvas, followed by substantial open space and small edge-anchored studio and status labels.

### Portfolio project row

Large project imagery arranged in varied, asymmetrical splits, with a compact project name and uppercase service-category metadata nearby.

### Section divider

Fine horizontal rule marks transitions between broad page sections without adding a box, shadow, or heavy background treatment.

### Information blocks

Short, plain-language service and studio statements arranged in sparse columns, with small section markers and occasional supporting imagery.

### Utility links

Compact uppercase monospaced navigation, contact, social, and project links distributed in aligned footer columns.

### CTA control

Minimal text-led project action; the measured button uses a dark fill, 2px radius, and horizontal padding.

### Measured component styles

- **Primary button** (“VIEW SERVICES”): background #252525 · text #0000ee · radius 2px · padding 0px 16px · 400 12px sans-serif
- **Link** (“Amby”): transparent background · text #0000ee · radius 0px · padding 0px · 400 12px sans-serif
- **Navigation item**: transparent background · text #0000ee · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Use the measured warm off-white canvas and charcoal ink.
- Make the hero headline large, uppercase, and distinctly condensed.
- Reserve monospaced uppercase text for compact labels and navigation.
- Give portfolio imagery varied, asymmetrical widths.
- Use generous blank intervals between major content groups.
- Separate sections with subtle horizontal rules.

## Don't

- Do not add unmeasured brand colours to the page chrome.
- Do not crowd the hero with extra copy or controls.
- Do not put every project inside a uniform card.
- Do not add decorative shadows or gradients.
- Do not make small metadata compete with the display headline.
- Do not force portfolio imagery into a single repeated crop.

## Agent prompt

Build a new studio page in the Duties visual style. Use Studio Parchment (#f1f0ee) as the canvas and Carbon Ink (#252525) for primary text and dark controls; keep the site chrome nearly monochrome. Lead with a left-aligned, uppercase condensed display headline, then preserve a broad field of negative space before the work begins. Present projects as large, varied image compositions rather than uniform cards, with small uppercase monospaced labels close to each image. Use restrained sans-serif copy for explanatory sections, thin rules to mark transitions, and sparse columns for studio details and footer links. Keep the layout spacious and editorial, with no shadows or gradients. Let the project imagery retain its own color and character without turning those image colors into interface accents.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | footer | Five-column footer on the warm canvas, with compact utility links, project actions, social accounts, contact details, and studio status. | direct navigation, project inquiry, social links, contact details | uppercase monospace labels, thin dividers, five-column alignment, oversized wordmark |

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