Typography
scale ratio 1.285- Saans Fontcss: saansFontdisplay + body300 38087%
- Px Grotesk Fontcss: pxGroteskFontother40010%
- SF Pro (system-ui)css: ui-sans-serifother4003%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Saans Font | 72px | 300 | 1.05 | -0.022em |
| headline | Saans Font | 18px | 300 | 1.5 | 0.01em |
| title | Saans Font | 24px | 380 | 1.2 | -0.01em |
| body | Saans Font | 16px | 300 | 1.5 | 0.01em |
| body-sm | Px Grotesk Font | 14px | 400 | 1.2 | 0.01em |
Type scale
Aa12Aa14Aa16Aa18Aa24Aa32Aa48Aa60Aa72
- Body size
- 16px / 1.5
- Display size
- 72px
- Display tracking
- -0.022em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 15.14:1
- Muted on bg
- 11.28:1
- Accent on bg
- 12.94:1
- Dark mode
- none
Declared accent tokens
- --surface-accent-base-red#832424not on page
- --surface-accent-base-lime#8D8737not on page
- --surface-accent-base-pink#652466not on page
- --surface-accent-base-blue#2D4C71painted
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 6
- 8
- 12
- 14
- 16
- 20
- 24
- 32
- 40
Corner radii
48122024pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- 56px
Components
exact computed valuesbutton-primary
- backgroundColor
- #D9D9D9
- textColor
- #15151599
- rounded
- 12px
- padding
- 8px 12px
- height
- 38px
- fontFamily
- pxGroteskFont
- fontSize
- 14px
- fontWeight
- 400
- border
- 1px solid #1515151F
button-secondary
- backgroundColor
- #E9EBDF
- textColor
- #151515
- rounded
- 9999px
- padding
- 0px 20px
- height
- 40px
- fontFamily
- pxGroteskFont
- fontSize
- 14px
- fontWeight
- 400
card
- rounded
- 4px
- padding
- 0px
- border
- 1px solid #E9EBDF1F
Layout & motion
- Container
- 640px
- Grid columns
- 3
- Hero
- centered-over-media
- Navigation
- top-fixed+transparent
- Page height
- 9,687px
- Easing
- cubic-bezier(0.72, 0, 0.12, 1)
- Durations
- 200ms 300ms 400ms 600ms
- Transitions
- 140
- Keyframes
- 1
- Stack
- next.js, tailwind, sanity, hubspot, google-tag-manager, vercel
Page sections (9)
section labels are heuristic
01nav
02heroSecure your vibe-coded apps
04content?
05features?Why enterprises choose Retool
06feature detail?Trusted by 10,000+ teams to generate production-ready AI applications
07logosStart today
08testimonialsGet the latest from Retool
09footer
How Retool compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 72px: larger than 70% of indexed sites (median 60px).
- Type scale
- 1.28×: steeper than 50% of indexed sites (median 1.28×).
- Container
- 640px: narrower than 97% of indexed sites (median 1242px).
- Text contrast
- 15.1:1: lower than 74% of indexed sites (median 17.6:1).
- Page length
- 9,687px: longer than 64% of indexed sites (median 8,217px).
- Corner radius
- Mostly 4px, shared by 24 of 274 indexed sites (9%).
- Saans Font
- One of 2 indexed sites that load Saans Font (1%).
- Px Grotesk Font
- The only site in the index that loads Px Grotesk Font.
- Color scheme
- Dark by default, like 25% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Retool use?
Retool uses Saans Font (loaded as "saansFont") for headings and body text. Px Grotesk Font (loaded as "pxGroteskFont") is used for other.
What are Retool's brand colors?
Retool's website uses a dark scheme: background #151515, surface #00000073, text #E9EBDF, muted text #CBCCC4 and borders #433E38.
How is Retool's website laid out?
The most common corner radius is 4px, body text is 16px with 1.5 line height, and the page container is 640px wide.
