retool.com

retool.com is an Innocent brand — understated, warm, modern, optimistic and pure — anchored on #e9ebdf and saansFont, mixed motion.

Adjectives

• understated
• warm
• modern
• optimistic
• pure

Personality axes

Evidence

• heaviest weight 400, 1.0:1 brand contrast → understated (weight -0.69)
• #e9ebdf at 70° reads warm → warm (warmth +0.45)
• sans display face, flat material → modern (era +0.3)
• Axis fingerprint nearest the Innocent archetype (77% fit, vs Everyman).

Page intent

landing 57% confidence

Material language

flat

Imagery style

flat-illustration

Component library

tailwindcss

Stack

next · Tailwind

Voice tone

neutral

1 primary · 1 secondary · 1 accent · 9 neutrals · 13 total

Neutrals

Full palette

WCAG 100% · 5 passing pairs · 0 failing. Full breakdown in §11.

2 families · 11 sizes · 3 weights

Display

saansFont

Body

pxGroteskFont

Weights

400, 380, 300

Specimen

Scale

Base 2px · 13 steps captured

Rhythm

9 radii · 3 elevation tiers

Border radii

Elevation

heroicons-solid · 24 captured

Library

heroicons-solid

Confidence

55%

Stroke style

fillDominant

Feel: mixed · 4 durations · 4 easings

Duration scale

Easings

• custom
• custom
• custom
• ease-out

tailwindcss · 2 component patterns captured

Mocks

Detected patterns

neutral · — · —

Headlines from the site

• Secure your vibe-coded apps
• Apps that mean business
• Why enterprises choose Retool
• Production-ready from day one

CTA verbs

• ×3
• ×2
• ×2
• ×1
• ×1
• ×1
• ×1
• ×1

No failing contrast pairs detected.

Drop-in code for the most common stacks. All values from the live extraction.

:root {
  --color-primary: #e9ebdf;
  --font-display: "saansFont";
  --space-base: 2px;
  --radius-md: 8px;
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#e9ebdf' },
      fontFamily: { display: ['saansFont', 'serif'] },
      spacing: { base: '2px' },
      borderRadius: { md: '8px' },
    },
  },
};

Run npx designlang pack retool.com for the full bundle (DTCG, shadcn, Figma vars, motion, anatomy, Storybook).

1. Lead with the primary.

   It belongs on calls-to-action and one accent moment per screen. Not on body copy.

2. Two type families, three weights.

   Display for headlines, body for paragraphs. Resist a third unless there is a real reason.

3. Snap to the spacing scale.

   Padding, margin, and gap should land on the values in §05. One-off pixels accumulate into noise.

4. Treat accessibility as a hard constraint.

   When a colour pair fails WCAG, fix the colour — not the contrast check.