Prism prismd.fr

Extracted · 10 sections · 35 colors · grade C

cal.com

Accent #7826b1 · Cal Sans UI Variable Light — chaque valeur ci-dessous est mesurée via getComputedStyle(), jamais affirmée à la main.

colors

faces

shadows

keyframes

Get DESIGN.md tokens.json Repeindre ce design

rendu réel · source de vérité

cal.com is built on a pure-white canvas (rgb(244, 244, 244)). The system uses rgb(120, 38, 177) as the accent for primary actions and brand signals. Moderately rounded CTAs (8px) — modern SaaS standard, neither sharp nor pill alongside Cal Sans as the primary typeface. Cal Sans is paired with Cal Sans UI Variable Light Placeholder for secondary roles. A layered elevation system (11 distinct shadows) building a clear front-to-back hierarchy. Motion is minimal — a few targeted transitions, no decorative animation.

Color — roles, semantics & the full census

35 colors measured · click any swatch to copy

Canvas

#f4f4f4

AAA 17.17:1

Ink

#111111

AAA 17.17:1

Accent

#7826b1

AAA 7.04:1

Line

#ffffff

Fail 1.1:1

Semantic states

No semantic state colors detected — this system signals state through weight & motion, not hue.

35 colors mined from the live renderexpand

Type — the ladder, in the real face

5 roles · rendered live in the real sans-serif (captured woff2) · lines are editable, click any spec to copy

display xl

display-xl64px · 600

display md

display-md18px · 300 · ×3.56

body

body12px · 400 · ×1.50

body sm

body-sm14px · 300 · ×0.86

button

button12px · 600 · ×1.17

Spacing & radius, made spatial

9 spacing steps · 7 radii · bars are exact px widths

Spacing scale

xxs · 2px

xs · 6px

sm · 10px

md · 12px

base · 18px

lg · 24px

xl · 48px

2xl · 80px

3xl · 96px

Radius

none
0px

xs
4px

sm
8px

md
12px

lg
16px

xl
29px

full
1000px

Depth — elevation is extracted, not invented

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

Motion — easings, transitions & live keyframes

0 easing curves · 2 keyframes · hover a tile to preview

2 keyframe animations extracted

pulse

__framer-loading-spin

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

Layout — structure & dimensions

5 layout metrics measured

max Width1200px

header Height64px

sidebar Width0px

gap16px

container Padding24px

Responsive — real breakpoints

6 media-query stops read from the live CSS

640px

768px

809px

810px

1024px

1199px

Do's & Don'ts

14 enforceable rules pulled verbatim from the spec

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

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.

Every value above was getComputedStyle-verified.

$ npx prismd add cal

DESIGN.md · narrative spec tokens.json