Typography
scale ratio 1.323- Interbody450 50064%
- Manropedisplay450 500 60032%
- Source Code Promono5004%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Manrope | 46px | 500 | 1 | 0em |
| headline | Manrope | 16px | 600 | 1.5 | 0em |
| title | Manrope | 34px | 600 | 1.111 | 0em |
| body | Inter | 15px | 450 | 1.5 | 0em |
| body-sm | Inter | 14px | 450 | 1.429 | 0em |
| mono | Source Code Pro | 13px | 500 | 1.7 | 0em |
Type scale
Aa12Aa13Aa14Aa15Aa16Aa22Aa34Aa46
- Body size
- 15px / 1.5
- Display size
- 46px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 20.30:1
- Muted on bg
- 5.42:1
- Accent on bg
- 5.01:1
- Dark mode
- follows system
Declared accent tokens
- --color-brand#3FCF8Epainted
- --primary#0E7E4Epainted
- --primary-solid#0E7E4Epainted
Space, shape & depth
Spacing scale (base 8px)
- 4
- 6
- 8
- 10
- 12
- 16
- 20
- 24
- 32
- 40
- 80
- 96
Corner radii
5.5810.5151621.5pill
Shadows (3)
- Borders
- hairline, 1px
- Section padding
- 97px
Components
exact computed valuesbutton-primary
Start your project
- backgroundColor
- #0E7E4E
- textColor
- #FAFCFB
- rounded
- 8px
- padding
- 4px 10px
- height
- 26px
- fontFamily
- Inter
- fontSize
- 12px
- fontWeight
- 500
- shadow
- rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0
button-secondary
- textColor
- #030303
- rounded
- 0px
- padding
- 16px 0px
- height
- 60px
- fontFamily
- Inter
- fontSize
- 16px
- fontWeight
- 450
- border
- 1px solid #03030315
card
- rounded
- 21.3px
- padding
- 24px
- backgroundColor
- #FFFFFF
- border
- 1px solid #03030315
input
- rounded
- 8px
- height
- 35px
- padding
- 8px 8px
- border
- 1px solid #03030325
Layout & motion
- Container
- 1280px
- Grid columns
- 6
- Hero
- left-aligned
- Navigation
- none-detected
- Page height
- 7,691px
- Easing
- ease
- Durations
- 150ms 200ms 400ms 600ms
- Transitions
- 2804
- Keyframes
- 4
- Stack
- next.js, tailwind, radix-ui, vercel
Page sections (7)
section labels are heuristic
01heroScale to millions Build in a weekend
02testimonialsData APIs
03code sample?Use Supabase with
04feature detail?How industry leaders
05feature detail?Open source from day one
06feature detail?scale to millions Build in a weekend,
07footer
How Supabase compares
- Body text
- 15px: smaller than 76% of indexed sites (median 16px).
- Largest heading
- 46px: smaller than 75% of indexed sites (median 60px).
- Type scale
- 1.32×: steeper than 63% of indexed sites (median 1.28×).
- Container
- 1280px: wider than 55% of indexed sites (median 1242px).
- Text contrast
- 20.3:1: higher than 80% of indexed sites (median 17.6:1).
- Page length
- 7,691px: shorter than 55% of indexed sites (median 8,217px).
- Corner radius
- Mostly 11px, shared by 3 of 274 indexed sites (1%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- Manrope
- One of 3 indexed sites that load Manrope (1%).
- 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 Supabase use?
Supabase uses Inter for body text. Manrope is used for headings. Source Code Pro is used for code.
What are Supabase's brand colors?
Supabase's website uses a light scheme: background #FDFDFD, text #030303, muted text #696969 and borders #03030315.
How is Supabase's website laid out?
The most common corner radius is 10.5px, body text is 15px with 1.5 line height, and the page container is 1280px wide.
