Documentation
Foundations
Use typography and rhythm first, with neutral workareas and restrained wine selection.
Typography and rhythm
Components inherit your interface font. Code uses the configurable mono font token. This site chooses Wix Madefor Text and JetBrains Mono. Default body and control text use 1rem at weight 400. Use Heading for titles and Text for paragraphs. Text sizes are body for prose, ui for dense interface text, and caption for metadata; the muted tone quiets supporting text without changing its size.
The shared type scale runs from 0.6875rem to 2.25rem. Use hierarchy to separate tasks before introducing another panel. Group related controls with Stack and Inline. Keep labels close to controls, and separate unrelated sections with larger gaps.
Surface roles
Use surface for the white canvas in light mode. Use workarea for neutral grouped work zones. Use controlSurface for one recessed field fill on both canvas and workareas. Inputs and selects do not change color because they sit inside a card.
Use floatingSurface for menus and overlays. Keep decorative depth on controls and floating content. Content separation comes from type, spacing, and quiet boundaries. A card should express a real grouping or task, rather than surround every piece of content.
Action and selection color
Neutral ink is the default action color. Use the Button brand variant for the main wine action. Checked controls use accent with accentContent. Quiet selected surfaces use brandBackground with brandForeground, the lavender and wine pair.
Use content for headings and primary values. Use mutedContent for help text and secondary information. Use the semantic status pairs for success, warning, information, and destructive feedback. Color must not be the only state cue.
Data color
The static palette has rose, orange, amber, green, teal, blue, violet, and pink ramps at 300, 500, and 700. Chart series 1 through 6 map to rose, orange, green, amber, pink, and teal. The semantic series tokens use 700 in light themes and 300 in dark themes.
Use semantic series tokens so charts follow the active theme. Keep category meanings stable across views. Add labels, legends, units, and text summaries. Missing observations stay gaps.
Geometry and feedback
Standard controls keep the established 12px radius. Content surfaces use the shared 20px and 24px radii. Named control sizes preserve their existing geometry; do not resize controls with external CSS.
Feedback should be fast and local. Shared press feedback uses scale 0.98 where supported. Preserve dimensions between states. Respect reduced motion and forced colors. Use labels, focus, borders, and indicators alongside color.