Render design system

What font does Render use?

Render’s website uses Roobert for headings and PPNeue Montreal for body text. Roobert is not on Google Fonts; the closest free match is Figtree; PPNeue Montreal is not on Google Fonts; the closest free match is Figtree.

Render colour palette

Render’s home page is light (#FFFFFF background, #0D0D0D text) and uses #8A05FF for its main actions. Its palette: #FFFFFF, #0D0D0D, #141414, #4D4D4D, #8A05FF, #000000.

• #FFFFFF
  89.7% · backgrounds
• #0D0D0D
  3.5% · text
• #141414
  2.9% · backgrounds
• #4D4D4D
  0.7% · text
• #8A05FF
  0.7% · backgrounds, text, drawings
• #000000
  0.5% · drawings
• #6B6B6B
  0.3% · text
• #E7DBFF
  0.2% · backgrounds
• #E6DAFF
  0.2% · drawings
• #E3E3E3
  0.1% · lines

Type scale

Each size the page sets text in, with its weight and line height. Render’s largest type is 80px at weight 300.

Spacing and shape

Spacing sits on a 4px grid: 8px, 12px, 16px, 20px, 24px, 32px, 36px, 40px, 48px, 56px, 60px, 72px.

Corner radii: 2px, pill. No shadows measured: the design is flat.

What makes Render look like Render

Almost entirely neutral: 99% of the page is painted in #FFFFFF and #141414.

#8A05FF is an accent: 0.7% of the page, as small fills such as buttons and badges. Keep it to small areas.

#009E7A is an accent: 0.1% of the page, used for text only. Don't fill large areas with it.

The largest type (80px Roobert) is light, not bold (300), tracked to -0.03em.

Render DESIGN.md for Claude Code, Cursor and Lovable

A DESIGN.md is the brief an AI coding tool reads before it writes UI. This one carries everything on this page as rules a model follows: the allowed colours and what each is for, the fonts with free stand-ins, the type scale, spacing, corners, and the things Render’s design never does.

Put it in your project root and ask your tool to follow it: “Read DESIGN.md and build [your product] in this design language.” It describes a style, not Render’s product, so use your own name, words and images.

Download Render DESIGN.md · View it as text

As CSS variables

The measured values as CSS custom properties, with free fonts standing in for licensed ones. Use them to learn from or to start a project in a similar style; Render’s name, logo, words and images are theirs.

@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400&display=swap");

:root {
  --color-background: #FFFFFF; /* Background */
  --color-surface: #E3E3E3; /* Surface */
  --color-text: #0D0D0D; /* Text */
  --color-text-muted: #6B6B6B; /* Text muted */
  --color-border: #E3E3E3; /* Border */
  --color-action: #8A05FF; /* Action */
  --color-on-action: #FFFFFF; /* On action */
  --color-link: #8A05FF; /* Link */
  --color-positive: #006D4C; /* Positive */
  --color-negative: #E96770; /* Negative */
  --color-warning: #D67F2E; /* Warning */
  --color-141414: #141414; /* 2.9% of the page, as fills */
  --color-000000: #000000; /* 0.5% of the page, as drawings */
  --font-body: "PPNeueMontreal", "Figtree", sans-serif; /* PPNeueMontreal on the site; Figtree renders */
  --font-display: "Roobert", "Figtree", sans-serif; /* Roobert on the site; Figtree renders */
  --font-code: "PPNeueMontrealMono", "JetBrains Mono", monospace; /* PPNeueMontrealMono on the site; JetBrains Mono renders */
  --font-interface: "Helvetica", "Inter Tight", sans-serif; /* Helvetica on the site; Inter Tight renders */
  --type-display-1: 80px; /* Display 1, weight 300 */
  --type-display-1-leading: 80px;
  --type-display-1-tracking: -0.03em;
  --type-display-2: 64px; /* Display 2, weight 300 */
  --type-display-2-leading: 68px;
  --type-display-2-tracking: -0.02em;
  --type-display-3: 56px; /* Display 3, weight 300 */
  --type-display-3-leading: 60px;
  --type-display-3-tracking: -0.02em;
  --type-display-4: 48px; /* Display 4, weight 300 */
  --type-display-4-leading: 52px;
  --type-display-4-tracking: -0.02em;
  --type-display-5: 40px; /* Display 5, weight 300 */
  --type-display-5-leading: 44px;
  --type-display-5-tracking: -0.015em;
  --type-headline-large: 32px; /* Headline Large, weight 400 */
  --type-headline-large-leading: 36.8px;
  --type-headline-large-tracking: -0.025em;
  --type-headline-small: 24px; /* Headline Small, weight 400 */
  --type-headline-small-leading: 32px;
  --type-title-large: 20px; /* Title Large, weight 400 */
  --type-title-large-leading: 24px;
  --type-title-large-tracking: -0.01em;
  --type-title-small: 18px; /* Title Small, weight 400 */
  --type-title-small-leading: 26px;
  --type-title-small-tracking: 0.005em;
  --type-body-large: 16px; /* Body Large, weight 400 */
  --type-body-large-leading: 24px;
  --type-body-large-tracking: 0.01em;
  --type-body-small: 14px; /* Body Small, weight 400 */
  --type-body-small-leading: 19.25px;
  --type-body-small-tracking: -0.01em;
  --type-label: 12px; /* Label, weight 500 */
  --type-label-leading: 15px;
  --type-label-tracking: 0.02em;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-9: 36px;

How this was measured

PikSpec’s scanner read the render.com home page in Chrome at 1440px wide on 15 October 2026: the computed styles of its elements, the fonts that rendered and how much of the page each colour covers. Websites change; capture the page yourself with PikSpec for today’s values, any page, and exports in five formats.

Render is a trademark of its owner. This page is an independent measurement and is not affiliated with or endorsed by Render.

Similar light designs: Airbnb · Airtable · Allbirds · Anthropic · Apple · Arc

Contact PikSpec

Email support@pikspec.com for support, privacy requests or content reports.