/* ============================================================ MultiMichel — Design Tokens Source of truth: Figma node 1:1988 (Michel.com) Every visual value in the codebase must reference these. No hardcoded colors, sizes, fonts, or spacing anywhere else. ============================================================ */ /* ---------- FONT FILES ---------- Agrandir is the IDENTITY face and is licensed for this site — it stays, untouched, on the wordmark and the labels. Family and Founders Grotesk (Klim) are not licensed here; their name tables say so out loud ("Not Licensed for Desktop Use"). They are replaced by the two open-licence faces that stand closest to them: Family → Fraunces (OFL, variable: opsz · wght · SOFT · WONK) Founders Grotesk → Hanken Grotesk (OFL, variable: wght) Both replacements are VARIABLE, so one file per subset covers every weight the site asks for and the old per-weight file split disappears. Licences ship beside them (fonts/*-OFL.txt). The metrics are NOT the same as the originals, so the --type-* values below were re-tuned against them rather than carried over. See "REPLACEMENT TUNING" under ---------- TYPE ----------. */ @font-face{font-family:"Agrandir";src:url("fonts/Agrandir-TightBlack.ttf") format("truetype");font-weight:900;font-display:swap} @font-face{font-family:"Fraunces";src:url("fonts/Fraunces-latin.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Fraunces";src:url("fonts/Fraunces-latin-ext.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Hanken Grotesk";src:url("fonts/HankenGrotesk-latin.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Hanken Grotesk";src:url("fonts/HankenGrotesk-latin-ext.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} :root { /* ---------- FONTS ---------- DECISION MADE: free stack for the two text faces, Agrandir kept. Nothing else in the codebase may name a font family directly. --font-serif display + editorial serif Fraunces (was Family) --font-grotesk running body + metadata Hanken Grotesk (was Founders) --font-label IDENTITY — wordmark, nav, section labels, chips Agrandir (unchanged) --font-label has no free substitute listed on purpose: Agrandir IS the identity here. If it ever fails to load the generic sans is a fallback, not a replacement. */ --font-serif: "Fraunces", Georgia, "Times New Roman", serif; --font-grotesk: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --font-label: "Agrandir", system-ui, sans-serif; /* ---------- the action mark ---------- AGRANDIR DRAWS THE ARROW. Not a symbol font, and not whatever the system happens to hand back. Neither Fraunces nor Hanken Grotesk carries U+2197 or U+2192, so the mark is never drawn by the text faces. The original site got away with that in one place only: on the Media cards the arrow inherited the SERIF stack and Family — which does carry both glyphs — drew it, a real designed arrow. Everywhere else it fell through to whatever the platform supplied, which is how ↗ reached a colour emoji font on macOS. Agrandir carries both glyphs, is licensed, is already loaded, and is the identity face. So it draws every arrow on the site: one designed mark, identical on every platform, and structurally incapable of resolving to an emoji because the first font in the stack has the glyph. The symbol fonts stay on the tail purely as a net for the case where Agrandir fails to load — never trim them, but they should never be reached either. */ --font-arrow: "Agrandir", "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", system-ui, sans-serif; /* Agrandir draws a small arrow on its em — 0.39em against Family's 0.71em — so the mark needs a much larger font-size to arrive at the same OPTICAL size. 1.18rem puts the ↗ at 7.4px tall, which is the size Family drew it on the Media cards: the one arrow in the original design that a real typeface drew, and the size this site is matching. rem, never em: the mark is the same size in every context by design. */ --type-arrow-size: 1.18rem; /* ---------- Fraunces recipes, one per visual role ---------- Fraunces is not set one way, because the design does not use its serif for one job. Four recipes, and a surface takes the one matching its ROLE — never the one matching its section. WONK 0 in all of them. Fraunces ships its wonky alternates on, which is where the ornamental circled ampersand in "Olá & Welcome" came from; WONK 0 is the family's own conventional set. Never drop it from a recipe. opsz is pinned per role rather than left on `font-optical-sizing: auto`. Automatic optical sizing ties the cut to the pixel size, which is not what decides character here — the role is. SOFT rounds the terminals and is what keeps the serif warm rather than sharp. It is deliberately low on the quote MARKS alone. */ /* Display — the hero and the quote's own two lines. Identical axes and weight by design, so they are one recipe: two tokens holding the same numbers is just a future drift. Only their sizes differ. */ --serif-display: "opsz" 118, "SOFT" 48, "WONK" 0; --serif-display-weight: 700; /* The quote marks, and only the marks. They sit lighter than the words they enclose on purpose — the punctuation should not weigh as much as the sentence. Opening and closing take the same treatment: they are one role. */ --serif-quote-mark: "opsz" 118, "SOFT" 6, "WONK" 0; --serif-quote-mark-weight: 625; /* Editorial rows — Writing, Speaking, Around the internet, Archive. Inherited from , so it is what the serif does unless a surface says otherwise. */ --serif-row: "opsz" 78, "SOFT" 48, "WONK" 0; --serif-row-weight: 500; /* Cards — Work and Media share their cut and differ only in size and leading, because they are the same component carrying different hierarchy. */ --serif-card: "opsz" 72, "SOFT" 40, "WONK" 0; --serif-card-weight: 500; /* Emphasis inside running body copy. Hanken's 700 sits far closer to its own regular than Founders Grotesk Bold sat to Founders Regular, so was reading as a semibold and the company names stopped landing. 800 restores the original's stem contrast against the body while still belonging inside the sentence; 850 starts to read as a separate weight. This is BODY emphasis only — heading and label weights are untouched. */ --weight-emphasis: 800; /* ---------- COLOR ---------- */ --paper: #F8F5F2; /* page background — never pure white */ --slate: #33291D; /* primary dark: hero, intro body */ --oak: #4A3A2A; /* row metadata */ --dim: #5C5141; /* navigation */ --ink: #1A1916; /* row titles */ --ink-quote: #1C1A15; /* quote */ --masthead: #2E2C29; /* MICHEL FERREIRA */ --muted: #7A6D59; /* section labels (WRITING, SPEAKING, WORK) */ --rule-light: #ECE8DF; /* row separators */ --rule-strong: #C9C4B8; /* link underlines */ --orange: #FF6C00; /* the only orange. header block, section markers, CASE STUDY label, hovers. Use sparingly. */ --highlight: #F5C518; /* hand-drawn quote highlight (verify against Figma) */ /* ---------- TYPE ---------- REPLACEMENT TUNING — read this before "correcting" any number below. The px values here are NOT the original design's numbers. Fraunces and Hanken Grotesk are set on different bodies than Family and Founders, so carrying the old numbers across would have changed the design: cap/em x-height/em Family → Fraunces .660 → .700 .468 → .482 Founders → Hanken .630 → .697 .437 → .493 Hanken paints ~13% larger and ~11% wider at the same px: dropped in at 24px it pushed the About prose from 7 lines to 8 and the intro from 6 to 7. So each face is scaled back to the ORIGINAL optical size — matching x-height (text) and cap-height (display) — which also restores the original line lengths: serif ×0.945 (660 / 700 cap) — display tiers only; see the row title sans ×0.885 (24px Founders ≡ 21.25px Hanken, by x-height and by measure) The serif's set width is a separate problem, solved separately by pinning opsz — see the three recipes above. The scales assume that pinning; without it no size below is right. Note the EDITORIAL tier ends up needing no scaling at all, because its recipe already matches Family Medium's width. LEADING IS THEN HELD IN ABSOLUTE TERMS. Body copy still sets on a 35.5px line at desktop; the RATIO rises (1.48 → 1.67) purely because the em it is a ratio OF got smaller. Same apparent type size, same line length, same rhythm — that is the whole point. Scaling the ratio back down to "look normal" would tighten the page by ~17% and undo the match. Anything the label face (Agrandir) sets is untouched: it did not change. */ /* Masthead — label face, 900, uppercase. Leading is declared in px, not inherited: body's 1.5 ratio is a body-copy value and on 24px produced a 36px line box — off the 8pt grid (36 = 4×8+4). 32px puts the masthead's line box back on the grid. This governs the BOX only; Agrandir's caps fill its ascent almost exactly (cap 720 / asc 750) so the visible glyphs still sit high inside it. That is a font metric and is deliberately left alone. */ --type-masthead-size: 24px; --type-masthead-leading: 32px; --type-masthead-tracking: -0.096px; /* Nav + section labels — label face, 900, uppercase */ --type-label-size: 13px; --type-label-leading: 1.5; --type-label-tracking: 1.3px; /* Pen underline: rem, never em. As an em the same declaration produced a 4.4px stroke on a 13px label and 8.2px on 24px prose — one treatment, three thicknesses. */ --pen-thickness: 0.34rem; --pen-thickness-hover: 0.42rem; /* Hero — display recipe. 137px is the tuned desktop size; the clamp floor and slope are unchanged, so the headline holds its proportion down to a phone. Tracking is the tuned -1.8px expressed against that 137px as an em, so it stays proportional across the clamp instead of biting harder as type shrinks. */ --type-hero-size: 137px; --type-hero-tracking: -0.0131em; /* There is no lede TYPE role. The homepage intro reads in the same Hanken style as every other paragraph on the site; what makes it the intro is where it sits and how wide it runs, not a size of its own. Hierarchy comes from composition. Only the paragraph gap below is intro-specific, and that is layout, not typography. */ --gap-lede-paragraph: 24px; /* between the two opening paragraphs */ /* THE reading style. One Hanken paragraph setting for the whole site — the homepage intro, the About prose, anywhere running copy appears. 21/32 are chosen numbers, not computed ones: 32 sits on the 8pt grid and the ratio is written as the pair itself so the deliberate values stay visible and land exactly, rather than as a rounded decimal that computes to 32.004. The clamp steps down to a second deliberate pair, 16/24, because 21px in a 294px phone column sets a 26-character line. Both ends are real values. */ --type-body-size: clamp(16px, 1.8vw, 21px); --type-body-leading-ratio: calc(32 / 21); /* CONTENT ROW — Writing, Speaking, Around the internet and the whole Archive are ONE component. There is no per-section row typography and there must never be: if a list of titled links appears anywhere else, it uses these. The 18px/12.5px pairing this replaced was an accidental second tier, not a hierarchy level. */ --type-row-title-size: 21px; --type-row-title-leading: 28.8px; /* Chips and micro-labels — the tier BELOW section labels: taxonomy chips, UPCOMING, archive filters, year counts. Was typed as 11px in four places and 11.5px in a fifth. */ --type-chip-size: 11px; --type-chip-tracking: 1.1px; /* Secondary description under a row title / inside a case-study grid. Sits ABOVE the metadata in the hierarchy, so it may not be smaller than it. */ --type-sub-size: 15px; /* Row metadata — the line under a row title. 650 rather than a nominal 500: Hanken runs thin where Founders Medium sat firm, and a light metadata line floats away from the title it belongs to, which reads as a spacing fault rather than a weight one. */ --type-row-meta-size: 14px; --type-row-meta-leading: 18px; --type-row-meta-weight: 650; --type-row-meta-tracking: -0.4px; /* Wrapped row titles must read as ONE title, not two lines of prose. Desktop keeps the roomier 28.8px; mobile tightens to a ratio so a two-line serif title stays a single typographic unit. */ --type-row-title-leading-mobile: 1.12; /* --type-row-meta-leading-mobile retired: it resolved to 17.5px against a desktop 18px, which is drift, not a breakpoint decision. Metadata sets on one leading at every width. */ --gap-row-title-to-meta: 12px; /* Quote — serif Medium, centered. Serif scale, and the tracking follows the hero's move to em so it survives the clamp. */ --type-quote-size: 45px; /* Leading lives on .quote as a ratio so it survives the clamp; the unused --type-quote-leading that used to sit here stated 48.5px against an actual 49.68px, which is the kind of dead token that misleads the next reader. */ --type-quote-tracking: -0.0104em; /* CARDS — one component, two hierarchy levels. A Work cover outranks everything else in its grid; a Media card sits at the content-row tier. They share a cut (--serif-card) and differ only here. */ --type-work-title-size: 24px; --type-work-title-leading: 28.8px; --type-media-title-size: 21px; --type-media-title-leading: 22.5px; /* Case-study page title — serif Medium */ --type-case-title-size: 28px; /* ---------- LAYOUT ---------- */ /* Measured off the Figma redlines (Frame 5): 0 → 16 white 16 → 80 orange block (64×64) — straddles the rail/paper seam 80 → 96 16px gap 96 every piece of text: masthead, hero, labels, row titles So the block sits *in* the white and the text column is a single line all the way down. 16 · 64 · 16 · 96 — all on the 8pt grid. */ --canvas-reference: 1496px; /* desktop viewport the Figma frame targets */ --gutter-page: 72px; /* document gutter */ /* TRIAL — desktop square geometry (option B). The square must straddle the rail/paper seam the way it already does on mobile: 50/50. With the old 16/96 pair it sat 88% in the white rail and clipped the paper by only 8px, because the desktop square (64) is SMALLER than the rail (72) while the mobile square (32) is BIGGER than its rail (24). Moving the block to 40 centres it on the 72px seam (40→104) and the text column follows at 120, keeping the 16px gap and the 72px white rail. Press G then click SQUARE (or press S) to compare against the old values. To revert permanently: content-start 96, block-inset 16. */ --content-start: 120px; /* primary content inset — one column, everything */ --block-inset: 40px; /* orange block's left edge from the page edge */ /* The paper's inset from the rail, used on BOTH sides so the left and right edges can never drift apart again. Derived, never typed twice. */ --content-inset: calc(var(--content-start) - var(--rail-width)); --nav-gap: 48px; /* ---------- RAIL ---------- The page ground is WHITE. The paper canvas is an inner column inset by --rail-width on both sides, so white shows down each edge. This is a rendered colour change, not empty padding — the contrast break is the point. Orange blocks sit on the rail/paper seam. */ --rail: #FFFFFF; --rail-width: 72px; /* Left-oriented editorial canvas. NEVER: max-width: 1200px; margin: 0 auto; */ /* The intro runs wider than the About prose measure on purpose. Same typography, different composition — that is where the hierarchy lives now that the intro has no size of its own. */ --intro-max-width: 800px; /* ---------- ORANGE BLOCKS ---------- */ --block-header-w: 64px; --block-header-h: 64px; /* full square, matches the section markers */ --block-marker: 64px; /* section markers: 64 × 64 */ --nav-current-marker: 8px; /* current-page marker in the nav — on the 8/16/32 scale */ --nav-current-marker-mobile: 16px; /* same marker, one step up for the mobile nav's larger links */ /* ---------- SPACING SCALE ---------- 8pt grid: 8 · 16 · 32 · 48 · 72, plus multiples for large rhythm. Every gap, pad and margin must come from this scale. Nothing else. */ --space-8: 8px; --space-16: 16px; --space-24-m: 24px; /* mobile-only step; off the desktop 8/16/32/48/72 set */ --space-32: 32px; --space-48: 48px; --space-72: 72px; --space-96: 96px; --space-128: 128px; --space-144: 144px; --space-160: 160px; --space-192: 192px; /* ---------- SECTION RHYTHM ---------- */ /* --row-height retired: rows are a stacked kicker/title/meta grammar now, so their height comes from content + padding, not a fixed minimum. */ /* Breathing room between two MAJOR narrative sections (About). One token, applied to every such boundary — never a per-section margin. */ --gap-section-major: var(--space-160); --gap-label-to-rows: 32px; /* WRITING label → first row */ /* ONE canonical label→title relationship. Three components perform this same job — a row's kicker above its title, a Work card's CASE STUDY above its title, a Media card's label above its title — and all three take this token. It is not a general 8px: it is this relationship. */ --gap-label-to-title: var(--space-8); /* Card cover → its label. Shared by both card types, same reasoning. */ --gap-cover-to-label: var(--space-16); --gap-writing-to-speaking: 72px; /* ---------- MEDIA ---------- */ --media-hero-w: 1400px; /* opening photograph */ --media-hero-h: 788px; --work-image-w: 680px; /* case-study images */ --work-image-h: 425px; --work-gap: 24px; /* ---------- MOTION ---------- */ --zoom-scale: 1.04; /* image zoom inside fixed crop: 1.03–1.06 */ --zoom-duration: 400ms; --zoom-ease: cubic-bezier(0.25, 0.1, 0.25, 1); } @media (prefers-reduced-motion: reduce) { :root { --zoom-scale: 1; --zoom-duration: 0ms; } } /* ============================================================ SUPPLEMENTARY TOKENS — outside node 1:1988's stated scope (masthead through WORK). Everything below covers surfaces the node doesn't define: case-study detail pages (dark theme, not part of the homepage canvas), WCAG-required text-safe color variants, and mobile breakpoints. Flagged separately per the constitution's authority rule 4 ("this file — for everything the Figma node doesn't cover"). Do not merge into the section above — keep the Figma-sourced tokens auditable on their own. ============================================================ */ :root { /* Case-study pages (work-*.html) render dark, matching the original black Framer source — outside the homepage canvas. */ --dark-bg: #1B1611; --dark-ink: #F4EDE3; --dark-dim: #A99C8D; --dark-rule: #3A2F26; --white: #FFFFFF; /* intentional pure-white image-card backgrounds, both themes */ /* Mobile breakpoint (<900px) overrides for --gutter-page / --block-marker. Figma's reference canvas is desktop-only (1496px); mobile scale-down is my own call per "mobile is authored, not shrunk," not a Figma value. */ --gutter-page-mobile: 24px; --block-marker-mobile: 20px; /* The footer fineprint is its OWN micro-label role — heavier, wider-tracked and a half-step larger than a caption. It was borrowing --type-caption-size and the caption's weight, which made two different jobs look like one. */ --type-fineprint-size: 12px; --type-fineprint-leading: 17.25px; --type-fineprint-tracking: 1px; --type-fineprint-weight: 800; /* Uppercase grotesk micro-labels — figure captions, case-study captions and stat labels. Deliberately NOT the fineprint: a caption sits under an image and stays quiet. These used to borrow --type-label-size (13px), which is the AGRANDIR label size. That worked while the grotesk was Founders, whose caps are 10% shallower than Agrandir's; Hanken's caps are within 3% of Agrandir's, so at a shared 13px a caption would now set as loud as a section label. Its own token, at the size that reproduces the original caption. */ --type-caption-size: 11.5px; /* Micro-copy not covered by the Figma type scale (e.g. the "Booking a conference?" aside under Speaking). */ --type-aside-size: 14px; /* About / contact surfaces — outside node 1:1988's scope. */ --portrait-w: 480px; /* constrained width for a vertical portrait figure */ --measure: 720px; /* running prose measure. Unchanged on purpose: the measure is the design; the type was scaled to fit it, not the other way round. */ --measure-form: 560px; /* form column — narrower than prose on purpose */ --type-field-size: 17.5px; /* input text: large enough to feel authored, not admin */ }