CURATED · OPEN · FREE

Cal

A fully customizable, developer-friendly scheduling software for individuals and businesses.

01

Identity DNA

A clean, modern Swiss railway timetable translated into a digital scheduling platform.

02

Color

Monochromatic with high contrast. Pure black on white with neutral grays for hierarchy and structure.

03

Typography

geometric-sans · humanist-sans · monospace

• display48px · 500
• h232px · 600
• body16px · 400
• caption12px · 400

Headlines use a tight letter-spacing of -0.2px · Body text uses a comfortable 1.5 line height · Buttons and navigation use 500 weight for emphasis · Calendar days and small labels use 400 weight

04

Spacing

A consistent 4px base grid ensures tight alignment in UI components and relaxed whitespace in content sections.

05

Surfaces

Subtle 1px solid borders using rgba(0,0,0,0.16) or light grays for card edges.

rgba(34, 42, 53, 0.08) 0px 0px 0px 1px · rgba(34, 42, 53, 0.05) 0px 4px 8px 0px · rgba(0, 0, 0, 0.16) 0px 1px 1.9px 0px inset

06

Layout

A centered container layout with a large hero section featuring a side-by-side split between text and a UI mockup.

07

Motion & Interaction

Subtle hover transitions on buttons and links · Smooth layout shifts on interactive calendar elements

Background color shift or subtle elevation change on buttons and interactive elements. · Immediate visual feedback through color change or focus ring.

08

Components

• button Pill-shaped or rounded-rect buttons with solid black fill for primary actions and white/transparent fill for secondary.
• card White cards with subtle shadows or light borders, featuring calendar UIs or integration grids.
• chip Small rounded pills for tags like 'App store' or 'Cal.com launches v6.5'.
• input Clean text inputs with rounded borders and subtle shadow, often part of booking widgets.
• hero A prominent top section with large typography on the left and a detailed scheduling widget mockup on the right.

09

Voice & Don'ts

• Tone Professional, clear, and direct. Focuses on efficiency and customization.
• Headlines Bold, concise statements that lead with a value proposition.
• CTAs Action-oriented and straightforward (e.g., 'Sign up with Google', 'Get started').

• don't use high-saturation primary colors — screenshot shows a strictly monochromatic black-and-white palette.
• don't use decorative serif fonts — screenshot shows clean, geometric sans-serif typography throughout.
• don't add heavy drop shadows to cards — screenshot shows very subtle, almost flat elevation using light borders.
• don't use sharp corners on buttons — screenshot shows consistently rounded or pill-shaped button designs.
• don't crowd the layout with too many elements — screenshot shows generous whitespace and a focused content hierarchy.
• don't use all-caps for body text — screenshot shows mixed-case text for better readability.
• don't rely on icons without labels — screenshot shows clear, descriptive text accompanying every UI element.
• Avoid: Using overly technical jargon in headlines
• Avoid: Employing loud or neon accent colors
• Avoid: Relying on decorative imagery over product mockups

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko