Typography
scale ratio 1.565- Agrandir-0cfc125464d8d15edisplay70059%
- Manrope-a5ef729a754bc228body500 600 70041%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Agrandir-0cfc125464d8d15e | 64px | 700 | 1.1 | -0.01em |
| headline | Agrandir-0cfc125464d8d15e | 48px | 700 | 1.1 | 0em |
| title | Manrope-a5ef729a754bc228 | 16px | 600 | 1.4 | 0em |
| body | Manrope-a5ef729a754bc228 | 16px | 500 | 1.4 | 0em |
| body-sm | Manrope-a5ef729a754bc228 | 14px | 600 | 1.4 | 0.01em |
Type scale
Aa9Aa10Aa13Aa14Aa16Aa24Aa48Aa64Aa96
- Body size
- 16px / 1.4
- Display size
- 64px
- Display tracking
- -0.01em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 10.76:1
- Muted on bg
- 5.82:1
- Accent on bg
- 16.80:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 8
- 11
- 12
- 16
- 18
- 20
- 24
- 32
- 40
- 48
- 60
- 64
Corner radii
81012164080120
Shadows (4)
- Borders
- none
- Section padding
- 205px
Components
exact computed valuesbutton-primary
- backgroundColor
- #250835
- textColor
- #FFFFFF
- rounded
- 12px
- padding
- 4px 0px
- height
- 40px
- fontFamily
- Manrope-a5ef729a754bc228
- fontSize
- 13px
- fontWeight
- 700
card
- rounded
- 16px
- padding
- 24px
- backgroundColor
- #FFFFFF
- shadow
- rgba(37, 8, 53, 0.06) 0px 16px 32px -4px
Layout & motion
- Container
- 680px
- Grid columns
- 3
- Hero
- centered+media-below
- Navigation
- top-fixed+transparent
- Page height
- 8,217px
- Easing
- cubic-bezier(0.3, 0.1, 0, 1)
- Durations
- 100ms 200ms 400ms 800ms
- Transitions
- 98
- Keyframes
- 1
- Stack
- astro, cloudflare
Page sections (9)
section labels are heuristic
01nav
02heroThe whiteboard for product builders
03logos
04feature detail?Diagrams
05features?Wireframes
06features?An infinite canvas to capture all your ideas
07faqFrequently asked questions
08feature detail?It’s time to work differently.
09footer
How Whimsical compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 64px: larger than 56% of indexed sites (median 60px).
- Type scale
- 1.56×: steeper than 91% of indexed sites (median 1.28×).
- Container
- 680px: narrower than 95% of indexed sites (median 1242px).
- Text contrast
- 10.8:1: lower than 91% of indexed sites (median 17.6:1).
- Page length
- 8,217px: longer than 50% of indexed sites (median 8,217px).
- Corner radius
- Mostly 8px, shared by 21 of 274 indexed sites (8%).
- Agrandir-0cfc125464d8d15e
- The only site in the index that loads Agrandir-0cfc125464d8d15e.
- Manrope-a5ef729a754bc228
- The only site in the index that loads Manrope-a5ef729a754bc228.
- Color scheme
- Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Whimsical use?
Whimsical uses Agrandir-0cfc125464d8d15e for headings. Manrope-a5ef729a754bc228 is used for body text.
What are Whimsical's brand colors?
Whimsical's website uses a light scheme: background #F7F7F8, surface #FFFFFFE0, text #473054, muted text #6A5B72.
How is Whimsical's website laid out?
The most common corner radius is 8px, body text is 16px with 1.4 line height, and the page container is 680px wide.
