styles

Summary

The product's tokens and icons, one group per page.

Raw wireframes

• .context/designs/web/northwind/northwind-web/main/styles/view/<group>.html — Colors, Typography, Spacing, Radius, Shadows, Icons
• .context/designs/web/northwind/northwind-web/main/styles/view/code.html, view/history.html, edit/colors.html, edit/ai.html, edit/import.html

Why it is drawn this way

• The same shell as pages and components, but the middle is a plain page, not a canvas: tokens have no layout to draw.
• Six groups, the counts from example-northwind: 24 colours, 9 type styles, 8 spacing steps, 4 radii, 3 shadows, 27 icons. Logos sit at the top of Icons.
• Colors are ramps by shade (brand), then neutral and status. A banner links the 7 loose greys to Analysis, which owns the fix.
• The inspector shows the selected token: its value, where it is used and how many places, and contrast for a colour. Code exports every token (Tailwind, CSS, SCSS, W3C, Style Dictionary, Figma) and gives the CLI line. History shows the token's versions of main.
• In Edit a value is typed in place; the inspector shows the old value and how many places change. A new value is a patch; a rename is major. A dashed tile adds a colour.
• Import a system maps another system's tokens onto these and says what matches, changes or is new, then goes to the draft.
• The island holds View · Edit; Edit adds Import and Ask AI. There are no sizes or states here.