Design System

Tokens, spacing, shadows โ€” and the UI guidelines.

design.colors

--leo-accent
โ€”
--leo-accent-2
โ€”
--leo-text
โ€”
--leo-muted
โ€”
--leo-card-bg
โ€”
--leo-card-border
โ€”

design.semantic.title

design.semantic.desc

--leo-success
โ€”
โ€”
--leo-warning
โ€”
โ€”
--leo-danger
โ€”
โ€”
--leo-info
โ€”
โ€”

design.spacing.title

design.spacing.desc

4px
8px
12px
16px
20px
24px
32px
40px

design.shadows.title

--leo-shadow
--leo-shadow-lg

Guidelines

  • Use btn class for primary actions.
  • Use leo-card for panel-like elements.
  • Place page content inside .container.
  • Tokens react to the theme and user overrides from leo.vars.css.