Design System Inspired by Cal.com

A visual catalog of design tokens extracted from Cal.com's monochromatic, grayscale design system.

Color Palette

A grayscale brand — boldness through monochrome, not color.

Primary

Charcoal
#242424
Headings, buttons, primary text
Midnight
#111111
Deep text, overlays
White
#ffffff
Background, surfaces

Neutrals

Mid Gray
#898989
Secondary text, descriptions
Black
#000000
High-contrast link text
Shadow Ring
rgba(34,42,53,0.08)
Ring-shadow borders

Accent (Minimal)

Link Blue
#0099ff
In-text links only
Focus Blue
#3b82f6
Focus ring (accessibility)

Typography Scale

Cal Sans for display, Inter for body — a clean typographic division.

Display Hero
Display Hero — Cal Sans 64px / 600 / 1.10
Section Heading
Section Heading — Cal Sans 48px / 600 / 1.10
Feature Heading
Feature Heading — Cal Sans 24px / 600 / 1.30
Sub-heading
Sub-heading — Cal Sans 20px / 600 / 1.20 / +0.2px
Card Title
Card Title — Cal Sans 16px / 600 / 1.10
Body Light — Elegant light-weight intro text for descriptions and subtitles
Body Light — Inter 18px / 300 / 1.30 / -0.2px
Body Standard — Standard reading text for longer content passages with comfortable line-height.
Body Standard — Inter 16px / 300 / 1.50 / -0.2px
UI Label
UI Label — Inter 16px / 600 / 1.00
Caption Inter
Caption — Inter 14px / 500 / 1.14
Micro text
Micro — Inter 12px / 500 / 1.00
Code — Roboto Mono
Code — Roboto Mono 14px / 600 / 1.00

Button Variants

Dark CTAs with inset highlights, shadow-bordered white buttons, and pill shapes.

#242424 / white / 8px / inset highlight
#fff / ring shadow / 8px
#242424 / 9999px radius

Card Examples

Multi-layered shadow elevation with ring borders instead of CSS borders.

Shadow Card

Ring shadow + contact shadow + diffused shadow. The workhorse card pattern. Hover to see lift.

ring + contact + soft / 12px radius

Alt Shadow Card

Contact shadow + soft shadow without the ring border. Lighter elevation.

contact + soft only / 12px radius

Inset Card

Inset shadow creates a recessed, pressed-in appearance for input wells and secondary containers.

inset 0px 1px 1.9px rgba(0,0,0,0.16)

Form Elements

Shadow-bordered inputs with blue focus rings.

shadow-ring border / 8px radius
focus: blue ring + shadows
Invalid input
Same shadow styling

Spacing Scale

8px base with a jump from 28px to 80px for section-level tiers.

1
2
3
4
6
8
12
16
20
24
28
80
96

Border Radius Scale

Wide scale from sharp 2px to full pill 9999px.

2pxInline
4pxSmall UI
8pxButtons, inputs
12pxCards, links
16pxSections
9999pxPill

Elevation & Depth

Multi-layered shadow compositing: ring borders + diffused shadows + inset highlights.

Level 0 — Flat

No shadow. Page canvas and basic containers.

Level 1 — Inset

Inset shadow. Pressed/recessed elements, input wells.

Level 2 — Ring + Soft

Ring border + contact shadow + diffused shadow. The workhorse elevation.

Level 3 — Soft Only

Subtle ambient shadow without ring border. Gentle floating.

Level 4 — Inset Highlight

White inset on dark bg. Button 3D bevel effect.