Typography
scale ratio 1.348- ALT Mistralcss: ALTMistraldisplay50083%
- Interbody400 50017%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | ALT Mistral | 96px | 500 | 1 | -0.02em |
| headline | ALT Mistral | 56px | 500 | 1.071 | -0.01em |
| title | Inter | 16px | 400 | 1.5 | 0em |
| body | Inter | 16px | 400 | 1.5 | 0em |
| body-sm | Inter | 13px | 400 | 1.538 | 0em |
| label | ALT Mistral | 16px | 500 | 1.5 | 0.01em |
Type scale
Aa13Aa14Aa16Aa20Aa24Aa32Aa44Aa56Aa96
- Body size
- 16px / 1.5
- Display size
- 96px
- Display tracking
- -0.02em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 17.10:1
- Muted on bg
- 14.37:1
- Dark mode
- follows system
Declared accent tokens
- --color-surface-brand#FF5229painted
Space, shape & depth
Spacing scale (base 8px)
- 4
- 8
- 12
- 16
- 18
- 24
- 40
- 128
Corner radii
46812pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 128px
Components
exact computed valuesbutton-primary
Start building
- backgroundColor
- #09090B
- textColor
- #FFFFFF
- rounded
- 0px
- padding
- 0px 16px
- height
- 48px
- fontFamily
- ALT Mistral
- fontSize
- 16px
- fontWeight
- 500
button-secondary
- textColor
- #18181B
- rounded
- 0px
- padding
- 0px 0px
- height
- 48px
- fontFamily
- Inter
- fontSize
- 16px
- fontWeight
- 400
- border
- 1px solid #E4E3DE
Layout & motion
- Container
- 1360px
- Grid columns
- 3
- Hero
- centered+media-below
- Navigation
- top-fixed
- Page height
- 6,210px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 300ms 400ms 500ms
- Transitions
- 62
- Keyframes
- 1
- Stack
- astro, react, tailwind, google-tag-manager, netlify, cloudflare
Page sections (6)
section labels are heuristic
01nav
02hero
03content?
05feature detail?Go deeper.
06footerCompany
How Mistral compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 96px: larger than 89% of indexed sites (median 60px).
- Type scale
- 1.35×: steeper than 68% of indexed sites (median 1.28×).
- Container
- 1360px: wider than 89% of indexed sites (median 1242px).
- Text contrast
- 17.1:1: lower than 56% of indexed sites (median 17.6:1).
- Page length
- 6,210px: shorter than 68% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- ALT Mistral
- The only site in the index that loads ALT Mistral.
- Inter
- One of 58 indexed sites that load Inter (21%).
- Color scheme
- Light by default, like 75% of indexed sites. It is one of 49 sites (18%) that switch with the system dark mode setting.
In short
What font does Mistral use?
Mistral uses ALT Mistral (loaded as "ALTMistral") for headings. Inter is used for body text.
What are Mistral's brand colors?
Mistral's website uses a light scheme: background #FBFBF8, surface #F5F4EF, text #18181B, muted text #27272A and borders #E4E3DE.
How is Mistral's website laid out?
The most common corner radius is 0px, body text is 16px with 1.5 line height, and the page container is 1360px wide.
