Typography
scale ratio 1.518- Interdisplay + body400 500 600 700100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Inter | 56px | 700 | 1.143 | -0.012em |
| title | Inter | 20px | 600 | 1.4 | 0em |
| body | Inter | 16px | 400 | 1.75 | 0em |
| body-sm | Inter | 14px | 400 | 1.429 | 0em |
| label | Inter | 16px | 500 | 1.75 | 0em |
Type scale
Aa12Aa13Aa14Aa16Aa20Aa40Aa56
- Body size
- 16px / 1.75
- Display size
- 56px
- Display tracking
- -0.012em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 20.12:1
- Muted on bg
- 6.41:1
- Accent on bg
- 2.49:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 6
- 8
- 10
- 12
- 16
- 20
- 24
- 28
- 32
- 40
- 48
- 192
Corner radii
48121632pill
Shadows (4)
- Borders
- hairline, 1px
- Section padding
- 92px
Components
exact computed valuesbutton-primary
Get started
- backgroundColor
- #11A8FF
- textColor
- #FFFFFF
- rounded
- 8px
- padding
- 6px 16px
- height
- 32px
- fontFamily
- Inter
- fontSize
- 14px
- fontWeight
- 500
Layout & motion
- Container
- 1024px
- Grid columns
- 3
- Hero
- left-aligned+media-below
- Navigation
- top-static+transparent
- Page height
- 14,147px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 300ms
- Transitions
- 17
- Keyframes
- 1
- Stack
- next.js, tailwind, radix-ui, segment, google-tag-manager, vercel
Page sections (7)
section labels are heuristic
01nav
06logos
07footer
How Amie compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 56px: smaller than 53% of indexed sites (median 60px).
- Type scale
- 1.52×: steeper than 90% of indexed sites (median 1.28×).
- Container
- 1024px: narrower than 82% of indexed sites (median 1242px).
- Text contrast
- 20.1:1: higher than 78% of indexed sites (median 17.6:1).
- Page length
- 14,147px: longer than 89% of indexed sites (median 8,217px).
- Corner radius
- Mostly 12px, shared by 14 of 274 indexed sites (5%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- 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 Amie use?
Amie uses Inter for headings and body text.
What are Amie's brand colors?
Amie's website uses a light scheme: background #FAFAFA, text #000000, muted text #5C5C5C and borders #0000000A.
How is Amie's website laid out?
The most common corner radius is 12px, body text is 16px with 1.75 line height, and the page container is 1024px wide.
