Duties
Utilitarian brutalism meets refined Scandinavian restraint. Massive condensed uppercase headlines bookend an ultra-minimalist, gallery-like portfolio on a pale bone background. Micro-typographic monospace labels and bracketed metadata anchor the layout with technical precision.
Visit site ↗Colour
Background#f1f0ee
Text#252525
Accent#ff5747
Surface#cfccc9
Muted#bfbfbf
Typefaces
- Display
- AS Therma Bold Condensed
- Body
- PP Neue Montreal Regular
- Mono
- PP Neue Montreal Mono Medium
- Source
- self_hosted
- Scale
- 12 · 18 · 28 · 160
Layout
- Grid
- —
- Container
- —
- Spacing base
- 5px
- Radius
- 0px
Capture
- Category
- studio
- Sections
- 9
- Captured
- 2026-08-27
- Rhythm
- light x9
Type rules
- display typography set in condensed geometric uppercase with tight tracking
- metadata, tags, and status labels set in monospace uppercase
- body measure constrained to under 60 characters for high readability
Colour rules
- page background remains uniform light grey throughout (#f1f0ee)
- accent red indicator used exclusively for live status dot
Voice rules
- bracket technical metadata and indexes like [OVERVIEW] or (DUTIES DESIGN STUDIO)
- keep copy concise with direct statements and zero fluff
Holds it together
- bookend the experience with massive screen-filling display typography
- pair visual project mockups in clean two-column gallery compositions
- render metadata, tags, and system states in bracketed uppercase monospace
Contrast
text on background13.5:1 AAA
muted text on background1.6:1 fail
text on surface9.6:1 AAA
accent on background2.8:1 fail
background on accent2.8:1 fail
Type, measured
- Body
- 18px / 1.15
- Measure
- 59 characters
- Display
- 160px / 0.8
- Tracking
- -0.068em display
- Scale ratio
- 1.73
Voice
- Tone
- direct, confident, understated
- Sentences
- short
- Person
- first
- Vocabulary
- plain
- Calls to action
- start, view, book
Built with
- Builder
- framer
- Framework
- —
- Motion
- lenis
- WebGL
- yes
- Nav
- top_bar, 1 items
- Length
- 10.4 screens
Colour, by area
accent on container#f1f0ee 0%#cfccc9 0%#bfbfbf 0%#252525 0%#0000ff 0%#ff5747 0%
Sections in page order
3 strongest marked · 9- 00
hero
A stark, minimalist statement hero dominated by aggressive geometric display typography floating in vast off-white space.
- Mood
- raw + bold
- Layout
- 14 col · asymmetric · airy
- 01
showcase
A calm, spacious case study presentation balancing quirky line illustration with a warm photographic laptop mockup on an airy neutral backdrop.
- Mood
- warm + playful
- Layout
- 7 col · split · airy
- 02
showcase
A stark, gallery-like portfolio showcase pairing a sleek smartphone mockup with a delicate stippled geometric graphic.
- Mood
- quiet + clinical
- Layout
- 12 col · split · airy
- 03
showcase
Refined portfolio showcase pairing textured interior and urban billboard mockups above minimal monospace project tags.
- Mood
- editorial + quiet
- Layout
- 14 col · grid · airy
- 04
showcase
Earthy, tactile portfolio presentation pairing editorial physical mockups with clean typographic project tags.
- Mood
- editorial + quiet
- Layout
- 14 col · split · airy
- 05
showcase
A stark, gallery-like portfolio showcase pairing high-contrast industrial photography with minimal typography and utilitarian metadata tags.
- Mood
- quiet + editorial
- Layout
- 13 col · split · airy
- 06
feature
StrongestAn exceptionally airy and restrained service overview featuring stacked typographic blocks, generous whitespace, and an abstract 3D visual.
- Mood
- quiet + editorial
- Layout
- 9 col · asymmetric · airy
- 07
statement
StrongestQuiet, modernist studio statement paired with technical bracketed mono metadata, architectural photography, and a systematic grid layout.
- Mood
- quiet + raw
- Layout
- 12 col · asymmetric · airy
- 08
statement
StrongestMassive distorted typographic artwork stretching across the viewport with high-contrast brutalist presence.
- Mood
- raw + bold
- Layout
- 12 col · full bleed · dense
