MS-104 · Design tokens: colors, fonts, typography

[adityapat24]

Figma: Color Palette 31:751, Typography 31:793, plus the actual text nodes in LG/MD/SM frames

Steps

1. Colors: add a museum palette to packages/config-tailwind/theme-tokens/colors.ts (add only; don't change carnival). Names: museum-<color>, museum-<color>-dark, museum-<color>-light.

   Color	Primary	Dark	Light
   Black	#090912	#090912	#24253b
   Dark Blue	#15173b	#060825	#33357d
   Purple	#310d46	#1d032c	#5f2666
   Indigo	#3842b1	#070f68	#5d68e6
   Teal	#017b9d	#024354	#37a9c9
   Green	#0f7c1e	#094600	#68bf5b
   Light Indigo	#9aadd8	#637bb2	#cedcfc
   Ivory	#dddddd	#cabfbf	#fdfbfb
   Yellow	#ffd391	#ffb647	#fdebcc
   Gold	#e9ac1d	#d08000	#ffd268
   Terracotta	#ca6330	#833711	#f08854
   Red	#a52c28	#71120f	#e65752
   Brown	#512309	#2c1304	#894a3c

2. Fonts: frames use Amarante, Special Gothic Condensed One (already added) and Merriweather 300/400/600. Load Amarante and Merriweather via next/font/google in app/layout.tsx as CSS vars, add Tailwind families font-amarante, font-gothic, font-merriweather, remove the unused Inter, and make Merriweather the apps/main body font.

3. lib/Components/museum/Typography.tsx: <Typography variant="sectionTitle" as="h2">. Measure every variant in Figma Dev Mode for LG, MD and SM, and put the values in the variant map in code (with a comment naming the Figma node you measured). Variants: heroTitle, sectionTitle, displayName, cardTitle, label, body, bodySmall, role, faqQuestion (+ open state). LG/MD sizes use artboard units (calc(var(--u)*50)), or px with a TODO until MS-102 merges; the variant API stays stable.

4. /dev/typography page showing every variant at each breakpoint.

Acceptance criteria

• bg-museum-teal-dark, text-museum-gold etc. work
• All three font families render with no fallback flash
• Every variant has LG/MD/SM values in code

---