Typography
scale ratio 1.230- Intercss: interdisplay + body400 450 500 600 70086%
- Bl Melodycss: blMelodyother500 60014%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Inter | 68px | 600 | 1 | 0em |
| headline | Bl Melody | 40px | 600 | 1.1 | 0em |
| body | Inter | 16px | 400 | 1.5 | 0em |
| body-sm | Inter | 13.94px | 600 | 1 | 0em |
| label | Inter | 14px | 500 | 1.429 | 0em |
Type scale
Aa8.5Aa10Aa11.5Aa12Aa14Aa15Aa16Aa18Aa20Aa22Aa30Aa32Aa40Aa68
- Body size
- 16px / 1.5
- Display size
- 68px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 12.63:1
- Muted on bg
- 4.74:1
- Accent on bg
- 12.63:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 2
- 3
- 4
- 6
- 8
- 10
- 12
- 16
- 20
- 24
- 32
- 64
- 100
Corner radii
5.56.581216pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- 101px
Components
exact computed valuesbutton-primary
Get started
- backgroundColor
- #333333
- textColor
- #FFFFFF
- rounded
- 8px
- padding
- 0px 14px
- height
- 34px
- fontFamily
- Inter
- fontSize
- 14px
- fontWeight
- 450
- shadow
- 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, rgba(0, 0, 0, 0) 0
card
- rounded
- 16px
- padding
- 0px
- backgroundColor
- #FFFFFF
- shadow
- 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, rgba(0, 0, 0, 0) 0
input
- rounded
- 0px
- height
- 44px
- padding
- 0px 12px
Layout & motion
- Container
- 1240px
- Grid columns
- 3
- Hero
- centered-over-media+media-below
- Navigation
- top-fixed+transparent
- Page height
- 6,187px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 300ms
- Transitions
- 59
- Keyframes
- 3
- Stack
- next.js, tailwind, radix-ui, shadcn/ui, intercom, vercel
Page sections (7)
section labels are heuristic
01hero
02nav
03feature detail?It all starts with a form
04logosCreate a lasting impression
05logosIntegrate with all your apps
06feature detail?How people use Fillout
07footerMake your first form in minutes
How Fillout compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 68px: larger than 67% of indexed sites (median 60px).
- Type scale
- 1.23×: flatter than 70% of indexed sites (median 1.28×).
- Container
- 1240px: narrower than 50% of indexed sites (median 1242px).
- Text contrast
- 12.6:1: lower than 86% of indexed sites (median 17.6:1).
- Page length
- 6,187px: shorter than 68% of indexed sites (median 8,217px).
- Corner radius
- Mostly 12px, shared by 14 of 274 indexed sites (5%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- Bl Melody
- The only site in the index that loads Bl Melody.
- 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 Fillout use?
Fillout uses Inter (loaded as "inter") for headings and body text. Bl Melody (loaded as "blMelody") is used for other.
What are Fillout's brand colors?
Fillout's website uses a light scheme: background #FFFFFF, surface #FFFFFF80, text #333333, muted text #737373 and borders #EBEBEB.
How is Fillout's website laid out?
The most common corner radius is 12px, body text is 16px with 1.5 line height, and the page container is 1240px wide.
