Typography
scale ratio 1.583- Inter Variablecss: InterVariablebody400 500 60070%
- GT Alpina Condensedcss: GT-Alpina-Condenseddisplay70030%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | GT Alpina Condensed | 88px | 700 | 0.95 | 0em |
| headline | GT Alpina Condensed | 48px | 700 | 1.05 | 0em |
| title | Inter Variable | 14px | 500 | 1.857 | 0em |
| body | Inter Variable | 14px | 400 | 1.714 | 0em |
| body-sm | Inter Variable | 12px | 400 | 1.333 | 0em |
Type scale
Aa10Aa11Aa12Aa14Aa16Aa18Aa48Aa88
- Body size
- 14px / 1.857
- Display size
- 88px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 18.35:1
- Muted on bg
- 8.81:1
- Accent on bg
- 3.45:1
- Dark mode
- none
Declared accent tokens
- --color-brand-orange#F54320painted
- --color-brand-neon-green#B9FF78painted
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 6
- 8
- 10
- 12
- 16
- 20
- 24
- 32
- 40
- 48
- 64
- 80
Corner radii
46812pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- 96px
Components
exact computed valuesbutton-primary
Try SavvyCal risk-free
- backgroundColor
- #F54320
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 10px 20px
- height
- 46px
- fontFamily
- Inter Variable
- fontSize
- 14px
- fontWeight
- 500
card
- rounded
- 6px
- padding
- 8px
- backgroundColor
- #F4EBDAB3
Layout & motion
- Container
- 1280px
- Grid columns
- 2
- Hero
- left-over-media
- Navigation
- top-sticky+transparent
- Page height
- 8,310px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms
- Transitions
- 20
- Keyframes
- 0
- Stack
- react, tailwind, shadcn/ui
Page sections (8)
section labels are heuristic
02nav
03feature detail?Leave a lasting impression
04feature detail?Defend your focus time
05features?Get paid, and skip the busy work
06testimonialsHosts love it. Their guests do too.
07feature detail?Scheduling, in plain English
08faqQuestions, answered
How SavvyCal compares
- Body text
- 14px: smaller than 82% of indexed sites (median 16px).
- Largest heading
- 88px: larger than 86% of indexed sites (median 60px).
- Type scale
- 1.58×: steeper than 92% of indexed sites (median 1.28×).
- Container
- 1280px: wider than 55% of indexed sites (median 1242px).
- Text contrast
- 18.4:1: higher than 57% of indexed sites (median 17.6:1).
- Page length
- 8,310px: longer than 50% of indexed sites (median 8,217px).
- Corner radius
- Mostly 6px, shared by 14 of 274 indexed sites (5%).
- Inter Variable
- One of 2 indexed sites that load Inter Variable (1%).
- GT Alpina Condensed
- The only site in the index that loads GT Alpina Condensed.
- 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 SavvyCal use?
SavvyCal uses Inter Variable (loaded as "InterVariable") for body text. GT Alpina Condensed (loaded as "GT-Alpina-Condensed") is used for headings.
What are SavvyCal's brand colors?
SavvyCal's website uses a light scheme: background #FCF7ED, surface #F4EBDA, text #0C0C09, muted text #474739 and borders #0C0C091A.
How is SavvyCal's website laid out?
The most common corner radius is 6px, body text is 14px with 1.857 line height, and the page container is 1280px wide.
