Replicate

replicate.com12 colors5 componentsbasier-squareMulti-page · 12 screens

Run open-source machine learning models with a cloud API

Remix Visit

Remix

Visit

12 screenshots captured· replicate.com

1 / 12 · Replicate - Run AI with an API · Above the fold

Preview

the generated design system

Switch between the Visual preview, the rendered DESIGN.md and the Raw file.

Design tokens

Extracted from replicate.com

Primary

#000000

Primary CTA, brand accent, active state

#EA2804

Accent / decorative

#5472E4

Accent / decorative

Neutral

#111111

Default page background

#FFFFFF

Alternating section band; Headings / primary text

#EEEEEE

Body copy; label colour on brand surfaces

#D1D5DB

Captions, secondary text

#B4B4B4

Tertiary / placeholder text

#222222

1px borders and dividers

#7B7B7B

Neutral

#646464

Neutral

Semantic

#DD4425

Error

Typography · basier-square

body14px · 600 · 20px

body16px · 400 · 24px

body20px · 400 · 28px

body16px · 600 · 24px

caption12px · 400 · 16px

link14px · 400 · 20px

list-item14px · 400 · 28px

body14px · 400 · 20px

link16px · 400 · 24px

body18px · 400 · 28px

h318px · 600 · 28px

body16px · 500 · 28px

h124px · 400 · 32px

heading28.8px · 400 · 32px

body18px · 600 · 28px

body14px · 600 · 20px

body14px · 400 · 20px

h316px · 600 · 24px

body14px · 700 · 20px

h272px · 700 · 72px

button18px · 400 · 28px

label14px · 500 · 20px

display48px · 700 · 48px

body13px · 400 · 19.5px

input14px · 400 · 20px

Typography · jetbrains-mono

code10px · 400 · 15px

code14px · 400 · 20px

code11px · 400 · 16.5px

code12px · 400 · 19.5px

code10px · 600 · 15px

code10px · 700 · 16px

Typography · rb-freigeist-neue

h136px · 600 · 45px

h224px · 600 · 32px

h272px · 700 · 72px

h330px · 600 · 36px

display128px · 700 · 128px

body16px · 600 · 24px

display48px · 400 · 48px

h424px · 400 · 32px

body24px · 600 · 32px

button14px · 600 · 20px

button18px · 600 · 28px

h236px · 400 · 40px

Spacing

8px

16px

4px

64px

32px

12px

24px

96px

Elevation

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(228, 199, 103) 0px 1px 2px 0px

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) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px

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) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px

Components · 5

Remixes of Replicate

Latest remixes

No public remixes yet. Be the first to make one.

Remix it