Typography
scale ratio 1.274- Graphikdisplay + body400 500 600 800100%
- Monaspacemono4000%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Graphik | 49.79px | 800 | 1.15 | -0.026em |
| headline | Graphik | 42.13px | 800 | 1.15 | -0.026em |
| title | Graphik | 22.98px | 800 | 1.5 | -0.014em |
| body | Graphik | 19.15px | 400 | 1.5 | -0.014em |
| body-sm | Graphik | 15.32px | 500 | 1 | -0.014em |
| label | Graphik | 17.23px | 500 | 1 | -0.014em |
Type scale
Aa13.5Aa15.5Aa17Aa19Aa23Aa38.5Aa42Aa50
- Body size
- 19px / 1.5
- Display size
- 49.79px
- Display tracking
- -0.026em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 12.59:1
- Muted on bg
- undefined:1
- Accent on bg
- 4.11:1
- Dark mode
- follows system
Space, shape & depth
Spacing scale
- 5
- 8.5
- 10.5
- 12
- 12.5
- 15.5
- 18.5
- 19
- 21
- 23
- 28.5
- 30.5
- 32
- 35
Corner radii
7.5pill
Shadows (5)
- Borders
- none
- Section padding
- 60px
Components
exact computed valuesbutton-primary
Try Basecamp free
- backgroundColor
- #117AF3
- textColor
- #FFFFFF
- rounded
- 0px
- padding
- 19.1px 21.1px
- height
- 49.8px
- fontFamily
- Graphik
- fontSize
- 19.15px
- fontWeight
- 500
button-secondary
Try Basecamp free
- backgroundColor
- #0067DE
- textColor
- #FFFFFF
- rounded
- 0px
- padding
- 19.1px 21.1px
- height
- 49.8px
- fontFamily
- Graphik
- fontSize
- 19.15px
- fontWeight
- 500
- shadow
- oklch(0 0 0 / 0.1) 0px 3.82986px 30.6389px -9.57465px, oklch(0 0 0 / 0.1) 0px 5.74479px 38.2986px -11.4896px, oklch(0 0
input
- rounded
- 0px
- height
- 50px
- padding
- 12.7px 19px
Layout & motion
- Container
- 1195px
- Grid columns
- 3
- Hero
- centered
- Navigation
- top-static+transparent
- Page height
- 9,535px
- Easing
- ease
- Durations
- 150ms 300ms 400ms
- Transitions
- 106
- Keyframes
- 0
- Stack
- hotwire, posthog, cloudflare
Page sections (10)
section labels are heuristic
01hero
02nav
03feature detail?Manage any project, coordinate every team. Master your company with Basecamp.
04feature detail?Take a minute to meet some of our customers
05testimonialsWe asked our customers: “What changed for the better since you switched to Basec
06feature detail?How about a quick demonstration?
07features?Big numbers. Highly-trusted. Rugged, reliable, ready.
08testimonialsRemember when companies cared about service?
09feature detail?Want to see a live demo and ask some questions first?
10footerHave day!
How Basecamp compares
- Body text
- 19px: larger than 88% of indexed sites (median 16px).
- Largest heading
- 49.8px: smaller than 67% of indexed sites (median 60px).
- Type scale
- 1.27×: flatter than 55% of indexed sites (median 1.28×).
- Container
- 1195px: narrower than 64% of indexed sites (median 1242px).
- Text contrast
- 12.6:1: lower than 88% of indexed sites (median 17.6:1).
- Page length
- 9,535px: longer than 62% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Graphik
- One of 3 indexed sites that load Graphik (1%).
- Monaspace
- The only site in the index that loads Monaspace.
- Color scheme
- Light by default, like 75% of indexed sites. It is one of 49 sites (18%) that switch with the system dark mode setting.
In short
What font does Basecamp use?
Basecamp uses Graphik for headings and body text. Monaspace is used for code.
What are Basecamp's brand colors?
Basecamp's website uses a light scheme: background #FFFFFF, surface #00000026, text #29353C and borders #00000010.
How is Basecamp's website laid out?
The most common corner radius is 0px, body text is 19px with 1.5 line height, and the page container is 1195px wide.
Similar to Basecamp
TNY Adobe Caslon Pro / Irvin Heading Pro / Neutraface New Yorker#FFFFFF
Newyorkernewyorker.com
Beo Supreme#FFFFFF
Bang & Olufsenbang-olufsen.com
Plain / GT Planar / GT Standard Mono#FFFFFF
Browserbasebrowserbase.com
Atlas Grotesk / Sharp Grotesk#FFFFFF
Dropboxdropbox.com
Maison Neue / Maison Neue Demi#FFFFFF
Everlaneeverlane.com