Typography
scale ratio 1.178- Interbody400 500 60076%
- Satoshicss: satoshidisplay50022%
- Geist Monocss: GeistMonomono400 5001%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Satoshi | 48px | 500 | 1.15 | 0em |
| title | Inter | 14px | 500 | 1.429 | 0em |
| body | Inter | 18px | 400 | 1.556 | 0em |
| body-sm | Inter | 14px | 400 | 1.429 | 0em |
| mono | Geist Mono | 24px | 500 | 1.333 | 0em |
Type scale
Aa8Aa10Aa12Aa14Aa16Aa18Aa20Aa24Aa30Aa36Aa40Aa48
- Body size
- 18px / 1.556
- Display size
- 48px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 17.93:1
- Muted on bg
- 4.74:1
- Accent on bg
- 21.00:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 4
- 6
- 8
- 10
- 12
- 14
- 16
- 20
- 24
- 32
- 40
- 45.5
- 48
- 164
Corner radii
246812pill
Shadows (4)
- Borders
- hairline, 1px
- Section padding
- 81px
Components
exact computed valuesbutton-primary
Start for free
- backgroundColor
- #000000
- textColor
- #FFFFFF
- rounded
- 8px
- padding
- 8px 20px
- height
- 38px
- fontFamily
- Inter
- fontSize
- 14px
- fontWeight
- 500
- border
- 1px solid #000000
- 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
button-secondary
Learn more
- backgroundColor
- #FFFFFF
- textColor
- #171717
- rounded
- 8px
- padding
- 6px 12px
- height
- 34px
- fontFamily
- Inter
- fontSize
- 14px
- fontWeight
- 400
- border
- 1px solid #D4D4D4
card
- rounded
- 8px
- padding
- 0px
- border
- 1px solid #E5E5E5
Layout & motion
- Container
- 1080px
- Grid columns
- 2
- Hero
- centered+media-below
- Navigation
- none-detected
- Page height
- 12,205px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 75ms 150ms 300ms 500ms
- Transitions
- 206
- Keyframes
- 6
- Stack
- next.js, tailwind, radix-ui, vercel
Page sections (12)
section labels are heuristic
01pricing?
02heroTurn clicks into revenue
03feature detail?It starts with a link
04feature detail?Measure what matters
05feature detail?Connect with your favorite tools
06feature detail?Grow with partnerships
07feature detail?Built to scale
08feature detail?Enterprise-grade link infrastructure
09feature detail?Trusted by startups and enterprises
10logosWe ship fast
11logosSupercharge your marketing efforts
12footerCompare
How Dub compares
- Body text
- 18px: larger than 71% of indexed sites (median 16px).
- Largest heading
- 48px: smaller than 68% of indexed sites (median 60px).
- Type scale
- 1.18×: flatter than 91% of indexed sites (median 1.28×).
- Container
- 1080px: narrower than 78% of indexed sites (median 1242px).
- Text contrast
- 17.9:1: higher than 54% of indexed sites (median 17.6:1).
- Page length
- 12,205px: longer than 82% of indexed sites (median 8,217px).
- Corner radius
- Mostly 8px, shared by 21 of 274 indexed sites (8%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- Satoshi
- One of 4 indexed sites that load Satoshi (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 Dub use?
Dub uses Inter for body text. Satoshi (loaded as "satoshi") is used for headings. Geist Mono (loaded as "GeistMono") is used for code.
What are Dub's brand colors?
Dub's website uses a light scheme: background #FFFFFF, surface #F5F5F5, text #171717, muted text #737373 and borders #E5E5E5.
How is Dub's website laid out?
The most common corner radius is 8px, body text is 18px with 1.556 line height, and the page container is 1080px wide.
