Typography
scale ratio 1.518- Arialdisplay + body400 700100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Arial | 56px | 700 | 1.6 | -0.025em |
| headline | Arial | 34px | 700 | 1.25 | -0.025em |
| title | Arial | 24px | 700 | 1.6 | -0.025em |
| body | Arial | 16px | 400 | 1.75 | 0em |
| body-sm | Arial | 12.8px | 400 | 1.75 | 0em |
Type scale
Aa13Aa16Aa24Aa34Aa56
- Body size
- 16px / 1.75
- Display size
- 56px
- Display tracking
- -0.025em
- Case
- title
Color
dark schemePalette by painted area
- Text on bg
- 15.24:1
- Muted on bg
- 9.17:1
- Accent on bg
- 5.58:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 8px)
- 12
- 14
- 16
- 17
- 19
- 24
- 30.5
- 32
- 48
- 64
- 72
- 96
- 160
- 256
Corner radii
6
Shadows (1)
- Borders
- regular, 2px
- Section padding
- 224px
Components
exact computed valuesbutton-primary
Choose a Starting Point
- backgroundColor
- #33ADA9
- textColor
- #FFFFFF
- rounded
- 6px
- padding
- 0px 24px
- height
- 52.8px
- fontFamily
- Arial
- fontSize
- 16px
- fontWeight
- 700
card
- rounded
- 6px
- padding
- 0px
- shadow
- rgba(0, 0, 0, 0.1) 0px 8px 16px 0px
Layout & motion
- Container
- 1024px
- Grid columns
- n/a
- Hero
- centered
- Navigation
- top-fixed+transparent
- Page height
- 5,407px
- Easing
- ease-in-out
- Durations
- 200ms 500ms 750ms 1000ms
- Transitions
- 26
- Keyframes
- 3
- Stack
- jquery, cloudflare
Page sections (9)
section labels are heuristic
01nav
02heroCarrd
03feature detail?Build one-page sites for pretty much anything
04feature detail?Simple
05feature detail?Responsive
06feature detail?Free
07feature detail?Optional: Go Pro!
08features?No Branding
09footer
How Carrd 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
- 15.2:1: lower than 74% of indexed sites (median 17.6:1).
- Page length
- 5,407px: shorter than 77% of indexed sites (median 8,217px).
- Corner radius
- Mostly 6px, shared by 14 of 274 indexed sites (5%).
- 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 Carrd use?
Carrd uses Arial for headings and body text.
What are Carrd's brand colors?
Carrd's website uses a dark scheme: background #24252D, surface #24252D99, text #FFFFFF, muted text #FFFFFFBF and borders #FFFFFF40.
How is Carrd's website laid out?
The most common corner radius is 6px, body text is 16px with 1.75 line height, and the page container is 1024px wide.
