Typography
scale ratio 1.150- Geistdisplay + body400 500 60092%
- Hackcss: hackmono400 7006%
- SF Pro (system-ui)css: -apple-systemother400 600 7002%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Geist | 64px | 500 | 1.063 | -0.047em |
| headline | Geist | 16px | 600 | 1.25 | -0.125em |
| title | Geist | 32px | 500 | 1.25 | -0.062em |
| body | Geist | 12px | 400 | 1.4 | 0em |
| body-sm | Geist | 11px | 400 | 1.5 | 0em |
| label | Geist | 16px | 400 | 1.5 | 0em |
| mono | Hack | 12px | 400 | 1.5 | -0.02em |
Type scale
Aa6.5Aa7.5Aa8Aa9Aa10Aa11Aa12Aa13Aa14Aa15Aa16Aa20Aa24Aa32
- Body size
- 12px / 1.5
- Display size
- 64px
- Display tracking
- -0.047em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 18.93:1
- Muted on bg
- 9.01:1
- Accent on bg
- 5.97:1
- Dark mode
- none
Declared accent tokens
- --home-hero-github-accent#58A6FFpainted
- --background-color-cui-accent#FF570Apainted
- --background-color-cui-accent-strong#A35829painted
Space, shape & depth
Spacing scale
- 2
- 2.5
- 3
- 4
- 4.5
- 5
- 6
- 8
- 9
- 10
- 12
- 16
- 32
Corner radii
12468.5pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- 118px
Components
exact computed valuesbutton-primary
Get a free trial
- backgroundColor
- #FFFFFF
- textColor
- #121014
- rounded
- 4px
- padding
- 0px 14px
- height
- 36px
- fontFamily
- Geist
- fontSize
- 16px
- fontWeight
- 500
- border
- 1px solid #FFFFFF
button-secondary
Log In
- textColor
- #EFEDF0
- rounded
- 6px
- padding
- 0px 14px
- height
- 36px
- fontFamily
- Geist
- fontSize
- 16px
- fontWeight
- 600
- border
- 1px solid #322F37
card
- rounded
- 8.3px
- padding
- 8.9px
- backgroundColor
- #1A181D
- border
- 1px solid #27242B
input
- rounded
- 6px
- height
- 44px
- padding
- 6px 12px
- backgroundColor
- #232127
- border
- 1px solid #322F37
Layout & motion
- Container
- 1200px
- Grid columns
- 2
- Hero
- left-aligned
- Navigation
- none-detected
- Page height
- 10,335px
- Easing
- cubic-bezier(0, 0, 0.2, 1)
- Durations
- 150ms 180ms 200ms 300ms
- Transitions
- 214
- Keyframes
- 7
- Stack
- next.js, tailwind, shadcn/ui, hubspot, posthog, google-tag-manager, vercel
Page sections (12)
section labels are heuristic
01banner?
02hero. t i g n i w e i v e r It's The future isn't writing code.
03testimonialsAdd the invitation API and emails
04code sample?Faster chaos. Fast code.
05feature detail?Industry-leading AI code reviews.
06testimonials
07features?Prioritize your PR flood.
08code sample?Add the invitation API and emails
09features?Agentic code security monitoring.
10features?More ways to tame the chaos.
11cta?Raise the quality bar. Lower the review burden.
12footerSign up for our newsletter
How CodeRabbit compares
- Body text
- 12px: smaller than 96% of indexed sites (median 16px).
- Largest heading
- 64px: larger than 56% of indexed sites (median 60px).
- Type scale
- 1.15×: flatter than 96% of indexed sites (median 1.28×).
- Container
- 1200px: narrower than 57% of indexed sites (median 1242px).
- Text contrast
- 18.9:1: higher than 66% of indexed sites (median 17.6:1).
- Page length
- 10,335px: longer than 69% of indexed sites (median 8,217px).
- Corner radius
- Mostly 1px, shared by 1 of 274 indexed sites (0%).
- Geist
- One of 11 indexed sites that load Geist (4%).
- Hack
- The only site in the index that loads Hack.
- Color scheme
- Dark by default, like 25% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does CodeRabbit use?
CodeRabbit uses Geist for headings and body text. Hack (loaded as "hack") is used for code.
What are CodeRabbit's brand colors?
CodeRabbit's website uses a dark scheme: background #121014, surface #1A181D, text #FFFFFF, muted text #B5B2B9 and borders #232127.
How is CodeRabbit's website laid out?
The most common corner radius is 1px, body text is 12px with 1.5 line height, and the page container is 1200px wide.
