000 — Reference
Design manual.
The working reference for 3-6-9.studio — a living document that holds the mark, type, palette, layout, motion, and voice behind everything we make. Read it slowly. Use it as one source of truth.
Everything on this page renders in the actual production tokens — the swatches, type, links and motion below are the system itself, not screenshots of it.
001 — Principles
Six rules that survive every project. When something feels off, one of these is being broken.
Restraint over decoration.
Nothing on the page unless it earns its place. Whitespace is a feature.
Editorial, not marketing.
We set type like a book, not like a landing page. Read first, click second.
Pure black + off-white.
No brand color. Color enters only through photography.
No boxes, no cards, no radii.
Everything is 0 radius. Hierarchy is built with type, space, and rule lines — never with containers.
Links, not buttons.
Every action is an underlined text link. Filled buttons don't exist in this system.
Slow, quiet motion.
One easing curve, short distances, opacity + translate only. If it draws attention to itself, cut it.
002 — The mark
The Rose-of-Life. Geometric, symmetrical, and always the same size as one line of body copy. It sits next to the wordmark — never alone as a hero.
Rose-of-Life
Twelve overlapping circles arranged on a hexagonal grid — the classical figure that gives the studio its name. It renders as pure black on our off-white background, and inverts to off-white on the dark Belonging surface.
Minimum size 16px. Clear space around the mark equals its own cap-height. Never re-color, never tilt, never place inside a shape.
In the header
3 — 6 — 9.studio20 × 20 px, aligned to the cap-height of the label. Gap between mark and wordmark is 8px.
Hover state
3 — 6 — 9.studioOn hover the entire mark + wordmark fades to 55% opacity over 200ms. The mark is never underlined; only text carries the underline treatment.
On dark surfaces
3 — 6 — 9.studioNever
- — Never place the mark inside a circle, box, or badge.
- — Never tint the mark with the lavender accent or any other color.
- — Never rotate, skew, or animate the mark on load.
- — Never scale the mark below 16px.
003 — Photography
Full-bleed. Color enters the page only through photography — never through UI. Prefer analog grain, natural light, and human hands over rendered gloss.
004 — Type
Inter Tight for display + heading. Inter for body + UI. No mono, no serif. Punctuation is soft — always an em dash, never a middle dot; always a plus sign, never an ampersand.
display-giant
The quiet weight of things that last.
Inter Tight · 600 · clamp(46px, 7vw, 112px) · tracking −0.03em · leading 0.95
prose-display
A room can hold a life if the people inside it are willing.
Inter Tight · 500 · clamp(34px, 5.4vw, 88px) · tracking −0.025em · leading 1.02
display-statement
We design slowly, on purpose — the details are the work.
Inter Tight · 500 · clamp(26px, 3.4vw, 54px) · tracking −0.02em
heading
A section that opens the page.
Inter Tight · 600 · clamp(20px, 2vw, 28px) · tracking −0.01em
label
Section — 004
Inter · 500 · 13px
body-text
Body text sits at fifteen pixels with a leading of one point five. It reads easily at length and never fights for attention.
Inter · 400 · 15px · leading 1.5
muted-text
Muted text is the same family at fourteen pixels, in a warm grey. Used for captions, meta, and small print.
Inter · 400 · 14px · #6b6b6b
005 — Palette
Pure black + warm off-white. Grey only where the eye needs a pause. The lavender accent is a system token only — reserved for rare highlights, never for surfaces or type.
Background
#f9f8f3 — warm off-white
Ink
#0a0a0a — near black
Muted
#6b6b6b — captions, meta
Hover
#ff5435 — rare hot link
Accent
#b3b3f9 — reserved token
Contrast
Ink on Background is 18.4:1 — well above WCAG AAA for body text. Muted on Background is 4.7:1 — meets AA for large text and captions.
Dark surface
Only used for the Belonging section on the homepage. Ink becomes Background, Background becomes Ink. Type never sits on a mid-grey.
006 — Links + CTAs
Every action is an underlined text link. Hover fades to 55% opacity over 200ms. Filled buttons, pills, and rounded rectangles don't exist.
Mark + link — inline pairing<a class="body-text link-underline">Book →</a> <a class="body-text link-hot">Reserve →</a>
007 — Grid
Twelve columns, asymmetric placement, generous empty space. Images are placed off-center on purpose — the composition breathes.
008 — Layout + spacing
Max width 1440px, centered. Horizontal padding 24px on mobile, 40px from md up. Section rhythm py clamp(80px, 12vw, 200px). Whitespace does the work that borders and boxes would do elsewhere.
Container
max-width: 1440px; padding-inline: 24px /* < 768px */ padding-inline: 40px /* ≥ 768px */
Section rhythm
padding-block: clamp(80px, 12vw, 200px);
Grid gutter
grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px;
Radius
Zero. Everywhere. border-radius: 0 !important is enforced globally so no imported component can round a corner.
009 — Motion
One easing curve for everything: cubic-bezier(0.16, 1, 0.3, 1). Short distances, low opacity deltas, no bounce, no parallax.
fade + rise (reveal)
opacity: 0 → 1 translateY: 24px → 0 duration: 700ms easing: cubic-bezier(0.16, 1, 0.3, 1)
image reveal
opacity: 0 → 1 scale: 1.06 → 1 duration: 900ms easing: cubic-bezier(0.16, 1, 0.3, 1)
hover fade
opacity: 1 → 0.55 duration: 200ms
image hover
transform: scale(1) → scale(1.03) duration: 600ms
010 — Voice + writing
We write like the room is quiet. Short sentences. Lowercase where it feels right. Em dashes instead of parentheses. Plus signs instead of ampersands.
Do
- — Book what happens here.
- — Three places open.
- — from 96 €.
- — Body + mind, work + rest.
Never
- — Unlock your best self today!
- — Body & Mind, Work & Rest.
- — Only 3 spots left · limited offer
- — from EUR 250,00 net plus VAT
011 — Tokens + code
Everything in this manual is exported as CSS custom properties in src/styles.css. Copy the block below into another system to reproduce the studio 1:1.
:root {
--background: #f9f8f3; /* warm off-white */
--foreground: #0a0a0a; /* near black */
--muted-foreground: #6b6b6b;
--hover: #ff5435; /* rare hot link */
--accent: #b3b3f9; /* reserved token */
}
--font-sans: "Inter", ui-sans-serif, system-ui;
--font-display: "Inter Tight", "Inter", ui-sans-serif;
--container-site: 1440px;
--radius: 0; /* enforced everywhere */
--easing: cubic-bezier(0.16, 1, 0.3, 1);Utility classes in use: display-giant, prose-display, display-statement, heading, label, body-text, muted-text, link-underline, link-hot, site-container, section-y, media-frame, image-reveal, reveal.