Typography
scale ratio 1.380- Saansdisplay400 60045%
- font-1cffa098-abaa-461c-a3c4-5e421dc49b08other40021%
- font-9395b7be-5393-4b58-84e8-b12654b4aee1other40010%
- Serrifbody4008%
- font-61492180-c87b-463c-8193-48de671e80f8other4007%
- font-27e1c798-5ff7-4994-bc0f-7fcac9146465other4004%
- font-f979cc71-cddd-4069-a6a9-0c968a380a43other4003%
- Font mecherleSanscss: font-mecherleSansother4002%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Saans | 200px | 400 | 0.9 | -0.04em |
| headline | Saans | 44px | 400 | 0.9 | -0.025em |
| title | Saans | 21px | 600 | 1.15 | 0.01em |
| body | Saans | 21px | 400 | 1.15 | 0.01em |
| body-sm | Serrif | 19px | 400 | 1.15 | -0.01em |
| label | Saans | 15px | 400 | 1.3 | 0.02em |
Type scale
Aa15Aa19Aa21Aa28Aa44Aa45.5Aa72Aa89Aa134.5Aa200
- Body size
- 21px / 1.15
- Display size
- 200px
- Display tracking
- -0.04em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- undefined:1
- Accent on bg
- 21.00:1
- Dark mode
- none
Space, shape & depth
Spacing scale
- 4
- 5
- 10
- 11
- 12
- 14
- 15
- 18
- 20
- 23
- 30
- 67
- 100
Corner radii
810pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 41px
Components
exact computed valuesbutton-primary
Displaay®
- backgroundColor
- #000000
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 0px 20px
- height
- 59px
- fontFamily
- Saans
- fontSize
- 28px
- fontWeight
- 400
- border
- 1px solid #000000
button-secondary
Tester
- backgroundColor
- #B8FBFF
- textColor
- #000000
- rounded
- 10px
- padding
- 4px 12px
- height
- 34px
- fontFamily
- Saans
- fontSize
- 15px
- fontWeight
- 400
- border
- 1px solid #B8FBFF
Layout & motion
- Container
- n/a
- Grid columns
- 6
- Hero
- centered
- Navigation
- top-static+transparent
- Page height
- 10,586px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 300ms
- Transitions
- 55
- Keyframes
- 0
- Stack
- tailwind, google-tag-manager, cloudflare
Page sections (8)
section labels are heuristic
01nav
02hero
03gallery?Custom
04feature detail?Offline
05features?Our Features
06feature detail?In use
07feature detail?Typefaces
08footer
How Displaay compares
- Body text
- 21px: larger than 96% of indexed sites (median 16px).
- Largest heading
- 200px: larger than 99% of indexed sites (median 60px).
- Type scale
- 1.38×: steeper than 77% of indexed sites (median 1.28×).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 10,586px: longer than 71% of indexed sites (median 8,217px).
- Corner radius
- Mostly 10px, shared by 9 of 274 indexed sites (3%).
- Saans
- One of 2 indexed sites that load Saans (1%).
- font-1cffa098-abaa-461c-a3c4-5e421dc49b08
- The only site in the index that loads font-1cffa098-abaa-461c-a3c4-5e421dc49b08.
- 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 Displaay use?
Displaay uses Saans for headings. font-1cffa098-abaa-461c-a3c4-5e421dc49b08 is used for other. font-9395b7be-5393-4b58-84e8-b12654b4aee1 is used for other.
What are Displaay's brand colors?
Displaay's website uses a light scheme: background #FFFFFF, surface #E3E3E3, text #000000 and borders #000000.
How is Displaay's website laid out?
The most common corner radius is 10px, body text is 21px with 1.15 line height, and the page container is nullpx wide.
