What is Render's primary brand color?

Render's brand voltage is a saturated violet, wired into the CSS as --color-purple-600. It appears primarily as background fills on interactive elements — the primary button, status chip highlights, and hover states. Across the captured page it shows 49 background uses compared to just 4 text uses and 0 border uses, confirming its role as a fill-only accent held off the canvas. A darker purple variant at --color-purple-700 handles pressed and deep-accent states. Unlike competing cloud platforms that use their brand color for hero washes or hero gradients, Render keeps the violet strictly off the page canvas and reserves it for interactive surfaces.

What typefaces does Render use, and what are good substitutes?

Render uses two proprietary sans families with a strict division of labor. Roobert (with a 'Roobert Fallback' stack) carries every heading — display at 80px / weight 300 down to sub-heads at 20px / weight 400. PP Neue Montreal carries every body paragraph, label, nav link, and UI string at 16-18px in weight 400-500. PP Neue Montreal Mono handles uppercase code-style labels. For substitutes: DM Sans or Outfit at weight 300 approximate Roobert's wide, geometric letterforms at display size; Inter or Plus Jakarta Sans approximate PP Neue Montreal's versatility at body scale. The weight-300 display tier is the most distinctive move — do not substitute with a 400-weight fallback or the editorial character disappears.

Why does Render's primary button have zero corner radius?

Render's primary 'Get Started' CTA uses a 0px border radius, a deliberate departure from the rounded or pill CTAs that dominate cloud-hosting and SaaS marketing. The extraction confirms: borderRadius '0px' on the primaryButton component. The move reads as a product-design statement — Render positions itself as infra for builders who want precise control, and the sharp-edged button echoes that tone. The only rounded element on the captured page is a single 937px pill radius used for status or badge chips, creating a deliberate contrast between the two shapes. There is no 4-8-12-16px rounding ladder anywhere in the system.

What background colors does Render use?

Render's marketing canvas is white at --color-background (#ffffff). Body text sits in near-black #0d0d0d (wired as --color-text-primary and --color-gray-900) — not quite true black, a 15-lightness separation from pure black that softens the contrast slightly. Secondary text uses mid-gray #6b6b6b (--color-gray-500) and #4d4d4d (--color-text-secondary / --color-gray-600). The border system uses light gray #e3e3e3 (--color-border / --color-gray-100) as the primary hairline. There are no colored surface bands, dark sections, or gradient zones on the captured marketing page — the canvas stays white from hero to footer.

Can I use this DESIGN.md to build a cloud-infrastructure marketing site?

Yes — feed this file into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Render's specific moves: pure-white canvas instead of a dark or tinted surface, weight-300 Roobert-equivalent display at 80px with negative tracking, a sharp-radius (0px) ink-black primary CTA, PP Neue Montreal equivalent body at 18px / 400, and the saturated violet reserved strictly for interactive fills. Every token resolves without invention — hex values, font names, radius values, and padding are all quoted scalars. The most transferable pattern is the editorial-weight-light display plus sharp-CTA combination, which differentiates a hosting brand from the pill-button crowd without needing a colored canvas.

Render Design System

Render's marketing-site design system: weight-300 Roobert display at 80px, PP Neue Montreal body, single violet accent on a paper-white canvas.

About Render DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source render.com

Web Infrastructure & Hosting

Render's marketing site announces itself through typography before color. The hero headline — "Your fastest path to production" — runs Roobert at 80px in weight 300 with -2.4px tracking, heavy on the page at maximum size but deliberately light on the weight scale. No gradient behind it, no canvas tint: just near-black type on paper white. The primary CTA below it is a sharp-cornered rectangle filled with pure ink black. In a space where competitors like Railway use purple gradients and Fly.io uses dark surfaces with colored CTAs, Render strips the brand down to two typefaces, one near-neutral canvas, and a single held-in-reserve violet for interactive moments.

The system runs a clear typographic division of labor. Roobert (a custom geometric sans with wide, open letterforms) owns every heading tier — 80px hero, 64px section header, 40px sub-section, 32px card head, 20px sub-head — all in weight 300 or 400. PP Neue Montreal owns every body, label, nav link, and caption — 18px body at weight 400, 16px for nav and UI copy, 12px uppercase labels. PP Neue Montreal Mono handles code-style tags and uppercase category chips. The result is a page where headings feel editorial and body copy feels technical without the system ever becoming dark or heavy.

The spec captures one brand-layer color with meaningful usage: the saturated violet that powers the primary interactive surface. Every other tone is structural — near-black ink, mid grays for secondary text, light gray borders, and a white canvas. Feed this file to an AI coding tool and it will reproduce Render's specific restraint: the zero-radius sharp CTA, the weight-300 display at scale, the dual-family split, and the violet kept strictly off the canvas and reserved for hover-states and badges. The disciplined move worth borrowing is the sharp CTA in a genre that has converged on pill buttons — it reads as a deliberate product statement.

What makes it distinct

Weight-300 displayRoobert at 80px / weight 300 and -2.4px tracking is the loudest typographic moment in the system; no 700-weight headline exists anywhere on the page
Zero-radius primary buttonthe ink-black 'Get Started' CTA uses a completely square 0px border radius, a deliberate counter-move against the rounded pill trend in cloud-hosting brands
Single violet voltagethe saturated violet accent appears primarily as button fills and status chips, never as a canvas wash or hero gradient
Dual-typeface splitRoobert carries all headings while PP Neue Montreal carries all body copy, labels, and navigation; the two families divide responsibilities cleanly without overlap
Monospace siblingPP Neue Montreal Mono handles all code labels and uppercase category tags, sharing the same PP family umbrella as body copy

Live at render.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

render.com

Explore Render

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Render design system FAQ

Common questions about Render's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Render — official site

Render's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.