Typography
- Aeonikdisplay + body400100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Aeonik | 144px | 400 | 1 | -0.02em |
Type scale
Aa12Aa13Aa14Aa14.5Aa18Aa36Aa43Aa48.5Aa50.5Aa108Aa115Aa144
- Body size
- n/a
- Display size
- 144px
- Display tracking
- -0.02em
- Case
- mixed
Color
dark schemePalette by painted area
- Text on bg
- 1.55:1
- Muted on bg
- undefined:1
- Dark mode
- none
Space, shape & depth
Spacing scale
- 3.5
- 5.5
- 9
- 10
- 11.5
- 13
- 14.5
- 16
- 19.5
- 22.5
- 23
- 29
- 45
- 50
Corner radii
16pill
Shadows (1)
- Borders
- none
- Section padding
- n/a
Components
exact computed valuesbutton-primary
- backgroundColor
- #2B2E3A
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 0px 15.8px
- height
- 44.8px
- fontFamily
- Aeonik
- fontSize
- 14px
- fontWeight
- 500
button-secondary
- backgroundColor
- #E4E6EF
- textColor
- #000000
- rounded
- 9999px
- padding
- 0px 15.8px
- height
- 44.8px
- fontFamily
- Aeonik
- fontSize
- 14px
- fontWeight
- 500
input
- rounded
- 0px
- height
- 63px
- padding
- 11.3px 22.5px
Layout & motion
- Container
- 1296px
- Grid columns
- 12
- Hero
- left-over-media
- Navigation
- top-fixed+transparent
- Page height
- 900px
- Easing
- cubic-bezier(0.35, 0, 0, 1)
- Durations
- 300ms 400ms 500ms 600ms
- Transitions
- 32
- Keyframes
- 2
- Stack
- astro, google-tag-manager, netlify
Page sections (1)
01nav
How Lusion compares
- Largest heading
- 144px: larger than 97% of indexed sites (median 60px).
- Container
- 1296px: wider than 68% of indexed sites (median 1242px).
- Text contrast
- 1.6:1: lower than 99% of indexed sites (median 17.6:1).
- Page length
- 900px: shorter than 93% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Aeonik
- One of 2 indexed sites that load Aeonik (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 Lusion use?
Lusion uses Aeonik for headings and body text.
What are Lusion's brand colors?
Lusion's website uses a dark scheme: background #2B2E3A, text #000000 and borders #000000.
How is Lusion's website laid out?
The most common corner radius is fully rounded (pill), body text is nullpx with null line height, and the page container is 1296px wide.
