/* ============================================================= tokens.css — anamobe.com Rebuilt 2026-07-16 against the redesigned Home artboard (Figma scYAIBEp25iq54gJWdzQ3B, node 84:146). Edit values here; nothing else in the site should hardcode a colour or a size. Anything marked LEGACY belongs to the old blue design and can go once that page is redesigned. ============================================================= */ :root { /* ----------------------------------------------------------- COLOUR ----------------------------------------------------------- */ /* 2026-07-28 redesign: the palette collapsed to black + white. The grey page, the navy artwork and the blue links are all gone — everything on Home is now #1c1c1c on #ffffff, and the footer inverts that. */ --color-bg: #ffffff; /* page background */ --color-ink: #1c1c1c; /* all body and heading text */ --color-white: #ffffff; /* Nav and unavailable items. The nav sits at a quiet grey until hovered — ~2.6:1 on white, clearly "quiet" rather than "primary", which is the whole point of it. */ --color-muted: #a8a8a8; /* Footer band. Same value as --color-ink by design — the text colour becomes the surface. Kept as its own token so the footer can change without dragging every paragraph with it. */ --color-surface-dark: #1c1c1c; /* Links on the dark footer. */ --color-link-on-dark: #ffffff; /* LEGACY — the old blue/navy palette, kept only so the not-yet- redesigned work.html still renders. Home references none of these. They can go once Work is rebuilt. */ --color-art: #09024b; --color-link: #13049d; --color-primary-blue: #1705b9; --color-accent-on-blue: #f7ff0d; /* ----------------------------------------------------------- TYPEFACES Both are open-source and free to self-host — the licensing problem from the PolySans/Polymath round is gone. NOT YET INSTALLED: there are no font files in assets/fonts/, so the site currently renders in system-ui. Download the two families, drop the .woff2 files in assets/fonts/, and uncomment the @font-face block at the top of components.css. ----------------------------------------------------------- */ --font-display: "Miranda Sans", system-ui, sans-serif; /* headlines, section headings, nav */ --font-body: "Figtree", system-ui, sans-serif; /* everything else */ --weight-regular: 400; /* Miranda Regular, Figtree Regular */ --weight-medium: 500; /* Miranda Medium — nav, section headings */ --weight-semibold: 600; /* Miranda SemiBold — active nav item */ /* ----------------------------------------------------------- TYPE SCALE px -> rem against a 16px root, so the site respects a reader's browser font-size setting. Figma px in comments. Figma "AUTO" line-height becomes `normal` — the font's own metric rather than a number invented here. ----------------------------------------------------------- */ /* H1 — the hero headline, and the footer's "Ooooh, talk to me." Same treatment in both places. */ --h1-family: var(--font-display); --h1-weight: var(--weight-regular); --h1-size: 4rem; /* 64px */ --h1-leading: 0.969; /* 62px / 64px */ --h1-tracking: -0.04em; /* -4% */ /* H3 — "How I work", "What people say about me" */ --h3-family: var(--font-display); --h3-weight: var(--weight-regular); --h3-size: 2.5rem; /* 40px */ --h3-leading: 1.05; /* 42px / 40px */ --h3-tracking: 0; /* Nav — Miranda Medium, uppercase, quiet grey. Dropped 20px -> 18px in the 2026-07-28 redesign, and the letter-spacing went to 0. */ --nav-family: var(--font-display); --nav-weight: var(--weight-medium); --nav-size: 1.125rem; /* 18px */ --nav-leading: normal; --nav-tracking: 0; /* H5 — principle titles, the hero name, contact links, email */ --h5-family: var(--font-body); --h5-weight: var(--weight-regular); --h5-size: 1.5rem; /* 24px */ --h5-leading: normal; /* Figma: AUTO */ --h5-tracking: -0.011em; /* -1.1% */ /* Section heading — the "01_Product Design" labels on Work. Same size as H3 but the Medium cut, which is what separates a section label from a card title (both 40px Miranda). */ --section-family: var(--font-display); --section-weight: var(--weight-medium); --section-size: 2.5rem; /* 40px */ --section-leading: 1.05; --section-tracking: 0; /* Body large — case study descriptions on Work. */ --body-lg-size: 1rem; /* 16px */ --body-lg-leading: 1.4; /* Body — 16px in the redesign, down from 18. Anything tuned against the old size (art min-heights, reserved line counts) is worth re-checking. */ --body-family: var(--font-body); --body-weight: var(--weight-regular); --body-size: 1rem; /* 16px */ --body-leading: 1.25rem; --body-tracking: 0; /* Caption — attributions, footer copyright */ --caption-family: var(--font-body); --caption-weight: var(--weight-regular); --caption-size: 0.875rem; /* 14px */ --caption-leading: normal; --caption-tracking: 0; --caption-transform: uppercase; /* Tiny — Caption without the uppercase. In Figma these are one style and a text-transform; kept apart here only because the markup needs both. */ --tiny-family: var(--font-body); --tiny-weight: var(--weight-regular); --tiny-size: 0.875rem; /* 14px */ --tiny-leading: normal; --tiny-tracking: 0; /* Redesigned Home ramp: 64 / 40 / 24 / 16 / 14. LEGACY — H2, H4, H5(B) and the 96px numeral are not on the new Home artboard. work.html still uses H2 ("Product Design") and the numeral (the big "01."), so they stay until it's redone. H4 and H5(B) are unused by any page. */ --h2-family: var(--font-display); --h2-weight: var(--weight-regular); --h2-size: 3rem; /* 48px */ --h2-leading: 1; --h2-tracking: -0.02em; --h4-family: var(--font-display); --h4-weight: var(--weight-regular); --h4-size: 2rem; /* 32px */ --h4-leading: normal; --h4-tracking: 0; --h5b-family: var(--font-body); --h5b-weight: var(--weight-medium); --h5b-size: 1.5rem; --h5b-leading: 1; --h5b-tracking: -0.011em; --numeral-family: var(--font-display); --numeral-weight: var(--weight-regular); --numeral-size: 6rem; /* 96px */ --numeral-leading: 1; --numeral-tracking: 0; /* ----------------------------------------------------------- SPACING — 8px scale ----------------------------------------------------------- */ --space-2xs: 0.25rem; /* 4px */ --space-xs: 0.5rem; /* 8px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2rem; /* 32px */ --space-xl: 3rem; /* 48px */ --space-2xl: 4rem; /* 64px */ --space-3xl: 6rem; /* 96px */ /* ----------------------------------------------------------- LAYOUT 1440 artboard = 60 margin + 1320 content + 60 margin. ----------------------------------------------------------- */ --container-max: 82.5rem; /* 1320px — header + footer band */ --page-margin: 3.75rem; /* 60px — collapses on narrow screens */ /* The redesign runs the main content in a narrower column than the header/footer: on the 1440 artboard the hero + "How I work" sit inset ~153px each side (1134px wide), while the logo and nav keep the wider 60px margin — so the logo hangs out to the left of the content on purpose. */ --container-narrow: 70.875rem; /* 1134px */ --rule: 1px solid var(--color-ink); /* the hairline grid */ }