DESIGN - Marimo — ContextQMD

Brand Assets

Compact, software-native, and utilitarian.
White or near-black work surfaces with slate borders and muted secondary text.
Restrained blue for primary interaction; yellow for action, stale, or needs-run states.
Avoid decorative gradients, marketing-style heroes, nested cards, and one-off palettes.

Use background, surface, foreground, border, and muted tokens for structure.
Use primary for primary actions, selection, progress, and clear focus only.
Use action and stale colors for manual action or freshness state, not generic warning.
Use destructive, error, and success colors only for their semantic states.
Preserve light and dark token pairs whenever a color appears in both modes.

Use PT Sans for UI and prose, Lora for authored markdown headings, and Fira Mono for code-like values.
Keep control text compact and legible.
Do not add viewport-based type scaling beyond marimo's app defaults.

Use borders first and subtle shadows second.
Cells, outputs, editors, markdown, tables, and data grids should be full-width and overflow-safe.
Keep data UI dense and inspectable: stable columns, predictable overflow, readable headers, and no decorative framing around tables or charts.
Cards are for repeated items, dialogs, or genuinely framed tools; do not style page sections as cards.

Buttons should be compact, label-like, focusable, and drawn from primary, secondary, or action semantics.
Icon buttons should use familiar existing icons and tooltips for unclear actions.
Inputs, selects, and textareas should be compact, bordered, readable, and use code typography only for code-like values.
Tabs, menus, popovers, dialogs, and tooltips should use semantic surfaces, borders, focus states, and restrained shadow.
Runtime states should pair color with labels, icons, borders, position, or shape.

Use short transitions for hover, focus, loading, resize, drag, and stale-output changes. Avoid decorative animation.