---
site: "Retool | Build internal software better, with AI."
url: "https://retool.com"
generated_at: "2026-06-25T08:31:29.684Z"
generator: "designlang@13.0.0"
intent: landing
material: flat
library: tailwindcss
tokens:
  colors:
    primary: "#e9ebdf"
    secondary: "#518dd2"
    accent: "#f7f8f4"
    background: "#151515"
    foreground: "#ffffff"
  typography:
    sans: saansFont
    base: 22.4615
  spacing:
    base: 2
    scale: "[1, 20, 24, 28, 32, 40, 56, 64, 71, 80]"
  radii:
    sm: 4
    md: 8
    lg: 16
    xl: 24
  shadows:
    sm: "rgb(255, 255, 255) 0px 0px 0px 0px, rgb(233, 234, 231) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px"
    xs: "rgba(0, 0, 0, 0.12) 0px 1px 2px 0px, rgb(0, 0, 0) 0px 0px 0px 0.5px"
---

# Overview

A **landing** page (heuristic confidence 0.57), dressed in **flat** material.

Component library appears to be **tailwindcss** (0.564).

> "Secure your vibe-coded apps"

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

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

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

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#e9ebdf` | 3154 |
| secondary | `#518dd2` | 2 |
| accent | `#f7f8f4` | 13 |
| background | `#151515` | — |
| foreground | `#ffffff` | — |

**Neutrals:** `#151515` · `#ffffff` · `#cbccc4` · `#242424` · `#8b867f`

**Total unique colors detected:** 13.

# Typography

**Families**
- `saansFont` · 486 uses
- `pxGroteskFont` · 394 uses

**Body size:** `22.4615px` / line-height `26.9538px`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `68.9231px` | `300` | `72.3693px` |
| h2 | `56.9231px` | `300` | `59.7693px` |
| h3 | `44.9231px` | `300` | `47.1693px` |
| h4 | `28.9231px` | `300` | `30.3693px` |

# Layout

**Spacing base:** `2px` increments.
**Scale:** `1px` · `20px` · `24px` · `28px` · `32px` · `40px` · `56px` · `64px` · `71px` · `80px`

**Layout primitives:** 22 grid containers · 430 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` · `[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.35) 0px 68px 116px 0px`
- `sm` — `rgb(255, 255, 255) 0px 0px 0px 0px, rgb(233, 234, 231) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- `xs` — `rgba(0, 0, 0, 0.12) 0px 1px 2px 0px, rgb(0, 0, 0) 0px 0px 0px 0.5px`

**Z-index layers:** 14

# Shapes

**Radius scale**
- `sm` — `4px`
- `md` — `8px`
- `lg` — `12px`
- `lg` — `16px`
- `xl` — `20px`
- `xl` — `24px`

# Components

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

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | secondary, primary | sm, lg | 33 |
| card | link | — | 3 |

# Do's and Don'ts

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

**Don'ts**
- Don't 106 !important rules — prefer specificity over overrides.
- Don't 79% of css is unused — consider purging.
- Don't 3292 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v13.0.0 from <https://retool.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._