# Render design system: colors, fonts and tokens

> Render's website (render.com) uses a light interface with #8a05ff as its primary color and PPNeueMontreal as the main typeface, with Roobert alongside it. designlang measured 13 font sizes from 11px to 80px, 20 spacing values, 3 corner radii.

Source: https://render.com, captured 25 June 2026. Page: https://designlang.app/design-system/render

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#8a05ff` | 58 |
| Secondary | `#e7dbff` | 36 |
| Accent | `#e0f4ff` | 4 |

Neutrals: `#e3e3e3`, `#0d0d0d`, `#ffffff`, `#000000`, `#6b6b6b`, `#4d4d4d`, `#fce9ea`, `#272727`, `#8f8f8f`, `#f4f0ff`

Backgrounds: `#ffffff`, `#000000`, `#141414`

## Fonts

- PPNeueMontreal (sans), 2384 elements
- Roobert (sans), 47 elements
- PPNeueMontrealMono (mono), 8 elements

## Type scale

| Size | Weight | Line height | Tracking | Used on |
|---|---|---|---|---|
| 80px | 300 | 80px | -2.4px | h1, div, span |
| 64px | 300 | 67.2px | -1.28px | h2, h3, span |
| 56px | 300 | 60px | -1.12px | div |
| 48px | 300 | 52px | -0.96px | div |
| 40px | 300 | 44px | -0.6px | h3, span |
| 32px | 400 | 36.8px | -0.8px | h3 |
| 24px | 400 | 30px | normal | p, span, div |
| 20px | 400 | 30px | 0.2px | span, a, svg, rect |
| 18px | 400 | 24.84px | 0.18px | div, p, a, span |
| 16px | 400 | 24px | normal | html, head, style, meta |
| 14px | 500 | 16.94px | -0.14px | div, p, a, span |
| 12px | 500 | 15px | 0.24px | div |
| 11px | 500 | 14px | 0.275px | div, span, br |

## Spacing

1px, 48px, 56px, 72px, 80px, 86px, 120px, 160px, 166px, 201px, 213px, 270px, 287px, 295px, 305px, 312px, 323px, 460px, 467px, 481px

## Radii

2px, 50px, 937px

## Motion

Feel: mixed. Durations: 100ms, 200ms, 300ms, 500ms.

## Audit

Overall 77/100 (grade C).

- Color Discipline: 80/100
- Typography Consistency: 50/100
- Spacing System: 70/100
- Shadow Consistency: 100/100
- Border Radius Consistency: 100/100
- Accessibility: 100/100
- CSS Tokenization: 100/100

## CSS variables

```css
:root {
  --color-primary: #8a05ff;
  --color-secondary: #e7dbff;
  --color-accent: #e0f4ff;
  --color-background: #ffffff;
  --color-text: #000000;
  --color-neutral-1: #e3e3e3;
  --color-neutral-2: #0d0d0d;
  --color-neutral-3: #ffffff;
  --color-neutral-4: #000000;
  --font-primary: "PPNeueMontreal", sans-serif;
  --font-secondary: "Roobert", sans-serif;
  --radius-sm: 2px;
  --radius-md: 50px;
  --radius-lg: 937px;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/render-com/render-com-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/render-com/render-com-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/render-com/render-com-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/render-com/render-com-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/render-com/render-com-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/render-com/render-com-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/render-com/render-com-DESIGN.md)

Regenerate: `npx designlang render.com`