Typography
scale ratio 1.373- Interbody400 500 60065%
- Familydisplay50032%
- LFE Sansother400 500 6004%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Family | 44px | 500 | 1.091 | -0.031em |
| body | Inter | 17px | 400 | 1.529 | -0.013em |
| body-sm | Inter | 15px | 400 | 1.467 | -0.009em |
| label | Inter | 15px | 500 | 0.667 | 0em |
Type scale
Aa13Aa14Aa15Aa16Aa17Aa19Aa23Aa44
- Body size
- 17px / 1.529
- Display size
- 44px
- Display tracking
- -0.031em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 18.73:1
- Muted on bg
- 9.42:1
- Dark mode
- none
Space, shape & depth
Spacing scale
- 3
- 4
- 6
- 7
- 8
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 20
- 23
Corner radii
461012pill
Shadows (2)
- Borders
- hairline, 1px
- Section padding
- 117px
Components
exact computed valuesbutton-primary
Get Started
- backgroundColor
- #171717
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 0px 14px
- height
- 32px
- fontFamily
- Inter
- fontSize
- 15px
- fontWeight
- 500
card
- rounded
- 12px
- padding
- 0px
- backgroundColor
- #FBFAF9
Layout & motion
- Container
- 1072px
- Grid columns
- 2
- Hero
- centered-over-media
- Navigation
- top-static+transparent
- Page height
- 11,315px
- Easing
- ease
- Durations
- 100ms 200ms 220ms 1000ms
- Transitions
- 208
- Keyframes
- 1
- Stack
- next.js, framer-motion, vercel, cloudflare
Page sections (16)
section labels are heuristic
01hero
02feature detail?wallet. crypto favorite Your
03feature detail?Explore Ethereum
04gallery?All in one place.
05content?
06logosThe best way to experience NFTs.
07logosWatch the wallets
08logosWallet activity you
09logosRelentless protection.
10gallery?Masterful management.
11feature detail?The latest from Family
12feature detail?Details that matter.
13feature detail?Friends of Family
14faqFrequently Asked Questions
15feature detail?Explore Family
16footer
How Family compares
- Body text
- 17px: larger than 65% of indexed sites (median 16px).
- Largest heading
- 44px: smaller than 77% of indexed sites (median 60px).
- Type scale
- 1.37×: steeper than 75% of indexed sites (median 1.28×).
- Container
- 1072px: narrower than 80% of indexed sites (median 1242px).
- Text contrast
- 18.7:1: higher than 63% of indexed sites (median 17.6:1).
- Page length
- 11,315px: longer than 77% 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%).
- Family
- The only site in the index that loads Family.
- 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 Family use?
Family uses Inter for body text. Family is used for headings. LFE Sans is used for other.
What are Family's brand colors?
Family's website uses a light scheme: background #FFFFFF, surface #F4F4F4, text #121212, muted text #474645 and borders #F2F0ED.
How is Family's website laid out?
The most common corner radius is 12px, body text is 17px with 1.529 line height, and the page container is 1072px wide.
