Foundations of the Rendra design system. This is what every team building on Rendra should know to keep the app feeling consistent.

How to use this doc: Click any colour swatch below to copy its hex value. Resize your browser to see the spacing scale react.

Colour

Three foundation colours. Everything else is derived.

Accent · Iris

#6e5cff

Ink · Obsidian

#17171c

Paper · Cream

#f4f2ec

Moss

#2d6a4f

Berry

#8d3a5b

Slate

#405769

Tip: click any swatch to copy its hex.

Typography

Display · Iowan Old Style 700 · clamp(2rem, 4vw, 3.2rem)

The fastest quarter we've ever had.

Body · Iowan Old Style 400 · 1rem · 1.7 line-height

Revenue beat the plan by fourteen percent. NPS climbed eleven points. We hired nine people including the VP of Engineering we'd been hunting for two years.

UI · Inter 600 · 0.84rem · uppercase · letter-spacing 0.08em

Workspace · Documents · Settings

Spacing

A 4px base scale. Use the named tokens, not raw pixel values.

space-1

4px

space-2

8px

space-3

12px

space-4

16px

space-6

24px

space-8

32px

space-12

48px