screenroveScreenrove / Design references
Cal.com design guide
A calm grey-and-white scheduler where the calendar itself is the interface.
Typography
Observed family: Cal Sans (marketing headings), Cal Sans UI Variable Light (marketing text), Inter (booking page). Font files are not distributed.
marketing: Light, card-on-canvas
- Canvas:
#f4f4f4 - Card:
#ffffff - Heading text:
#242424 - Body and nav text:
#292929 - Secondary text:
#898989 - Primary button gradient:
#292929 → #242424 - Secondary button gradient:
#f7f7f8 → #eaeaeb
Layout and components
- Every section is a white card with a 16px radius on a #f4f4f4 canvas, framed by thin vertical and horizontal guide lines with small plus marks at the joins.
- Centred section headers follow one pattern: a small pill badge ("How it works", "Benefits", "FAQ"), a 48px Cal Sans heading, one grey sentence, then a dark Get started and a light Book a demo button.
- The hero splits 50 / 50: headline, sign-up buttons and "No credit card required" on the left; a booking widget that bleeds off the card edge on the right, with review ratings under it.
- Primary button: 36px high, 12px radius, #292929 → #242424 vertical gradient, white 14px / 300 label, trailing chevron.
- Secondary button: same size and radius with a #f7f7f8 → #eaeaeb gradient and dark label.
- Feature cards: white, 16px radius, 24px padding, a monospace-style number chip (01, 02, 03), title, grey body and an illustration at the bottom.
- FAQ is a single-column accordion of rows with plus icons; the first row is open on the homepage.
product: Light, neutral booking surface
- Canvas:
lab(98.26 0 0) (≈ #fafafa, converted) - Card and slot fill:
#ffffff - Strong text:
#070a0d - Body text:
#3c3e44 - Muted text:
#6b7280 - Bookable day:
#e5e7eb - Selected day and Confirm:
#292929 - Input and slot border:
#d1d5db - App Store text and Install button:
lab(15.204 0 0) (≈ #262626, converted)
Layout and components
- The booking page is one bordered card centred on a light grey canvas: event details, month calendar and a scrolling slot column side by side; view and overlay controls float at the top right of the page.
- Week and column views go full-bleed: event details and a mini calendar move into a left rail and the calendar or day columns fill the rest.
- The App Store is a single column: title and search, then horizontally scrolling rows (category photo tiles, Most popular, Recently added) with arrow buttons; category pages switch to a three-column card grid.
- Day tile: 59 × 59px, 8px radius; bookable days #e5e7eb with 500 weight, the selected day #292929 with white text, today marked with a dot, unavailable days plain with 300 weight.
- Slot button: 36px high, 10px radius, 1px #d1d5db border, white fill, centred 14px / 500 time.
- Segmented toggles (15m / 30m, 12h / 24h, month / week / column) use a grey pill behind the active item; duration pills are 30px high with a 4px radius.
- Form: 32px inputs with 10px radius and 1px #d1d5db border, 14px / 500 labels with a required asterisk, a ghost Back and a dark Confirm button (32px, 10px radius).
Independent reference guide from browser captures and computed styles. Not an official brand guide. Values describe the captured desktop states; responsive rules below are implementation recommendations.
Download DESIGN.md