---
version: alpha
name: Duties
description: Oslo-studio editorial minimalism — warm off-white paper canvas (#f1f0ee) with near-black ink, Unbounded rounded-geometric display headings paired with PP Neue Montreal Mono uppercase micro-labels, and a muted natural accent trio of sage green, amber, and beige clay.

colors:
  # Canvas + ink
  background: "#f1f0ee"      # warm paper off-white — the studio canvas
  surface: "#f1f0ee"
  surface-soft: "#e2e1df"    # faintly cooler panel tint
  ink: "#252525"             # near-black warm charcoal — all primary text
  ink-secondary: "#5a5957"   # muted body / captions over paper
  on-ink: "#f1f0ee"          # paper text reversed onto dark ink

  # Natural accent trio
  accent: "#a7beb1"          # sage green — primary brand accent / highlight blocks
  amber: "#feaf2c"           # warm amber — secondary highlight, dots, marks
  clay: "#d8c9b8"            # beige clay — tertiary tint, soft fills
  on-accent: "#252525"       # ink reads on every muted accent

  # Lines + neutrals
  border: "#e2e1df"          # hairline dividers on paper
  border-strong: "#252525"   # ink rule between major sections

typography:
  display-hero:
    fontFamily: "Unbounded, system-ui, sans-serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1.5px
  display:
    fontFamily: "Unbounded, system-ui, sans-serif"
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.8px
  heading:
    fontFamily: "PP Neue Montreal, Inter, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.5px
  sub-heading:
    fontFamily: "PP Neue Montreal, Inter, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: 0px
  body:
    fontFamily: "PP Neue Montreal, Inter, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "PP Neue Montreal, Inter, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  mono-label:
    fontFamily: "Geist Mono, PP Neue Montreal Mono, ui-monospace, monospace"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.5px
  mono-caption:
    fontFamily: "Geist Mono, PP Neue Montreal Mono, ui-monospace, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.4px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 160px

rounded:
  none: 0px
  sm: 6px
  md: 12px
  lg: 20px
  xl: 32px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    borderColor: "{colors.border-strong}"
  button-accent:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  badge-amber:
    backgroundColor: "{colors.amber}"
    textColor: "{colors.on-accent}"
    typography: "{typography.mono-caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border}"
  card-accent:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    rounded: "{rounded.lg}"
    padding: 32px
  card-clay:
    backgroundColor: "{colors.clay}"
    textColor: "{colors.on-accent}"
    rounded: "{rounded.lg}"
    padding: 32px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-label}"
    padding: 20px 32px
    borderColor: "{colors.border}"
---

# Duties Design System

## Overview

Duties is an Oslo-based design studio, and its website reads like the studio's own portfolio piece: a calm, paper-toned editorial space where brand identity work for tech companies gets to breathe. The canvas is a warm off-white (`{colors.background}`) — not the sterile pure white of a SaaS dashboard but the slightly cooled, slightly aged white of a printed page or a gallery wall. Against it, near-black warm charcoal (`{colors.ink}`) carries all the text, and a tightly disciplined trio of natural muted accents — sage green, amber, and beige clay — punctuate the layout in blocks rather than as decoration.

The typographic pairing is the studio's signature. Headlines use **Unbounded**, a rounded geometric display family whose soft, almost balloon-like terminals give the brand its friendly-but-confident voice; it's set at weight 500 with mild negative tracking so it stays editorial rather than novelty. Body and sub-headings use **PP Neue Montreal**, a precise neo-grotesque that grounds the playful display with Swiss rigor. The third voice is monospace — **Geist Mono / PP Neue Montreal Mono** — reserved for uppercase micro-labels, indices, and metadata that frame the page like a printed contact sheet ("STUDIO", "WORK", "01 — 04").

What distinguishes Duties from generic Framer minimalism is its use of color as *material*. The accents aren't gradients or glows; they're flat, matte fields of natural pigment — sage, amber, clay — that feel borrowed from a paint chip or a fabric swatch. Sections are blocked in these tints, ink always reading cleanly on top, so the page scrolls like a set of physical paper samples laid side by side. Generous whitespace, hairline dividers, and the occasional full-width ink rule complete the print-shop calm.

**Key Characteristics:**
- Warm paper off-white canvas (`{colors.background}`) — not pure white
- Unbounded rounded-geometric display headings at weight 500, mild negative tracking
- PP Neue Montreal neo-grotesque for body and sub-heads
- Monospace uppercase micro-labels for indices and metadata
- Muted natural accent trio: sage green, amber, beige clay — flat matte fields, no gradients
- Color blocked as material/swatch, never as decorative glow
- Ink reads on every accent; pill-shaped CTAs; hairline + ink-rule dividers

