/* ============================================================= 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 ----------------------------------------------------------- */ --color-bg: #f2f2f2; /* page background */ --color-ink: #1e1e1e; /* all body and heading text */ --color-white: #ffffff; /* Artwork navy — the star, the illustrations, the logo mark. Deliberately darker than --color-link: the art reads as a graphic element, the links read as interactive. */ --color-art: #09024b; /* Links. Two of them, because they sit on opposite surfaces: #13049d on the grey page, #6b5bfd on the dark footer. ~9.6:1 and ~5.6:1 respectively — both clear AA. Swapping them fails: #13049d on #1e1e1e is ~1.7:1, effectively invisible. */ --color-link: #13049d; --color-link-on-dark: #ffffff; /* 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: #1e1e1e; /* LEGACY — the old blue palette. Still referenced by work.html (case-card background, CTA) until that page is redesigned. Delete these two lines and the Work page loses its cards. */ --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 — the only place Miranda Medium appears. Note this moved to the display family in the redesign; it was body before. */ --nav-family: var(--font-display); --nav-weight: var(--weight-medium); --nav-size: 1.25rem; /* 20px */ --nav-leading: 1; /* 100% */ --nav-tracking: -0.011em; /* -1.1% */ /* 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 */ --page-margin: 3.75rem; /* 60px — collapses on narrow screens */ --rule: 1px solid var(--color-ink); /* the hairline grid */ }