skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-cal

Apply Cal.com's grayscale design system tokens when generating UI interfaces.

Updated Feb 23, 2026
Search Tags:#typography#design system#css#design tokens#grayscale#cal.com#ui generation
One-click install
npx skills add https://github.com/deepparser/skills --skill design-cal-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-cal
Source: https://github.com/deepparser/skills/tree/main/design-cal
Command: npx skills add https://github.com/deepparser/skills --skill design-cal-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Cal.com's visual identity requires knowing its exact design tokens — grayscale palette, Cal Sans typography, multi-layered shadow system, and spacing scale — which are otherwise scattered and undocumented. ## Core Features & Use Cases - Complete Design Token Reference: Provides exact color values (#242424 charcoal, #898989 mid gray, #0099ff link blue), typography hierarchy (Cal Sans display + Inter body), and an 11-definition shadow compositing system. - Light and Dark Theme Previews: Bundled HTML preview files demonstrate every component (buttons, cards, forms, elevation levels) in both light and dark modes for visual verification. - Use Case: When asked to build a scheduling app landing page styled like Cal.com, the Skill supplies the exact 64px Cal Sans hero heading, dark CTA button with inset highlight, and ring-shadow card elevation needed to match the brand. ## Quick Start Create a landing page hero section styled like Cal.com with a dark CTA button and shadow-elevated feature cards.

Frequently Asked Questions about design-cal

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I style a UI to look like Cal.com?▼

Use a pure grayscale palette with #242424 charcoal text on white backgrounds, Cal Sans at weight 600 for headings, and Inter for body text. Apply multi-layered shadows (ring border plus diffused shadow) instead of CSS borders for card elevation.

What fonts does the Cal.com design system use?▼

Cal.com uses Cal Sans, a custom geometric display font by Mark Davis, exclusively for headings at weight 600. Body text uses Inter, and code uses Roboto Mono. Cal Sans should never be used for body text below 16px.

Does the Cal.com design system support dark mode?▼

Yes, the Skill includes a dark theme preview (preview-dark.html) that inverts the system to dark surfaces (#0a0a0a background, #141414 cards) with white ring shadows and light primary buttons, maintaining the same typography and spacing rules.

Why should I use shadows instead of CSS borders for cards?▼

Cal.com's system uses ring shadows (0px 0px 0px 1px at low opacity) as borders because they create hairline containment without affecting layout box dimensions. Combined with contact and diffused shadows, this produces subtle three-dimensional elevation.

When should I not use Cal Sans font?▼

Avoid Cal Sans for body text or any text below 16px, since its extremely tight letter-spacing is designed for large display sizes. Below 24px, apply positive letter-spacing (+0.2px), and use Inter for all reading text.

Related Skills

Explore More Design & Creative Skills→
xpert-aixpert-ai
8

ideate

Generate three distinct on-brand UI design variants from confirmed briefs.

Official
Intermediate
voundbrandvoundbrand

Booking & Appointment System

Deploy an online booking system with automated communications and CRM integration.

Community
Advanced
HDeiblerHDeibler
6

color-accessibility-and-mode

Validate UI color choices for WCAG contrast and light/dark mode support.

Community
Intermediate
ECFN15ECFN15

monochrome-ui

Define monochrome UI token vocabularies and stateful component variants.

Community
Advanced