---
site: "Render | The cloud for builders"
url: "https://render.com"
generated_at: "2026-06-25T08:30:10.008Z"
generator: "designlang@13.0.0"
intent: landing
material: material-you
library: shadcn/ui
tokens:
  colors:
    primary: "#8a05ff"
    secondary: "#e7dbff"
    accent: "#e0f4ff"
    background: "#ffffff"
    foreground: "#000000"
  typography:
    sans: PPNeueMontreal
    mono: PPNeueMontrealMono
    base: 16
  spacing:
    scale: "[1, 48, 56, 72, 80, 86, 120, 160, 166, 201]"
  radii:
    xs: 2
    full: 937
  shadows:
    sm: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px"
---

# Overview

A **landing** page (heuristic confidence 0.29), dressed in **material-you** material (0.45).

Component library appears to be **shadcn/ui** (0.65).

> "Your fastest path to production for"

The author writes in a **neutral** voice; headings tend to be **Sentence case** case and **tight**.

Reading order detected on the source: `pricing-table → feature-grid → nav → hero → testimonial → footer`.

Source: <https://render.com>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#8a05ff` | 58 |
| secondary | `#e7dbff` | 36 |
| accent | `#e0f4ff` | 4 |
| background | `#ffffff` | — |
| foreground | `#000000` | — |

**Neutrals:** `#e3e3e3` · `#0d0d0d` · `#ffffff` · `#000000` · `#6b6b6b`

**Total unique colors detected:** 30.

# Typography

**Families**
- `PPNeueMontreal` · 2384 uses
- `Roobert` · 47 uses
- `Helvetica` · 22 uses
- `PPNeueMontrealMono` · 8 uses

**Body size:** `16px` / line-height `24px`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `80px` | `300` | `80px` |
| h2 | `64px` | `300` | `67.2px` |
| h3 | `40px` | `300` | `44px` |
| h4 | `32px` | `400` | `36.8px` |

# Layout

**Scale:** `1px` · `48px` · `56px` · `72px` · `80px` · `86px` · `120px` · `160px` · `166px` · `201px`

**Layout primitives:** 23 grid containers · 231 flex containers.

**Breakpoints:** `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px`

# Elevation and Depth

**Shadow scale**
- `sm` — `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`

**Z-index layers:** 7 · ⚠ 1 issue(s)

# Shapes

**Radius scale**
- `xs` — `2px`
- `full` — `50px`
- `full` — `937px`

# Components

**Detected patterns:** `buttons` · `links` · `navigation` · `footer` · `modals` · `dropdowns`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | primary | lg, md | 18 |
| other | — | — | 5 |

# Do's and Don'ts

**Do's**
- Use `start`, `view`, `trust` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Sentence case** case, **tight** length.
- Address the reader with the pronoun posture **you-only**.
- Stay inside the **material-you** material — match shadow and radius habits.

**Don'ts**
- Don't 4 font families — consider limiting to 2 (heading + body).
- Don't 76 !important rules — prefer specificity over overrides.
- Don't 85% of css is unused — consider purging.
- Don't 2697 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v13.0.0 from <https://render.com>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._