/* ========================================================================== matt-hart.com The design system, as one stylesheet. Build spec v17 · 17 September 2026 Every value in here was measured off the built pages, not estimated. Read it top to bottom: tokens, then the line, then type, then components. The three rules it exists to enforce: 1. There is one waterline. It never moves. Everything registers to it. 2. There is one yellow. It means the line, or something that broke it. 3. Two link marks only. A yellow underline goes somewhere inside the site. Mono is an address you can type. Nothing else is a link. ========================================================================== */ /* ── tokens ─────────────────────────────────────────────────────────────── */ :root { /* ground */ --cream: #FAF6E9; /* the surface, and body copy on dark */ --ink: #101112; /* type on the surface */ --ink-soft: #2C2E30; /* citations, the second voice */ --floor: #04090C; /* where the dive lands */ --yellow: #FEDB00; /* the line, and only the line */ --mut: #5E6062; /* nav and mono labels. nothing else */ --hair: #DCD6C2; /* rules on paper grounds */ /* the water: seven stops, cream edge to floor black. no greys. */ --water: linear-gradient(180deg, #16323E 0%, #132A35 12%, #102330 26%, #0C1A22 44%, #0A141B 60%, #070F14 78%, #04090C 92%, #04090C 100%); /* type */ --sans: 'Figtree', -apple-system, 'Helvetica Neue', Arial, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; /* the line */ --wl-stroke: 4.6px; /* drawn, at 1600 wide */ --wl-bar: 8px; /* flat, full bleed, foot of the surface */ --wl-berg: 30.7%; /* where the berg's own waterline sits */ /* the rail */ --rail-x: 109px; --rail-w: 3px; --tick-w: 60px; --tick-h: 17px; --tick-stroke: 3.4px; /* grid, at 1600 */ --gutter: 120px; --col-story-x: 230px; --col-story-w: 640px; --col-built-w: 460px; /* set from the right edge, not the left */ --col-segue-w: 1040px; } /* ── the six colour worlds, on Work only ─────────────────────────────────── Home is mono the whole way down, marks included, because the descent is a dive and colour does not survive at depth. Work is where it explodes. Shop drops the identity work again and lets the product shots carry it. */ :root { --sf-ground: #141414; --sf-hot: #ED2A7B; --sf-cool: #E96A4E; --bif-ground: #0B0B0C; --bif-key: #FEDB00; --ia-ground: #FFFFFF; --ia-key: #101112; --is-ground: #8FBBF2; --is-key: #101112; /* palest sky above the school */ --mx-ground: #366FF3; --mx-key: #FF6009; /* orange taken off the artwork */ --bk-ground: #FEDB00; --bk-key: #101112; /* The Cone: four flat wedges, hot to cool, left to right. Never reversed, never re-angled, never given a gradient. */ --cone-1: #ED2A7B; --cone-2: #EC3F6C; --cone-3: #EA555D; --cone-4: #E96A4E; } * { box-sizing: border-box; margin: 0; padding: 0 } body { font-family: var(--sans); background: var(--cream); color: var(--ink); -webkit-font-smoothing: antialiased; } /* ── grounds ────────────────────────────────────────────────────────────── */ .ground-surface { background: var(--cream); color: var(--ink) } .ground-water { background: var(--water); color: var(--cream) } .ground-floor { background: var(--floor); color: var(--cream) } /* On dark, body copy sits at FULL cream and is never knocked back, so it reads. Dimming is for mono labels only. */ .ground-water p, .ground-floor p, .ground-water .body, .ground-floor .body { opacity: 1 } /* ── the waterline ────────────────────────────────────────────────────────── One line, one weight. It appears three ways and never a fourth: .wl-drawn the squiggle, stroke 4.6, on cream or on black .wl-bar 8px flat, full bleed, the edge between surface and water .wl-tick 60 by 17, same hand, at every stop on the rail marks/waterline.svg and marks/waterline-tick.svg carry the paths. THE RULE: when the line and the drawing disagree, the drawing moves. The berg's own waterline is at 30.7% of its height, so the artwork is positioned until its shoulders land on the line. Never the reverse. */ .wl-drawn { display: block; width: 100%; height: auto } .wl-drawn path { fill: none; stroke: var(--yellow); stroke-width: var(--wl-stroke); stroke-linecap: round } .wl-bar { position: absolute; left: 0; right: 0; height: var(--wl-bar); background: var(--yellow); z-index: 4 } .wl-tick { position: absolute; left: 80px; width: var(--tick-w); height: var(--tick-h); z-index: 4 } .wl-tick path { fill: none; stroke: var(--yellow); stroke-width: var(--tick-stroke); stroke-linecap: round } /* ── the depth rail ───────────────────────────────────────────────────────── The waterline bar at the foot of the surface turns down the left margin and runs the whole descent. It breaks around each numeral and fades out into the dark just before the floor. Each segment anchors to that section's EYEBROW element, never to the section box. A section with padding-top moves its content but not its box, so anchoring to the box puts the first tick on the wordmark. */ .rail { position: absolute; left: var(--rail-x); width: var(--rail-w); background: var(--yellow); z-index: 3 } /* The tail fades out over the last 260 before the floor. Build it as a stack of flat, fully OPAQUE steps from #FEDB00 to the floor colour, 26 of them. Do NOT use a gradient that fades to rgba(254,219,0,0): that exports as a PDF shading plus a soft mask, and some viewers render the masked shading magenta. A flat fill has nothing to misread. Same reasoning as the rule about gradient headlines: if a solid colour will do the job, use one. */ .rail-num { position: absolute; left: 78px; width: 64px; text-align: center; font-family: var(--mono); font-size: 18px; letter-spacing: .12em; opacity: .88; z-index: 4 } /* clearance around each numeral: 14 above, 38 below */ /* ── MAKE and CREATE, on the closing berg ─────────────────────────── Both words sit on ONE axis, the ice's own centre, which is x1149 at the built size. Not centred to their local slice of the berg, because two words on two different axes read as a mistake even when each one is correct. MAKE clears the waterline by 7.5 per cent of the berg's height, CREATE sits 27 per cent below it, and each runs at 70 to 80 per cent of the berg's width at the height it sits. No shadow on either: the cream is warm and the ice is cool, and the halftone gives all the separation they need. */ /* ── type ─────────────────────────────────────────────────────────────────── Figtree for everything that speaks, IBM Plex Mono for what you read as characters rather than hear as speech. Values as built at 1600 wide. 800 is the working headline weight. 900 is reserved for the question and the click. 400 and 500 carry everything that explains. */ .wordmark { font-size: 38px; font-weight: 800; letter-spacing: -1.7px; line-height: 1 } .hero { font-size: 46px; font-weight: 800; letter-spacing: -1.4px; line-height: 1.1 } .headline { font-size: 40px; font-weight: 800; letter-spacing: -1.3px; line-height: 1.08 } .question { font-size: 34px; font-weight: 900; letter-spacing: -1.1px; line-height: 1.2 } .built-say { font-size: 33px; font-weight: 900; letter-spacing: -1.05px; line-height: 1.1 } .segue { font-size: 30px; font-weight: 600; letter-spacing: -.75px; line-height: 1.32; text-align: center; text-wrap: balance } .dropline { font-size: 26px; font-weight: 800; letter-spacing: -.6px; line-height: 1.3 } .ask { font-size: 23px; font-weight: 600; letter-spacing: -.3px; line-height: 1.45 } .narration { font-size: 23px; font-weight: 500; letter-spacing: -.3px; line-height: 1.45 } .body-lg { font-size: 21px; line-height: 1.5 } .body { font-size: 19px; line-height: 1.55 } .body-tight { font-size: 19px; line-height: 1.45 } /* mono */ .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mut) } .ground-water .eyebrow, .ground-floor .eyebrow { color: rgba(250,246,233,.55) } .numeral { font-family: var(--mono); font-size: 18px; letter-spacing: .12em; opacity: .88 } .address { font-family: var(--mono); font-size: 15px; letter-spacing: .07em; opacity: .82 } /* ── the one yellow ───────────────────────────────────────────────────────── Six permitted uses on the whole site: 1 the waterline, every appearance .wl-* 2 the depth rail and its ticks .rail, .wl-tick 3 the underline on "And so I built this." .link-in 4 the underline on "And this is the work." .link-in 5 the word "everything" in the floor copy .on-the-line 6 the Contact block in the topbar .cta Nowhere else. No yellow rules, no yellow headings, no yellow on the descent. The moment it becomes a highlighter the line stops meaning anything, and the line is the whole argument. */ .on-the-line { color: var(--yellow) } /* ── the two link marks ───────────────────────────────────────────────────── Yellow underline: goes somewhere inside the site. Mono: an address you can type if you would rather leave. Not a link. */ .link-in { display: inline-block; text-decoration: none; color: inherit; border-bottom: 4px solid var(--yellow); padding-bottom: 7px } .link-in--sm { border-bottom-width: 3px; padding-bottom: 4px } /* on Research every register row is a deep page, so every row carries it */ .link-row { box-shadow: inset 0 -3px 0 var(--yellow) } /* the email, anti-scrape: written "hello@matt-hart dot com" */ .link-mail { font-family: var(--mono); border-bottom: 2px solid var(--yellow); padding-bottom: 3px } /* ── topbar ───────────────────────────────────────────────────────────────── Six items counting the wordmark, which is the signature and the way home. It is never a logo. The active page carries the yellow underline in the nav. */ .topbar { position: absolute; top: 52px; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; align-items: center; z-index: 10 } .topbar nav { display: flex; align-items: center; gap: 27px } .topbar nav a { font-size: 17px; font-weight: 600; letter-spacing: -.1px; color: var(--mut); text-decoration: none } .topbar nav a.on { color: var(--ink); border-bottom: 3px solid var(--yellow); padding-bottom: 3px } .cta { background: var(--yellow); color: var(--ink); font-size: 16px; font-weight: 800; letter-spacing: -.2px; padding: 14px 25px; border-radius: 2px; margin-left: 13px; text-decoration: none } /* ── the descent block ────────────────────────────────────────────────────── Three lines carry each stop: the headline left, the built line right, the segue centre. The built block starts where the story block ends, which is what steps the page down. "And so I built this." is the same five words six times and never varies. The sameness is what makes six ventures read as one act, and it answers the who-is-this-guy question without a word of biography. */ .story { position: absolute; left: var(--col-story-x); width: var(--col-story-w); z-index: 3; color: var(--cream) } .story h2 { font-size: 40px; font-weight: 800; letter-spacing: -1.3px; line-height: 1.08 } .story p { font-size: 19px; line-height: 1.55; margin-top: 22px; opacity: 1 } .built { position: absolute; right: var(--gutter); width: var(--col-built-w); text-align: right; z-index: 3; color: var(--cream) } .built .desc { font-size: 19px; line-height: 1.45; margin-top: 20px; opacity: 1 } .built .nm { font-family: var(--mono); font-size: 15px; letter-spacing: .07em; margin-top: 18px; opacity: .82 } .built img { margin-top: 30px; opacity: .96; display: inline-block } .seg { position: absolute; left: 280px; width: var(--col-segue-w); text-align: center; z-index: 3; color: var(--cream); font-size: 30px; font-weight: 600; letter-spacing: -.75px; line-height: 1.32; text-wrap: balance } /* ── deep research pages ──────────────────────────────────────────────────── One page per source, text only, in the same shape every time so a reader learns it once and an answer engine can tell a concession from a departure without inferring it. No images, nothing that needs rendering to make sense. The address sits at the foot of every page. */ .deep-wrap { padding: 96px 300px 0 230px } .deep-wrap h1 { font-size: 50px; font-weight: 800; letter-spacing: -1.8px; line-height: 1.06; margin-top: 20px; max-width: 900px } .cite { margin-top: 40px; padding: 26px 0; max-width: 1070px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair) } .cite p { font-size: 17px; line-height: 1.5; color: var(--ink-soft) } .cite .lk { font-family: var(--mono); font-size: 13px; color: var(--mut); margin-top: 14px; word-break: break-all; line-height: 1.6 } .chip { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid rgba(16,17,18,.3); padding: 8px 14px; border-radius: 2px } .chip--rel { background: var(--ink); color: var(--cream); border-color: var(--ink) } .chip--cmb { background: var(--yellow); border-color: var(--yellow); font-weight: 700 } .scroll-line { font-size: 27px; font-weight: 700; letter-spacing: -.7px; line-height: 1.25; margin-top: 38px; max-width: 900px; border-left: 4px solid var(--yellow); padding-left: 24px } .sec { margin-top: 52px; max-width: 1070px; padding-top: 26px; border-top: 1px solid var(--hair) } .sec h3 { font-size: 27px; font-weight: 800; letter-spacing: -.8px; line-height: 1.2 } .sec .body { margin-top: 16px; max-width: 1000px } /* ── footer ───────────────────────────────────────────────────────────────── Four columns: the six properties, the site, elsewhere, and the address. The left edge aligns to whatever content column the page uses, so it is a variable rather than a constant. The email is written out in words. */ .ftr { background: var(--floor); color: var(--cream); padding: 96px var(--gutter) 0 var(--ftr-left, 230px) } .ftr h5 { font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(250,246,233,.5) } /* ── at phone width ───────────────────────────────────────────────────────── There is no right column. It collapses to story, then the built thing underneath it, then the segue, alternating down. That keeps the rhythm and loses only the side by side. The rail stays as a thin rail down one edge, filling the same way, with the numerals tucked against it. A keynote audience is entirely on phones, standing up, with about forty seconds. So the one column version is the real design and the two column is the upgrade. Draw the phone one first. */ @media (max-width: 900px) { :root { --gutter: 22px; --col-story-x: 58px; --rail-x: 26px; --col-story-w: auto; --col-built-w: auto; --col-segue-w: auto } .story, .built, .seg { position: static; width: auto; text-align: left } .built { margin-top: 34px } .seg { margin: 46px 0; text-align: center } .wl-tick { left: 4px } .rail-num { left: 2px; width: 46px; font-size: 14px } .hero { font-size: 30px; letter-spacing: -.9px } .headline, .story h2 { font-size: 27px; letter-spacing: -.8px } .question { font-size: 25px; letter-spacing: -.8px } .built-say { font-size: 23px; letter-spacing: -.7px } .seg { font-size: 21px; letter-spacing: -.5px } .body, .story p, .built .desc { font-size: 16px; line-height: 1.5 } .deep-wrap { padding: 46px 22px 0 22px } } /* MATT-HART.COM · THE DESIGN SYSTEM · © 2026 MATT HART */