Render Design System

Overview

Render's marketing site makes a typographic argument before any color lands. Weight-300 Editorial Restraint. The 80px hero headline in Roobert at weight 300 — lighter than most body copy on competing cloud-hosting sites — announces that this brand's hierarchy comes from size and tracking, not from weight or color. Where Heroku uses a bold purple hero and Railway leans on gradient overlays, Render keeps the canvas paper white and trusts letterform mass at extreme scale to carry the visual load.

The primary CTA is a sharp-cornered rectangle in pure ink black — zero corner radius in a genre that has converged on pill buttons and rounded rectangles. Combined with a single saturated violet reserved strictly for interactive fills and status indicators (never used as a canvas element or hero wash), the system reads as intentionally counter-conventional: the builder infrastructure that doesn't dress up its own marketing.

Key Characteristics:

• Paper-white canvas throughout — no colored bands, gradient sections, or dark hero surfaces anywhere in the marketing flow.
• Weight-300 Roobert display at 80px / -2.4px tracking is the heaviest typographic moment in size but the lightest in weight — a deliberate inversion of SaaS convention.
• Zero-radius (0px) primary button paired with a 937px full-pill for status badges — a binary radius system with nothing in between.
• Dual-family type split: Roobert for every heading tier, PP Neue Montreal for every body and label, PP Neue Montreal Mono for code-style category tags.
• Saturated violet (#8a05ff) appears only as background fill on interactive surfaces — 49 background uses, zero border uses, no canvas presence.
• Near-black ink (#0d0d0d, wired as --color-text-primary) instead of pure black — a 15-point lightness separation from absolute black that softens long-read contrast.
• Secondary text steps to mid-gray (#6b6b6b and #4d4d4d) for sub-labels and metadata — no bright secondary colors in the text tier.

Colors

Brand

• Violet ({colors.primary} — #8a05ff): frequency 55. Used as background (49), text (4), gradient (2). The sole chromatic brand element; appears on the primary interactive CTA variant, status badge fills, and hover-state indicators. Wired as --color-purple-600.
• Violet Dark ({colors.primary-dark} — #48008c): frequency 5. Used as text (5). The deep-pressed state for the violet; wired as --color-purple-700.

Surface & Text

• Ink ({colors.ink} — #0d0d0d): frequency 583. Used as text (573), bg (6), border (4). The dominant text color and primary button fill; wired as --color-text-primary, --color-gray-900, and --color-background--inverted. Near-black rather than pure black — an intentional warmth reduction.
• Canvas ({colors.canvas} — #ffffff): frequency 157. Used as text (145), bg (8), gradient (4). Page floor and primary button text on dark fills; wired as --color-background and --color-text-primary--inverted.
• Ink Muted ({colors.ink-muted} — #4d4d4d): frequency 30. Used as text (30). Secondary text for metadata and sub-labels; wired as --color-text-secondary and --color-gray-600.
• Ink Secondary ({colors.ink-secondary} — #6b6b6b): frequency 46. Used as text (46). Tertiary text for captions and supplementary copy; wired as --color-gray-500.

Hairlines & Structure

• Hairline ({colors.hairline} — #e3e3e3): frequency 864. Used as border (861), gradient (3). The universal divider color across cards, nav separators, and input fields; wired as --color-border and --color-gray-100.

Semantic Accents

• Accent Green ({colors.accent-green} — #006d4c): frequency 4. Used as text (4). Success state and "deployed" status labels; wired as --color-green-600.
• Accent Green Light ({colors.accent-green-light} — #dffeed): frequency 4. Used as bg (4). Success badge backgrounds; wired as --color-lime-25 / --color-green-50.
• Accent Orange ({colors.accent-orange} — #d67f2e): frequency 7. Used as text (5), gradient (2). Warning and billing-tier indicators; wired as --color-orange-400.
• Accent Blue Light ({colors.accent-blue-light} — #e0f4ff): frequency 9. Used as bg (6), gradient (3). Information state badge backgrounds; wired as --color-blue-50.
• Accent Pink Light ({colors.accent-pink-light} — #fce2fe): frequency 3. Used as bg (3). A brand-layer gradient tint; wired as --color-pink-50.

Typography

Font Families

The system runs Roobert for every heading tier — a geometric sans with wide open counters and an unusually light weight floor at 300. PP Neue Montreal carries every body, label, nav link, and UI string. PP Neue Montreal Mono handles uppercase code tags and category chips. No serif or display-serif appears anywhere on the page.

Hierarchy

Principles

Roobert's weight floor is 300 — the entire heading ladder sits between 300 and 400. The hero at 80px / 300 is enormous in size but feather-light in weight; the mass comes from the extreme size and negative tracking rather than stroke width. PP Neue Montreal's widest use is weight 400 for body text; weight 500 appears only for the nav-link active state and the uppercase label tier.

Note on Font Substitutes

Both Roobert and PP Neue Montreal are proprietary. DM Sans at weight 300 approximates Roobert's wide geometric letterforms at large display size. Inter or Plus Jakarta Sans at weight 400 approximates PP Neue Montreal for body copy. For the mono tier, JetBrains Mono or IBM Plex Mono at weight 500 with uppercase letter-spacing matches PP Neue Montreal Mono's code-label aesthetic.

Layout

Spacing System

• Base unit: 8px (with 16px as the dominant module).
• Tokens: {spacing.xs} 8px · {spacing.sm} 10px · {spacing.md} 15px · {spacing.base} 16px · {spacing.lg} 20px · {spacing.xl} 24px · {spacing.2xl} 40px · {spacing.3xl} 90px.
• Button padding: 24px vertical × 30px horizontal — unusually tall for a 16px body font; the height reads more like a 64px touch target than a 40px web button.
• Section vertical rhythm: 90px between major page sections; 40px between sub-sections.
• Nav padding: 23px × 20px per link.

Grid & Container

• Hero: full-width white canvas with centered type stack and ink-black CTA below.
• Feature sections: full-width white bands alternating between text-left/image-right and text-center layouts.
• Card grid: 3-column at desktop for dashboard and infrastructure feature cards.
• Container width: ~1280px max content width based on nav and body layout.

Rhythm

The page is uniformly white — no visual band alternation. Section breaks read from large vertical spacing gaps and changes in heading size rather than from background-color shifts. The absence of any tinted section makes the single violet accent moments (CTA buttons, status badges) stand out more sharply against the neutral ground.

Elevation

The captured marketing surface has no shadow tier. On a pure-white canvas, traditional drop shadows would be nearly invisible and are absent from the extraction entirely. Cards use a 1px {colors.hairline} border at #e3e3e3 to define their edges — tonal hairline lift is the only elevation signal.

• Flat (no shadow): all body, hero, and section surfaces.
• Hairline-bordered cards: {colors.hairline} (#e3e3e3) 1px border marks card and input boundaries.
• No tonal surface lift: every section sits on the same white canvas — there is no surface-1 layer in the marketing palette.

Shapes

The radius scale is binary — sharp or full pill:

• {rounded.none} 0px — primary and secondary buttons, card containers, nav.
• {rounded.sm} 2px — input fields only; the single entry in the gentle-rounding tier.
• {rounded.pill} 937px — status badges and category chips; renders as a full pill on any fixed-height element.

There is no 4px, 8px, 12px, or 16px radius tier. The system is deliberately sharp at the component level, contrasting the full-pill badge shapes against zero-radius buttons for maximum visual contrast between "functional action" and "categorical label."

Components

button-primary — Ink-black fill ({colors.ink}), white text, zero-radius {rounded.none}, 24×30 padding, 66px height. The "Get Started" CTA is the canonical instance. The square edges are the most distinctive move in the system — an intentional departure from cloud-platform convention.

button-secondary — Transparent fill, ink-black text, hairline border, zero-radius, same height. Used for secondary actions beside the primary CTA.

button-violet — Violet fill ({colors.primary}), white text, zero-radius. The alternative primary for contexts where the violet accent leads rather than the ink-black button — typically inside feature cards or promotional panels.

top-nav — White canvas background, ink text in {typography.nav-link}, 66px height. Contains the Render wordmark, product nav links (Product, Solutions, Pricing, Docs, Changelog), and the right-aligned "Get Started" / Sign In cluster.

nav-link — Transparent background, ink text, {typography.nav-link} (16px / 400 / 0.16px tracking), 23×20px padding.

hero-heading — Ink text, {typography.display-xl} (80px / 300 / -2.4px). The hero reads "Your fastest path to production" across multiple lines at this size.

section-heading — Ink text, {typography.display-lg} (64px / 300 / -1.28px). Used for "Click, click, done." and comparable section leads.

card-heading — Ink text, {typography.display-md} (40px / 300 / -0.6px). The feature-card heading level used across the infrastructure marketing sections.

body-paragraph — Default ink text at {typography.body-lg} (18px / 400). The hero sub-paragraph and section leads.

body-paragraph-muted — Muted-ink text at {typography.body-md} for secondary copy and card sub-descriptions.

card — White canvas fill, hairline border at {colors.hairline}, 2px radius, 16px padding. The default content card for infrastructure feature descriptions.

label-tag — Transparent background, secondary-ink text, {typography.label-md} (12px / 500 uppercase), full-pill radius. Used for category labels above headings ("INFRASTRUCTURE", "NETWORKING").

code-tag — Ink text, {typography.mono-sm} (14px / 500 uppercase monospace), minimal padding. Inline code references and technical category labels.

text-input — White fill, ink text, {typography.body-md}, 2px radius, hairline border, 40px height. The resting state only.

status-badge — Violet fill ({colors.primary}), white text, {typography.label-md}, full-pill rounding. Used for deployment-status indicators and feature availability chips.

Do's and Don'ts

Do keep display headings at weight 300 for Roobert equivalents. The entire identity of the hero depends on extreme size carrying the weight rather than stroke mass — bumping to 400 or 600 shifts the feel from editorial builder to generic SaaS shout.

Do use zero-radius (0px) on primary and secondary buttons. The square edges read as a deliberate product positioning move; rounding to even 4px begins the slide toward the pill-heavy cloud-platform convention Render is distinguishing itself from.

Do keep the violet ({colors.primary}) off the canvas and structural surfaces. It belongs only on interactive elements — buttons, badges, hover states. Using it as a section background or hero gradient destroys the restraint that makes every violet appearance count.

Do respect the dual-family split. Roobert for headings, PP Neue Montreal for body — mixing them (a Roobert body paragraph or a PP Neue Montreal heading) blurs the typographic hierarchy that the system relies on in the absence of weight variation.

Don't add a colored background band or dark section to any marketing page. The canvas is white from header to footer; every chromatic signal comes from the type and interactive elements. A tinted light-gray section or a dark near-black hero would require rebuilding the entire color logic.

Don't introduce a radius step between 2px ({rounded.sm}) and 937px ({rounded.pill}). The binary radius system — flat-sharp for components, full-pill for chips — is the shape language. A mid-radius at 8px would look like a different system entirely.

Don't use the violet (#8a05ff) for decorative elements, icons, or text links on white. It was validated as a fill-only accent (49 bg uses, 0 border uses, 4 text uses — all in specific semantic contexts). Decorative violet on white competes with the CTA accent hierarchy.

Don't set the hero heading above weight 300. Even though Roobert goes heavier, the extracted system never uses it above 400 in any heading context. Weight 700+ at 80px would shatter the balance between type mass and canvas silence.

Known Gaps

• Hover and focus states: the extraction captures button fills at rest only; the hover transition for the ink-black CTA and the violet CTA variant are not captured.
• Dark mode: the marketing surface is light-only. Render's dashboard application uses a dark canvas but that is not represented here.
• Mobile breakpoints: spacing tokens, font sizes, and container widths at tablet and mobile viewport widths are not captured from the marketing surface.
• Form states: {component.text-input} covers the resting state only; error, focus, and disabled treatments are not extracted.
• Animation: the hero includes subtle animated infrastructure diagrams; easing curves, durations, and sequencing are not captured in this static spec.
• Product dashboard: this DESIGN.md covers the marketing site only; Render's application dashboard (deploy logs, metrics, service cards) uses a richer token system not represented here.
• Pricing page: the pricing table — which is likely where the violet button appears most frequently — was not part of the captured surface.