Typography
scale ratio 1.456- Cosmos Oraclecss: cosmosOracledisplay + body400 500 700100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Cosmos Oracle | 72px | 700 | 1 | -0.04em |
| headline | Cosmos Oracle | 48px | 500 | 1 | -0.04em |
| title | Cosmos Oracle | 26px | 500 | 1.15 | -0.04em |
| body | Cosmos Oracle | 16px | 400 | 1.4 | -0.125em |
| body-sm | Cosmos Oracle | 14px | 400 | 1.4 | -0.143em |
Type scale
Aa14Aa15Aa16Aa20Aa26Aa48Aa72
- Body size
- 16px / 1.4
- Display size
- 72px
- Display tracking
- -0.04em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 19.43:1
- Muted on bg
- 5.35:1
- Accent on bg
- 19.43:1
- Dark mode
- none
Declared accent tokens
- --color-button-accent#0700FFnot on page
- --background-color-button-accent#0700FFnot on page
Space, shape & depth
Spacing scale (base 4px)
- 2
- 3
- 4
- 6
- 8
- 10
- 12
- 16
- 20
- 24
- 32
- 80
Corner radii
121625pill
Shadows (4)
- Borders
- hairline, 1px
- Section padding
- 128px
Components
exact computed valuesbutton-primary
- backgroundColor
- #0D0D0D
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 16px 24px
- height
- 48px
- fontFamily
- cosmosOracle
- fontSize
- 15px
- fontWeight
- 500
button-secondary
- textColor
- #0D0D0D
- rounded
- 9999px
- padding
- 0px 0px
- height
- 64px
- fontFamily
- cosmosOracle
- fontSize
- 15px
- fontWeight
- 500
- border
- 1px solid #0D0D0D1F
card
- rounded
- 16px
- padding
- 0px
- backgroundColor
- #FFFFFF
- border
- 1px solid #0D0D0D1F
- 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
input
- rounded
- 0px
- height
- 24px
- padding
- 0px 0px
Layout & motion
- Container
- 1376px
- Grid columns
- 3
- Hero
- centered-over-media
- Navigation
- top-sticky+transparent
- Page height
- 3,661px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms 400ms 700ms
- Transitions
- 78
- Keyframes
- 5
- Stack
- next.js, tailwind, cloudfront
Page sections (6)
01nav
02herolamp with character Find your next
03featuresBuild your world, your way
04logosShop from brands like
05logosFind what others are saving
06footerDiscover what’s next
How Cosmos 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
- 1376px: wider than 96% of indexed sites (median 1242px).
- Text contrast
- 19.4:1: higher than 69% of indexed sites (median 17.6:1).
- Page length
- 3,661px: shorter than 84% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Cosmos Oracle
- The only site in the index that loads Cosmos Oracle.
- 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 Cosmos use?
Cosmos uses Cosmos Oracle (loaded as "cosmosOracle") for headings and body text.
What are Cosmos's brand colors?
Cosmos's website uses a light scheme: background #FFFFFF, surface #F7F5F3, text #0D0D0D, muted text #6E6A69 and borders #0D0D0D1F.
How is Cosmos's website laid out?
The most common corner radius is fully rounded (pill), body text is 16px with 1.4 line height, and the page container is 1376px wide.
