Calendly
Dark blue ink on cold marble
Calendly feels like a calm, confident planning workspace: a near-white canvas with plenty of breathing room, crisp white product cards floating against a cool gray background, and all typography rendered in a dark blue ink rather than pure black. The defining element is the dark blue color (#0b3558), used everywhere text appears—headlines, buttons, icons, links—which softens the entire interface, making it warmer and more stylish than the typical SaaS landing page. A single bright blue (#006bff) is used for all primary actions, and decorative pink and blue splashes extending beyond the product layouts add warmth without creating clutter. Components are kept understated: thin 1px borders, subtle blue-tinted shadows, large 24px card radii, and 8px button corners feel deliberate rather than bland.
Maximum width 1200px, centered, with wide margins on desktop. The main screen is divided into two columns: the left column contains an 80px header + body text + stacked login buttons, while the right column contains a booking widget card with decorative elements in the background. Below the main screen is a single, full-width stripe with the Trust logo. Subsequent sections alternate between centered header blocks (H2 + subtext + optional call to action), followed by two-column blocks describing features (text left/product right or product left/text right) with decorative accent elements behind each product image. Card grids are rarely used—the layout favors paired sections placed side by side rather than multi-column grids. The spacing between sections ranges from 48 to 64px. The navigation is a 64px fixed top bar with the logo on the left, a centered menu, and a group of calls to action on the right.
The main visual element is product screenshots—simple mockups of the booking calendar user interface, rendered on crisp white cards with wide, rounded corners. Decorative design: each product card is surrounded by a soft spot of coral purple (#e55cff) or azure blue (#0099ff), slightly offset and blurred, creating a collage effect rather than a flat screenshot. No photographs, no lifestyle images—all visual elements represent the product user interface, abstract accent shapes, or monochrome partner logos on the trust bar. Icons are linear with a line width of 1.5–2px, monochrome, in dark blue (Ink Navy) or blue (Signal Blue).
Palette
Brand
- Ink Navy
#0b3558— Main text, headings, icons, dark background for calls to action, navigation links. - Signal Blue
#006bff— Primary call to action (CTA), active navigation, link emphasis, selected states
Neutral
- Carbon
#0a0a0a— Text in pure black (fallback), logo glyph, icon fill. - Slate Gray
#476788— Additional main text, supporting text, muted labels. - Mist Gray
#a6bbd1— Disabled text, inactive function labels, light icon outlines - Cloud
#f8f9fb— Page canvas, footer background, extra surface - Paper
#ffffff— Card surfaces, raised panels, button text on a dark background. - Pebble
#f0f3f8— Background images for icons, input field shading, subtle separators, hover effects.
Typography
from 12 to 80px · 10 steps
- Gilroy — replacement: Manrope · outlines 400, 500, 600, 700 · All interface text. Gilroy is a geometric humanist sans-serif with wide apertures and uniform stroke contrast; its bold weights (700) are used for headings, while 500–600 are used for buttons and subheadings. Replace with Manrope or Inter.
- Gilroy — replacement: Inter · outlines 400 · Body text and general-purpose UI labels - 400-point font weight ensures long texts are legible without feeling heavy.
- Gilroy — replacement: Inter · outlines 500 · Secondary headings and highlighted body text - 14/500 font is the primary tool for card headings and inline labels.
Intervals and form
| Purpose | Meaning |
|---|---|
| Density | dense |
| Basic step | 8-16px |
| Button radius | 8px |
| Card radius | 24px |
| Shadows | no - borders instead of shadows |
| Between sections | 48-64px |
| Page width | 1200px |
AI will build your website in Calendly style and fill it
- Fill with products and posts via the link - Instagram, TikTok, Facebook.
- Transfer content from your old site—just specify the address.
- Modern design on the best engine: React ( Next.js) with server rendering and SEO optimization out of the box.
- Fully automated SEO optimization for search results and neural network recommendations.
Similar styles
- Mollie — A cashmere counter, a dark ledger. Leave ample white space for editorial design around the black text, then reinforce product-related points with warm creams, espresso browns, and tactile photos of actual payment methods.
- Kagi — A separate reading room. Create an open white space around bold graphite text, using subtle purple accents and warm pastel surfaces to break up the tranquility.
- Milanote — Milanote is a dedicated creative studio. Create editorial gallery-style pages using floating visual boards: dark framed walls, white display space, and screenshots that look like real objects with a soft depth.
- Co2 — A climate atlas in winter light. Create pages like an aerial document landscape, where serif headings, category-coded data, and icy images highlight wide white margins.
- GitButler — Turquoise at the end of the text. A combination of high-contrast serif headlines with subtle technical grids, warm graphite surfaces, and a discreet turquoise accent.
- ElevenLabs — A photo essay in warm cream tones with subtle headlines. A Bauhaus-style notebook—eggshell-colored paper, black ink, and a single purple and orange accent for product display.
- Awesomic — Editorial zinc mesh with orange punctuation marks reminiscent of confetti
- Monad — editorial technical journal on warm parchment
- Dub — Link's matte rice paper control panel
- Seline Analytics — A quiet analytical table on warm paper
- Notion — A warm paper notebook in the midday sun
- Anthropic — A scientific field journal on warm vellum—calm ivory surfaces, serifed editorial headings, and a single clay accent that appears only when action is needed.