Back to Marimo

DESIGN

DESIGN.md

0.23.112.2 KB
Original Source

Brand Assets

Visual Character

  • 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.

Color

  • 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.

Typography

  • 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.

Surfaces

  • 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.

Components

  • 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.

Motion

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