Typography
scale ratio 1.264- Basier Squarecss: basier-squarebody400 60049%
- Rb Freigeist Neuecss: rb-freigeist-neuedisplay400 600 70033%
- Jetbrains Monocss: jetbrains-monomono40018%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Basier Square | 24px | 400 | 1.333 | 0em |
| headline | Rb Freigeist Neue | 48px | 400 | 1 | 0em |
| title | Rb Freigeist Neue | 30px | 600 | 1.2 | 0em |
| body | Basier Square | 14px | 400 | 1.429 | 0em |
| body-sm | Basier Square | 12px | 400 | 1.333 | 0em |
| label | Basier Square | 16px | 400 | 1.5 | 0em |
| mono | Jetbrains Mono | 14px | 400 | 1.429 | 0em |
Type scale
Aa11Aa12Aa14Aa16Aa18Aa20Aa24Aa30Aa48Aa72
- Body size
- 14px / 1.429
- Display size
- 24px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 15.88:1
- Muted on bg
- 5.77:1
- Accent on bg
- 4.26:1
- Dark mode
- follows system
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 6
- 8
- 12
- 16
- 24
- 32
- 64
Corner radii
2pill
Shadows (2)
- Borders
- hairline, 1px
- Section padding
- 96px
Components
exact computed valuesbutton-primary
Get started for free
- backgroundColor
- #000000
- textColor
- #FFFFFF
- rounded
- 0px
- padding
- 12px 16px
- height
- 54px
- fontFamily
- Basier Square
- fontSize
- 18px
- fontWeight
- 400
- border
- 1px solid #000000
button-secondary
Node
- textColor
- #202020
- rounded
- 0px
- padding
- 10px 8px
- height
- 42px
- fontFamily
- Basier Square
- fontSize
- 14px
- fontWeight
- 400
- border
- 2px solid #00000000
input
- rounded
- 0px
- height
- 34px
- padding
- 6px 56px
- backgroundColor
- #FFFFFF1A
Layout & motion
- Container
- 672px
- Grid columns
- 5
- Hero
- left-over-media+media-below
- Navigation
- top-static+transparent
- Page height
- 7,878px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms 500ms 1000ms
- Transitions
- 20
- Keyframes
- 1
- Stack
- tailwind, google-tag-manager, cloudflare
Page sections (5)
01heroRun and fine-tune models. Deploy custom models. All with one line of code.
02logosThousands of models contributed by our community
03code sampleHow it works
04logosScale on Replicate
05footer
How Replicate compares
- Body text
- 14px: smaller than 82% of indexed sites (median 16px).
- Largest heading
- 24px: smaller than 92% of indexed sites (median 60px).
- Type scale
- 1.26×: flatter than 58% of indexed sites (median 1.28×).
- Container
- 672px: narrower than 96% of indexed sites (median 1242px).
- Text contrast
- 15.9:1: lower than 68% of indexed sites (median 17.6:1).
- Page length
- 7,878px: shorter than 53% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Basier Square
- The only site in the index that loads Basier Square.
- Rb Freigeist Neue
- The only site in the index that loads Rb Freigeist Neue.
- Color scheme
- Light by default, like 75% of indexed sites. It is one of 49 sites (18%) that switch with the system dark mode setting.
In short
What font does Replicate use?
Replicate uses Basier Square (loaded as "basier-square") for body text. Rb Freigeist Neue (loaded as "rb-freigeist-neue") is used for headings. Jetbrains Mono (loaded as "jetbrains-mono") is used for code.
What are Replicate's brand colors?
Replicate's website uses a light scheme: background #FCFCFC, text #202020, muted text #646464 and borders #202020.
How is Replicate's website laid out?
The most common corner radius is 0px, body text is 14px with 1.429 line height, and the page container is 672px wide.
