Composing screens

Components are web components (mm-*) from @marmotdata/elements, with React wrappers and Svelte types; @marmotdata/css has plain classes for static pages. Interface icons are Material Symbols Outlined at 16px and provider marks come from @marmotdata/icons, all bundled so nothing is fetched at runtime.

Redesign existing screens in place: keep each page's layout, sections, copy and controls, and apply this system on top.

The rules people break most often are in Easy to get wrong.

Signature details

• Selection is mm-selected, a neutral ink tint, with ink text, in place of browser blue or the accent tint.
• Focus ring is a 2px mm-text outline with a 2px offset on paper: at least 3:1 on every surface in both themes, and deliberately not burnt sienna so it can never be confused with selection.
• Drawing conventions appear sparingly in charts and empty states: leader lines with dots and dimension ticks where they explain something. Never decorative marks such as crosshairs, corner ticks or stray "+" glyphs.
• Typographic details: curly quotes, a real ellipsis (…), non-breaking spaces in 10 MB and ⌘ K, and numerals for counts.

Sample data. is specific and plausible: orders_daily, customers_dim, shop.orders.v2, mrn://postgresql/table/shop.public.orders, row counts like 1,284,019, owners like "Analytics Engineering", people like "Jane Doe".

No lorem ipsum or "Acme Corp". Agents and other clients have neutral names ("support-triage-agent", "cli-agent") and the generic agent logo rather than a real vendor's.