Hermes Agent — Implementation Notes
The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes: - Primary:
Inter| Mono:Roboto Mono- Font stack (CSS):font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;- Mono stack (CSS):font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;html <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500;700&display=swap" rel="stylesheet">Usewrite_fileto create HTML, serve viagenerative-widgetsskill (cloudflared tunnel). Verify visual accuracy withbrowser_visionafter generating.
Cal.com's website is a masterclass in monochromatic restraint — a grayscale world where boldness comes not from color but from the sheer confidence of black text on white space. Inspired by Uber's minimal aesthetic, the palette is deliberately stripped of hue: near-black headings (#242424), mid-gray secondary text (#898989), and pure white surfaces. Color is treated as a foreign substance — when it appears (a rare blue link, a green trust badge), it feels like a controlled accent in an otherwise black-and-white photograph.
Cal Sans, the brand's custom geometric display typeface designed by Mark Davis, is the visual centerpiece. Letters are intentionally spaced extremely close at large sizes, creating dense, architectural headlines that feel like they're carved into the page. At 64px and 48px, Cal Sans headings sit at weight 600 with a tight 1.10 line-height — confident, compressed, and immediately recognizable. For body text, the system switches to Inter, providing "rock-solid" readability that complements Cal Sans's display personality. The typography pairing creates a clear division: Cal Sans speaks, Inter explains.
The elevation system is notably sophisticated for a minimal site — 11 shadow definitions create a nuanced depth hierarchy using multi-layered shadows that combine ring borders (0px 0px 0px 1px), soft diffused shadows, and inset highlights. This shadow-first approach to depth (rather than border-first) gives surfaces a subtle three-dimensionality that feels modern and polished. Built on Framer with a border-radius scale from 2px to 9999px (pill), Cal.com balances geometric precision with soft, rounded interactive elements.
Key Characteristics: - Purely grayscale brand palette — no brand colors, boldness through monochrome - Cal Sans custom geometric display font with extremely tight default letter-spacing - Multi-layered shadow system (11 definitions) with ring borders + diffused shadows + inset highlights - Cal Sans for headings, Inter for body — clean typographic division - Wide border-radius scale from 2px to 9999px (pill) — versatile rounding - White canvas with near-black (#242424) text — maximum contrast, zero decoration - Product screenshots as primary visual content — the scheduling UI sells itself - Built on Framer platform
#242424): Primary heading and button text — Cal.com's signature near-black, warmer than pure black#111111): Deepest text/overlay color — used at 50% opacity for subtle overlays#ffffff): Primary background and surface — the dominant canvas#0099ff): In-text links with underline decoration — the only blue in the system, reserved strictly for hyperlinks#3b82f6 at 50% opacity): Keyboard focus indicator — accessibility-only, invisible in normal interaction#0000ee): Browser-default link color on some elements — unmodified, signaling openness#ffffff): Primary page background and card surfaces#f5f5f5): Subtle section differentiation — barely visible tint#898989): Secondary text, descriptions, and muted labels#242424): Headlines, buttons, primary UI text#111111): Deep black for high-contrast links and nav text#898989): Descriptions, secondary labels, muted content#000000): Certain link text elementsrgba(34, 42, 53, 0.08–0.10)): Shadow-based borders using ring shadows instead of CSS bordersCal Sans — custom geometric sans-serif by Mark Davis. Open-source, available on Google Fonts and GitHub. Extremely tight default letter-spacing designed for large headlines. Has 6 character variants (Cc, j, t, u, 0, 1)Inter — "rock-solid" standard body font. Fallback: Inter PlaceholderCal Sans UI Variable Light — light-weight variant (300) for softer UI text with -0.2px letter-spacingCal Sans UI Medium — medium-weight variant (500) for emphasized captionsRoboto Mono — for code blocks and technical contentMatter Regular / Matter SemiBold / Matter Medium — additional body fonts for specific contexts| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Hero | Cal Sans | 64px | 600 | 1.10 | 0px | Maximum impact, tight default spacing |
| Section Heading | Cal Sans | 48px | 600 | 1.10 | 0px | Large section titles |
| Feature Heading | Cal Sans | 24px | 600 | 1.30 | 0px | Feature block headlines |
| Sub-heading | Cal Sans | 20px | 600 | 1.20 | +0.2px | Positive spacing for readability at smaller size |
| Sub-heading Alt | Cal Sans | 20px | 600 | 1.50 | 0px | Relaxed line-height variant |
| Card Title | Cal Sans | 16px | 600 | 1.10 | 0px | Smallest Cal Sans usage |
| Caption Label | Cal Sans | 12px | 600 | 1.50 | 0px | Small labels in Cal Sans |
| Body Light | Cal Sans UI Light | 18px | 300 | 1.30 | -0.2px | Light-weight body intro text |
| Body Light Standard | Cal Sans UI Light | 16px | 300 | 1.50 | -0.2px | Light-weight body text |
| Caption Light | Cal Sans UI Light | 14px | 300 | 1.40–1.50 | -0.2 to -0.28px | Light captions and descriptions |
| UI Label | Inter | 16px | 600 | 1.00 | 0px | UI buttons and nav labels |
| Caption Inter | Inter | 14px | 500 | 1.14 | 0px | Small UI text |
| Micro | Inter | 12px | 500 | 1.00 | 0px | Smallest Inter text |
| Code | Roboto Mono | 14px | 600 | 1.00 | 0px | Code snippets, technical text |
| Body Matter | Matter Regular | 14px | 400 | 1.14 | 0px | Alternate body text (product UI) |
#242424 (or #1e1f23) background, white text, 6–8px radius. Hover: opacity reduction to 0.7. The signature CTA — maximally dark on whitergba(255, 255, 255, 0.15) 0px 2px 0px inset — a subtle inner-top highlight creating a 3D pressed effectrgba(19, 19, 22, 0.7) 0px 1px 5px -4px, rgba(34, 42, 53, 0.08) 0px 0px 0px 1px, rgba(34, 42, 53, 0.05) 0px 4px 8px 0px. The ring shadow (0px 0px 0px 1px) acts as a shadow-border#000000 text, 1px solid rgb(118, 118, 118) border--framer-focus-outline)#111111 (Midnight) for primary links, #000000 for emphasis| Level | Treatment | Use |
|---|---|---|
| Level 0 (Flat) | No shadow | Page canvas, basic text containers |
| Level 1 (Inset) | rgba(0,0,0,0.16) 0px 1px 1.9px 0px inset |
Pressed/recessed elements, input wells |
| Level 2 (Ring + Soft) | rgba(19,19,22,0.7) 0px 1px 5px -4px, rgba(34,42,53,0.08) 0px 0px 0px 1px, rgba(34,42,53,0.05) 0px 4px 8px |
Cards, containers — the workhorse shadow |
| Level 3 (Ring + Soft Alt) | rgba(36,36,36,0.7) 0px 1px 5px -4px, rgba(36,36,36,0.05) 0px 4px 8px |
Alt card elevation without ring border |
| Level 4 (Inset Highlight) | rgba(255,255,255,0.15) 0px 2px 0px inset or rgb(255,255,255) 0px 2px 0px inset |
Button inner highlight — 3D pressed effect |
| Level 5 (Soft Only) | rgba(34,42,53,0.05) 0px 4px 8px |
Subtle ambient shadow |
Cal.com's shadow system is the most sophisticated element of the design — 11 shadow definitions using a multi-layered compositing technique:
- Ring borders: 0px 0px 0px 1px shadows act as borders, avoiding CSS border entirely. This creates hairline containment without affecting layout
- Diffused soft shadows: 0px 4px 8px at 5% opacity add gentle ambient depth
- Sharp contact shadows: 0px 1px 5px -4px at 70% opacity create tight bottom-edge shadows for grounding
- Inset highlights: White inset shadows at the top of buttons create a subtle 3D bevel
- Shadows are composed in comma-separated stacks — each surface gets 2-3 layered shadow definitions working together
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column, hero text ~36px, stacked features, hamburger nav |
| Tablet Small | 640px–768px | 2-column begins for some elements |
| Tablet | 768px–810px | Layout adjustments, fuller grid |
| Tablet Large | 810px–1024px | Multi-column feature grids |
| Desktop | 1024px–1199px | Full layout, expanded navigation |
| Large Desktop | >1199px | Max-width container, centered content |
#242424)#111111)#898989)#ffffff)#0099ff)#242424) bg, white textrgba(34, 42, 53, 0.08) ringWhen refining existing screens generated with this design system: 1. Verify headings use Cal Sans at weight 600, body uses Inter — never mix them 2. Check that the palette is purely grayscale — if you see brand colors, remove them 3. Ensure card elevation uses the multi-layered shadow stack, not CSS borders 4. Confirm section spacing is generous (80px+) — if sections feel cramped, add more space 5. The overall tone should feel like a clean, professional scheduling tool — monochrome confidence without any decorative flourishes