Typography
scale ratio 1.170- Graphikdisplay + body400 500 70096%
- SF Pro (system-ui)css: ui-sans-serifother4002%
- Replica Monomono4002%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Graphik | 56px | 400 | 0.9 | -0.04em |
| headline | Graphik | 20px | 500 | 1.2 | 0em |
| title | Graphik | 16.54px | 500 | 1.1 | -0.01em |
| body | Graphik | 16px | 400 | 1.2 | 0em |
| body-sm | Graphik | 12px | 400 | 1.2 | 0em |
| mono | Replica Mono | 14px | 400 | 1.1 | 0.1em |
Type scale
Aa10Aa12Aa14Aa15Aa16Aa16.5Aa18Aa20Aa24Aa28Aa32Aa52Aa56
- Body size
- 16px / 1.2
- Display size
- 56px
- Display tracking
- -0.04em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 18.88:1
- Muted on bg
- 10.60:1
- Dark mode
- none
Space, shape & depth
Spacing scale
- 2
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 15
- 16
- 18
- 19
- 20
- 24
Corner radii
pill
Shadows (2)
- Borders
- hairline, 1px
- Section padding
- 56px
Components
exact computed valuesinput
- rounded
- 80px
- height
- 56px
- padding
- 18px 64px
- backgroundColor
- #FFFFFF
- border
- 1px solid #FFFFFF
Layout & motion
- Container
- 764px
- Grid columns
- 4
- Hero
- left-over-media+media-below
- Navigation
- top-fixed+transparent
- Page height
- 6,515px
- Easing
- ease
- Durations
- 150ms 200ms 300ms 350ms
- Transitions
- 44
- Keyframes
- 0
- Stack
- shopify, google-tag-manager, cloudflare
Page sections (8)
section labels are heuristic
01hero20% OFF BUNDLES
02gallery?Built for what travel does to you.
03gallery?The Moonlight Gloss Collection
04features?A system for the way you actually travel.
05features?Reasons to get away
06content?
07testimonials
08footerGet Help
How Awaytravel 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.17×: flatter than 93% of indexed sites (median 1.28×).
- Container
- 764px: narrower than 93% of indexed sites (median 1242px).
- Text contrast
- 18.9:1: higher than 66% of indexed sites (median 17.6:1).
- Page length
- 6,515px: shorter than 65% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Graphik
- One of 3 indexed sites that load Graphik (1%).
- Replica Mono
- The only site in the index that loads Replica Mono.
- 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 Awaytravel use?
Awaytravel uses Graphik for headings and body text. Replica Mono is used for code.
What are Awaytravel's brand colors?
Awaytravel's website uses a dark scheme: background #111111, surface #00000033, text #FFFFFF, muted text #C0C2C8 and borders #FFFFFF.
How is Awaytravel's website laid out?
The most common corner radius is fully rounded (pill), body text is 16px with 1.2 line height, and the page container is 764px wide.
