cal.com

An almost entirely achromatic scheduling landing page that gets its warmth from paper, not pigment: a #f4f4f4 ground, white panels floating on it at a 12px radius with a wide, nearly invisible shadow, and ink that runs from #181818 down through #6e6e6e to #b3b3b3. Faint hairline rules run the full height of the page at the content column's edges and cross a second horizontal rule at a small drafting crosshair, which is the one gesture that turns a soft SaaS page into something that reads as measured and engineered. Type does all the shouting — Cal Sans at 64px/70.4px and weight 600 above a body face that is genuinely light, weight 300 at 16px/24px — so the hierarchy is a weight jump rather than a color or size jump. The hero is a working booking widget rather than a screenshot, and it is the only place on the page where color exists at all: a lilac event block, a purple @mention, the borrowed green and orange of third-party rating badges. Everything else is gray, which makes the single near-black CTA pill the loudest object on a 1440px canvas.

Build on a light neutral ground, #f4f4f4, and put every block of content inside a pure white panel at 12px radius with a very wide, very low-opacity shadow — depth by diffusion, never by a visible edge. Keep the palette strictly achromatic: ink #181818, secondary #6e6e6e, tertiary #919192, disabled #b3b3b3, hairlines #d3d4d4. Allow no hue in the chrome at all; the only color permitted anywhere is inside a product mock or a third-party logo, and that restriction is the style.

Set headings in a geometric humanist sans at weight 600 with a tight 1.1 line-height — 64px/70.4px for h1, 48px/52.8px for h2 — and set body in the light optical cut of the same family, weight 300, 16px/24px. Eyebrows and captions run 12px. Never bump size or color to create hierarchy; move the weight from 300 to 600 and let the stroke contrast carry it. Sub-labels take 18px/23.4px at weight 300 with -0.2px tracking.

Radii form a short ladder and nothing between: 2px and 4px on inner chrome (cells, toggles, segmented controls), 6px on small tiles, 12px on the large raised panels, 9999px on every button and chip, 100% on avatars. Buttons are pills only. Primary is a solid #181818 fill with white text; secondary is #f5f5f5 with #292929 text and a 0px border; both stack full-width in the text column rather than sitting side by side, with a 12px muted reassurance line beneath. Chips are 24px tall with asymmetric padding (4px 8px 4px 12px) when they carry a trailing chevron.

Draw a 1px #d3d4d4 hairline down each edge of the content column for the full scroll length, cross it with a horizontal hairline at every section boundary, and stamp a small + at the intersections. This is the one move that makes the style recognizable — it costs almost nothing and turns soft rounded cards into a measured drawing.

Rhythm: one full-bleed panel per idea with generous internal padding, a centered eyebrow pill above each section headline, and a centered Get started / Book a demo pair under it. For social proof use a three-column masonry of variable-height white cards, each with a circular avatar carrying a small source badge overlapping its bottom-right. Make the header chromeless over the first screen and condense it on scroll into a detached white rounded bar inset from both edges. Motion stays at the level of hover tints and the header's condense — nothing on the page should slide, parallax or bounce.