Typography
scale ratio 1.173- Fricolage Grotesquebody325 450 500 57552%
- Mackinacdisplay50048%
- Fragment Monomono3250%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Mackinac | 52px | 500 | 1.15 | -0.03em |
| headline | Mackinac | 44px | 500 | 1.08 | -0.025em |
| title | Fricolage Grotesque | 17px | 500 | 1.5 | 0em |
| body | Fricolage Grotesque | 17px | 325 | 1.5 | 0em |
| body-sm | Fricolage Grotesque | 15px | 325 | 1.5 | 0em |
| label | Fricolage Grotesque | 14.5px | 450 | 1.5 | 0em |
| mono | Fragment Mono | 17px | 325 | 1.5 | 0em |
Type scale
Aa12Aa14.5Aa15Aa15.5Aa17Aa19Aa23Aa26Aa32Aa44Aa48Aa52
- Body size
- 17px / 1.5
- Display size
- 52px
- Display tracking
- -0.03em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 8.49:1
- Muted on bg
- 2.37:1
- Accent on bg
- 2.56:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 4
- 6
- 8
- 10
- 12
- 14
- 16
- 20
- 24
- 32
- 40
- 64
- 96
- 120
Corner radii
824pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- n/a
Components
exact computed valuesbutton-primary
Start free
- backgroundColor
- #F86D60
- textColor
- #281950
- rounded
- 9999px
- padding
- 0px 20px
- height
- 48px
- fontFamily
- Fricolage Grotesque
- fontSize
- 15.5px
- fontWeight
- 450
- shadow
- rgb(252, 185, 178) 0px 0px 0px 1.5px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px
button-secondary
Log In
- textColor
- #202237
- rounded
- 9999px
- padding
- 0px 10px
- height
- 32px
- fontFamily
- Fricolage Grotesque
- fontSize
- 14.5px
- fontWeight
- 450
- border
- 1px solid #FFFFFFE6
- shadow
- rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.
card
- rounded
- 24px
- padding
- 32px
- backgroundColor
- #FFFFFF
- shadow
- rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(40, 25, 80, 0.04) 0px 1px 2px 0px, rgba(40, 25,
input
- rounded
- 8px
- height
- 39.8px
- padding
- 8px 12px
- backgroundColor
- #22183C
- border
- 1px solid #42385F
Layout & motion
- Container
- 1200px
- Grid columns
- 3
- Hero
- left-over-media
- Navigation
- top-static+transparent
- Page height
- 6,119px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms 300ms 900ms
- Transitions
- 95
- Keyframes
- 1
- Stack
- tailwind, posthog, google-tag-manager, fly.io
Page sections (3)
02nav
03footer
How Fly.io compares
- Body text
- 17px: larger than 65% of indexed sites (median 16px).
- Largest heading
- 52px: smaller than 63% of indexed sites (median 60px).
- Type scale
- 1.17×: flatter than 92% of indexed sites (median 1.28×).
- Container
- 1200px: narrower than 57% of indexed sites (median 1242px).
- Text contrast
- 8.5:1: lower than 94% of indexed sites (median 17.6:1).
- Page length
- 6,119px: shorter than 69% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Fricolage Grotesque
- The only site in the index that loads Fricolage Grotesque.
- Mackinac
- The only site in the index that loads Mackinac.
- 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 Fly.io use?
Fly.io uses Fricolage Grotesque for body text. Mackinac is used for headings. Fragment Mono is used for code.
What are Fly.io's brand colors?
Fly.io's website uses a light scheme: background #F1F2F9, surface #FFFFFF, text #4A3F6B, muted text #A39AC1 and borders #E4DEF7.
How is Fly.io's website laid out?
The most common corner radius is 0px, body text is 17px with 1.5 line height, and the page container is 1200px wide.