## Colors

### Canvas & Ink
- **Paper** (`{colors.background}`): The warm off-white studio canvas across the whole site.
- **Panel** (`{colors.surface-soft}`): Faintly cooler tint for inset panels and quiet badges.
- **Ink** (`{colors.ink}`): Near-black warm charcoal — all primary text and the strong rule.
- **Ink Secondary** (`{colors.ink-secondary}`): Muted captions and body over paper.

### Natural Accent Trio
- **Sage** (`{colors.accent}`): Primary brand accent — highlight blocks, accent cards, accent CTAs.
- **Amber** (`{colors.amber}`): Warm secondary highlight — dots, marks, emphasis badges.
- **Clay** (`{colors.clay}`): Beige tertiary tint — soft fills and alternating section blocks.

### Lines
- **Border** (`{colors.border}`): Hairline dividers and quiet card outlines on paper.
- **Ink Rule** (`{colors.border-strong}`): Full-width 1px ink rule between major sections.

## Typography

### Font Family
- **Display**: `Unbounded` — rounded geometric, weight 500, fallback `system-ui, sans-serif`
- **Text**: `PP Neue Montreal` — neo-grotesque, fallback `Inter, sans-serif`
- **Mono**: `Geist Mono` / `PP Neue Montreal Mono` — uppercase labels, fallback `ui-monospace, monospace`

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 64px Unbounded hero statement |
| `display` | 44px Unbounded section openers |
| `heading` | 28px Neue Montreal headings |
| `sub-heading` | 20px lead-in / intro copy |
| `body` | 17px standard reading text |
| `body-small` | 15px secondary text |
| `mono-label` | 13px uppercase nav / button labels |
| `mono-caption` | 12px indices, metadata, badges |

### Principles
- **Two voices, one tension**: playful Unbounded display against rigorous Neue Montreal text.
- **Mono as the frame**: monospace appears only uppercase, only for labels/indices — the contact-sheet device.
- **Restrained tracking**: negative on display, neutral on body, slight positive on mono labels.
- **Few weights**: 400 (read), 500 (display/label), 600 (Neue Montreal headings).

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px; sections breathe at `{spacing.3xl}`–`{spacing.4xl}`.

### Grid & Container
- Centered single column for hero statements; 2-column case-study grids below
- Generous side margins keep content gallery-framed
- Monospace index labels pin to section corners

### Whitespace Philosophy
- **Paper calm**: large vertical gaps let each block of work stand alone.
- **Material blocking**: accent sections sit as full-width matte color fields, ink on top.
- **Rule, don't shadow**: separation comes from hairlines and the ink rule, not elevation.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed color fields, rules |
| `sm` | 6px | Small inline chips |
| `md` | 12px | Inputs, small cards |
| `lg` | 20px | Cards, image containers |
| `xl` | 32px | Large feature panels |
| `pill` | 9999px | Buttons, badges, tags |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — ink fill, paper text, pill, mono uppercase label.
- **`button-secondary`** — paper with 1px ink outline, pill.
- **`button-accent`** — sage fill, ink text, pill.

### Badges
- **`badge`** — quiet panel tint, ink, pill, mono caption.
- **`badge-amber`** — amber fill, ink text — emphasis marker.

### Cards
- **`card`** — paper with hairline border, 20px radius, generous padding.
- **`card-accent`** / **`card-clay`** — full sage or clay color field, ink on top.

### Inputs
- **`input`** — paper with 1px ink outline, 12px radius.

### Navigation
- **`nav-bar`** — paper bar, mono uppercase links, hairline bottom border.

## Do's and Don'ts

### Do
- Use the warm paper `{colors.background}`, never pure white
- Pair Unbounded display with Neue Montreal text
- Reserve monospace for uppercase labels and indices
- Block accents as flat matte fields with ink on top
- Separate sections with hairlines or the ink rule

### Don't
- Don't use gradients, glows, or drop shadows — the system is flat and matte
- Don't put accent color on text bodies — accents are fields, ink is text
- Don't set Unbounded above weight 500 — it stays light and friendly
- Don't use mono for running text — labels only
- Don't crowd the layout; whitespace is the studio's material

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Duties. Brand names and trademarks belong to their respective owners.