Style boards and flavours as shared data

[ecropolis]

First step of tmp/design-guidance/styles-page.md §1. src/data/styles.ts becomes the one source for the ten style boards and sixteen flavours. The portal and console will keep copies that are byte-identical below the header, pinned by hash like the console's drop-zone check. This PR changes nothing in those repos.

Hash for the downstream pins

SHA-256 of the file body below its header:

dc201f06389e3584f3dd4fc53968fb9b4c9223ae7833267a33b363947adaabb9

npm run check prints it on every run. The shared body starts at the line // Framework-free on purpose: no imports, no DOM, no Astro.

What the file carries

• The design note's shape. id, label, word, feel, palette as { name, hex }[], type, shape, motion, suits and an optional demo.
• Everything the portal renders from, same values. A scratch comparison checked every field of every portal board and flavour against the new file. The portal's traits.type is type.note, its traits.colour is a new colour field, and its fonts are type.heading, type.body and type.label. Its drawing detail sits under draw: onAccent, eyebrow, heading, texture, radius, align, mark, the motion kind and sample. FONT_STACKS comes across unchanged.
• Everything the console renders from. The console's traits array is always the feel line split on ", ", so feelParts(board) returns exactly what it shows today.
• Constants. STYLE_PICKS_MAX = 2, STYLE_FLAVORS_MAX = 3, STYLE_FEEL_MAX = 80. The portal and console already agree on all three.
• Helpers. isStyleId, isFlavorId, styleBoard, styleWord, flavorLabel. Two small extras are added because the portal uses them: styleFlavor, its flavorById, and feelParts. styleWord and flavorLabel behave exactly like the console's. Unknown ids pass through as themselves.
• Left in each app. The portal keeps roles and contrastPairs for rendering and its contrast check. The console keeps flavorsOf and stylePicksOf for reading accounts.

Differences reconciled: the portal's value wins

Board	Field	Console had	Now, from the portal
high-tech	word	High-tech	High tech (the portal's short name)
high-tech	palette	#0B1220 #1E293B #38BDF8 #E2E8F0	#0b1220 #e6edf7 #38bdf8 #16213a
minimal	palette	#FFFFFF #F4F4F5 #18181B #2563EB	#ffffff #1a1a1a #2f5bea #f3f3f1
classic	palette	#1F2A44 #7A1F2B #F5EFE0 #B08D57	#fbf7ee #1b2a4a #7a1f2b #efe6d2
natural	palette	#5B6B3A #A67C52 #E9E1D0 #2F4A3A	#f4efe4 #2f3a2c #4e6b34 #e4dccb
luxurious	palette	#1A1423 #3B1F2B #C9A227 #F3EAD3	#141115 #f3ead8 #c9a45c #221d24
playful	palette	#FF6B6B #FFD93D #6BCB77 #4D96FF	#fff8ec #2a1a4a #ff6b5e #ffd84d
childlike	palette	#E53935 #FDD835 #1E88E5 #43A047	#fffdf5 #161616 #1f4fd1 #ffd60a
retro	palette	#E07A5F #F2CC8F #81B29A #3D405B	#f3e3c3 #3b2317 #1f5f5b #e8b64c
bold	palette	#000000 #FFFFFF #FF3B00 #FFE600	#ffffff #0a0a0a #0033ff #ffe500
handcrafted	palette	#8C6A4F #D9C4A5 #F6EFE6 #5A3E2B	#f7f1e8 #3d2b1f #8c4a2f #ebdfcc

Palettes now always run ground, ink, accent, surface, in lowercase. That means the console's colour strip will show the colours clients actually picked from. Names, feel lines, traits, flavour ids and labels, and the three limits already matched.

Demo links set

Only two vertical demo sites exist in the Website repo's src/data/site.ts: Mainstreet and Supper. The other superherotech.ai subdomains there are client work, not demos. Both demos were checked in a browser.

• classic links to https://supper.superherotech.ai, labelled "Supper, our restaurant demo". It has a cream ground, Georgia serif headings over a plain sans body, burgundy buttons and centred section headings.
• minimal links to https://mainstreet.superherotech.ai, labelled "Mainstreet, our studio demo". It has a white page, one quiet sans for headings and body, a single accent and a lot of room.

No other board has a demo. Mainstreet is not Classic, even though the design note used it as its example. It has no serif, and no navy, burgundy or cream.

For review

• suits is new. Neither copy had it. Each board's entry names the trade of its own made-up sample business, such as "Accountants, lawyers and advisers" for Classic. Please widen or correct these before the public page uses them.

Check

scripts/check-styles.mjs runs at the end of npm run check, which passes. It checks for:

• ten boards with unique ids, in the portal's order
• sixteen flavours with unique ids
• every pairsWith naming a board
• lowercase #rrggbb palettes with the four roles in order
• known font keys
• labels, words and demo labels of 40 characters or fewer, and feel lines of 120 or fewer
• an https demo.href
• no imports in the data file
• the pin rule in the header

A planted uppercase hex, http demo, duplicate flavour and unknown pairsWith board each failed the check by name. The file also passes a strict tsc run.

Next come the site, then the portal and console. Each copies the body and pins the hash above.

🤖 Generated with Claude Code