Typography
scale ratio 1.456- Geistcss: GeistSansbody400 500 60043%
- Season Mixcss: seasonMixdisplay40042%
- Geist Monocss: GeistMonomono400 500 60010%
- SF Pro (system-ui)css: -apple-systemother4003%
- Geist Pixel Linecss: GeistPixelLineother4002%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Season Mix | 72px | 400 | 1 | -0.025em |
| headline | Season Mix | 48px | 400 | 1 | 0em |
| title | Season Mix | 24px | 400 | 1.333 | 0em |
| body | Geist | 16px | 400 | 1.5 | 0em |
| body-sm | Geist | 14px | 400 | 1.429 | 0em |
| mono | Geist Mono | 10.2px | 400 | 1.333 | 0em |
Type scale
Aa10Aa12Aa14Aa16Aa18Aa24Aa48Aa72
- Body size
- 16px / 1.5
- Display size
- 72px
- Display tracking
- -0.025em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 17.73:1
- Muted on bg
- 11.13:1
- Accent on bg
- 3.57:1
- Dark mode
- none
Declared accent tokens
- --brand-accent#3A3166not on page
- --color-brand-accent#3A3166not on page
- --brand#735ADCpainted
- --color-brand#735ADCpainted
Space, shape & depth
Spacing scale (base 8px)
- 4
- 6
- 8
- 10
- 12
- 16
- 20
- 24
- 32
- 64
- 80
Corner radii
pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- 65px
Components
exact computed valuesbutton-primary
Get started
- backgroundColor
- #E4E4E7
- textColor
- #18181B
- rounded
- 0px
- padding
- 0px 10px
- height
- 36px
- fontFamily
- Geist
- fontSize
- 14px
- fontWeight
- 500
- border
- 1px solid #E4E4E7
- 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, lab(100 0 0 / 0.1)
button-secondary
Star on GitHub
- textColor
- #FAFAFA
- rounded
- 0px
- padding
- 0px 10px
- height
- 36px
- fontFamily
- Geist
- fontSize
- 14px
- fontWeight
- 500
- border
- 1px solid #FAFAFA
Layout & motion
- Container
- 1280px
- Grid columns
- 3
- Hero
- left-aligned
- Navigation
- none-detected
- Page height
- 7,480px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 300ms 500ms 800ms
- Transitions
- 78
- Keyframes
- 4
- Stack
- next.js, tailwind, radix-ui, shadcn/ui, google-tag-manager, vercel
Page sections (11)
section labels are heuristic
01heroThe Postgres for workloads
02testimonialsWork in parallel
03features?Clone any Postgres database in seconds
04features?Removed when it ends.
05features?Adopt Xata without moving production.
06features?Production-ready Postgres
07code sample?How much does a hundred pull requests cost?
08features?Add branch-native Postgres to your product
09testimonialsUsed by builders, engineers, and leaders worldwide
10cta?Branch in seconds.
11footerCompany
How Xata compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 72px: larger than 70% of indexed sites (median 60px).
- Type scale
- 1.46×: steeper than 85% of indexed sites (median 1.28×).
- Container
- 1280px: wider than 55% of indexed sites (median 1242px).
- Text contrast
- 17.7:1: higher than 51% of indexed sites (median 17.6:1).
- Page length
- 7,480px: shorter than 58% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Geist
- One of 11 indexed sites that load Geist (4%).
- Season Mix
- The only site in the index that loads Season Mix.
- 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 Xata use?
Xata uses Geist (loaded as "GeistSans") for body text. Season Mix (loaded as "seasonMix") is used for headings. Geist Mono (loaded as "GeistMono") is used for code.
What are Xata's brand colors?
Xata's website uses a dark scheme: background #18181B, surface #27272A, text #FAFAFA, muted text #FAFAFACC and borders #FFFFFF1A.
How is Xata's website laid out?
The most common corner radius is 0px, body text is 16px with 1.5 line height, and the page container is 1280px wide.
