Dark Mode

# 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 on dark surfaces.

### Primary

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

### Neutrals

Mid Gray
#898989
Secondary text
Black
#000000
High-contrast text
Shadow Ring (Dark)
rgba(255,255,255,0.06)
Dark mode ring shadows

### Accent (Minimal)

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

## Typography Scale

Cal Sans for display, Inter for body.

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

## Button Variants

Inverted for dark surfaces.

#fff / #242424 / 8px
#1c1c1c / ring shadow / 8px
transparent / ring / 8px
#fff / 9999px

## Card Examples

Dark surface cards with shadow elevation.

#### Shadow Card

Dark surface with ring + contact + diffused shadow compositing. Hover to lift.

ring + contact + soft shadows

#### Elevated Card

Lighter dark surface with ring shadow border for secondary content.

ring shadow only

#### Inset Card

Deepest background with inset shadow for recessed content wells.

inset shadow

## Form Elements

Dark surface inputs with ring shadows and blue focus.

Default Inputring shadow border / 8px
Focus Stateblue focus ring
Error StateInvalid input
Textarea Same styling

## Spacing Scale

8px base with section-level jump to 80px–96px.

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

## Border Radius Scale

2px to pill 9999px.

2px Inline
4px Small
8px Buttons
12px Cards
16px Sections
9999px Pill

## Elevation & Depth

Shadow compositing on dark surfaces.

#### Level 0 — Flat

No shadow. Default canvas.

#### Level 1 — Inset

Recessed/pressed appearance.

#### Level 2 — Ring + Soft

Ring + contact + diffused. Workhorse.

#### Level 3 — Soft

Ambient shadow only.

#### Level 4 — Highlight

White surface with inset bevel.