Style guide — tokens
and components.
The document the template builds from. Colour tokens, type scale, spacing, and the small set of components used across every page.
bg / light
#F8F8F6
oklch(97.9% 0.003 106.4)
Background, light mode
surface / light
#F1F0EE
oklch(95.5% 0.003 84.6)
Cards, sections
surface-2
#EAE9E6
oklch(93.4% 0.004 91.4)
Insets, stat panels
text / primary
#1F1F1D
oklch(23.9% 0.004 106.7)
Body, headings
text / muted
#686864
oklch(51.6% 0.006 106.6)
Captions, meta
hairline
#D8D7D3
oklch(87.9% 0.006 95.1)
Rules, borders
accent
#FF5A1F
oklch(68.2% 0.211 37.7)
CTAs, dot, hover
bg / dark
#1A1A18
oklch(21.7% 0.004 106.7)
Background, dark mode
Display / Hero
Fraunces, 350
We design brands.
clamp(3.5rem, 8vw, 9rem)
Display / Italic
Fraunces, 350
Quietly, carefully.
5rem
H1 / Section
Fraunces, 400
Selected work.
4.5rem
H2
Fraunces, 400
Three of us, on purpose.
2.6rem
H3
Fraunces, 400
On the kerning.
1.75rem
Body
Geist, 400
A brand system is a piece of music. There is a tempo, a chorus, and a long bridge where very little happens at all.
17px
Mono / Label
Geist Mono, 500
AVAILABLE Q3 2026 · COPENHAGEN
11px
Mono / Caption
Geist Mono, 400
FIG. 01 — STUDIO PRINCIPAL, MARCH 2026
10px
Every letter-spacing the template reuses is defined as a token in
@theme.
Use the named utility, never an arbitrary tracking-[…] value.
tracking-mono-x
0.14em
Studio Nord
0.14em
↳ mid-section labels
tracking-mono-loose
0.1em
Studio Nord
0.1em
SectionTag, footer headings
tracking-mono
0.08em
Studio Nord
0.08em
Mono labels — default
tracking-body
-0.005em
Studio Nord
-0.005em
Body emphasis
tracking-tight
-0.01em
Studio Nord
-0.01em
h3/h4, captions
tracking-snug
-0.015em
Studio Nord
-0.015em
Card titles, marginalia
tracking-display
-0.02em
Studio Nord
-0.02em
Blockquotes, mid headings
tracking-display-lg
-0.025em
Studio Nord
-0.025em
Section headings
tracking-display-xl
-0.03em
Studio Nord
-0.03em
Large display
tracking-hero
-0.035em
Studio Nord
-0.035em
Page hero h1
tracking-hero-xl
-0.045em
Studio Nord
-0.045em
Largest editorial display
Standard Tailwind breakpoints. The template avoids custom breakpoints — buyers will find their muscle memory honoured.
sm
640px
Mobile landscape, large phones
md
768px
Tablet portrait
lg
1024px
Tablet landscape, small laptop
xl
1280px
Laptop, desktop standard
2xl
1536px
Wide desktop, large monitors
The primitives every page composes from. Each lives in
src/components/
and is documented with a live demo so changes you make here
propagate visibly everywhere.
Variants — primary · dark · ghost
Btn
src/components/Btn.astro
Pill-shaped call-to-action. Polymorphic: renders <a> when href is set, <button> otherwise. Three variants — primary (accent), dark (near-black), ghost (outline).
Hover to see the hairline fill from left
HeroCta
src/components/HeroCta.astro
Editorial inline link. A muted hairline always sits under it; on hover, an accent-coloured hairline grows in from the left and the arrow translates right. Used in place of pill buttons where a softer affordance reads better.
SectionTag
src/components/SectionTag.astro
Mono uppercase section label of the form "(01) — Label". Used as the eyebrow on nearly every section across the site.
Sizes — 18px · 28px · 40px (scales with the size prop)
Wordmark
src/components/Wordmark.astro
Brand mark — italic Studio + roman Nord + pulsing accent dot. Size prop drives font-size (px). Inline by default; pass inline={false} for block-level usage like the footer.
Image mode
Placeholder mode
Placeholder
src/components/Placeholder.astro
Editorial figure component. When given an image prop, renders an optimized Astro <Image /> filling a container locked to the aspect ratio. Without an image, falls back to a striped placeholder with a mono caption and a fake IMG_XXXX id — used for in-production work and missing assets so a buyer never sees a broken figure.
The label sits in the left margin (or stacks above on narrow screens) next to the body it annotates. Use sparingly — the pattern earns its weight by being rare.
Marginalia
src/components/Marginalia.astro
Sidebar note pattern. A small mono uppercase label aligns to the margin (or stacks above on narrow screens) next to a body paragraph. Used heavily in the studio Philosophy section and inside journal articles.
Click between pills · Focus the input to see the label swap to accent
Form field
src/components/sections/contact/Form.astro
Editorial form pattern. Each field is bounded by a top hairline; a small mono uppercase label sits above a large serif input. The label colour swaps to accent on focus, giving the only visual feedback the design needs. For fixed-choice fields, a pill picker variant toggles between an inverted (active) and an outlined (idle) state.
Click between tabs · The accent indicator marks the active filter
Filter tabs
src/components/sections/work/Hero.astro · journal/Hero.astro
Horizontal tab bar bounded by hairlines top + bottom. Mono uppercase labels with the active tab marked by a 1-pixel accent indicator inset 24px from the button edges. Drives a single Alpine state (the filter or tag) on the parent — see /work and /journal for the live patterns.
Hover any link · The accent hairline grows from left to full width
hover-line
src/styles/global.css
The primary inline-link pattern across the site — nav items, footer columns, breadcrumbs, social refs, anywhere a soft secondary CTA is wanted. Apply the class and the link gets an accent-coloured underline that grows from left to full width on hover or focus. Honours prefers-reduced-motion by skipping the transition.
Utility class — pulse-dot
pulse-dot
src/styles/global.css
Animates an element with a soft pulsing scale + opacity loop. Used as a
"live" / "available" indicator next to status lines in the nav, footer,
and contact stats. Honours
prefers-reduced-motion.