Design system
How we look.
Every token on one page: brand, color, type, icons, and elevation. Change something upstream and review it here.
Brand
The wordmark and the four-point mark come from src/lib/brand.tsx. Never redraw them or set the name in type.
Color
Brand green · Green deep. The Team chapter and dark canvases.
Orange · Craft
Pink
Grey
Blue · Tools
Lavender
Yellow · Lab
Tan
Cobalt
Cream
Charcoal
Paper
Surface
Chip
Chip active
Muted ink
Ink
Destructive
Chapter accents in order: orange for Craft, yellow for Lab, green for Team, blue for Tools. Neutrals stay near-white: paper, surface, and chips carry no warm cast. Text on orange, green, tan, cobalt, grey, and charcoal is paper; on pink, blue, lavender, yellow, and cream it is ink.
Type
Draft smarter.
Aktiv Grotesk regular
Aktiv Grotesk medium
Aktiv Grotesk bold
Body
Legora is the collaborative AI powering lawyers to review and research faster, draft smarter, and advise with precision.
Mono · Commit Mono
01 02 03 04 · 12:04 · 1200×630
Headlines are medium weight, tightly tracked, sentence case, and end with a period. The last word drops to a second line with a large indent. No full-uppercase labels anywhere.
Icons
Filled counterparts for media controls, from icons-filled.
Central icons, square style, stroke 2, imported from the ui package. Outline is the default weight.
Elevation
Two registers. Editorial canvases are flat and print-like: square corners, no shadows. Product chrome is soft and elevated: stacked smooth shadows with a baked-in hairline, and a faint white inner glow that makes grey chips read as raised.
Controls
Primitives come from the ui package, always. Buttons are flat editorial: square corners, solid fills, no shadows. Ink for primary actions, brand green when the moment earns it. Inputs keep the inset field shadow.