Render design system
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.
Render colors
The brand roles and neutrals render.com renders, with how many elements use each one.
Brand colors
- Primary
#8a05ff58 uses - Secondary
#e7dbff36 uses - Accent
#e0f4ff4 uses
Neutrals
#e3e3e32,677 uses#0d0d0d1,977 uses#ffffff316 uses#000000254 uses#6b6b6b47 uses#4d4d4d40 uses#fce9ea2 uses#2727272 uses#8f8f8f1 uses#f4f0ff1 uses
Backgrounds
#ffffff#000000#141414
Text colors
#00000021:1 on #ffffff#ffffff1:1 on #ffffff#0d0d0d19.44:1 on #ffffff#4d4d4d8.45:1 on #ffffff#6b6b6b5.33:1 on #ffffff#8a05ff5.92:1 on #ffffff#009e7a3.4:1 on #ffffff#d67f2e3.03:1 on #ffffff
Contrast checks (WCAG 2.1)
Text and background pairs found together on the page; 100% of them pass.
| Text | Background | Ratio | Result |
|---|---|---|---|
#0d0d0d | #c2eaff | 15.28:1 | AAA |
Render fonts and type scale
Every font family and size in use, read from computed styles rather than the CSS source.
Font families
- PPNeueMontreal: sans, body (2,384 elements)
- Roobert: sans, most text (47 elements)
- PPNeueMontrealMono: mono, body (8 elements)
Body text: 16px at weight 400, line height 24px.
Weights in use: 400, 500, 300.
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 |
Spacing and radii
Spacing scale
Corner radii
- 2px
- 50px
- 937px
Corners stay small across the page. 1 distinct box shadows.
Motion
The motion reads as mixed.
Durations
xs: 100mssm: 200msmd: 300mslg: 500ms
Easing
- custom (216 uses):
cubic-bezier(0.4, 0, 0.2, 1) - ease-in-out (1 uses):
ease - linear (1 uses):
linear
Design system audit
designlang scores how consistently a site uses its own values. How the audit works.
Overall
Components found: buttons (17), links (103), navigation (13), footer (1), modals (8), dropdowns (4).
By category
| 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 |
- 4 font families — consider limiting to 2 (heading + body)
- 76 !important rules — prefer specificity over overrides
- 85% of CSS is unused — consider purging
- 2697 duplicate CSS declarations
Download the tokens
The files designlang wrote for render.com. Run it yourself for a fresh read: npx designlang render.com.
The core values as CSS variables
: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;
}Read render.com yourself
Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.
Quick answers
What font does Render use?
What are Render's brand colors?
How do I use the Render design system in my own app?
Is this the official design system?
Measured from the public pages of render.com on 25 June 2026. Render is a trademark of its owner; designlang is not affiliated with it. More: the full Render brand kit, the token extraction guide and the markdown version of this page.