Typography
scale ratio 1.295- ABC Diatypedisplay + body400 50099%
- DM Monomono4001%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | ABC Diatype | 45px | 500 | 1.067 | -0.01em |
| headline | ABC Diatype | 38px | 500 | 1.158 | -0.01em |
| title | ABC Diatype | 18px | 400 | 1.333 | 0em |
| body | ABC Diatype | 16px | 400 | 1.5 | 0em |
| body-sm | ABC Diatype | 15px | 400 | 1.467 | 0.01em |
| mono | DM Mono | 9.85px | 400 | 1.846 | 0.03em |
Type scale
Aa10Aa12Aa13Aa14Aa15Aa16Aa18Aa28Aa38Aa45
- Body size
- 16px / 1.5
- Display size
- 45px
- Display tracking
- -0.01em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 15.90:1
- Muted on bg
- 8.68:1
- Accent on bg
- 13.74:1
- Dark mode
- none
Declared accent tokens
- --semantic-icon-accent#6AC345not on page
- --semantic-background-accent-bold#7FEE64painted
- --semantic-background-accent-selected#7FEE64painted
- --semantic-icon-primary-selected#7FEE64painted
Space, shape & depth
Spacing scale (base 4px)
- 4
- 6
- 8
- 10
- 12
- 16
- 20
- 24
- 32
- 40
- 48
- 64
Corner radii
24710pill
Shadows (3)
- Borders
- hairline, 1px
- Section padding
- 144px
Components
exact computed valuesbutton-primary
Get started
- backgroundColor
- #E3E5E1
- textColor
- #10120F
- rounded
- 9999px
- padding
- 6px 16px
- height
- 36px
- fontFamily
- ABC Diatype
- fontSize
- 16px
- fontWeight
- 500
- shadow
- rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0
card
- rounded
- 7px
- padding
- 0px
- backgroundColor
- #10120F
Layout & motion
- Container
- 1312px
- Grid columns
- 24
- Hero
- centered-over-media
- Navigation
- top-sticky+transparent
- Page height
- 10,997px
- Easing
- cubic-bezier(0.165, 0.84, 0.44, 1)
- Durations
- 147ms 150ms 200ms 560ms
- Transitions
- 182
- Keyframes
- 4
- Stack
- sveltekit, tailwind, shadcn/ui, cloudfront
Page sections (11)
section labels are heuristic
02feature detail?The platform for
03feature detail?Container infrastructure that won’t box you in
05features?Infrastructure reimagined for the demands of AI workloads
06features?Capacity that scales with your ambition
07features?Production-ready from day one
08logosCustomers
09features?Latest updates
10cta?Ship in minutes
11footer
How Modal compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 45px: smaller than 76% of indexed sites (median 60px).
- Type scale
- 1.29×: steeper than 55% of indexed sites (median 1.28×).
- Container
- 1312px: wider than 73% of indexed sites (median 1242px).
- Text contrast
- 15.9:1: lower than 68% of indexed sites (median 17.6:1).
- Page length
- 10,997px: longer than 75% of indexed sites (median 8,217px).
- Corner radius
- Mostly 7px, shared by 1 of 274 indexed sites (0%).
- ABC Diatype
- One of 3 indexed sites that load ABC Diatype (1%).
- DM Mono
- One of 2 indexed sites that load DM Mono (1%).
- Color scheme
- Dark by default, like 25% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Modal use?
Modal uses ABC Diatype for headings and body text. DM Mono is used for code.
What are Modal's brand colors?
Modal's website uses a dark scheme: background #040804, surface #131412, text #E3E5E1, muted text #A8ABA6 and borders #FFFFFF0D.
How is Modal's website laid out?
The most common corner radius is 7px, body text is 16px with 1.5 line height, and the page container is 1312px wide.
Similar to Modal
Helvetica / Inter / Material Symbols Outlined#0E0E0E
CodeSandboxcodesandbox.io
Hope Sans / Cooper BT / Cooper Great Jones#0E5540
Great Jonesgreatjones.com
Inter / Berkeley Mono#08090A
Linearlinear.app
TASA Orbiter / Geist Mono#080808
Motionmotion.dev
Techno Type / te-20#F1F2F2
teenage engineeringteenage.engineering