Typography
scale ratio 1.359- Tatecss: Tate regulardisplay + body400100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Tate | 58px | 400 | 1.276 | 0.11em |
| headline | Tate | 46px | 400 | 1.196 | 0.11em |
| body | Tate | 17px | 400 | 1.588 | 0em |
| body-sm | Tate | 16px | 400 | 1.6 | 0.11em |
Type scale
Aa12Aa14Aa16Aa17Aa20Aa22Aa46Aa58
- Body size
- 17px / 1.588
- Display size
- 58px
- Display tracking
- 0.11em
- Case
- upper
Color
light schemePalette by painted area
- Text on bg
- 17.40:1
- Muted on bg
- 4.54:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 8px)
- 5
- 8
- 10
- 12
- 13
- 16
- 20
- 24
- 32
- 56
- 152
Corner radii
pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 73px
Components
exact computed valuesbutton-primary
Join today
- backgroundColor
- #1A1A1A
- textColor
- #FFFFFF
- rounded
- 0px
- padding
- 10px 16px
- height
- 48px
- fontFamily
- Tate
- fontSize
- 17px
- fontWeight
- 400
button-secondary
Become a Member
- backgroundColor
- #85DEE7
- textColor
- #1A1A1A
- rounded
- 0px
- padding
- 9.6px 12px
- height
- 33.2px
- fontFamily
- Tate
- fontSize
- 14px
- fontWeight
- 400
input
- rounded
- 0px
- height
- 48px
- padding
- 7.5px 16px
- backgroundColor
- #FFFFFF
- border
- 1px solid #767676
Layout & motion
- Container
- 1136px
- Grid columns
- n/a
- Hero
- split
- Navigation
- top-fixed
- Page height
- 4,660px
- Easing
- ease
- Durations
- 200ms 300ms 800ms
- Transitions
- 29
- Keyframes
- 0
- Stack
- jquery, google-tag-manager, fastly
Page sections (14)
section labels are heuristic
01nav
02hero
03feature detail?Our galleries
04features?Tate St Ives
05feature detail?What's on across Tate
06features?Ana Mendieta
07feature detail?Tate Members
08feature detail?Support
09feature detail?Support Tate Liverpool
10feature detail?Shop
11features?Gifts
12feature detail?Explore online
13features?Tate Kids
14footerOur Galleries
How Tate compares
- Body text
- 17px: larger than 65% of indexed sites (median 16px).
- Largest heading
- 58px: smaller than 52% of indexed sites (median 60px).
- Type scale
- 1.36×: steeper than 74% of indexed sites (median 1.28×).
- Container
- 1136px: narrower than 71% of indexed sites (median 1242px).
- Text contrast
- 17.4:1: lower than 51% of indexed sites (median 17.6:1).
- Page length
- 4,660px: shorter than 80% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Tate
- The only site in the index that loads Tate.
- 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 Tate use?
Tate uses Tate (loaded as "Tate regular") for headings and body text.
What are Tate's brand colors?
Tate's website uses a light scheme: background #FFFFFF, text #1A1A1A, muted text #767676 and borders #DDDDDD.
How is Tate's website laid out?
The most common corner radius is 0px, body text is 17px with 1.588 line height, and the page container is 1136px wide.
