Productivity

Cal.com

cal.com13 colors6 componentsCal Sans UI Variable LightMulti-page · 12 screens

A fully customizable scheduling software for individuals, businesses taking calls and developers building scheduling platforms where users meet users.

Remix Visit

Remix

Visit

12 screenshots captured· cal.com

1 / 12 · Cal.com | Scheduling Software for Online Bookings · 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 cal.com

Primary

#0D0D0F

Primary CTA, brand accent, active state

#0000EE

Inline link colour

#0099FF

Accent / decorative

#9CA3AF

Accent / decorative

#6B7280

Accent / decorative

Neutral

#F4F4F4

Default page background

#000000

Headings / primary text

#242424

Body copy

#374151

Captions, secondary text

#858585

Tertiary / placeholder text

#9F9F9F

Label colour on brand surfaces

#FFFFFF

Neutral

#DFDFDF

Neutral

Typography · Cal Sans UI Variable LightGoogle Fonts

body14px · 300 · 19.6px

body14px · 300 · 21px

caption12px · 300 · 12px

body16px · 300 · 24px

body18px · 300 · 27px

body16px · 300 · 24px

h318px · 300 · 23.4px

link16px · 300 · 24px

heading18px · 300 · 23.4px

body18px · 300 · 27px

body13px · 300 · 18.2px

Typography · Cal SansGoogle Fonts

h248px · 600 · 52.8px

h164px · 600 · 70.4px

body24px · 600 · 31.2px

h332px · 600 · 38.4px

body20px · 600 · 20px

heading12px · 600 · 18px

body20px · 400 · 24px

body20px · 600 · 30px

heading16px · 600 · 19.2px

display48px · 900 · 52.8px

h157px · 600 · 62.7px

display57px · 900 · 62.7px

Typography · InterGoogle Fonts

body14px · 500 · 16px

caption12px · 500 · 12px

body16px · 600 · 16px

body16px · 400 · 28px

body14px · 600 · 20px

caption9.71px · 500 · 13.88px

caption9.71px · 400 · 11.1px

h136px · 600 · 40px

h224px · 600 · 31.9999px

h320px · 600 · 28px

body18px · 400 · 28px

link14px · 400 · 24px

input14px · 400 · 20px

caption14px · 400 · 16px

button12px · 600 · 16px

Typography · CUSTOMV2;Cal Sans UI RegularGoogle Fonts

body14px · 400 · 21px

Typography · Matter MediumGoogle Fonts

body14px · 400 · 21px

Typography · Matter RegularGoogle Fonts

body14px · 400 · 21px

caption10px · 400 · 14px

caption12px · 400 · 18px

caption8px · 400 · 8px

Typography · Roboto MonoGoogle Fonts

code14px · 600 · 14px

Typography · Matter SemiBoldGoogle Fonts

heading14px · 400 · 18.2px

Typography · Cal Sans UI RegularGoogle Fonts

caption11px · 400 · 15.4px

Typography · paperMonoGoogle Fonts

code14px · 500 · 21px

code14px · 400 · 24px

Spacing

4px

12px

8px

16px

20px

48px

24px

32px

Elevation

rgba(0, 0, 0, 0.15) 0px 4px 12px 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, oklab(0.431624 0.000476062 -0.00154915 / 0.3) 0px 0px 0px 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, oklab(0.367679 0.0000168085 0.00000736117 / 0.25) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 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, rgb(0, 0, 0) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.45) 0px 0.5px 1px 0px, rgba(0, 0, 0, 0.35) 0px 1px 2px 0px, rgba(255, 255, 255, 0.14) 0px 0.5px 0px 0px inset

Components · 6

Remixes of Cal.com

Latest remixes

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

Remix it