/* Design tokens ============== Source: Figma file NU1oF2CrE9RggFQxkqLZ35, frame "Entity Pages" (node 10:651) — read via get_screenshot + get_design_context per .superpowers/sdd/2026-08-29-front-end/design-procedure.md, Steps A and B. That file defines no Figma variables (get_variable_defs returned {} for this node, as for every node in the file), so every value below was read by inspecting the reference code's inline colours, sizes, radii and shadows rather than a token layer. Colours actually found on the Entity Pages frame: #4362ef vivid blue — "Sign In" / "Submit Review" button fills, and the text colour of inline links ("View on map", "Discover other aquariums in Sydney") #1d2a62 dark navy — every heading, the logo wordmark, table headers and bold labels; this is the design's one "ink" colour, there is no separate near-black #555555 grey — secondary/body copy (almost exactly the old --muted: #5a5a5a this file replaces) #e9e9e9 light grey — hairline borders and rule dividers #fefefe near white — page and card background #f7f8fd pale blue — alternate surface used for callouts, badges and FAQ/"no upcoming events" boxes Font sizes actually used (px, deduplicated; 17px merged into 18px — see judgement calls below): 12, 14, 16, 18, 24, 30, 48. Typeface: the frame sets headings in "filson-pro" and body copy in "ff-tisa-sans-web-pro". Neither is licensed to this project, so both are mapped to a system font stack instead — no webfont file, no Google Fonts link, no external request of any kind. The site stays a directory of files. Judgement calls (no directly-read value existed, or two close readings had to be collapsed): - --colour-ink and --colour-brand-ink share one read value (#1d2a62). The design uses a single branded navy for all heading-weight text instead of a separate neutral near-black, so both tokens are that navy on purpose, not a copy/paste mistake. - --text-lg (18px) absorbs the frame's 17px sizes; a 1px difference between two headings reads as export rounding, not a deliberate second size. - --radius-md is 8px, rounding the frame's 6.8px card-image radius to a clean value. - --radius-lg reuses the frame's pill/full radius (rounded-[100px] / rounded-[9999px]) as the largest of the three required radius steps; the frame has no separate "large but not full" radius. - --shadow-card is the frame's recurring subtle card treatment (0 1px 1px rgba(0,0,0,.05), paired with a --colour-surface fill and a --colour-rule border on every bordered panel), not the one-off stronger two-layer shadow seen on a single floating element. - --measure is not a pixel value Figma can express (a fixed-width frame has no reflowing prose column); 65ch is a standard readable-line- length default, chosen rather than read. - --page-max is read directly: max-w-[1360px] / w-[1360px] recur throughout the frame as the overall content width. Spacing and radius steps are the frame's own recurring 4px-based rhythm (4, 8, 12, 16, 24, 32, 40, 64 were all observed directly as gap/padding values); one-off section paddings like 33px, 41px or 81px are treated as frame-specific rounding of these steps, not new tokens, per Step C of the design procedure ("if a value is close to an existing token, use the token; do not add a near-duplicate"). */ :root { /* Colour */ --colour-ink: #1d2a62; /* design.md 2.3 gives --ink as #555555 for body copy, measured there at 7.46:1 on white. Darkened at the owner's instruction (2026-09-03): #555 read as washed out against the navy headings at the sizes this site actually uses. #444 is 9.66:1 on --colour-surface and 9.18:1 on --colour-surface-alt, so the change only ever improves contrast -- the accessibility table in 2.7 stays true, with more headroom than it claims. A deliberate deviation from the doc, recorded per CLAUDE.md. */ --colour-muted: #444444; /* 2.3's --ink-80. Secondary meta beside a primary value -- the review count next to a rating, the alias under ALSO KNOWN AS. Not a third grey: it is --colour-muted at 80%, and stays defined in terms of that value. */ --colour-muted-80: rgba(68, 68, 68, 0.8); --colour-brand: #4362ef; --colour-brand-ink: #1d2a62; --colour-rule: #e9e9e9; --colour-surface: #fefefe; --colour-surface-alt: #f7f8fd; --colour-link: #4362ef; /* design.md §2.3 --green-400: the eyebrow badge's "live" dot, and the only flat green in the system. The doc calls it decorative only -- it must never be the sole carrier of a state, because at 8px it is below every contrast threshold there is. Value read from design.md, not sampled. */ --colour-accent: #4de587; /* design.md §10, fix 4. --colour-brand on white measures 4.96:1 there: it passes AA for normal text and fails for small bold, and the doc names the remedy -- "darken to #3450d0 (6.55:1)". So this is the blue that carries small bold text (the header's `ui`-sized links) and the hover/darkened state of a --colour-brand fill, NOT a second brand colour. Anything at body size or larger still uses --colour-brand. */ --colour-brand-dark: #3450d0; /* design.md §10, fix 3: the doc's --ink-60 input placeholder measures 2.85:1 and fails outright, and the remedy it gives is "darken to #6b6b6b (5.33:1)". Named --colour-input-placeholder, NOT --colour-placeholder: that name is already taken further down this file by the red that marks mock content, and the comment there says in as many words that the moment the red means two things a placeholder stops being obvious. These two senses of "placeholder" -- filler content, and the grey hint inside an empty field -- must never share a token. §10 pairs this fix with "never use placeholder text as the only label", which is a markup rule the token cannot enforce on its own; see the visually-hidden