---
title: "Render design system"
variant: extended
source: https://render.com/
captured_at: 2026-10-12
theme: light
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/render-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Render · Design System

> Quiet infrastructure, made vivid with violet

**Theme:** light · **Industry:** devtools · **Source:** https://render.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Render pairs expansive white space and restrained black typography with violet accents and finely drawn grid lines. Product interface imagery, customer logos, and compact feature layouts make the page feel engineered for developers without becoming visually dense.

## North star

Keep the interface airy and precise: let black typography and hairline grids lead, and reserve violet for purposeful emphasis.

## Overview

The page is built on a white canvas, with near-black text and fine pale-gray rules defining sections, cards, and the product mock-up grid. Violet is the signature accent: it appears in links, small feature graphics, highlighted words, and occasional soft lavender washes rather than as a dominant page background. The typography pairs light, oversized Roobert headlines with PPNeueMontreal body copy, keeping the hero editorial and readable while labels and navigation stay compact. A mono face adds a technical note to code-like labels. The layout alternates broad, quiet sections with denser feature grids and product screenshots; centered customer marks provide a pause between content blocks. Imagery is mostly product UI, logos, and simple developer-oriented graphics, treated with thin borders and minimal depth. A dark footer creates the page’s strongest contrast, while square-cornered controls keep the overall system crisp and utilitarian.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas White | `#ffffff` | `--color-canvas-white` | neutral | Primary page canvas, navigation background, and most section surfaces. |
| Render Ink | `#0d0d0d` | `--color-render-ink` | brand | Headlines, body copy, navigation, and solid primary CTA backgrounds. |
| Signal Violet | `#8a05ff` | `--color-signal-violet` | accent | Highlighted links, selected feature details, and small brand or illustration accents. |
| Gridline Gray | `#e3e3e3` | `--color-gridline-gray` | semantic | Hairline borders, section dividers, card outlines, and faint technical grid patterns. |
| Body Graphite | `#4d4d4d` | `--color-body-graphite` | neutral | Muted navigation and explanatory body text beneath prominent headlines. |
| Footer Charcoal | `#141414` | `--color-footer-charcoal` | surface | Inverse footer surface, creating the page’s main dark contrast block. |
| Footer Slate | `#6b6b6b` | `--color-footer-slate` | neutral | Low-emphasis footer and secondary supporting text. |
| Lavender Haze | `#f4f0ff` | `--color-lavender-haze` | surface | Subtle gradient tint behind selected illustrative or section artwork, not a core canvas color. |
| Lilac Wash | `#e7dbff` | `--color-lilac-wash` | surface | Soft violet gradient tint in illustrated section backgrounds and decorative treatments. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Canvas White) · `--color-surface` → `#141414` (Footer Charcoal) · `--color-text` → `#0d0d0d` (Render Ink) · `--color-text-muted` → `#4d4d4d` (Body Graphite) · `--color-text-subtle` → `#6b6b6b` (Footer Slate) · `--color-border` → `#e3e3e3` (Gridline Gray) · `--color-accent` → `#8a05ff` (Signal Violet)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0d0d0d` | `#ffffff` | 19.44:1 | AAA |
| `#0d0d0d` | `#141414` | 1.05:1 | fail |
| `#4d4d4d` | `#ffffff` | 8.45:1 | AAA |
| `#4d4d4d` | `#141414` | 2.18:1 | fail |
| `#6b6b6b` | `#ffffff` | 5.33:1 | AA |
| `#6b6b6b` | `#141414` | 3.46:1 | AA-large |
| `#8a05ff` | `#ffffff` | 5.92:1 | AA |
| `#8a05ff` | `#141414` | 3.11:1 | AA-large |

### Gradients

