Typography
scale ratio 1.278- Baselcss: __basel_e55247display + body400 500100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Basel | 48px | 500 | 1.083 | -0.015em |
| headline | Basel | 42px | 500 | 1.143 | -0.036em |
| body | Basel | 18px | 400 | 1.444 | 0.014em |
| label | Basel | 15px | 400 | 1.467 | 0.017em |
Type scale
Aa12Aa15Aa16Aa18Aa24Aa30Aa42Aa48
- Body size
- 18px / 1.444
- Display size
- 48px
- Display tracking
- -0.015em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- 8.52:1
- Accent on bg
- 1.93:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 8px)
- 2
- 4
- 8
- 12
- 16
- 24
- 32
- 48
- 60
- 64
- 80
Corner radii
4581248
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 120px
Components
exact computed valuesbutton-primary
See Rippling
- backgroundColor
- #FFA81D
- textColor
- #000000
- rounded
- 4px
- padding
- 16px 24px
- height
- 54px
- fontFamily
- Basel
- fontSize
- 15px
- fontWeight
- 500
button-secondary
Log in
- textColor
- #000000B3
- rounded
- 0px
- padding
- 0px 0px
- height
- 40px
- fontFamily
- Basel
- fontSize
- 15px
- fontWeight
- 500
- border
- 1px solid #E5E7EB
card
- rounded
- 12px
- padding
- 0px
- backgroundColor
- #F2EEEB
Layout & motion
- Container
- 1320px
- Grid columns
- 2
- Hero
- split
- Navigation
- none-detected
- Page height
- 8,403px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 300ms 500ms
- Transitions
- 48
- Keyframes
- 1
- Stack
- next.js, tailwind, contentful, google-tag-manager, vercel
Page sections (7)
section labels are heuristic
01heroManage your entire workforce on one system
02feature detail?Start with the apps you need, or run them all together
03feature detail?Rippling is the operating system for your entire workforce
04feature detail?When everything runs on one system, work moves faster
05feature detail?What’s new at Rippling
06features?Get a demo—live or on demand
07logosRequest a demo to see Rippling in action
How Rippling 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.28×: flatter than 52% of indexed sites (median 1.28×).
- Container
- 1320px: wider than 77% of indexed sites (median 1242px).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 8,403px: longer than 52% of indexed sites (median 8,217px).
- Corner radius
- Mostly 4px, shared by 24 of 274 indexed sites (9%).
- Basel
- The only site in the index that loads Basel.
- 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 Rippling use?
Rippling uses Basel (loaded as "__basel_e55247") for headings and body text.
What are Rippling's brand colors?
Rippling's website uses a light scheme: background #FFFFFF, surface #F2EEEB, text #000000, muted text #000000B3 and borders #CEC1B8.
How is Rippling's website laid out?
The most common corner radius is 4px, body text is 18px with 1.444 line height, and the page container is 1320px wide.
