Typography
scale ratio 1.334- Interdisplay + body400 700100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Inter | 67.34px | 700 | 1.3 | 0em |
| headline | Inter | 50.52px | 700 | 1.5 | 0em |
| title | Inter | 37.9px | 700 | 1.5 | 0em |
| body | Inter | 16px | 400 | 2.25 | 0em |
| body-sm | Inter | 12px | 400 | 2.25 | 0em |
Type scale
Aa12Aa16Aa21.5Aa28.5Aa38Aa50.5Aa67.5
- Body size
- 16px / 2.25
- Display size
- 67.34px
- Display tracking
- 0em
- Case
- title
Color
light schemePalette by painted area
- Text on bg
- 19.73:1
- Muted on bg
- undefined:1
- Accent on bg
- 8.83:1
- Dark mode
- none
Declared accent tokens
- --accent#433BFFpainted
- --accentcontrast#FFDD00not on page
- --primary#2F27CEpainted
- --primarycontrast#64D97Bnot on page
Space, shape & depth
Spacing scale (base 4px)
- 3
- 6
- 8
- 10
- 16
- 17.5
- 20
- 21
- 24
- 29
- 32
- 40
- 48
- 80
Corner radii
4816pill
Shadows (0)
none
- Borders
- regular, 2px
- Section padding
- 128px
Components
exact computed valuesbutton-primary
Get Started
- backgroundColor
- #2F27CE
- textColor
- #FBFBFE
- rounded
- 8px
- padding
- 8px 32px
- height
- 52px
- fontFamily
- Inter
- fontSize
- 16px
- fontWeight
- 400
button-secondary
Templates
- textColor
- #050315
- rounded
- 10px
- padding
- 8px 11.2px
- height
- 38px
- fontFamily
- Inter
- fontSize
- 16px
- fontWeight
- 400
- border
- 1px solid #0000001A
card
- rounded
- 16px
- padding
- 16px
- backgroundColor
- #DDDBFF1A
Layout & motion
- Container
- 1094px
- Grid columns
- 5
- Hero
- split
- Navigation
- none-detected
- Page height
- 6,888px
- Easing
- ease
- Durations
- 100ms 200ms 300ms
- Transitions
- 48
- Keyframes
- 0
- Stack
- astro, google-tag-manager, vercel
Page sections (6)
section labels are heuristic
01heroVisualize Your & On a Real Site
02feature detail?Why Realtime Colors?
03pricing?300K+ Users
04faqTestimonials
05feature detail?Featured Articles
06footerYour Shouldn't End Here.
How Realtime Colors compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 67.3px: larger than 67% of indexed sites (median 60px).
- Type scale
- 1.33×: steeper than 65% of indexed sites (median 1.28×).
- Container
- 1094px: narrower than 76% of indexed sites (median 1242px).
- Text contrast
- 19.7:1: higher than 73% of indexed sites (median 17.6:1).
- Page length
- 6,888px: shorter than 63% 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%).
- 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 Realtime Colors use?
Realtime Colors uses Inter for headings and body text.
What are Realtime Colors's brand colors?
Realtime Colors's website uses a light scheme: background #FBFBFE, surface #DDDBFF33, text #050315.
How is Realtime Colors's website laid out?
The most common corner radius is 8px, body text is 16px with 2.25 line height, and the page container is 1094px wide.
