kleradesign

foundations

DESIGN.md
overview
foundations
  • colors
  • themes
  • typography
  • spacing
  • radii
  • motion
  • elevation
forms
dashboard
layout
patterns

canonical rules in kleraOS/DESIGN.md.

foundations

the raw materials. these are the same tokens already declared in each app's globals.css; phase 3 of the formalization hoists them into packages/ui so this page renders them from the single source of truth.

  • colorsbrand palette, opacity ramps, semantic mappings.
  • themesdark (default) and light surface themes for dashboards vs intake/home.
  • typographykarla scale, lowercase rule, line-height system.
  • spacingthe 4 / 8 / 16 / 24 / 32 rhythm and where each lands.
  • radii6 corner radii from xs/3px to xl/18px plus full pill.
  • motioneasings, durations, hover / press behavior.
  • elevationflat by default; portal cards, hover lifts, focus rings.

klera design language · v0.1 · 22 components · registry at packages/ui/registry.json