Design

Cosmos

cosmos.so6 componentscosmosOracleMulti-page · 12 screens

Your space for inspiration

Remix Visit

Remix

Visit

12 screenshots captured· cosmos.so

1 / 12 · Cosmos · 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 cosmos.so

Typography · cosmosOracleGoogle Fonts

body14px · 400 · 19.6px

input14px · 400 · 20.02px

button16px · 400 · 22.4px

button14px · 500 · 20.02px

body16px · 400 · 22.4px

body15px · 500 · 22px

button16px · 500 · 22.4px

h220px · 400 · 23px

link14px · 500 · 20.02px

h126px · 400 · 29.9px

link15px · 500 · 22px

body16px · 400 · 24px

button10px · 500 · 14px

h172px · 700 · 72px

h326px · 500 · 29.9px

body20px · 500 · 23px

link16px · 400 · 24px

input20px · 400 · 23px

display72px · 700 · 72px

display48px · 500 · 48px

display72px · 700 · 57.6px

body16px · 500 · 22.4px

caption12px · 500 · 14.04px

heading20px · 500 · 23px

button14px · 500 · 19.6px

button16px · 400 · 24px

button12px · 500 · 18px

h220px · 500 · 23px

body12px · 400 · 20px

button14px · 500 · 21px

input15px · 400 · 22px

caption10px · 400 · 11px

body26px · 400 · 29.9px

display58px · 400 · 58px

body16px · 500 · 24px

body14px · 500 · 19.6px

Spacing

4px

8px

16px

12px

24px

32px

20px

72px

Elevation

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.05) 0px 1px 8px 0px

rgba(255, 255, 255, 0.7) 0px 1px 1.5px 0px inset, rgba(0, 0, 0, 0.03) 0px -1px 1.5px 0px inset, 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) 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.02) 0px 2px 12px 0px, rgba(0, 0, 0, 0.1) 0px 4px 16px 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.05) 0px 3px 12px 0px

Components · 6

Remixes of Cosmos

Latest remixes

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

Remix it