Palettes
Palettes set the colors, typography, and visual feel of your calendar. Each palette is designed to work as a complete theme out of the box.
Built-in palettes
Light (default)
Clean and minimal. System font, subtle shadows, neutral tones with a warm brown accent color.
Dark
Dark backgrounds with light text. No shadows. Good for sites with dark themes.
Warm
Earthy and organic. Uses Georgia (serif) font, generous border radius, and warm shadow tones. A cozy, editorial feel.
Cool
Modern and crisp. Uses Inter font, tight border radius, blue accent color, and sharp shadows. A professional, tech-forward feel.
Customizing beyond built-in palettes
You can override individual CSS properties on top of any palette to match your site's exact brand colors. Each property is a CSS custom variable:
| Property | Controls | Example |
|---|---|---|
primary |
Accent/brand color | #2563eb |
primaryText |
Text on primary backgrounds | #ffffff |
background |
Page background | #f5f0eb |
surface |
Card backgrounds | #ffffff |
text |
Primary text color | #1a1a1a |
textSecondary |
Secondary text | #666666 |
border |
Border color | rgba(0,0,0,0.06) |
fontFamily |
Font stack | Georgia, serif |
radius |
Card corner radius | 8px |
shadow |
Card shadow | 0 1px 3px rgba(0,0,0,0.1) |
shadowHover |
Card hover shadow | 0 4px 12px rgba(0,0,0,0.12) |
See Advanced Embedding Options for how to apply these overrides in your embed code.