chore(repo): add design system

[shellscape]

No description provided.

[shellscape]

@CharlieHelps Copy the entire color palette from assets/design-system/12-design-system-combined.html (you should use the same kind of color group layout, it works really well) to 14 to replace the "Palette in use" and assign the colors css names that identify the color, rather than use. e.g. prefer --slate-0: #1A191A instead of --bg: #1A191A. You can keep the descriptions like "page background," those are useful.

Copy the typography section from assets/design-system/12-design-system-combined.html, again as full width. Include font sizes and examples used in apps/web and apps/preview.

Introduce a page divider between the typography and controls sections.

Update the fonts and sizes and weights throughout the file to match the typography.

The page layout below typography needs to suit dark mode as well as light mode. The page below typography should be vertically split in two: the top half will be light mode, the bottom half dark mode. Controls and sections should be duplicated and styled appropriately using colors from the design system (asset 11) in both dark and light mode. You may reference the code in apps/web and apps/preview, and https://atom-editor.cc/ to pull appropriate coloring for dark mode. Light mode will need to be calculated and best-effort, though you can use https://atom-editor.cc/packages. Text in light mode should use the darkest color in the Graphite and Warm Stone design system groups by default. Text in dark mode should use the lightest color in our Graphite and Warm Stone design system groups. While our design system is primarily derived from a dark-themed site, with minimal light theme input, you may have to darken accent and control background colors for light mode - make logical and best-effort decisions for that.

#EFEAE1 will be the base background color for light mode
#1A191A will be the base background color for dark mode

assets/design-system/14-design-system.html uses tailwind, react, shadcn and is a static html file. DO NOT remove existing elements or rearrange layout.

[charliecreates]

Implemented and pushed in 822055d.

Updated assets/design-system/14-design-system.html to:

• replace Palette in use with the full grouped palette from 12-design-system-combined.html, using identity-based CSS token names while keeping descriptive labels,
• copy in the full-width typography section and include size/usage examples drawn from apps/web and apps/preview,
• add a divider between typography and controls,
• align fonts/sizes/weights throughout to the typography scale,
• duplicate the post-typography controls/sections into a vertically split light (top) and dark (bottom) treatment with requested base backgrounds (#EFEAE1 light, #1A191A dark) and default text contrast choices from Graphite/Warm Stone extremes,
• preserve existing elements and overall layout order while extending for both themes.

Validation run:

• bunx prettier --check assets/design-system/14-design-system.html ✅
• token-count check for palette coverage (30 tokens) ✅
• git diff --check ✅