Typography
scale ratio 1.303- Intercss: Inter Variabledisplay + body400 500 60085%
- DM Monomono400 50014%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Inter | 60px | 600 | 1.2 | 0em |
| headline | Inter | 48px | 600 | 1 | 0em |
| title | Inter | 16px | 600 | 1.625 | 0em |
| body | Inter | 16px | 400 | 1.625 | 0em |
| body-sm | DM Mono | 13px | 400 | 1.625 | 0em |
| label | Inter | 14px | 400 | 1.429 | 0em |
Type scale
Aa12Aa13Aa14Aa16Aa18Aa20Aa24Aa48Aa60
- Body size
- 16px / 1.625
- Display size
- 60px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 14.89:1
- Muted on bg
- 4.83:1
- Accent on bg
- 4.98:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 4
- 6
- 8
- 10
- 12
- 16
- 24
- 32
- 40
- 48
- 64
- 112
- 128
Corner radii
6812pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- 128px
Components
exact computed valuesbutton-primary
Download the app
- backgroundColor
- #6A5ED9
- textColor
- #FFFFFF
- rounded
- 12px
- padding
- 16px 32px
- height
- 60px
- fontFamily
- Inter
- fontSize
- 18px
- fontWeight
- 500
button-secondary
Sign up
- textColor
- #27272A
- rounded
- 8px
- padding
- 7px 20px
- height
- 40px
- fontFamily
- Inter
- fontSize
- 16px
- fontWeight
- 500
- border
- 1px solid #E4E4E7
- shadow
- rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px
card
- rounded
- 12px
- padding
- 48px
- backgroundColor
- #FFFFFF
- shadow
- rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px
Layout & motion
- Container
- 1152px
- Grid columns
- 3
- Hero
- centered+media-below
- Navigation
- top-sticky+transparent
- Page height
- 8,842px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 300ms 500ms 1000ms
- Transitions
- 91
- Keyframes
- 4
- Stack
- astro, tailwind, posthog, google-tag-manager, netlify
Page sections (8)
section labels are heuristic
01navTuple
02heroScreen sharing for people who build software.
03features?Built for working, not for meetings
04feature detail?Don't take our word for it
05code sample?Plug your calls into your agents
06features?Liven up your working sessions
07feature detail?Ready to get started?
08footerTuple
How Tuple compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 60px: larger than 48% of indexed sites (median 60px).
- Type scale
- 1.30×: steeper than 56% of indexed sites (median 1.28×).
- Container
- 1152px: narrower than 69% of indexed sites (median 1242px).
- Text contrast
- 14.9:1: lower than 76% of indexed sites (median 17.6:1).
- Page length
- 8,842px: longer than 57% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- DM Mono
- One of 2 indexed sites that load DM Mono (1%).
- 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 Tuple use?
Tuple uses Inter (loaded as "Inter Variable") for headings and body text. DM Mono is used for code.
What are Tuple's brand colors?
Tuple's website uses a light scheme: background #FFFFFF, surface #E4E4E7, text #27272A, muted text #71717A and borders #52525B.
How is Tuple's website laid out?
The most common corner radius is fully rounded (pill), body text is 16px with 1.625 line height, and the page container is 1152px wide.
