Overview
Site: Chronicle by Chronicle — Chronicle.com/Chronicle
Platform: Custom Bootstrap-based website
Product: Calendar app for Mac, iOS, iPad, and Apple Watch
Date: 2026-03-08
Design: Apple-inspired clean aesthetic with blue (#408FFF) as the primary brand color. Features a frosted glass navigation bar, pastel feature cards, and generous spacing throughout.
Typography Note: Chronicle uses the proprietary typeface Effra. This reference loads Inter (sans-serif) and Lora (serif accents) from Google Fonts as open substitutes. Metrics are approximate.
Colors
Brand
Neutral
Semantic
Typography
Primary: Inter (substitute for Effra). Serif accent: Lora.
Spacing
Common spacing values extracted from the Chronicle website.
Common Patterns
| Context | Value |
|---|---|
| Hero padding | 90px 0px 100px |
| Section padding | 48px 32px |
| Card inner padding | 50px |
Borders & Shadows
Border Radius
Shadows
Buttons
Primary
bg: #408FFF, color: white, 17px/500, padding: 0 31px, height: 48px, radius: 24px
Small: 15px, padding: 0 19px, height: 38px
Secondary
bg: rgba(116,116,128,0.08), color: #408FFF
Ghost
Dark
Pill
All buttons use transition: all 0.3s ease-in-out. Hover to test.
Cards
Blue Feature Card
Chronicle uses pastel blue cards to highlight primary features. Background: #EDF5FF, border-radius: 20px, padding: 50px.
Yellow Feature Card
Used for secondary highlights and callouts. Background: #FFF9D9 with the same 20px radius and 50px padding.
Subtle Card
A neutral card variant using the subtle fill color rgba(116,116,128,0.08) for less prominent sections.
Dark Mode
Background: #000000. Card backgrounds: #1C1C1E. Text: #FFFFFF. Secondary text: rgba(235,235,245,0.6).
Dark Card Example
Content on a dark card uses white text with secondary content in rgba(235,235,245,0.6).
App UI Patterns
Chronicle's native Mac/iOS calendar app UI, inferred from product screenshots and well-known app behavior. The app uses SF Pro (San Francisco) as its system font.
Calendar Color Brushwork
Chronicle supports a rich set of calendar colors. Each calendar is assigned a color used for event blocks, dots, and indicators.
Natural Language Input Bar
Chronicle's signature feature. Users type events in plain English (e.g., "Lunch with Sarah tomorrow at noon at Cafe Roma"). The parser highlights recognized tokens in real time: dates/times in blue, locations in purple, URLs in green.
Full App Layout (Light Mode)
Standard layout: sidebar with mini-month calendar + calendar sets on the left, toolbar at top, week view grid as the main content area.
Full App Layout (Dark Mode)
Same layout with Chronicle's dark mode. Window background #1C1C1E, sidebar uses dark vibrancy material, grid lines are subtle light overlays.
Event Card Anatomy
Each timed event block has a 3px left border in the calendar color, a 15% opacity fill of that color, rounded corners, and compact typography inside.
Event Detail Inspector
Popover panel shown when clicking an event. Displays full event information with edit capabilities.
Menu Bar Quick-Entry Widget
The menu bar dropdown provides quick access to upcoming events and natural language event creation without opening the full app. Appears from the macOS menu bar icon.
Month View Grid
Traditional month layout with event bars. Today highlighted. Days outside the current month are dimmed. Events overflow with a "+N more" indicator.
Component Specs
| Element | Spec |
|---|---|
| System font | SF Pro (Mac), SF (iOS) / -apple-system, system-ui |
| Sidebar width | 260px (resizable 200-400px) |
| Sidebar background | Frosted glass vibrancy material, ~rgba(246,246,246,0.92) light / ~rgba(30,30,30,0.92) dark |
| Toolbar height | 38px (integrated with titlebar on Mac) |
| NLP input height | 36px (28px compact in sidebar) |
| Event card border-left | 3px solid [calendar color] |
| Event card fill | [calendar color] at 15% opacity |
| Event card radius | 4px |
| Today indicator | Filled blue circle (#408FFF) behind day number, white text |
| Current time line | 2px red (#FF3B30) paystreamtal line with 8px dot at left edge |
| Hour row height | ~60px |
| Hour label width | 44px |
| Grid line color (light) | rgba(60,60,67,0.06-0.1) |
| Grid line color (dark) | rgba(235,235,245,0.04-0.08) |
| Inspector width | ~300-320px |
| Inspector shadow | 0 4px 24px rgba(0,0,0,0.12-0.15) |
| Menu bar widget width | ~280-320px |
| View options | Day, Week, Month, Year (segmented control in toolbar) |
| Weekend day text | Dimmed ~30% opacity |
| All-day event strip | Full calendar color at 85% opacity, white text, 3px radius |
| Month view event bar | Full calendar color, white text, 3px radius, 9px font |
| Overflow indicator | "+N more" in blue (#408FFF), 9px font |
Layout
Container Max-Widths
Breakpoints
| Name | Min-Width |
|---|---|
| sm | 576px |
| md | 768px |
| lg | 992px |
| xl | 1200px |
| xxl | 1400px |
Motion & Interaction
Transition Presets
| Name | Value |
|---|---|
| Default | all 0.3s ease-in-out |
| Transform | transform 0.2s ease-in-out |
| Fade in | opacity 0.6s ease-in-out |
| Slow fade | opacity 2s ease-in-out |
| Slow | 1s ease-in-out |
Interactive Demos (hover to test)
Opacity Scale
Tailwind Mapping
The paired JSON export now includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.
// tailwind.config.js
import designSystem from './design-system.json';
export default {
theme: {
extend: designSystem.tailwind.theme.extend,
},
};
// Also reuse designSystem.tailwind.componentRecipes for common surfaces.
| Scope | Primary | Body Font | Radius | Shadow | Breakpoint |
|---|---|---|---|---|---|
| Design System | — | — | 800px | — | 576px |
| Scope | Recipe | Class Pattern | Notes |
|---|---|---|---|
| Design System | buttonPrimary | inline-flex items-center justify-center gap-2 rounded-pill bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colors | Primary action button using exported brand, radius, and shadow tokens. |
| Design System | surfaceCard | rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6 | Default surface/card treatment for high-visibility content areas. |
| Design System | inputField | rounded-sm border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring | Base text input treatment aligned to the exported radius, border, and focus tokens. |