Typography
scale ratio 1.180- Suisse Int'lcss: SuisseIntldisplay + body300 400 500 60069%
- Menlomono40029%
- Interother400 500 6002%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Suisse Int'l | 52px | 600 | 1.1 | -0.03em |
| headline | Suisse Int'l | 14px | 500 | 1.1 | -0.01em |
| title | Suisse Int'l | 28px | 500 | 1.1 | -0.01em |
| body | Suisse Int'l | 16px | 300 | 1.375 | 0em |
| body-sm | Menlo | 12px | 400 | 1.5 | 0em |
| label | Suisse Int'l | 14px | 300 | 1.5 | 0em |
Type scale
Aa10Aa11Aa12Aa13Aa14Aa16Aa18Aa20Aa24Aa28Aa40Aa48Aa52Aa60
- Body size
- 16px / 1.375
- Display size
- 52px
- Display tracking
- -0.03em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 9.90:1
- Muted on bg
- 3.71:1
- Accent on bg
- 15.31:1
- Dark mode
- none
Declared accent tokens
- --btn-bg-primary#111A4Apainted
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 6
- 8
- 12
- 16
- 20
- 24
- 32
- 48
- 72
- 144
- 164
Corner radii
812pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- 172px
Components
exact computed valuesbutton-primary
Sign up
- backgroundColor
- #111A4A
- textColor
- #FFFFFF
- rounded
- 8px
- padding
- 0px 16px
- height
- 36px
- fontFamily
- Suisse Int'l
- fontSize
- 14px
- fontWeight
- 500
- shadow
- rgb(17, 26, 74) 0px 0px 0px 1px, rgba(0, 0, 0, 0.25) 0px 2px 4px 0px, rgba(0, 0, 0, 0.25) 0px 1px 2px 0px
button-secondary
- backgroundColor
- #EC652B
- textColor
- #111A4A
- rounded
- 8px
- padding
- 12px 32px
- height
- 48px
- fontFamily
- SuisseIntl
- fontSize
- 16px
- fontWeight
- 400
- shadow
- rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.1) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.02) 0px -48px 24px
card
- rounded
- 8px
- padding
- 0px
- shadow
- rgba(0, 0, 0, 0.02) 0px 40px 32px 0px, rgba(0, 0, 0, 0.03) 0px 22px 18px 0px, rgba(0, 0, 0, 0.03) 0px 12px 10px 0px, rgb
Layout & motion
- Container
- 1112px
- Grid columns
- 12
- Hero
- left-over-media
- Navigation
- top-static+transparent
- Page height
- 9,717px
- Easing
- ease
- Durations
- 200ms 500ms 600ms 800ms
- Transitions
- 93
- Keyframes
- 8
- Stack
- gatsby, radix-ui, contentful, google-tag-manager, cloudfront
Page sections (3)
01heroMove, hold, and lend the dollar at scale
How Column compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 52px: smaller than 63% of indexed sites (median 60px).
- Type scale
- 1.18×: flatter than 91% of indexed sites (median 1.28×).
- Container
- 1112px: narrower than 74% of indexed sites (median 1242px).
- Text contrast
- 9.9:1: lower than 92% of indexed sites (median 17.6:1).
- Page length
- 9,717px: longer than 65% of indexed sites (median 8,217px).
- Corner radius
- Mostly 8px, shared by 21 of 274 indexed sites (8%).
- Suisse Int'l
- One of 4 indexed sites that load Suisse Int'l (1%).
- 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 Column use?
Column uses Suisse Int'l (loaded as "SuisseIntl") for headings and body text. Menlo is used for code. Inter is used for other.
What are Column's brand colors?
Column's website uses a light scheme: background #F6F6F8, surface #EEEFF2, text #3B3E47, muted text #7C7F88 and borders #E3E4E8.
How is Column's website laid out?
The most common corner radius is 8px, body text is 16px with 1.375 line height, and the page container is 1112px wide.
