May 2025
2728293012345678910111213141516171819202122232425262728293031
Cal.com launches v6.7 ›
The better way to schedule your meetings.
A fully customizable scheduling system for individuals, businesses taking calls, and developers building scheduling platforms.
Marketing-page rhythm applied to the design token reference: off-white canvas, white product surface, near-black actions and compact utility type.
Color
Black, white and echelon grays form the product. Blue is functional and Google colors stay inside their integration mark.
Ink
#101010
Action Blue
#0099ff
White
#ffffff
Paper
#f4f4f4
Graphite
#242424
Slate
#6b7280
Stone
#898989
Silver
#e5e7eb
Info Banner
#eff6fe
Google Blue
#4285f4
Google Yellow
#fbbc04
Google Green
#34a853
Google Red
#ea4335
Typography
Cal Sans carries the headlines; the lighter UI face keeps product copy calm and clear.
Caption
Time zones are handled automatically.
Body small
Invite anyone and find a slot that works.
Body
Scheduling should feel simple, even when your week is full.
Subheading
Built for people who value their time.
Heading small
Clear availability
Heading
Meet when it matters.
Heading large
Make time work.
Display
Cal.
Spacing & shape
A compact 4px rhythm creates space without making the interface feel ornamental.
Surfaces
Paper establishes the page, white holds product interaction, and ink anchors the most decisive moments.
Shadows
Elevation is restrained and reserved for interactive product surfaces. These are the complete observed shadow tokens.
sm
subtle
sm-2
sm-3
sm-4
subtle-2
subtle-3
Components
Each control makes its purpose obvious before it adds personality.
Actions & fields
30 min
Google Calendar integration
Scheduling surface
Use with restraint
Make the scheduling decision easier; leave everything else quiet.
Do
- Use Cal Sans for headings and the UI face for reading text.
- Let monochrome hierarchy, spacing and product surfaces do the work.
- Use product fragments and integration marks as imagery.
Avoid
- Gradients, broad decorative color and sharp corners.
- Heavy borders on cards or type weights above 600.
- Lifestyle imagery and display type for paragraph copy.