# 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.

Default Input shadow-ring border / 8px radius
Focus State focus: blue ring + shadows
Error State Invalid input
Textarea 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.

2px Inline
4px Small UI
8px Buttons, inputs
12px Cards, links
16px Sections
9999px Pill

## 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.