Typography
scale ratio 1.303- Matter Fontcss: matterFontdisplay + body400 500 600100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Matter Font | 60px | 500 | 1 | -0.025em |
| headline | Matter Font | 36px | 500 | 1.111 | 0em |
| title | Matter Font | 24px | 600 | 1.167 | 0em |
| body | Matter Font | 16px | 400 | 1.25 | 0em |
| body-sm | Matter Font | 14px | 600 | 1.25 | 0em |
| label | Matter Font | 14px | 500 | 1.429 | 0em |
Type scale
Aa12Aa14Aa16Aa18Aa20Aa24Aa36Aa60
- Body size
- 16px / 1.5
- Display size
- 60px
- Display tracking
- -0.025em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 18.96:1
- Muted on bg
- 7.63:1
- Accent on bg
- 8.31:1
- Dark mode
- none
Declared accent tokens
- --color-pr-page-surface-accent#A5D6FFnot on page
- --brand-teal#2EEAD4not on page
- --brand-blue#04A9D7not on page
- --brand-orange#FF8833painted
Space, shape & depth
Spacing scale (base 8px)
- 2
- 4
- 8
- 12
- 13.5
- 16
- 24
- 32
- 48
- 141
Corner radii
4810pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- 64px
Components
exact computed valuesbutton-primary
Sign up
- backgroundColor
- #E5E5E5
- textColor
- #171717
- rounded
- 8px
- padding
- 8px 16px
- height
- 42px
- fontFamily
- Matter Font
- fontSize
- 14px
- 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
Request a demo
- backgroundColor
- #262626
- textColor
- #FAFAFA
- rounded
- 8px
- padding
- 0px 32px
- height
- 40px
- fontFamily
- Matter Font
- fontSize
- 14px
- fontWeight
- 500
- border
- 1px solid #404040
- 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
card
- rounded
- 8px
- padding
- 0px
- backgroundColor
- #0A0A0A
- border
- 1px solid #7777774D
- shadow
- rgba(101, 129, 128, 0.15) 0px 0px 2px 2px inset, rgba(32, 47, 46, 0.15) 0px 0px 4px 4px inset
Layout & motion
- Container
- 1158px
- Grid columns
- 3
- Hero
- split
- Navigation
- top-sticky+transparent
- Page height
- 8,966px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms 300ms 500ms
- Transitions
- 148
- Keyframes
- 7
- Stack
- next.js, tailwind, radix-ui, shadcn/ui, hubspot, google-tag-manager, vercel, cloudfront
Page sections (7)
section labels are heuristic
01logos
02heroThe next generation of code review.
04features?Everything you need to ship faster
05features?Developer infrastructure built for your team
06feature detail?everyone. for available now teams, engineering fastest world’s the for Built
07footerConnect
How Graphite compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 60px: larger than 48% of indexed sites (median 60px).
- Type scale
- 1.30×: steeper than 56% of indexed sites (median 1.28×).
- Container
- 1158px: narrower than 69% of indexed sites (median 1242px).
- Text contrast
- 19.0:1: higher than 67% of indexed sites (median 17.6:1).
- Page length
- 8,966px: longer than 58% of indexed sites (median 8,217px).
- Corner radius
- Mostly 8px, shared by 21 of 274 indexed sites (8%).
- Matter Font
- The only site in the index that loads Matter Font.
- 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 Graphite use?
Graphite uses Matter Font (loaded as "matterFont") for headings and body text.
What are Graphite's brand colors?
Graphite's website uses a dark scheme: background #0A0A0A, surface #171717, text #FAFAFA, muted text #A1A1A1 and borders #7777774D.
How is Graphite's website laid out?
The most common corner radius is 8px, body text is 16px with 1.5 line height, and the page container is 1158px wide.
