11 box-shadows measured on the live page · click a tile to copy its raw value
shadow-1
shadow-2
shadow-3
shadow-4
shadow-5
05
Motion — easings, transitions & live keyframes
0 easing curves · 2 keyframes · hover a tile to preview
2 keyframe animations extracted
pulse
__framer-loading-spin
06
Components — the closed vocabulary
6 component families · 20 variants counted on the live DOM
Component
Variants found
links
×10
heading H3
×4
heading H2
×3
inputs
×1
badges
×1
heading H1
×1
Component style specs (§4)expand
Buttons
Ghost
Background: #000000
Text: #ffffff{colors.hairline}
Padding: 12px 24px
Radius: 8px
Shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px 0px
Font: 12px weight 600
Use: Subtle action, toolbar, nav button
Pill
Background: #f5f5f5{colors.surface-2}
Text: #0000ee
Padding: 4px 8px 4px 12px
Radius: 9999px
Shadow: rgba(34, 42, 53, 0.05) 0px 4px 8px 0px
Font: 12px weight 400
Use: Status pills, tags, chips
07
Layout — structure & dimensions
5 layout metrics measured
max Width1200px
header Height64px
sidebar Width0px
gap16px
container Padding24px
08
Responsive — real breakpoints
6 media-query stops read from the live CSS
640px
768px
809px
810px
1024px
1199px
09
Do's & Don'ts
14 enforceable rules pulled verbatim from the spec
Do
Use Off-White (`#f4f4f4`) as the page background — it's intentionally not pure white
Keep font weights between 400-600 — the system uses a narrow weight range for subtle hierarchy
Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)
Use #7826b1 (`#7826b1`) as the primary accent — it's the brand's signature interactive color
Respect the 6px–48px spacing range — the design uses a wide scale for visual breathing room
Each card uses an icon (not photo) — the visual language is illustrative, not photographic
Use a 3-column grid on desktop — density matters for this content type
Build a content-dense footer (4 columns, ~53 links) — this site treats the footer as a sitemap, not an afterthought
Don't
Don't use pure white (`#ffffff`) as a page background — the warm tone is part of the brand identity
Don't use weight 700 (bold) or above — 600 is the maximum weight in this system
Don't invent new shadow values — use only the extracted shadow levels
Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements
Don't introduce additional saturated accent colors — the palette is intentionally controlled
10
Agent guide & export
Paste-ready prompt + the real files behind this page
Build a UI in the cal.com design system.
Canvas #f4f4f4 · ink #111111 · accent #7826b1.
Type: Cal Sans UI Variable Light — respect the size/weight ladder in §3.
Radius, spacing, shadow: use only the extracted scales (no magic numbers).
Full spec follows — paste the DESIGN.md below into your agent.