Typography
scale ratio 1.246- SF Pro (system-ui)css: ui-sans-serifbody300 400 500 600 70059%
- Obviouslydisplay300 70033%
- Menlocss: ui-monospacemono300 4006%
- Interother200 4002%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Obviously | 48px | 700 | 1.1 | 0em |
| headline | Obviously | 36px | 300 | 1.111 | 0em |
| body | SF Pro (system-ui) | 16px | 300 | 1.5 | 0em |
| body-sm | Menlo | 13.6px | 400 | 1.65 | 0em |
Type scale
Aa12Aa13.5Aa14Aa16Aa18Aa20Aa30Aa36Aa48
- Body size
- 16px / 1.5
- Display size
- 48px
- Display tracking
- 0em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 19.88:1
- Muted on bg
- 11.06:1
- Accent on bg
- 19.88:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 8px)
- 3
- 4
- 8
- 12
- 16
- 20
- 21.5
- 24
- 32
- 48
- 80
Corner radii
81216pill
Shadows (2)
- Borders
- hairline, 1px
- Section padding
- 147px
Components
exact computed valuesbutton-primary
Get Started
- backgroundColor
- #FFFFFF
- textColor
- #00000000
- rounded
- 9999px
- padding
- 8px 16px
- height
- 42px
- fontFamily
- SF Pro (system-ui)
- fontSize
- 16px
- fontWeight
- 400
button-secondary
Integrate your favorite framew
- textColor
- #BFC1C9
- rounded
- 9999px
- padding
- 8px 16px
- height
- 42px
- fontFamily
- SF Pro (system-ui)
- fontSize
- 16px
- fontWeight
- 400
- border
- 1px solid #858B984D
card
- rounded
- 16px
- padding
- 0px
- backgroundColor
- #0C0F19
- border
- 1px solid #858B9833
input
- rounded
- 8px
- height
- 40px
- padding
- 4px 12px
- backgroundColor
- #060913
- border
- 1px solid #23262D
Layout & motion
- Container
- 1280px
- Grid columns
- 2
- Hero
- centered-over-media
- Navigation
- top-static+transparent
- Page height
- 8,870px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 300ms 500ms 1500ms
- Transitions
- 104
- Keyframes
- 1
- Stack
- astro, tailwind, mintlify, cloudflare
Page sections (11)
section labels are heuristic
01nav
02heroThe web framework for content-driven websites
03features?Customizable
04logosAstro Islands
05code sample?Snapback Cap
06features?Fully Featured
07gallery?Themes
08features?Get professional Astro support
09feature detail?Start building with Astro today
10feature detail?Astro is free, open-source software made possible by these wonderful sponsors
11footerLegal
How Astro compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 48px: smaller than 68% of indexed sites (median 60px).
- Type scale
- 1.25×: flatter than 63% of indexed sites (median 1.28×).
- Container
- 1280px: wider than 55% of indexed sites (median 1242px).
- Text contrast
- 19.9:1: higher than 75% of indexed sites (median 17.6:1).
- Page length
- 8,870px: longer than 58% of indexed sites (median 8,217px).
- Corner radius
- Mostly 16px, shared by 11 of 274 indexed sites (4%).
- Obviously
- The only site in the index that loads Obviously.
- Inter
- One of 58 indexed sites that load Inter (21%).
- 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 Astro use?
Astro uses SF Pro (system-ui) (loaded as "ui-sans-serif") for body text. Obviously is used for headings. Inter is used for other.
What are Astro's brand colors?
Astro's website uses a dark scheme: background #060913, surface #0C0F19, text #FFFFFF, muted text #BFC1C9 and borders #858B9833.
How is Astro's website laid out?
The most common corner radius is 16px, body text is 16px with 1.5 line height, and the page container is 1280px wide.
