Typography
scale ratio 1.260- Interdisplay + body400 500 600 700 800100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Inter | 64px | 700 | 1 | -0.031em |
| headline | Inter | 36px | 700 | 1.15 | 0em |
| title | Inter | 18px | 800 | 1.15 | 0em |
| body | Inter | 16px | 400 | 1.5 | 0em |
| body-sm | Inter | 13px | 400 | 1.15 | 0em |
| label | Inter | 15px | 400 | 1.8 | 0em |
Type scale
Aa13Aa14Aa15Aa16Aa18Aa22Aa26Aa30Aa36Aa64
- Body size
- 16px / 1.5
- Display size
- 64px
- Display tracking
- -0.031em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- 12.26:1
- Accent on bg
- 4.88:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 8px)
- 4
- 6
- 7.5
- 8
- 8.5
- 10
- 12
- 13.5
- 16
- 24
- 30
- 32
- 64
- 192
Corner radii
7810pill
Shadows (3)
- Borders
- hairline, 1px
- Section padding
- 190px
Components
exact computed valuesbutton-primary
Create a free form
- backgroundColor
- #0070D7
- textColor
- #FFFFFF
- rounded
- 8px
- padding
- 0px 13.5px
- height
- 36px
- fontFamily
- Inter
- fontSize
- 15px
- fontWeight
- 600
card
- rounded
- 10px
- padding
- 0px
- backgroundColor
- #FEFEFE
- shadow
- rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgba(61, 59, 53, 0.16) 0px 0px 0px 1px, rgba(61, 59, 53, 0.08) 0px 3px 9px 0px, rgb
Layout & motion
- Container
- 976px
- Grid columns
- n/a
- Hero
- centered+media-below
- Navigation
- top-static
- Page height
- 13,607px
- Easing
- ease-in-out
- Durations
- 100ms 700ms
- Transitions
- 23
- Keyframes
- 0
- Stack
- next.js, cloudflare
Page sections (11)
section labels are heuristic
01nav
02heroThe simplest way to create forms
03features?A form builder like no other
04feature detail?Simple powerful
05features?Craft forms
06code sample?Make forms uniquely
07features?with your audience
08features?your favorite tools
09feature detail?Build stunning forms for free
10feature detail?Questions & answers
11footer
How Tally 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.26×: flatter than 60% of indexed sites (median 1.28×).
- Container
- 976px: narrower than 84% of indexed sites (median 1242px).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 13,607px: longer than 88% of indexed sites (median 8,217px).
- Corner radius
- Mostly 10px, shared by 9 of 274 indexed sites (3%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- 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 Tally use?
Tally uses Inter for headings and body text.
What are Tally's brand colors?
Tally's website uses a light scheme: background #FFFFFF, text #000000, muted text #37352F and borders #37352F17.
How is Tally's website laid out?
The most common corner radius is 10px, body text is 16px with 1.5 line height, and the page container is 976px wide.