- `linear-gradient(90deg, rgb(227, 227, 227) 1px, rgba(0, 0, 0, 0) 0px), repeating-linear-gradient(rgb(227, 227, 227), rgb(227, 227, 227) 1px, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 90px)`
- `linear-gradient(78deg, rgb(255, 255, 255) 46.26%, rgb(244, 240, 255) 141.79%)`
- `linear-gradient(120deg, rgb(255, 255, 255) 17.4%, rgb(231, 219, 255) 36.67%)`
- `linear-gradient(177deg, rgb(231, 219, 255) 56.49%, rgb(240, 240, 240) 12.68%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| PPNeueMontreal | `--font-body` | webfont | 400, 500 | Primary body, navigation, links, buttons, and captions. | Inter |
| Roobert | `--font-display` | webfont | 300, 400 | Display headlines and major section headings. | Manrope |
| PPNeueMontrealMono | `--font-mono` | webfont | 500, 400 | Small technical labels and code-like interface details. | IBM Plex Mono |

- **PPNeueMontreal:** Mostly regular weight; compact, readable copy with slightly open tracking.
- **Roobert:** Light weight, large scale, tight negative tracking, and sentence case.
- **PPNeueMontrealMono:** Compact monospace, medium weight, slightly tracked; uppercase for measured code role.

### Type scale — Augmented Fourth (ratio ≈ 1.38, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 300 | 1 | -0.03em | — | Roobert | Oversized hero or campaign headline. |
| h1 | 64px | 300 | 1.06 | -0.02em | — | Roobert | Primary hero headline. |
| h2 | 56px | 300 | 1.07 | -0.02em | — | Roobert | Major section headings. |
| h3 | 48px | 300 | 1.08 | -0.02em | — | Roobert | Feature group and testimonial headings. |
| h4 | 40px | 300 | 1.1 | -0.015em | — | Roobert | Individual feature titles. |
| body | 16px | 400 | 1.5 | 0.01em | — | PPNeueMontreal | Descriptions, explanatory copy, and standard page text. |
| caption | 14px | 400 | 1.43 | 0.01em | — | PPNeueMontreal | Compact metadata, credits, and secondary labels. |
| nav | 16px | 400 | 1.25 | 0.01em | — | PPNeueMontreal | Primary navigation and menu links. |
| link | 16px | 400 | 1.5 | 0.01em | — | PPNeueMontreal | Inline actions and calls to explore more. |
| code | 14px | 500 | 1.43 | 0.02em | uppercase | PPNeueMontrealMono | Technical labels, code snippets, and deployment details. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 5, 6, 8, 10, 12, 15, 16, 20, 23, 24, 30, 32, 36, 40, 50 px.
- Section rhythm 90px · element gap 8px · card padding 90px · max content width —.

The page uses a broad desktop composition with content aligned to a consistent left edge and sections divided by thin rules. The measured page maximum width is unspecified, so preserve the screenshot’s generous horizontal margins rather than imposing a new fixed value. Hero content and product UI share the first viewport; later blocks shift among three-column instructions, modular feature grids, and centered testimonial content. Vertical rhythm is spacious overall, with denser content kept inside clearly separated modules.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The visual system is predominantly flat: measured shadows are absent, and card corners are square. Use thin #e3e3e3 borders and background grid lines to separate surfaces. Layer product mock-ups over the page sparingly, with contrast and overlapping panels doing the work instead of drop shadows.

## Imagery

Use product UI screenshots and diagrams as the primary imagery, including deployment panels, service selectors, and monitoring interfaces. Customer marks appear in clean logo rows. Supplement these with simple technical illustrations, framework icons, and occasional violet-tinted artwork. Keep imagery crisp, mostly flat, and bounded by subtle grid lines rather than using lifestyle photography or heavy 3D effects.

## Components

### Announcement strip

A narrow pale lavender band above the white navigation, with centered migration messaging and an understated text link.

### Primary navigation

White horizontal bar with Render mark, compact dark links, secondary account actions, and a solid black square-cornered Get started button.

### Hero actions

Pair a black #0d0d0d Start for free button with white text and an outlined Talk to sales button; both use square corners.

### Hero product diagram

Place deployment and service-monitoring UI on the right, framed by #e3e3e3 grid lines with restrained violet chart marks.

### Customer logo cloud

Center a small uppercase monospace-style trust label above several rows of monochrome customer logos and a violet story link.

### Feature cards

Arrange product capabilities in bordered modular panels with concise dark headings, short copy, links, and small UI previews.

### Inverse footer

Use a #141414 footer block with compact multi-column navigation and subdued #6b6b6b link text.

### Measured component styles

- **Primary button** (“Start for free”): background #0d0d0d · text #ffffff · radius 0px · padding 0px 24px · 400 16px PPNeueMontreal
- **Secondary button** (“Talk to sales”): transparent background · text #0d0d0d · border 1px solid #0d0d0d · radius 0px · padding 0px 24px · 400 16px PPNeueMontreal
- **Link** (“See customer stories”): transparent background · text #8a05ff · radius 0px · padding 0px · 400 16px PPNeueMontreal
- **Card** (“Start building with Render Zero ops, zer”): transparent background · text #0d0d0d · border 1px solid #e3e3e3 · radius 0px · padding 90px · 400 16px PPNeueMontreal
- **Navigation item** (“Product Platform Overview FEATURES Autos”): transparent background · text #0d0d0d · radius 0px · padding 0px · 400 16px PPNeueMontreal

## Do

- Use white as the dominant page and section canvas.
- Set major headlines in a light, oversized sans serif.
- Reserve Signal Violet for selective emphasis and links.
- Use #e3e3e3 hairlines to organize content and diagrams.
- Show real-looking product interfaces in crisp, flat panels.
- Keep buttons and cards square-cornered and free of shadows.

## Don't

- Do not flood large sections with saturated violet.
- Do not add decorative drop shadows or rounded-card styling.
- Do not make body copy compete with the hero headline.
- Do not replace product interface visuals with lifestyle photography.
- Do not use heavy borders where a fine divider is sufficient.
- Do not crowd the whitespace between major content groups.

## Agent prompt

Build a new Render-style developer cloud page with an airy white canvas (#ffffff), dark Render Ink (#0d0d0d) typography, and selective Signal Violet (#8a05ff) emphasis. Use light, oversized sans-serif headlines and readable, compact body copy. Organize sections with fine Gridline Gray (#e3e3e3) borders and occasional technical grid motifs; avoid shadows and rounded corners. Give the page a clear left-aligned content structure, generous separation between major blocks, and responsive modular grids for features. Use product UI panels, deployment diagrams, framework marks, and customer logos instead of lifestyle imagery. Add a restrained lavender wash (#f4f0ff or #e7dbff) only where illustration or gradient treatment helps. Keep primary actions black with white text, secondary actions outlined, and finish with a deep Footer Charcoal (#141414) navigation area.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned headline and copy beside a right-side product dashboard illustration. | Primary and secondary CTA, Product capability preview | Oversized light headline, Fine grid illustration, Square-cornered buttons |
| 2 | logo-cloud | Centered trust label above multiple rows of customer logos. | Social proof, Customer story link | Monochrome logo rows, Compact uppercase label, Violet text link |
| 3 | how-it-works | Three instructional columns, each pairing a numbered step, text, and product screenshot. | Sequential setup steps, Visual workflow guidance | Violet number markers, Short step descriptions, Interface thumbnails |
| 4 | integrations | Wide band with explanatory text on the left and a dense framework icon grid on the right. | Stack compatibility discovery | Framework icon tiles, Soft lavender gradient, Text-and-icon split |
| 5 | testimonials | Wide centered quote panel set within a faint full-width grid backdrop. | Customer endorsement, Brand attribution | Quote-led panel, Customer logo row, Thin grid framing |
| 6 | feature-grid | Section heading followed by a multi-column grid of compact platform features. | Capability scanning, Feature discovery | Small feature icons, Short headings, Compact descriptions |
| 7 | feature-grid | Left-aligned heading above a multi-column security feature grid and paired actions. | Security capability scan, Trust-resource navigation | Violet feature icons, Brief supporting copy, Primary and outlined CTA |
| 8 | cta | Centered bordered CTA panel surrounded by floating framework and tool icons. | Final conversion prompt, Free deployment action | Central headline, Single dark CTA, Floating colored icons |
| 9 | footer | Dark multi-column footer inset within a faint grid field. | Grouped site navigation, Social links | Charcoal surface, Muted compact links, Multi-column lists |

## Source CSS custom properties (selected)

```css
--osano-clear-dialog-background: rgba(255,255,255,0);
--osano-button-border-color: #fff;
--osano-button-background-color: #7A3FF1;
--osano-button-foreground-color: #FFFFFF;
--osano-dialog-background-color: #180D43;
--osano-dialog-foreground-color: #FFFFFF;
--osano-info-dialog-overlay-color: rgba(0,0,0,0.45);
--osano-link-color: #37CD8F;
--osano-toggle-off-track-color: #382d50;
--osano-toggle-off-thumb-color: #FFFFFF;
--osano-toggle-on-track-color: #37CD8F;
--osano-toggle-on-thumb-color: #FFFFFF;
--osano-widget-color: #37cd8f;
--osano-widget-outline-color: #29246a;
--osano-widget-fill-color: #fff;
--osano-focus-outline-color: Highlight;
--osano-button-close-color: #FFFFFF;
--osano-button-accept-background-color: #7A3FF1;
--osano-button-accept-border-color: #fff;
--osano-button-accept-foreground-color: #FFFFFF;
--osano-button-deny-background-color: #7A3FF1;
--osano-button-deny-border-color: #fff;
--osano-button-deny-foreground-color: #FFFFFF;
--osano-button-reject-all-background-color: #7A3FF1;
--osano-button-reject-all-background-color-hover: #8e53ff;
--osano-button-reject-all-border-color: #fff;
--osano-button-reject-all-foreground-color: #FFFFFF;
--osano-button-manage-background-color: #7A3FF1;
--osano-button-manage-border-color: #fff;
--osano-button-manage-foreground-color: #FFFFFF;
--osano-info-dialog-link-color: #37CD8F;
--osano-info-dialog-button-close-color: #000000;
--osano-info-dialog-toggle-off-track-color: #382d50;
--osano-info-dialog-toggle-off-thumb-color: #FFFFFF;
--osano-info-dialog-toggle-on-track-color: #37CD8F;
--osano-info-dialog-toggle-on-thumb-color: #FFFFFF;
--osano-info-dialog-button-background-color: #7A3FF1;
--osano-info-dialog-button-border-color: #FFFFFF;
--osano-info-dialog-button-foreground-color: #FFFFFF;
--osano-dialog-gpc-background-color: #180D43;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/render-com