light · minimal · sans · bright · soft · structured · cool
Fantastical
White paper, Effra geometric sans, full-round blue pills, and a rainbow of app-icon glass squares — a calendar app marketed like Apple''s Pro Apps.
By webdesignhot · flexibits.com
$ npx design-md add fantastical
Learn more about the CLI → Compare to…
Adidas Pure-black sport-utility, AdihausDIN/adidasFG uppercase, three-stripe geometry — the engineering canon for global sportswear. Adobe Creative-suite chrome — paper-white canvas, magenta-to-orange wordmark gradient, and Adobe Clean carrying every product grid. AgentKit Three swappable themes for AI agent products — editorial dark, daylight bright, fintech cool-blue. Airbnb Pure-white marketplace canvas with one Rausch coral and Cereal — generous photography, soft pills, modest type. Airtable White-canvas editorial workflow software with full-bleed coral and forest signature cards punctuating a near-black pill-CTA system. Alibaba Electric orange `#ff6a00` + dense merchant grids — the global B2B wholesale floor as a website. Amazon Smile-orange CTA, Amazon Ember sans, dense product grids — the canonical everything-store interface. Amazon Web Services Squid-ink navy with Smile-orange CTAs — the densest tile-portal on the cloud-platform internet. Anthropic Editorial broadsheet for AI safety — cream canvas, Anthropic Serif body, terracotta clay accent, magazine geometry. Apple White-canvas product theatre — SF Pro Text, 980px pill CTAs, and a single-blue accent system. Apple Music Pink-red gradient hero with album-grid kinesthetics — SF Pro precision, signature `#fa233b` brand pink, glassy dark canvas. Apple TV+ Pure-black cinematic theatre with SF Pro and ruthless minimalism — content as the only voice. Arc Browser-as-personality marketing — buttery cream canvas, Marlin Soft display, hand-tooled blue-and-coral palette. Are.na Bare grey-and-orange minimalism — a single Helvetica-class sans, hairline borders, and a stubborn refusal to optimise for engagement. Asana Approachable work management in soft purple — Asana Sans at modest weights with a rainbow accent palette and warm sky-tinted whitespace. Astro Cosmos navy canvas with violet-to-orange brand gradient — Mona Sans display, Inter body, Astro''s star-chart MPA framework dressed as an observatory dashboard. ASUS Republic of Gamers red `#cd0000` on black with bold sans — Taiwan engineering meets esports brutalism. Audi Vorsprung durch Technik on near-black — Audi Type sans, four-rings precision, and a near-monochrome canvas with `#bb0a30` reserved for sport. Auth0 Twilight-blue dark canvas with TWK Lausanne 300 display + Aeonik body — the original identity-platform aesthetic. Axiom Deep-navy observability with a cyan electric accent — Inter for body, JetBrains Mono for every event label, and a structural grid that reads as logs at planet scale. Axios Smart-brevity in chromatic form — blocky white canvas, Tiempos-flavored Atiza serif, signature `Why it matters:` time-bars and bullet-first prose. Base Coinbase-adjacent L2 minimalism — coinbaseSans on white, signature electric blue Baseten White canvas with Inter and a signature `#6c5ce7` purple — ML model deployment dressed in approachable workshop chrome. BBC News Signature BBC red (`#bb1919`), Reith Sans + Reith Serif, the global broadcaster authority typography of the world''s public-service news. Bear Off-white canvas, a custom bearsans display, a red bear icon, and tealish handwritten underlines — a Markdown notes app dressed as a Mac Pro magazine. beehiiv Aggressive black-on-yellow newsletter punch — heavy display sans, hyper-flat cards, and a `#ffd60a` highway-yellow that reads like a tabloid front page. Binance Trading-floor near-black with a single high-voltage Binance Yellow doing all the brand work — BinanceNova for type, BinancePlex for numbers. Bloomberg Iconic black-orange financial broadsheet — BWHaasHead headlines, AvenirNextPForBBG chrome, terminal-grade data density. Bluesky Sky-blue `#0085ff` on bright white with Inter sans — the AT-Protocol social network rendered as airy, federated, open. Blur Pure-black canvas, neon `#ff8700` orange voltage, and JetBrains-Mono-default everywhere — brutalist NFT trader terminal as competitive instrument. BMW Corporate-blue calm — BMW Type Next on a cream-tinted white, dark navy hero bands, and the M-stripe triplet in reserve. BMW M Performance black on M-blue/M-violet/M-red — the motorsport variant that turns BMW corporate into track-day theatre. Booking.com Deep-blue commerce engine — Bookin Sans on white, yellow CTA voltage, dense booking-funnel maximalism. Bose Pure black canvas, Helvetica restraint, and premium-audio confidence — sound presented as engineering art. Brex Cool grey-blue surfaces, magenta-to-purple-to-indigo gradient, Söhne 600 — fintech as fast, modern, slightly flashy. Bugatti French-engineered austerity — pure black canvas, three Bugatti typefaces, and full-bleed photography as the only voltage. Bun Cream canvas with chunky pink accents and the wide-eyed mascot — a JS runtime dressed as a 1970s bakery sign. Cal.com Open-source calendly with one bold custom font — Cal Sans on a soft `#f4f4f4` paper canvas. Calm Signature `#0066ff` deep blue + Aktiv Grotesk + meditation-deep cool atmospheric calm. Capacities Cream-yellow canvas, Inter at 700 with a Crimson Pro serif fallback, and a yellow underline as page ornament — a PKM that thinks like a sketchbook. Cartesia Bright clinical white with a single deep-blue action — voice-AI presented as scientific instrument rather than consumer product. Cash App Electric `#00d54b` green on near-black, Cash Sans monospace-flavoured geometry, and p2p-money youth aesthetic. Character.AI Cool zinc canvas, custom atHauss sans, and dark pill CTAs — a roleplay social product dressed in TikTok-grade neutrality. Chevrolet Gold-cross American classic — Louis sans on white with a `#cd9834` bowtie, a `#003876` corporate blue, and Camaro/Corvette red drama in reserve. Claude.ai Cream paper canvas, Anthropic Sans for body and Anthropic Serif for the headline — an AI assistant set in literary type. Clerk Geist + Suisse on near-black canvas with `#6c47ff` violet CTA — the drop-in-auth dev-tool aesthetic. ClickHouse Near-pure black canvas with electric yellow as the brand voltage — database performance dressed in voltmeter chrome. Cloudinary Media-API technical infrastructure in confident blue — Inter at modest weights with a deep navy-blue brand and a single chromatic accent for media moments. Cohere Stark white editorial canvas with deep green-black product bands and a CohereText/Unica77 type split. Coinbase Institutional-grade calm — pure white canvas, a single Coinbase Blue, and Coinbase Display set at weight 400 instead of 700. Composio Near-black canvas with deep-electric-blue voltage and a 2x2 terminal-mockup hero — agent infrastructure dressed as developer instrumentation. Corsair Yellow `#ffff00` lightning on black with Roboto — RGB-everything peripherals and PC components. Costco Warehouse blue + signature red, Helvetica utilitarian — bulk-buying signage translated to web. Coursera University-blue `#0056d2` on warm-white parchment with Source Sans — the canonical online-degree marketplace. Cursor Warm cream IDE-marketing — `#f7f7f4` canvas, `#26251e` ink, custom CursorGothic display, JetBrains Mono code, vivid orange accent. Datadog NationalWeb on white with the iconic `#632ca6` purple — observability dressed as an enterprise dashboard, structurally dense, chromatically restrained, multicolour where the data demands it. Deel A warm dark canvas with electric coral and orange accents — global payroll dressed as a confident product portrait. DeepSeek Deep-blue Chinese-tech minimalism — a research lab dressed in `#4d6bfe` and stark white space. Dell Pragmatic blue `#007db8` with custom Roboto-derivative — business-first PC commerce since the dorm room. Deno Inkwell black on warm white with the dinosaur mascot — TypeScript runtime as Eric Carle children's book. Descript Cream-pink canvas, a custom Brett display serif, and a wine-dark CTA — an AI video editor that ships like a magazine. Discord Indigo-ground hangout — gg sans body, ABC Ginto Nord display, 12-16px tile radii, white pill CTAs. Disney+ Deep navy gradient streaming hall with custom Inspire display sans and the unmistakable Disney+ wordmark arc. DoorDash Signature red-orange CTA, custom DoorDash Sans, delivery-funnel commerce — the dominant on-demand local marketplace. ElevenLabs Near-black voice-tech ground with white voice-wave aesthetic — Inter at studio scale, pill CTAs, and a single saturated accent that reads as both wayfinding and brand. Epic Games Pure-black canvas with custom Brutal Type / Heading Now display — Fortnite-saturated marketing meets PC-storefront merchandising. Ethereum Off-white canvas, ethereum-blue `#1c64f2` voltage, and Inter + serif duet — community-owned protocol as open documentation. Etsy Burnt-orange CTA, Graphik humanist sans, handcrafted-warmth aesthetic — the marketplace for makers and small batch. Excalidraw Literal hand-drawn whiteboard — wobbly SVG strokes, Virgil-style handwriting, and a deliberately primitive UI that turns digital sketching into nostalgia. Expedia Navy commerce + Mango yellow voltage — Expedia Sans, dense travel-funnel density with One Key loyalty colour-coding. Ferrari Cinematic editorial in near-black — Rosso Corsa restraint, FerrariSans 500, and full-bleed cavallino photography. Figma Bright multi-color section bands with figmaSans display and figmaMono eyebrows — a marketing site that designs in scenes. Financial Times Salmon-pink page (`#fff1e5`) — the world''s most recognizable newspaper background, paired with Financier display + MetricWeb sans for global markets coverage. Fireworks AI Light canvas with Inter sans and a signature `#6720ff` purple-amber-orange spark — fast-inference platform dressed in speed-of-light kinetic chrome. Fly.io Mackinac display + Fragment Mono on a violet-saturated canvas — a PaaS that dresses like a small-press magazine. Ford American-truck heritage in corporate blue — Antenna sans, oval-script wordmark, and a deep `#003478` voltage that has carried the brand since 1927. Framer Black-on-white maximalism with electric gradient floods — Inter Display at heroic sizes, motion as a first-class material. Frontegg PP Neue Machina display + Neue Montreal body — plug-and-play user-management with deep-blue gravitas. Gemini (Google) Blue-into-violet gradient, Google Sans, soft Material 3 surfaces — Google''s house style applied to a chat interface. Ghost Warm-cream content CMS aesthetic — Inter for chrome, a soft serif for the writing surface, and a single confident green for action. GitHub Dark-canvas developer-platform marketing — Mona Sans variable headings, lime-green accent, near-black ground. GitHub Copilot Pure-white canvas, pure-black inverted CTAs, Mona Sans display — GitHub's editorial confidence applied to AI tooling. Grafana Dark observability canvas with the iconic `#f46800` orange — Inter for body, Roboto Mono everywhere a label hides, multi-colour chart palette ripped straight from a real dashboard. Granola White paper, a custom Quadrant book serif, and an olive-green CTA — an AI notepad that dresses like a stationery shop. Grubhub Friendly red-orange CTA, Sentinel display + Avenir body, dense delivery-app commerce — the long-running incumbent. HashiCorp Black canvas hosting a per-product color portfolio — Terraform purple, Vault yellow, Consul red, Waypoint cyan — multi-product identity made literal. Hashnode Developer publishing platform — deep navy canvas, electric blue brand, Inter sans + JetBrains Mono code chrome. HBO Max Deep purple-black premium streaming canvas with custom Sharp Grotesk and the unmistakable Max wordmark. Headspace Signature `#ffac1d` orange + custom round display + meditation-friendly playful warmth. Height AI-PM workspace dressed in chalk pastels — Inter at modest weights over a near-paper canvas, with a single confident accent and an AI-purple voltage moment. Honda Reliability-first restraint — HondaGlobalFont on white, signature red HP Cyan-blue `#0096d6` HP-circle on white with Forma DJR — the 84-year-old technology brand''s mainstream face. Hugging Face AI community canvas — deep blue-black ground, Source Sans Pro headlines, pill auth + 8px tile cards. Hulu Near-black canvas anchored on Hulu Green `#1ce783` with Graphik sans — the bright, cable-meets-streaming UI. IBM Carbon Design System made literal — pure-white canvas, IBM Plex Sans at light 300, square corners, and one assertive `#0f62fe` blue. Ideogram A bright white canvas with a single saturated violet cue — a typography-first AI image tool that lets the gallery do all the talking. Instacart Grocery-shopping-list practical — Instacart Sans on white, signature carrot green Kagi A premium search engine dressed in warm cream and Plex — the indie answer to ad-funded search. KAYAK Burnt-orange flight-search density — Open Sans on white, comparison-engine maximalism, price-graph data viz. Khan Academy Signature `#14bf96` mint green on white with Lato sans — free-for-everyone education in a warm, encouraging register. Kinde White canvas with Inter 72/500 display + dev-friendly pink-coral accent — the approachable auth-billing-access platform. Kit A cream newsletter canvas with a custom KitSans display, a Libre Franklin secondary, and a pastel-rainbow chip set — the editorial register reborn from ConvertKit. Kraken Kraken Purple `#7132f5` on white — Kraken-Brand display + Kraken-Product UI for a calmer, less-bombastic crypto exchange. Krea A pure-black studio with Suisse Intl set quietly at 60px — a creative-AI gallery that lets the work and the cobalt CTA carry the colour. Lamborghini Cathedral of darkness — true black canvas, Lamborghini Gold accents, and LamboType angled-terminal display. LangChain Deep navy canvas with Inter precision and a quietly confident teal accent — agent orchestration dressed as engineering documentation. Linear Dark-canvas product surface — pure-black ground, indigo accent, custom Inter weights, pill CTAs. LiveKit Realtime audio-video infra — Public Sans 300 weight on near-black, signature cyan LlamaIndex White canvas with Inter and a signature `#1b9aff` blue — RAG infrastructure dressed as a clean technical reference card. Logitech Soft consumer-tech blue gradients with Brown sans — design for the way you work, play, and create. Lovable Pink-into-violet gradient on white — vibe-coding dressed in playful, friendly chromatics. Magic Eden Mint-cream canvas, magenta-mint accent duet, and a custom Foundry display — Solana-native marketplace as boutique gallery. Mailchimp Cavendish-yellow chunkiness — a custom display serif (Cooper Light), the signature `#ffe01b` block, and a brand voice that hugs you while it ships campaigns. Mastercard Cream-canvas editorial fintech, circular-portrait orbits, MarkForMC at 450 weight — institutional-but-warm payments brand. MasterClass Pure-black cinema with custom display serif and editorial reverence — celebrity-instructor learning as a premium streaming product. Medium Editorial reading-first publishing — magazine-grade serif body, GT Super display, signature green-on-white pill CTAs. Mercedes-Benz Three-pointed-star authority — MBCorpo on near-black canvas, silver-blue Mercury A near-pure white canvas with a literary serif headline and a signature mercury-mint accent — banking dressed as a quiet magazine. Meta Optimistic blue (#0467df) on a white corporate canvas — Optimistic Display headlines, generous space, social-platform conglomerate at rest. Microsoft Fluent surfaces — off-white canvas, Segoe UI Variable Display, and a Cortana-blue action color carrying every product. Midjourney A deep cosmic canvas where JetBrains Mono headlines float over a wide-gamut OKLCH rainbow — a research lab dressed as a chapel. MiniMax Stark monochrome canvas broken open by vibrant gradient product cards — coral, magenta, blue, purple as model identity. Mintlify Documentation-platform marketing — pure white canvas, mint-green accent, Inter at tight tracking, near-black pill CTAs. Miro Canary-yellow Mistral Butter-yellow canvas, Arial as a deliberate anti-tech statement, and zero-radius rectangles — French AI as a brutalist art-school manifesto. Modal Serverless GPU infra in lime-green — `#0c0c0c` canvas, electric `#7fee64` accent, custom Modal Mono on every chip and code block. Monday.com Project management in confident red-pink — Poppins display at bold weights with a colorful saturated palette and a playfully energetic visual rhythm. MongoDB Signature MongoDB green Motion AI-calendar productivity in green-and-purple — Inter at modest weights with a green-to-purple voltage gradient signaling the AI scheduler, anchored by a clean white canvas. MSI Dragon-red `#ff0000` on jet black with bold display sans — the Taipei dragon-heritage gaming hardware brand. Mux Video API for developers — Aeonik on light-cream, Rotonto display, JetBrainsMono CTAs, sharp 0px corners. Neon Serverless Postgres dressed in late-night green — a near-black canvas with a single electric mint accent. Netflix Pure-black streaming theatre with signature `#e50914` red and Netflix Sans — the canonical media-tile grid. Nike Pure black, pure white, Helvetica Now — pill CTAs and full-bleed athletic photography on a single soft cloud gray. Notion Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed as a literary magazine. Nuxt Forest-green `#00dc82` glow on a near-black canvas — Vue-flavored warmth dressed for the cosmos. NVIDIA Engineering-grade canvas — pure black hero / paper-white body / one violently saturated `#76b900` green that carries every CTA and corner square. Omnivore Open-source read-it-later — near-white reading canvas, focused emerald-on-paper brand, archival elegance after the Eleven Labs sunset. OpenAI Pure white canvas, OpenAI Sans set in calm 500-weight, and a single black pill for the only action that matters — try ChatGPT. OpenRouter Pure-black canvas with custom display typography and pragmatic mono — LLM-router infrastructure dressed as a terminal billing dashboard. OpenSea Pure-black canvas, electric `#2081e2` blue, and Inter at trader-pro density — the original NFT marketplace as financial terminal. Optimism Pure-white canvas, signature `#ff0420` red voltage, and Inter at confident L2 register — Ethereum rollup as bold optimistic infrastructure. Ory White canvas with Inter 48/400 display + signature deep-navy `#0f172a` CTA — open-source-first identity for technical teams. Oura Pure-black canvas with Inter precision and gold-stamped scores — the premium-ring health-precision aesthetic. Paper Website A literal sheet-of-paper website — single literary serif, off-white sheet canvas, narrow reading columns, ink-blue links. PayPal Dual-blue corporate trust — PayPal Sans Big over white, with a deep-navy ink and a sky-blue counterpoint. Peloton Signature `#cb1e4e` red on midnight ink, Inter display, instructor-led premium-fitness storefront. Perplexity Cream paper canvas, custom pplxSans, and the unmistakable Tropic-cyan accent — a reference-library answer engine dressed in warm tones. Pinecone White canvas with Inter and a signature `#1cb0d0` cyan — vector database technical-marketing dressed in clean blueprint chrome. Plaid Pale blue trust on white, classical Stripe-adjacent type, and a Benjamin-Franklin-as-mascot moment of personality. Plain B2B support tool with a Dinamo grotesk and a single radioactive `#1ad379` action — Linear-restraint applied to support. PlanetScale Pure-black canvas, blood-red accent, mono-set numerals — a database brand styled like a financial terminal. Polar Dev-tool obsidian — 8rem editorial display headlines, indigo accents, Louize serif moments. Polygon Deep purple `#8247e5` voltage, soft surface ladder, and Inter at enterprise calm — Ethereum L2 as institutional infrastructure. Porsche Engineering-purity black-on-white — Porsche Next at 96px regular, Rosso PostHog Cream-canvas analytics with mustard-yellow CTAs and IBM Plex — open-source craft, not SaaS gloss. Postmark Postal-yellow #ffde00 + warm-black #1c1d1f + paper-white canvas — the transactional email API designed like a friendly post office sign. Prime Video Amazon-blue streaming canvas with Ember sans and the dense, utility-first marketplace UI vocabulary. PropelAuth White canvas with SF Pro Rounded display 60/900 + deep-navy ink — B2B multi-tenant auth with Apple-tinted polish. Qwik Electric purple-to-blue gradient on near-black — resumable execution dressed as a lightning bolt. Railway Ship software peacefully — IBM Plex Serif headlines on a deep eggplant canvas, with a single confident violet for action. Raindrop.io White paper, system-ui sans, soft watercolor blob backgrounds, and a vivid `#0b7ed0` blue CTA — a bookmark manager that ships like a creative-tool sketch. Ramp Off-yellow `#fcfb70` and black-on-white editorial — finance ops dressed as a printed annual report. Raycast Near-black canvas, glowing keycaps, monospaced shortcut chips — a marketing site that thinks like a launcher. Razer Neon `#44d62c` snake-green on jet black with Roboto — the For Gamers, By Gamers visual signature. Readwise Pastel-orange book-club warmth — soft cream canvas, friendly Tiempos serif accents, and a tangerine that signals 'this is your library.' Reddit Front-page-of-the-internet orange — community-card density, IBM Plex Sans display, and a confident Remix Signature `#3992ff` blue on pure white with Inter — a nested-routes web framework dressed as a manifesto poster. Render Lavender on white — a PaaS that swapped Heroku purple for a candy-bright #8a05ff and kept the airy whitespace. Replicate AI-API marketing — light page chrome, dark hero canvas, rb-Freigeist Neue display, JetBrains Mono code, sharp 0px corners. Replit Saturated turquoise on `#0e1525` ink — the cloud-IDE aesthetic with IBM Plex DNA and a JetBrains Mono soul. Resend Pure-black canvas with Domaine Display serif at 96px and Commit Mono code chips — email infra that thinks in italics. Retool Pragmatic blue #3a55fc + Inter + dense product mocks — the internal-tool platform that designed itself like a well-organised admin panel. Reuters Global newswire restraint — signature orange (`#ff8000`), Knowledge Medium custom sans, broadsheet rigor for the world''s oldest news agency. Riot Games Crimson `#d13639` red on near-black with custom Riot Beam display — esports-tournament drama and competitive-MOBA editorial. Rive Chunky animated display type and saturated playful colour — interactive graphics platform that wears its motion design on its sleeve. Roblox Bright `#ed1d24` red on white with Builder Sans — the youth-block-builder playground turned multi-billion-game social platform. RunPod Deep slate canvas with Inter and a signature `#673ab7` purple — accessible GPU cloud dressed in friendly developer chrome. Runway A near-black research canvas with ABC Normal headlines pulled tight at -2.5px — a film studio, an ML lab, and a brutalist gallery in one shell. Salesforce Cloud-trust dashboards — Salesforce Sans on a sky-blue ground, with Astro the bear standing guard over a dense CRM portal. SAP Enterprise-ERP precision in cobalt — SAP72 sans, signal-blue accents, and a calm white canvas built for trust. Segment Twilio Segment's customer-data-platform canvas — Whitney SSm humanist sans, navy-on-white, single confident `#1866ee` blue. Semafor Paper-cream canvas (`#f8f5d7`) with FeatureFlatHeadline serif and signature flag-style topic columns — global-news editorial built for the post-Twitter era. SendGrid Functional API-blue on white — the email-platform dashboard aesthetic, now folded under the Twilio umbrella. Sentry Deep-aubergine observability — Dammit Sans display, Rubik body, JetBrains Mono code, signature violet #7553ff and pill CTAs. shadcn/ui Copy-paste components in pure black-on-white — the most influential design system not actually shipped as a library. Shopify Dark-first commerce theatre — 96px NeueHaasGrotesk at weight 330, electric mint focus rings, and stacked multi-layer shadows. Signal Privacy-first messaging in `#3a76f0` Signal blue with Inter sans — minimal, ad-free, end-to-end-encrypted by default. Slack Aubergine workspace marketing — Salesforce-Avant-Garde headlines, all-caps 4px CTAs, white canvas with `#4a154b` accents. SolidJS Deep navy with a blue-to-cyan brand gradient — reactive primitives dressed as a circuit diagram. Sonos Pure black canvas, Inter typography, and audio-system minimalism — speakers presented as gallery objects. SoundCloud Signature `#ff5500` orange on `#f2f2f2` paper with Interstate sans — waveform-first audio social UI. SpaceX Pure-black cinematic photography, D-DIN aerospace stencil type, ghost-button minimalism — the interface disappears. Spotify Electric `#1ed760` green on near-black canvas with Spotify Mix sans — the canonical streaming-audio tile grid. Square Pure black on pure white, Square Sans grids, and retail-POS minimalism — commerce as black-and-white geometry. Starbucks Forest-green storefront — SoDoSans, full-pill buttons, warm-cream canvas, and a floating Frap CTA the brand calls home. Steam Deep blue-gray `#1b2838` with Motiva Sans — the utilitarian PC-gaming library that runs the world's largest digital storefront. SteelSeries Esports orange `#ff6900` on near-black with Inter — Danish precision peripherals for competitive play. Strava Signature `#fc4c02` orange + Inter on white — endurance-athlete data-driven storefront with map-overlay heritage. Stripe Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, signature `#533afd` purple CTAs. Stytch Paper-cream canvas with Booton display + Chivo Mono body — passwordless-modern auth, joined Twilio. Substack Magazine-on-the-internet — Spectral serif body at 19px, Cahuenga display, signature `#ff6719` orange CTAs. Suno A near-black booth with cream Neue Montreal and a hot-pink cue light — a music studio, a record sleeve, and a chat app fused into one canvas. Sunsama Thoughtful daily planning in warm cream and ink — Inter at modest weights over a paper-cream canvas with sage and rose accents and a calm, unhurried voice. Supabase Off-black canvas, signature emerald `#3ecf8e`, Circular as display, Postgres-grade type discipline. Superhuman White paper canvas, a custom Super Sans variable, and a single confident lavender — premium email dressed as a stationery brand. Supreme Box-logo red, Courier monospace, skate-deadpan minimalism — the most influential streetwear store on the web. Svelte Hot orange #ff3e00 against clean white with a confident sans — the framework that wears its flame as a wordmark. Tailwind CSS The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, every component built from Tailwind utilities. Tana Pure black canvas, a custom tanaClassic serif at 83px, and a pale-pistachio CTA — a knowledge graph dressed as a literary supplement. Target Bullseye red CTA, Helvetica Neue, photographic hero — friendly mass-market design with confident chromatic restraint. Telegram Cloud-blue messaging — Tesla Cinematic showroom on white — one Electric Blue CTA, Universal Sans, and viewport-height car photography. The Atlantic Modern serif headlines on cream-paper, signature Atlantic orange `#fbb33b`, long-form magazine reading rendered for the web. The Economist Deep cinnabar red `#e3120b`, Milo serif body, Econ Sans labels — the global-affairs weekly rendered with cover-illustration discipline. The Guardian Guardian Egyptian slab serif, signature navy `#052962`, structured ruled hierarchy with bold section accents. The New York Times Cheltenham serif headlines on paper-white, signature breaking-news red, the canonical American broadsheet rendered for the web. The New Yorker Adobe Caslon Pro + Irvin headline cap — a century of editorial gravitas in cream paper, ink black, and signature cartoon line. The Washington Post Postoni serif blackletter masthead, "Democracy Dies in Darkness" tagline, sober ink-on-paper political broadsheet. Things Cool light-blue canvas, system-ui sans, vivid Things-blue accent — a task manager that ships like an Apple Pro Display. Threads Instagram-adjacent text-first social — pure-black canvas, system-sans clarity, and a quiet brand restraint built from the @ glyph alone. TikTok Electric cyan-magenta on pure black — vertical-video voltage with custom Proxima Nova display and a bold neon brand grammar. tldraw Casual whiteboard sketchy — hand-drawn UI primitives, dotted-grid canvas, and a soft pastel palette that wears its toy-like energy with confidence. Together AI Deep navy on near-white with Inter sans — open-source LLM cloud rendered as developer-platform infrastructure. Toyota Japanese-reliability mainstream — `#eb0a1e` Toyota red on white, ToyotaType sans, and a calm-confident marketing surface for the world's most-sold automotive brand. Turbo Vercel-grade pure-black canvas with a magenta-to-blue Turbo gradient — the build system that wears its speed as a sweep. Turso SQLite at the edge — a deep-teal canvas with a CRT-bright cyan accent (#00face) that reads as a glowing edge node. Twilio Signal-red `#f22f46` against clean white — communications APIs given the visual weight of a broadcast colour. Twitch Purple `#9146ff` on `#0e0e10` canvas with Inter — the live-streaming UI built around chat, raids, and gaming density. Uber Eats Pure-black ground, Uber Move custom sans, Uber-app continuity — the operating system of food delivery. Udemy Signature `#a435f0` purple on white with Sailec sans — the open course-marketplace bazaar made approachable. Uniqlo Signature red `#ff0000`, Helvetica Neue system stack, japanese-utility-functional grid — the LifeWear engine. v0 A near-white prompt canvas with GeistSans and pure OKLCH grayscale — Vercel''s AI builder dressed as the calmest text editor on the internet. Venmo A single confident `#3d95ce` blue, Aktiv Grotesk geometry, and a social-feed informality — payments dressed as group chat. Vercel Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white type, Geist sans + mono, conic-gradient accents. Vite Electric purple #646cff + Manrope display + a literal lightning-bolt mark — the build tool that designed itself to feel as fast as it is. Vodafone Vodafone Red broadcast band, monumental 144px display, two-tier button system — corporate-newsroom telecom design. Volkswagen People's-car blue — the deep `#001e50` corporate hue, custom VW Sans, and a friendly-German marketing surface that sells everyday mobility with confidence. Walmart Spark-yellow on big-box blue, Antonio Display + Bogle sans — everyday low prices made loud. Warp Near-black canvas, neon-lime cursor, real terminal screenshots — a marketing site that boots like a shell. Weaviate White canvas with Inter and a signature `#1cdb46` open-source green — modular vector database dressed in approachable engineering chrome. webdesignhot AI-era editorial dark — pure black with one acid-lime accent. Webflow Indigo-to-purple gradient discipline with a precise structural sans — the visual builder that markets itself like a design conference. WHOOP Lime `#a0d10b` voltage on jet-black, Inter precision, recovery-data athlete-grade aesthetic. WIRED Newsstand-density editorial grid, sharp-corner buttons, mono ALL-CAPS kickers — Conde Nast meets engineering lab. Wise A flexible bright-lime green on cream-white — money that travels in sans-serif and a single confident accent. Workday HR-warm professional in tangerine — Adelle Sans humanist curves, signature `#f37721` orange, and a calm white people-first canvas. WorkOS Pure-white canvas with Untitled Sans 80/500 display + indigo-violet h2 — the B2B-enterprise gravitas aesthetic. X Pure-black canvas with Chirp display — algorithmic minimalism, single-letter wordmark, ruthless type discipline. Y Combinator Brutalist orange monolith — system-font sans on white canvas, signature `#f26625` orange-red blocks with hard 0px corners. You.com Crisp white developer-doc canvas, custom Lumen Sans, and the indigo `#5368EE` accent — a search API rebrand done as enterprise infrastructure. YouTube YouTube Sans + Roboto + signature `#ff0000` red — content-density at planetary scale. Zora Cream-white canvas, electric purple-orange duet, and a custom display — onchain creator network as zine cover.
try on →
1440 × 900
mobile · 390 × 844
Tokens design.md/v1.5
- bg
#ffffff - bg-soft
#f7f8fa - bg-cooler
#f2f4f7 - surface
#f0f2f6 - surface-warm
#fafbfc - surface-elev
#ffffff - text AAA · 16.7
#1d1e1f - text-strong
#000000 - text-muted
#5e6166 - text-soft
#86878a - text-faint — · 2.0
#b5b6b9 - brand AA·LG · 3.2
#408fff - brand-hover
#1f73ec - brand-soft
rgba(116,116,128,0.08) - brand-tint
#e8f1ff - accent-cyan
#5ac8fa - accent-cyan-deep
#34aadc - accent-magenta
#d94aff - accent-magenta-deep
#c71fea - accent-green
#34c759 - accent-green-deep
#28a745 - accent-orange
#ff9500 - accent-orange-deep
#e07b00 - accent-yellow
#ffcc00 - accent-pink
#ff2d55 - accent-purple
#af52de - accent-indigo
#5856d6 - border — · 1.3
rgba(0,0,0,0.10) - border-soft
rgba(0,0,0,0.06) - border-strong — · 1.5
rgba(0,0,0,0.16) - shadow-card
rgba(0,0,0,0.04) - shadow-elev
rgba(0,0,0,0.08) - shadow-deep
rgba(0,0,0,0.12) - shadow-glow
rgba(64,143,255,0.18) - semantic-success
#34c759 - semantic-warning
#ff9500 - semantic-danger
#ff3b30 - semantic-info
#408fff
Ship faster than ever.
display-hero Effra 80px w500 -0.015em
Ship faster than ever.
display-large Effra 64px w500 -0.01em
Ship faster than ever.
h1 Effra 56px w500 -0.01em
Built for teams that ship.
h2 Effra 40px w500 -0.005em
A complete kit
h3 Effra 32px w500 0
The quick brown fox jumps over the lazy dog.
h4 Effra 24px w400 0
The quick brown fox jumps over the lazy dog.
body-large Effra 22px w400 0
The quick brown fox jumps over the lazy dog.
body Effra 18px w400 0
The quick brown fox jumps over the lazy dog.
button-large Effra 18px w500 0
The quick brown fox jumps over the lazy dog.
button Effra 17px w500 0
The quick brown fox jumps over the lazy dog.
body-small Effra 16px w400 0
The quick brown fox jumps over the lazy dog.
nav-link Effra 16px w400 0
OUR DESIGN SYSTEM
label Effra 14px w500 0.02em
OUR DESIGN SYSTEM
caption Effra 14px w400 0
OUR DESIGN SYSTEM
label-eyebrow Effra 13px w500 0.05em
The quick brown fox jumps over the lazy dog.
micro Effra 12px w500 0.01em
- step-0 4px
- step-1 8px
- step-2 12px
- step-3 16px
- step-4 24px
- step-5 32px
- step-6 48px
- step-7 64px
- step-8 96px
- step-9 128px
- step-10 160px
- none
0px - micro
2px - xs
6px - sm
12px - md
16px - lg
20px - xl
22px - app-icon
22px - pill
24px - full
9999px
Text link →
Card preview
A complete kit — everything your product needs.
Hero, pricing, FAQ, dashboard, docs — every layout your product needs.
New
Stable
v1.0
Flexibits ships Fantastical the way Apple ships its Pro Apps — white canvas, system-blue CTA, geometric sans throughout, no editorial flourish. The display face is **Effra**, Foundry Monotype's humanist geometric sans with slightly-rounded terminals, used at every level from 14px label to 80px hero. The hero "Give Your Calendar Superpowers" sets at 56–80px Effra 500 — the medium-weight choice (rather than bold) is what gives the page its precision-instrument feel rather than marketing impact. The action color is `#408fff`, identical to Apple's system blue (`#007aff` adjusted slightly warmer for white backgrounds), and the CTA radius is 24px — fully round at the button's height, the same pill shape used on iOS's "Continue" affordances. The most distinctive move is the **app-icon confetti**: glass-effect rounded squares in cyan, magenta, green, and orange floating around the hero image of the calendar, borrowed from how iOS / iPadOS shows app icons drifting in the App Store's Today tab. The 22px squircle radius on those confetti pieces is the iOS app-icon visual radius (the iOS rounded-rectangle squircle is technically a continuous curve, but 22px is the closest browser-renderable approximation). The result is that Fantastical reads as Apple's own Calendar app marketing — same pixel discipline, same chromatic vocabulary.
- System blue CTA, fully-round pill radius, glass-app-icon decorative confetti, single-family Effra-style discipline
- iOS color palette (system blue, system orange, system green, system magenta) used as accent confetti
- Confidence in a single saturated blue as the entire chromatic action layer
- Calendar-tool design conventions — soft cool greys, blue actions, rounded pill buttons
- The geometric humanist sans choice — rounded terminals soften what would otherwise be a too-sharp Helvetica clone
Export
4 formats · paste-ready
Tailwind
theme.extend block for tailwind.config.js
CSS variables
:root { --bg, --text, --brand, … } you can paste anywhere
DTCG JSON
W3C Design Tokens Community Group format
Figma Variables
Importable into Figma → Variables → Import
---
name: Fantastical
tagline: White paper, Effra geometric sans, full-round blue pills, and a rainbow of app-icon glass squares — a calendar app marketed like Apple''s Pro Apps.
author: webdesignhot
source_url: https://flexibits.com/fantastical
spec: design.md/v1.5
quality: curated
featured: false
categories: [saas, design-tools]
tags: [light, minimal, sans, bright, soft, structured, cool]
preview_swatch: ['#ffffff', '#408fff', '#1d1e1f']
related: [apple, things-app, stripe]
description: 'Fantastical''s site is an Apple-pro promo spread for a calendar. White canvas, Effra sans throughout, a vivid `#408fff` Apple-system-blue CTA pill at 24px radius (fully round), and decorative glass-app-icon squares in cyan, magenta, green, and orange floating around the hero — borrowed directly from the way iOS shows app icons in the App Store. Body copy in near-black `#1d1e1f`, no custom display font, no editorial flourish — just precision and chromatic confetti.'
colors:
bg: '#ffffff' # paper-white canvas
bg-soft: '#f7f8fa' # subtle cool grey for nested sections
bg-cooler: '#f2f4f7' # pricing section bg
surface: '#f0f2f6' # cool card surface
surface-warm: '#fafbfc' # subtly warmer card variant
surface-elev: '#ffffff' # elevated card on f7-grey ground
text: '#1d1e1f' # primary body copy, near-black
text-strong: '#000000' # display copy
text-muted: '#5e6166' # captions, secondary
text-soft: '#86878a' # tertiary, metadata
text-faint: '#b5b6b9' # disabled, faintest
brand: '#408fff' # vivid Apple-system blue CTA
brand-hover: '#1f73ec' # pressed state, darker blue
brand-soft: 'rgba(116,116,128,0.08)' # secondary button bg, system-style
brand-tint: '#e8f1ff' # tint for info banners
accent-cyan: '#5ac8fa' # iOS app-icon glass square cyan
accent-cyan-deep: '#34aadc' # darker cyan
accent-magenta: '#d94aff' # iOS app-icon glass square magenta
accent-magenta-deep: '#c71fea' # darker magenta
accent-green: '#34c759' # iOS app-icon glass square green
accent-green-deep: '#28a745' # darker green
accent-orange: '#ff9500' # iOS app-icon glass square orange
accent-orange-deep: '#e07b00' # darker orange
accent-yellow: '#ffcc00' # iOS yellow accent
accent-pink: '#ff2d55' # iOS pink accent
accent-purple: '#af52de' # iOS purple accent
accent-indigo: '#5856d6' # iOS indigo accent
border: 'rgba(0,0,0,0.10)' # 10% black hairline
border-soft: 'rgba(0,0,0,0.06)' # softer divider
border-strong: 'rgba(0,0,0,0.16)' # stronger outline on hover
shadow-card: 'rgba(0,0,0,0.04)' # subtle card shadow
shadow-elev: 'rgba(0,0,0,0.08)' # elevated mockup shadow
shadow-deep: 'rgba(0,0,0,0.12)' # device-mockup shadow
shadow-glow: 'rgba(64,143,255,0.18)' # blue CTA glow
semantic-success: '#34c759'
semantic-warning: '#ff9500'
semantic-danger: '#ff3b30'
semantic-info: '#408fff'
typography:
display:
family: 'Effra, "Helvetica Neue", Arial, Helvetica, sans-serif'
weights: [400, 500, 700]
opentype: ['kern', 'liga']
body:
family: 'Effra, "Helvetica Neue", Arial, Helvetica, sans-serif'
weights: [400, 500]
opentype: ['kern', 'liga']
mono:
family: '"SF Mono", "Menlo", ui-monospace, monospace'
weights: [400, 500]
scale:
display-hero: { size: 80, weight: 500, lineHeight: 1.10, tracking: '-0.015em', family: display, opentype: 'kern, liga' }
display-large: { size: 64, weight: 500, lineHeight: 1.15, tracking: '-0.01em', family: display }
h1: { size: 56, weight: 500, lineHeight: 1.15, tracking: '-0.01em', family: display }
h2: { size: 40, weight: 500, lineHeight: 1.20, tracking: '-0.005em', family: display }
h3: { size: 32, weight: 500, lineHeight: 1.25, tracking: '0', family: display }
h4: { size: 24, weight: 400, lineHeight: 1.40, tracking: '0', family: display }
body-large: { size: 22, weight: 400, lineHeight: 1.50, tracking: '0', family: body }
body: { size: 18, weight: 400, lineHeight: 1.55, tracking: '0', family: body }
body-small: { size: 16, weight: 400, lineHeight: 1.55, tracking: '0', family: body }
button: { size: 17, weight: 500, lineHeight: 1.0, tracking: '0', family: body }
button-large: { size: 18, weight: 500, lineHeight: 1.0, tracking: '0', family: body }
nav-link: { size: 16, weight: 400, lineHeight: 1.40, tracking: '0', family: body }
label: { size: 14, weight: 500, lineHeight: 1.30, tracking: '0.02em', family: body }
label-eyebrow: { size: 13, weight: 500, lineHeight: 1.20, tracking: '0.05em', family: body, transform: 'uppercase' }
caption: { size: 14, weight: 400, lineHeight: 1.40, tracking: '0', family: body }
micro: { size: 12, weight: 500, lineHeight: 1.30, tracking: '0.01em', family: body }
radius:
none: 0
micro: 2
xs: 6
sm: 12
md: 16
lg: 20
xl: 22
app-icon: 22 # iOS app-icon squircle visual radius
pill: 24 # primary CTA pill — fully round at button height
full: 9999
spacing:
base: 4
xxs: 2
xs: 4
sm: 8
md: 12
lg: 16
xl: 24
xxl: 32
section-sm: 64
section: 96
section-lg: 128
scale: [4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 160]
layout:
page-width: 1200
prose-width: 720
header-height: 72
hero-height: 720
grid-gap: 32
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
ease-entrance: 'cubic-bezier(0, 0, 0.2, 1)'
ease-spring: 'cubic-bezier(0.5, 1.25, 0.75, 1.25)'
duration-fast: 120
duration-standard: 240
duration-slow: 400
duration-confetti-drift: 8000
reduced-motion: 'respects prefers-reduced-motion: reduce — app-icon confetti freezes; CTA hover collapses to opacity'
breakpoints:
mobile: 640
tablet: 1024
desktop: 1280
wide: 1536
shadows:
ambient: 'rgba(0,0,0,0.04) 0 1px 3px'
standard: 'rgba(0,0,0,0.08) 0 4px 12px'
elevated: 'rgba(0,0,0,0.12) 0 12px 32px'
deep: 'rgba(0,0,0,0.16) 0 24px 48px'
device-mockup: 'rgba(0,0,0,0.18) 0 32px 64px -8px'
ring: '0 0 0 4px rgba(64,143,255,0.30)'
cta-glow: '0 8px 24px rgba(64,143,255,0.18)'
accessibility:
contrast-text-on-bg: 16.4 # #1d1e1f on white — AAA
contrast-text-on-brand: 4.7 # white on #408fff — AA
contrast-muted-on-bg: 7.1 # #5e6166 on white — AAA at body
contrast-soft-on-bg: 4.5 # #86878a on white — AA at body
focus-ring: '4px solid rgba(64,143,255,0.30) — iOS-style halo'
reduced-motion-honored: true
keyboard-nav: 'tab order follows visual; device-tab selector arrow-keys; skip-link present'
components:
button-primary:
background: '#408fff'
text: '#ffffff'
radius: 24
padding: '14px 28px'
height: 50
font: button-large
hover: 'background #1f73ec; shadow 0 8px 24px rgba(64,143,255,0.18)'
active: 'background #1862c4'
use: 'primary CTA — Try Free, fully-round 24px blue pill, the iOS Continue affordance'
button-secondary:
background: 'rgba(116,116,128,0.08)'
text: '#408fff'
radius: 24
padding: '14px 28px'
height: 50
font: button-large
hover: 'background rgba(116,116,128,0.14)'
use: 'secondary CTA — Learn More, iOS tinted button style'
button-tertiary:
background: 'transparent'
text: '#408fff'
radius: 24
padding: '14px 28px'
font: button-large
hover: 'background rgba(64,143,255,0.06)'
use: 'tertiary action — text-only blue link with hover wash'
button-ghost:
background: 'transparent'
text: '#1d1e1f'
radius: 24
padding: '12px 20px'
font: button
hover: 'background rgba(0,0,0,0.04)'
use: 'nav button, dismiss action'
card-feature:
background: '#ffffff'
text: '#1d1e1f'
border: '1px solid rgba(0,0,0,0.06)'
radius: 16
padding: '32px'
shadow: '0 4px 12px rgba(0,0,0,0.04)'
use: 'feature card — white on f7-grey ground'
card-cool:
background: '#f0f2f6'
text: '#1d1e1f'
border: '1px solid rgba(0,0,0,0.06)'
radius: 20
padding: '32px'
use: 'cool-grey card — nested feature panel'
card-pricing:
background: '#ffffff'
text: '#1d1e1f'
border: '1px solid rgba(0,0,0,0.10)'
radius: 20
padding: '40px'
shadow: '0 12px 32px rgba(0,0,0,0.08)'
use: 'pricing tier card — elevated on cooler ground'
device-mockup:
background: '#000000'
radius: 36
padding: 0
shadow: '0 32px 64px -8px rgba(0,0,0,0.18)'
use: 'iPhone / Mac / iPad device mockup with screenshot'
app-icon-square:
background: 'gradient-glass'
radius: 22
padding: 0
shadow: '0 8px 24px rgba(0,0,0,0.10) inset 0 1px 0 rgba(255,255,255,0.40)'
use: 'glass-effect rounded square — cyan / magenta / green / orange confetti around hero'
input:
background: '#ffffff'
text: '#1d1e1f'
border: '1px solid rgba(0,0,0,0.16)'
radius: 12
padding: '12px 16px'
height: 48
font: body
focus: 'border #408fff; ring 0 0 0 4px rgba(64,143,255,0.20)'
use: 'email / form input — iOS-native rounded'
device-tab:
background: 'transparent'
text: '#5e6166'
radius: 24
padding: '8px 16px'
font: button
hover: 'background rgba(0,0,0,0.04); text #1d1e1f'
use: 'device-tab selector for switching between Mac / iPhone / iPad / Apple Watch screenshots'
device-tab-active:
background: 'rgba(64,143,255,0.10)'
text: '#408fff'
radius: 24
padding: '8px 16px'
font: button
use: 'active device tab — soft blue tint background'
badge-pill:
background: 'rgba(64,143,255,0.10)'
text: '#408fff'
radius: 9999
padding: '4px 12px'
font: micro
use: 'NEW / category badge — soft tinted pill'
nav-link:
background: 'transparent'
text: '#1d1e1f'
font: nav-link
padding: '8px 16px'
hover: 'opacity 0.7'
use: 'top nav menu — Mac / iPhone / iPad / Apple Watch / Pricing'
dark-mode: optional
lineage:
summary: |
Flexibits ships Fantastical the way Apple ships its Pro Apps —
white canvas, system-blue CTA, geometric sans throughout, no
editorial flourish. The display face is **Effra**, Foundry
Monotype's humanist geometric sans with slightly-rounded
terminals, used at every level from 14px label to 80px hero.
The hero "Give Your Calendar Superpowers" sets at 56–80px Effra
500 — the medium-weight choice (rather than bold) is what gives
the page its precision-instrument feel rather than marketing
impact. The action color is `#408fff`, identical to Apple's
system blue (`#007aff` adjusted slightly warmer for white
backgrounds), and the CTA radius is 24px — fully round at the
button's height, the same pill shape used on iOS's "Continue"
affordances. The most distinctive move is the **app-icon
confetti**: glass-effect rounded squares in cyan, magenta, green,
and orange floating around the hero image of the calendar,
borrowed from how iOS / iPadOS shows app icons drifting in the
App Store's Today tab. The 22px squircle radius on those
confetti pieces is the iOS app-icon visual radius (the iOS
rounded-rectangle squircle is technically a continuous curve,
but 22px is the closest browser-renderable approximation). The
result is that Fantastical reads as Apple's own Calendar app
marketing — same pixel discipline, same chromatic vocabulary.
influences:
- name: 'Apple iOS App Store / Pro Apps'
role: 'System blue CTA, fully-round pill radius, glass-app-icon decorative confetti, single-family Effra-style discipline'
url: 'https://www.apple.com/app-store/'
- name: 'Apple Human Interface Guidelines'
role: 'iOS color palette (system blue, system orange, system green, system magenta) used as accent confetti'
url: 'https://developer.apple.com/design/human-interface-guidelines/'
- name: 'Stripe'
role: 'Confidence in a single saturated blue as the entire chromatic action layer'
url: 'https://stripe.com'
- name: 'Calendly / Cron (defunct)'
role: 'Calendar-tool design conventions — soft cool greys, blue actions, rounded pill buttons'
url: 'https://calendly.com'
- name: 'Foundry Monotype / Effra'
role: 'The geometric humanist sans choice — rounded terminals soften what would otherwise be a too-sharp Helvetica clone'
url: 'https://www.monotype.com/fonts/effra'
---
## 1. Visual Theme & Atmosphere
Fantastical's site is an Apple Pro Apps promo for a calendar. White canvas, **Effra** sans throughout, a vivid `#408fff` Apple-system-blue pill CTA at fully-round 24px radius, and a confetti of glass app-icon squares in cyan, magenta, green, and orange floating around the hero. The H1 sets at 56–80px Effra 500, the body deck at 22–24px Effra 400, all on a near-black `#1d1e1f`. There is no editorial flourish, no serif moment, no warm cream — every chromatic, typographic, and spatial decision is borrowed from Apple's own Calendar / Notes / Reminders marketing.
The atmosphere is **precision-instrument-meets-playful-confetti**. The page itself is calm, white, structured — the kind of marketing surface that suggests "this app respects your time." But around the hero image, six to ten glass app-icon squares drift slowly in cyan, magenta, green, orange, and yellow, the same hues iOS uses for its system colors. The contrast — white-canvas calm with chromatic-confetti play — is what makes the page feel "Apple-native" rather than generic-SaaS-clean.
Below the hero, the page follows a clean single-column rhythm: hero with confetti, a device-tab selector spread (switch between Mac / iPhone / iPad / Apple Watch screenshots), a feature spread on cool-grey ground, pricing on cooler ground, and a FAQ. White runs edge-to-edge; cool-grey nested sections only appear for pricing and feature sub-spreads. The grey is `#f7f8fa` — a true cool grey with a hint of blue, not warm or neutral, matching the macOS chrome.
Type is single-family throughout. **Effra** carries every role from 14px label to 80px hero — no second display face, no serif emphasis, no italic flourish. The medium weight (500) at large size is what gives the page its precision-instrument feel: not bold enough to read as marketing, not light enough to read as fashion. Tracking is restrained (`-0.01em` to `-0.015em` at display) — Effra's metrics are already tight, so heavy negative tracking would crush the air between letters.
The hero "Give Your Calendar Superpowers" demonstrates the system: 56–80px Effra 500, sentence case, near-black `#1d1e1f`, line-height 1.10–1.15. Below sits a 22px deck in `#5e6166` muted text, then the primary CTA — a `#408fff` solid blue pill at 24px radius (fully round at button height), `#ffffff` text in Effra 500 / 17px, padding `14px 28px`. Hover triggers a `0 8px 24px rgba(64,143,255,0.18)` blue glow halo — the only chromatic motion on the marketing surface.
**Key Characteristics:**
- White paper canvas, cool grey nested sections (`#f7f8fa`).
- Single-family Effra discipline — no second face anywhere.
- Apple system blue `#408fff` as the only saturated CTA color.
- Fully-round 24px CTA pills — the iOS Continue radius.
- Glass app-icon confetti (cyan / magenta / green / orange) at 22px squircle radius.
- Medium-weight (500) display, never bold — precision over impact.
- Device-tab selector for Mac / iPhone / iPad / Apple Watch screenshots.
- Apple-style blurred shadows on device mockups, hairlines elsewhere.
- Section rhythm clean and unhurried: hero → device tabs → feature → pricing → FAQ.
- iOS color palette as decorative accent, never as content.
## 2. Color Palette & Roles
### Primary
- **Background** (`#ffffff`): paper-white canvas, the page's defining ground. No off-white calibration.
- **Text** (`#1d1e1f`): primary body copy — near-black with a barely-perceptible warm undertone (the 1d in red is a hair higher than 1d in green/blue).
- **Brand** (`#408fff`): vivid Apple-system blue — the only saturated CTA hue. A touch warmer than iOS `#007aff` to read better on white.
### Brand & Dark
- **Brand Hover** (`#1f73ec`): pressed/hover state — darker blue.
- **Brand Active** (`#1862c4`): deepest pressed blue (active state).
- **Brand Soft** (`rgba(116,116,128,0.08)`): secondary button bg, iOS tinted-button style.
- **Brand Tint** (`#e8f1ff`): info banner tint.
### Accent (iOS System Color Confetti)
These appear almost exclusively as **glass app-icon confetti** floating around the hero — never as button fills, never under text:
- **Cyan** (`#5ac8fa`): iOS system cyan.
- **Cyan Deep** (`#34aadc`): darker cyan.
- **Magenta** (`#d94aff`): iOS system magenta.
- **Magenta Deep** (`#c71fea`): darker magenta.
- **Green** (`#34c759`): iOS system green.
- **Green Deep** (`#28a745`).
- **Orange** (`#ff9500`): iOS system orange.
- **Orange Deep** (`#e07b00`).
- **Yellow** (`#ffcc00`): iOS yellow.
- **Pink** (`#ff2d55`): iOS pink.
- **Purple** (`#af52de`): iOS purple.
- **Indigo** (`#5856d6`): iOS indigo.
The full iOS system palette is available; only 4–6 hues appear on any given hero. The discipline is *which* confetti — cyan/magenta/green/orange is the canonical homepage set.
### Interactive
- **Link / CTA** (`#408fff`): the brand blue.
- **Hover** (`#1f73ec`): darker blue + 18% blue glow.
- **Focus Ring** (`0 0 0 4px rgba(64,143,255,0.30)`): iOS-style halo, not a sharp 2px ring.
### Neutral Scale
- **Text Strong** (`#000000`): rare display emphasis.
- **Text** (`#1d1e1f`): primary body.
- **Text Muted** (`#5e6166`): captions, secondary copy.
- **Text Soft** (`#86878a`): tertiary, metadata.
- **Text Faint** (`#b5b6b9`): disabled, faintest.
### Surface & Borders
- **Surface** (`#f0f2f6`): cool card surface.
- **BG Soft** (`#f7f8fa`): nested section ground (cool grey with hint of blue).
- **BG Cooler** (`#f2f4f7`): pricing section ground.
- **Surface Warm** (`#fafbfc`): subtly warmer card variant.
- **Border** (`rgba(0,0,0,0.10)`): standard 10% black hairline.
- **Border Soft** (`rgba(0,0,0,0.06)`): softer divider.
- **Border Strong** (`rgba(0,0,0,0.16)`): hover/focus outline.
### Shadow Colors
- **Ambient** (`rgba(0,0,0,0.04) 0 1px 3px`): faint card lift.
- **Standard** (`rgba(0,0,0,0.08) 0 4px 12px`): feature card.
- **Elevated** (`rgba(0,0,0,0.12) 0 12px 32px`): pricing card.
- **Device Mockup** (`rgba(0,0,0,0.18) 0 32px 64px -8px`): the blurred Apple-style shadow under iPhone/Mac mockups.
- **CTA Glow** (`rgba(64,143,255,0.18) 0 8px 24px`): blue halo on primary CTA hover.
### Semantic
- **Success** (`#34c759`): iOS system green.
- **Warning** (`#ff9500`): iOS system orange.
- **Danger** (`#ff3b30`): iOS system red.
- **Info** (`#408fff`): brand blue dual-duty.
## 3. Typography Rules
### Font Family
- **Display + Body:** `Effra, "Helvetica Neue", Arial, Helvetica, sans-serif`. Foundry Monotype's humanist geometric sans with slightly-rounded terminals — softer than Helvetica, more geometric than Frutiger. Weights 400/500 (500 is the medium that defines the brand voice); 700 reserved for emphasis spans.
- **Mono:** `"SF Mono", "Menlo", ui-monospace, monospace`. System default — Fantastical does not use mono on the marketing surface (only inside the in-app Time Zone code identifiers).
- **OpenType:** `kern` and `liga` standard. No stylistic-set tricks; Effra's character set is already precision-tuned.
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| display-hero | Effra | 80 | 500 | 1.10 | -0.015em | kern, liga | Homepage H1 — medium not bold |
| display-large | Effra | 64 | 500 | 1.15 | -0.01em | kern, liga | Section H1 |
| h1 | Effra | 56 | 500 | 1.15 | -0.01em | kern, liga | Page H1 |
| h2 | Effra | 40 | 500 | 1.20 | -0.005em | kern, liga | Section heads |
| h3 | Effra | 32 | 500 | 1.25 | 0 | kern, liga | Sub-section heads |
| h4 | Effra | 24 | 400 | 1.40 | 0 | kern, liga | Card titles |
| body-large | Effra | 22 | 400 | 1.50 | 0 | kern, liga | Hero deck |
| body | Effra | 18 | 400 | 1.55 | 0 | kern, liga | Default body |
| body-small | Effra | 16 | 400 | 1.55 | 0 | kern, liga | Footer body, metadata |
| button | Effra | 17 | 500 | 1.0 | 0 | kern, liga | CTA label |
| button-large | Effra | 18 | 500 | 1.0 | 0 | kern, liga | Hero primary CTA |
| nav-link | Effra | 16 | 400 | 1.40 | 0 | kern, liga | Top nav |
| label | Effra | 14 | 500 | 1.30 | 0.02em | kern | Form labels |
| label-eyebrow | Effra | 13 | 500 | 1.20 | 0.05em | kern, uppercase | Section eyebrow |
| caption | Effra | 14 | 400 | 1.40 | 0 | kern, liga | Caption |
| micro | Effra | 12 | 500 | 1.30 | 0.01em | kern | Pill / badge text |
### Principles
- **Single-family discipline.** Effra carries every level. Loading a second display face would break the precision-instrument register.
- **Medium-weight at scale, not bold.** Display tier sets at 500, not 700. The medium weight is what reads as "instrument" rather than "marketing."
- **Weight as hierarchy, not size alone.** 500 for headlines, 400 for body. The 100-unit weight gap is the system's primary readability cue.
- **Tracking restraint.** Effra's metrics are tight. Display tracking goes negative `-0.005em` to `-0.015em` only. Body always 0. UPPERCASE labels positive (`0.02–0.05em`).
- **Sentence case throughout.** Headlines, body, captions all sentence case. The only UPPERCASE register is the 13px eyebrow label — and it's used sparingly.
- **No serif emphasis.** Even italics are rare. Effra carries every voice.
- **Line-height precision.** Display 1.10–1.15, body 1.50–1.55. The narrow line-height at display lets the headline breathe across two lines without becoming a brick.
- **Letter terminals matter.** Effra's slightly-rounded terminals — vs. Helvetica's sharp ones — soften the page just enough that it reads "approachable Apple" rather than "corporate Apple." If swapping for SF Pro, the page would tilt clinical.
## 4. Component Stylings
### Buttons
**Primary (Blue Pill)**
- Background: `#408fff`
- Text: `#ffffff`
- Padding: `14px 28px`, height 50px
- Radius: **24px (fully round at button height)** — iOS Continue affordance
- Font: button-large (Effra 18 / 500)
- Hover: background `#1f73ec` + shadow `0 8px 24px rgba(64,143,255,0.18)` blue glow
- Active: background `#1862c4`
- Use: hero CTA — Try Free, Buy Fantastical, Subscribe.
**Secondary (Soft-Grey Tinted)**
- Background: `rgba(116,116,128,0.08)` — iOS tinted-button style
- Text: `#408fff` — blue text on grey tint
- Padding: `14px 28px`, height 50
- Radius: 24
- Hover: background opacity to 0.14
- Use: Learn More, See Pricing — paired with primary on hero.
**Tertiary (Text-Only Blue)**
- Background: transparent
- Text: `#408fff`
- Padding: `14px 28px`
- Radius: 24
- Hover: `rgba(64,143,255,0.06)` background wash
- Use: inline blue link with hover emphasis.
**Ghost / Nav Button**
- Background: transparent
- Text: `#1d1e1f`
- Padding: `12px 20px`
- Hover: `rgba(0,0,0,0.04)` background
- Use: nav menu link, dismiss action.
### Cards
**Feature Card (White on Cool Grey)**
- Background: `#ffffff`
- Border: `1px solid rgba(0,0,0,0.06)`
- Radius: 16px (md)
- Padding: 32px
- Shadow: `0 4px 12px rgba(0,0,0,0.04)` faint lift
- Use: feature card on `#f7f8fa` ground.
**Cool-Grey Card (Nested)**
- Background: `#f0f2f6`
- Border: `1px solid rgba(0,0,0,0.06)`
- Radius: 20px (lg)
- Padding: 32
- Use: nested feature panel with no shadow.
**Pricing Card**
- Background: `#ffffff`
- Border: `1px solid rgba(0,0,0,0.10)`
- Radius: 20px
- Padding: 40
- Shadow: `0 12px 32px rgba(0,0,0,0.08)` — elevated
- Use: pricing tier card on `#f2f4f7` ground.
**Device Mockup**
- Background: `#000000` (the device frame itself)
- Radius: 36 (matching iPhone bezel curvature)
- Shadow: `0 32px 64px -8px rgba(0,0,0,0.18)` — Apple-style blurred shadow under the device
- Use: iPhone / Mac / iPad / Apple Watch product screenshot.
### App-Icon Confetti
The signature decorative primitive:
- 22px squircle radius (iOS app-icon visual radius)
- Glass-effect fill: linear-gradient with translucent base + `inset 0 1px 0 rgba(255,255,255,0.40)` highlight
- Outer shadow: `0 8px 24px rgba(0,0,0,0.10)`
- Sizes: 48px / 64px / 80px / 96px (a mix per hero)
- Hues: cyan / magenta / green / orange / yellow (4–6 per hero)
- Slow drift animation (~8s cycle, ±4px translateY, low opacity 0.85–1.0 oscillation)
### Inputs / Forms
**Input**
- Background: `#ffffff`
- Border: `1px solid rgba(0,0,0,0.16)`
- Radius: 12px
- Padding: `12px 16px`, height 48
- Focus: border `#408fff` + ring `0 0 0 4px rgba(64,143,255,0.20)` — iOS halo
- Use: email signup, contact form.
### Device-Tab Selector
Distinctive horizontal selector used to switch between Mac / iPhone / iPad / Apple Watch screenshots:
**Tab (Inactive)**
- Background: transparent
- Text: `#5e6166`
- Radius: 24 (full pill at height)
- Padding: `8px 16px`
- Hover: `rgba(0,0,0,0.04)` bg + `#1d1e1f` text
**Tab (Active)**
- Background: `rgba(64,143,255,0.10)` soft blue tint
- Text: `#408fff`
- Radius: 24
### Badges
**Pill Badge**
- Background: `rgba(64,143,255,0.10)` blue tint
- Text: `#408fff`
- Radius: 9999, Padding: `4px 12px`
- Font: micro (12/500)
- Use: NEW / FEATURED tags.
### Navigation
Top nav bar 72px tall, white background, hairline `1px solid rgba(0,0,0,0.06)` border-bottom on scroll. Links: Effra 16/400, hover opacity 0.7. Right side: Login (ghost) + Try Free (primary blue pill).
## 5. Layout Principles
### Spacing System
Base 4px. Scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128 / 160. Section gaps 96–128px; inside-card padding 32–40; hero vertical margin 96; nav padding `8px 16px`.
The density is moderate-to-loose — not as airy as Apple's own pages (which run 160–200px section gaps), but more spacious than Stripe's 64–80px tight rhythm.
### Grid & Container
- **Page width:** 1200px max.
- **Prose width:** 720px (intro paragraphs and FAQ answers).
- **Header height:** 72px.
- **Hero height:** ~720px.
- **Grid gap:** 32px between feature cards.
The page follows a clean single-column rhythm — hero with confetti centered, device-tab selector below, feature spread, pricing, FAQ. No multi-column hero, no asymmetric splits.
### Whitespace Philosophy
Calendar apps live or die on **clarity**. Fantastical's marketing whitespace earns that clarity: deliberate air around the H1 (96px above and below), generous breathing room between feature cards (32px gutter), unhurried section pacing. The page never feels dense.
### Section Cadence
White → cool-grey → white → cooler-grey → white. The grounds don't strictly alternate; the rhythm is:
1. Hero (white) with confetti — 720px
2. Device-tab feature spread (white) — 600px
3. Feature grid (`#f7f8fa` cool grey) — 600px
4. Pricing (`#f2f4f7` cooler) — 700px
5. FAQ (white) — 500px
6. Footer (white)
The cool-grey nested sections are deliberate accents — they signal "this is a deeper dive" without breaking the white-canvas calm.
## 6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| None | 0 | Edge-bound elements (rare) |
| Micro | 2 | Tag chips (rare) |
| XS | 6 | Small selector pills |
| SM | 12 | Inputs, secondary chips |
| **MD** | **16** | **Standard card radius** |
| LG | 20 | Elevated/pricing cards |
| XL | 22 | iOS app-icon squircle visual radius |
| App-Icon | 22 | Glass-effect confetti pieces |
| **Pill** | **24** | **Primary CTA — fully round at button height** |
| Full | 9999 | Pill badges, status chips |
Two radii do most of the work: **24** (the primary CTA pill) and **16** (the standard card). The 22 squircle is reserved for app-icon confetti — it's a decorative-not-component radius. Mixing these reads as off-system.
**Compound radii:** none — Fantastical is consistent corners. The radius scale itself is the shape language.
## 7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 | Flat — no shadow | Body copy, transparent buttons |
| 1 | `0 1px 3px rgba(0,0,0,0.04)` | Faint card lift |
| 2 | `0 4px 12px rgba(0,0,0,0.08)` | Feature card |
| 3 | `0 12px 32px rgba(0,0,0,0.12)` | Pricing card, modal |
| 4 | `0 32px 64px -8px rgba(0,0,0,0.18)` | Device mockup — Apple-style blurred |
| 5 | `0 8px 24px rgba(64,143,255,0.18)` | Blue CTA glow on hover |
### Shadow Philosophy
Fantastical's shadows are **soft and Apple-style**: blurred, low-opacity, descended (negative Y offset on device mockups). The page chrome itself is mostly flat with hairline borders; shadows are reserved for:
1. **Device mockups** — the canonical "iPhone floating above the page" Apple shadow.
2. **Pricing cards** — moderate elevation to mark them as actionable.
3. **CTA hover glow** — the only chromatic shadow, blue tinted for the primary action.
Glass app-icon confetti also uses a slight inner highlight (`inset 0 1px 0 rgba(255,255,255,0.40)`) to mimic the iOS 17 / iOS 26 glass-icon highlight shader — not a true shader, but a CSS approximation that reads similar at small scales.
## 8. Interaction & Motion ✨
### Easing Curves
- **Standard:** `cubic-bezier(0.4, 0, 0.2, 1)` — default ease-in-out.
- **Emphasized:** `cubic-bezier(0.2, 0, 0, 1)` — modal entrance, full reveal.
- **Entrance:** `cubic-bezier(0, 0, 0.2, 1)` — content fade-in on scroll.
- **Spring:** `cubic-bezier(0.5, 1.25, 0.75, 1.25)` — iOS-style overshoot on CTA tap.
### Duration Buckets
- **Fast (120ms):** color transitions, button hover.
- **Standard (240ms):** card lift, modal, transition.
- **Slow (400ms):** hero fade-in, large reveal.
- **Confetti Drift (8000ms):** the slow cyclic motion of glass app-icon squares around the hero.
### Per-Component Micro-States
- **Button (primary blue pill):** background `#408fff` → `#1f73ec` + shadow grows from none → `0 8px 24px rgba(64,143,255,0.18)`. 240ms standard ease.
- **Button (secondary tinted):** background opacity 0.08 → 0.14. 120ms.
- **Card (feature):** shadow intensifies `0 4px 12px` → `0 8px 20px` + 2px lift via translateY. 240ms.
- **Device-tab:** background fades from transparent to soft blue tint. Active indicator slides on tab change with spring ease. 240ms.
- **Link / nav-link:** opacity 1 → 0.7 on hover, 120ms.
- **App-icon confetti:** continuous slow drift — translateY ±4px, opacity 0.85 → 1.0 oscillation, 8s cycle, ease-in-out infinite alternate.
### Page Transitions
- Hero: content fades + 12px translateY, 400ms ease-entrance.
- Below-fold sections: fade + 8px translateY, 300ms ease-entrance, triggered on scroll-into-viewport.
- Device-tab content swap: cross-fade 240ms, no translation.
- Modal: backdrop fade 240ms + scale 0.96 → 1.0 + opacity 0 → 1, 320ms ease-emphasized.
### Reduced Motion
`@media (prefers-reduced-motion: reduce)`:
- App-icon confetti freezes at first frame (no drift).
- All transforms collapse to opacity-only.
- Shadow-grow on hover persists (it's a state cue, not animation).
- Spring/overshoot easings replaced with standard.
## 9. Accessibility & A11y ✨
### Contrast Pairs
- **Body text on white:** `#1d1e1f` on `#ffffff` → 16.4:1. **AAA at body sizes.**
- **Button text on blue:** `#ffffff` on `#408fff` → 4.7:1. **AA at body sizes.**
- **Muted text on white:** `#5e6166` on `#ffffff` → 7.1:1. **AAA at body.**
- **Soft text on white:** `#86878a` on `#ffffff` → 4.5:1. **AA at body.**
- **Brand-soft button text:** `#408fff` on `rgba(116,116,128,0.08)` (effective `#f0f0f2`) → 3.8:1. **AA at large only** — limit to 17px+ button labels, never body.
- **Faint text:** `#b5b6b9` on `#ffffff` → 2.4:1 — fails. Reserve for disabled-only.
### Focus Indicators
iOS-style focus halo: `0 0 0 4px rgba(64,143,255,0.30)` — softer and more atmospheric than a sharp 2px ring. Form fields use the same halo pattern. Tab/keyboard focus is always visible; the brand explicitly avoids `outline: none` without replacement.
### ARIA Pattern Recommendations
- **Device-tab selector:** `role="tablist"` with `role="tab"` per pill, `role="tabpanel"` on the displayed device mockup. `aria-selected="true"` on active tab.
- **Pricing toggle (monthly/yearly):** `role="group"` with `aria-label="Billing period"` and `<button>` with `aria-pressed`.
- **Modal / dialog:** `role="dialog"` + `aria-modal="true"` + `aria-labelledby`.
- **App-icon confetti:** `aria-hidden="true"` — purely decorative.
- **CTA buttons:** semantic `<button>` or `<a>`, descriptive labels ("Try Fantastical Free" not "Click Here").
### Keyboard Navigation
- Tab order: nav → primary CTA → secondary CTA → page content → footer.
- Skip-link to `#main-content` first focus stop.
- Device-tab selector: arrow keys (left/right) navigate tabs, Enter activates.
- FAQ: Tab to expand chevron, Enter to toggle, Esc to collapse.
- Modal: focus trap until dismissed via Esc or close button.
### Screen Reader Hints
- Headlines use semantic `<h1>` through `<h4>` — no styled `<div>` headlines.
- App-icon confetti: `aria-hidden="true"` (decorative).
- Device-tab labels: explicit text "Mac", "iPhone", "iPad", "Apple Watch" — no icon-only.
- Pricing tier badges ("Most Popular"): visible text + `aria-label` confirms.
### Reduced Motion
`prefers-reduced-motion: reduce` halts confetti drift, transforms, and spring easings. Hover state color/opacity transitions persist (they aid usability).
## 10. Responsive Behavior
### Breakpoints
| Breakpoint | Width | Notes |
|---|---|---|
| Mobile | 0–640px | Single column, hero shrinks to ~600px tall, confetti reduces to 3 pieces |
| Tablet | 640–1024px | Two-column features, hero retains confetti |
| Desktop | 1024–1280px | Three-column features, full confetti spread |
| Wide | 1280–1536px+ | 1200px container caps; confetti density holds |
### Touch Targets
- Buttons height ≥48px on all breakpoints (50 desktop, 48 tablet/mobile) — exceeds WCAG 2.5.5 44×44.
- Device tabs 36px height — pad to 44 with surrounding hit area on mobile.
- Nav links 48px hit area via padding on mobile.
### Collapsing Strategy
- **Hero:** display-hero shrinks 80 → 56 → 44 → 36. Line-height stays 1.10–1.20.
- **Feature grid:** 3-col → 2-col → 1-col. Card padding 32 → 28 → 24.
- **Device tabs:** horizontal pill bar persists (it's narrow); on mobile, tabs may scroll horizontally.
- **Confetti:** desktop 6–8 pieces; tablet 4–5; mobile 2–3 (largest only).
- **Pricing:** 3-col → vertical stack on mobile, with "Most Popular" surfacing first.
### Image Behavior
- Device mockup: aspect-ratio container per device (iPhone 9:19.5, Mac 16:10, etc.), scales to fit viewport with max-width.
- App-icon confetti: SVG, scales fluidly.
- Screenshots: lazy-loaded below fold (`loading="lazy"`).
### Container Queries
Pricing cards may use `@container` queries to adapt internal padding (32 → 24) when stacked vertically on tablet, while preserving 40 padding on desktop.
## 11. Content & Voice ✨
### Tone
**Calm, instrumental, Apple-product-page register.** Fantastical talks like a Pro App marketing page, not a SaaS landing. Sentences are short and direct. Avoids superlatives ("the best") in favor of capability claims ("Schedule meetings in seconds"). Never casual ("Hey, ready to plan your day?") — the tone is respectfully helpful.
### Microcopy Patterns
- **Headlines:** sentence case, capability-focused. "Give Your Calendar Superpowers", "Built for the way you work", "Scheduling, simplified."
- **Decks:** specifics over claims. "Connect all your calendars in one place. Schedule meetings, set reminders, and find time with anyone — all from a single app."
- **CTA verbs:** "Try Free", "Buy Fantastical", "Subscribe", "Learn More", "See Pricing." Always verb-first.
- **Error messages** (in-app, but the convention): "Couldn't connect to iCloud — check your internet and try again." Specific cause + recovery action.
### Empty States
In-app: "No events today. Tap + to add one." — friendly, action-suggesting, never just "Empty."
### Success Confirmations
- Subscribe: "Welcome to Fantastical Premium!"
- Schedule sent: "Invitation sent" — present-perfect, not past simple.
- Form submit: "Thanks — we'll be in touch."
### CTA Verb Conventions
The verbs Fantastical uses, ranked:
1. **Try Free** (primary conversion — note "Try" not "Start")
2. **Buy Fantastical** (one-time alternative, where available)
3. **Subscribe** (upsell)
4. **Learn More** (secondary)
5. **See Pricing**
6. **Sign In** (returning users)
What Fantastical *doesn't* say: "Get Started" (too SaaS-y), "Sign Up Now" (too aggressive), "Free Trial" (the brand prefers "Try Free" or "14-Day Trial"). The verb register is Apple-Pro-App, not B2B-conversion.
## 12. Dark Mode & Theming ✨
Fantastical's marketing site is **light-mode only** — Flexibits has not shipped a dark-mode variant of the marketing surface. The in-app product offers light/dark/system themes (matching macOS/iOS appearance), but the marketing page stays white-canvas across user preference.
If a future dark-mode variant were implemented, the canonical token swap would mirror Apple's own dark-mode pages:
```yaml
colors-dark:
bg: '#000000' # pure black, matching iOS dark mode
bg-soft: '#1c1c1e' # iOS systemGray6 dark
surface: '#2c2c2e' # iOS systemGray5 dark
text: '#ffffff'
text-muted: '#aeaeb2' # iOS systemGray dark
text-soft: '#8e8e93' # iOS systemGray2 dark
brand: '#0a84ff' # iOS systemBlue dark variant
brand-hover: '#409cff' # lighter blue on dark
brand-soft: 'rgba(120,120,128,0.16)' # iOS tinted button on dark
border: 'rgba(255,255,255,0.10)'
border-soft: 'rgba(255,255,255,0.06)'
shadow-card: 'rgba(0,0,0,0.40)'
```
Note that Apple's system blue shifts from `#007aff` (light) to `#0a84ff` (dark) — slightly brighter, slightly cooler. Fantastical's `#408fff` is already the warm/light variant, so a dark equivalent should brighten further.
**Light-only register** — for now, no dark variant offered.
## 13. Lineage & Influences
Fantastical's design lineage is **Apple Pro Apps**, specifically the marketing pages for Final Cut Pro, Logic Pro, and the Pages/Numbers/Keynote suite. Those pages share the visual vocabulary: white canvas, single-family Effra-or-SF, system-blue CTA, fully-round pill radius, glass app-icon confetti, device mockups with blurred shadows. Flexibits has explicitly built the marketing surface to live in that visual universe — the calendar app is positioned as "Apple's missing Pro App."
The chromatic accent strategy — iOS system colors (cyan / magenta / green / orange) as decorative confetti only, never as button fills — is borrowed from the App Store's Today tab and from the Apple Music Now Playing badge sticker animation. The discipline is: **system colors are the page's playfulness; brand blue is the page's action.**
What Fantastical *rejects*: warm tones (no cream, no off-white), serif emphasis (no Domaine, no Playfair), editorial rhythm (no broadsheet column, no asymmetric grid). The page is precision-instrument register, not editorial register.
**Influences:**
- **Apple iOS App Store / Pro Apps** — system blue CTA, fully-round pill radius, glass app-icon confetti, single-family discipline (https://www.apple.com/app-store/)
- **Apple Human Interface Guidelines** — iOS system color palette as accent confetti (https://developer.apple.com/design/human-interface-guidelines/)
- **Foundry Monotype / Effra** — humanist geometric sans with rounded terminals (https://www.monotype.com/fonts/effra)
- **Stripe** — confidence in a single saturated blue as the entire chromatic action layer (https://stripe.com)
- **Calendly / Cron (defunct)** — calendar-tool conventions (cool greys, blue actions, rounded pills) (https://calendly.com)
## 14. Do's and Don'ts
### Do's
- **Do** use Effra (or a tight humanist geometric sans like Inter / SF Pro / Söhne) at every level. Loading a second display face would break the single-typographic-voice discipline.
- **Do** ship the primary CTA as a fully-round 24px blue pill — anything less round reads as generic SaaS, not iOS-native.
- **Do** scatter glass app-icon confetti around hero modules; that ornament is the brand's playful counterweight to its precision.
- **Do** weight the display tier at 500 (medium), not 700 (bold). The medium-not-bold choice is the precision register.
- **Do** use cool grey (`#f7f8fa`) for nested sections, never warm grey or cream. The cool register matches iOS chrome.
- **Do** apply Apple-style blurred shadows only to device mockups (`0 32px 64px -8px rgba(0,0,0,0.18)`); other shadows stay subtle.
- **Do** lift iOS system colors directly for confetti accent — `#5ac8fa` cyan, `#34c759` green, `#ff9500` orange, `#d94aff` magenta. The exact hex matters.
- **Do** use sentence case for everything except the rare 13px UPPERCASE eyebrow label.
- **Do** add the iOS-style focus halo (`0 0 0 4px rgba(64,143,255,0.30)`) instead of a sharp 2px ring — it's softer and matches the brand atmosphere.
### Don'ts
- **Don't** introduce warm tones — Fantastical's cool grey + system blue is the entire neutral palette; a cream surface would tip the page toward Bear / Things' editorial-Mac aesthetic.
- **Don't** raise body weight above 500; the medium-weight Effra is what gives the page its instrument-grade feel.
- **Don't** use a serif anywhere — even for emphasis. Effra sans carries the brand alone.
- **Don't** apply confetti hues to button fills or backgrounds — those colors live inside glass-icon decoration only. A magenta CTA would immediately feel off-brand.
- **Don't** use a 12px or 8px button radius. The 24px fully-round pill is the iOS lockup; smaller radii read as Material Design or generic SaaS.
- **Don't** stack the H1 in all-caps. Fantastical's display tier is sentence case; UPPERCASE H1s read as a different brand entirely.
- **Don't** run drop shadows on every card. Most chrome is flat with hairline borders; shadows are reserved for device mockups, pricing cards, and CTA hover glows.
- **Don't** mix Inter or SF Pro mid-page. The single-family Effra discipline is the precision signature; loading a second face dilutes it.
- **Don't** add gradient washes to the canvas. The page is white-with-cool-grey-nested; gradient backgrounds would tip toward Stripe / Linear's chromatic register.
## 15. Agent Prompt Guide
### Quick Color Reference
```
bg: #ffffff
bg-soft: #f7f8fa
bg-cooler: #f2f4f7
text: #1d1e1f
text-muted: #5e6166
brand: #408fff
brand-hover: #1f73ec
brand-soft: rgba(116,116,128,0.08)
accent-cyan: #5ac8fa
accent-magenta: #d94aff
accent-green: #34c759
accent-orange: #ff9500
border: rgba(0,0,0,0.10)
```
### Example Component Prompts
- **Hero:** "Create a hero with a `#ffffff` canvas, a centered headline in Effra 80px / weight 500 / line-height 1.10 / tracking -0.015em reading 'Give Your Calendar Superpowers', a 22px Effra 400 deck below in `#5e6166`, a primary CTA pill in `#408fff` with white text at 24px radius / `14px 28px` padding, and 5–6 glass app-icon squares (cyan / magenta / green / orange / yellow) at 22px radius drifting around the hero in slow ±4px translateY oscillation."
- **App-icon confetti:** "Render a glass-effect rounded-square at 22px radius, 64px size, gradient fill with translucent cyan base + `inset 0 1px 0 rgba(255,255,255,0.40)` highlight + `0 8px 24px rgba(0,0,0,0.10)` outer shadow. Animate continuous drift at ±4px translateY over 8s ease-in-out infinite alternate."
- **Feature card:** "Design a feature card on a `#f7f8fa` cool-grey ground with `#ffffff` background, `1px solid rgba(0,0,0,0.06)` border, 16px radius, 32px padding, faint `0 4px 12px rgba(0,0,0,0.04)` shadow, h4 title in Effra 24/400, body in Effra 18/400 `#5e6166`."
- **Device-tab selector:** "Build a horizontal device-tab selector with full-pill (24) tabs at `8px 16px` padding, inactive state transparent with `#5e6166` text, active state `rgba(64,143,255,0.10)` background with `#408fff` text. Tabs: 'Mac' / 'iPhone' / 'iPad' / 'Apple Watch'. On change, cross-fade the device mockup below 240ms."
- **Pricing card:** "Place a pricing tier card with `#ffffff` background, `1px solid rgba(0,0,0,0.10)` border, 20px radius, 40px padding, `0 12px 32px rgba(0,0,0,0.08)` elevated shadow. Tier name in Effra 14/500 UPPERCASE eyebrow with `0.05em` tracking. Price in Effra 56/500. Features list in Effra 18/400. Subscribe CTA at the bottom — primary blue pill."
- **Device mockup:** "Render an iPhone device mockup at 36px corner radius, `#000000` body color, `0 32px 64px -8px rgba(0,0,0,0.18)` Apple-style blurred descended shadow. Inside the frame, place a calendar screenshot at 9:19.5 aspect ratio."
### Iteration Guide
1. **Anchor on white.** Cool grey nested sections are accents, not the canvas. If you start from cream or off-white, the precision register collapses.
2. **Set Effra at 500, not 700.** The medium weight at large size is what gives the page its instrument feel. Bold display reads as marketing-not-product.
3. **Make the primary CTA a fully-round 24px blue pill.** `#408fff` background, white text, 14×28 padding, `0 8px 24px rgba(64,143,255,0.18)` blue glow on hover. This is the iOS Continue affordance — non-negotiable.
4. **Add app-icon confetti.** 4–6 glass-effect squares at 22px radius around the hero, hues from iOS system palette. Drift slowly (±4px / 8s). Without confetti the page reads as generic clean SaaS.
5. **Use cool grey (`#f7f8fa`)** for nested sections — it must have a hint of blue in it, not warm. Test by setting it next to white; it should feel cooler.
6. **Apply shadows only where they earn:** device mockups (Apple blur), pricing cards (moderate lift), CTA hover glow (blue tint). Everywhere else, hairline borders.
7. **Single-family discipline.** Don't load a second display face. Effra (or SF Pro / Inter) carries every level — display, body, button, label, caption.
8. **iOS focus halo, not sharp ring.** `0 0 0 4px rgba(64,143,255,0.30)` is softer and matches the brand atmosphere — never `outline: 2px solid blue`.
1. Visual Theme & Atmosphere
Fantastical’s site is an Apple Pro Apps promo for a calendar. White canvas, Effra sans throughout, a vivid #408fff Apple-system-blue pill CTA at fully-round 24px radius, and a confetti of glass app-icon squares in cyan, magenta, green, and orange floating around the hero. The H1 sets at 56–80px Effra 500, the body deck at 22–24px Effra 400, all on a near-black #1d1e1f. There is no editorial flourish, no serif moment, no warm cream — every chromatic, typographic, and spatial decision is borrowed from Apple’s own Calendar / Notes / Reminders marketing.
The atmosphere is precision-instrument-meets-playful-confetti. The page itself is calm, white, structured — the kind of marketing surface that suggests “this app respects your time.” But around the hero image, six to ten glass app-icon squares drift slowly in cyan, magenta, green, orange, and yellow, the same hues iOS uses for its system colors. The contrast — white-canvas calm with chromatic-confetti play — is what makes the page feel “Apple-native” rather than generic-SaaS-clean.
Below the hero, the page follows a clean single-column rhythm: hero with confetti, a device-tab selector spread (switch between Mac / iPhone / iPad / Apple Watch screenshots), a feature spread on cool-grey ground, pricing on cooler ground, and a FAQ. White runs edge-to-edge; cool-grey nested sections only appear for pricing and feature sub-spreads. The grey is #f7f8fa — a true cool grey with a hint of blue, not warm or neutral, matching the macOS chrome.
Type is single-family throughout. Effra carries every role from 14px label to 80px hero — no second display face, no serif emphasis, no italic flourish. The medium weight (500) at large size is what gives the page its precision-instrument feel: not bold enough to read as marketing, not light enough to read as fashion. Tracking is restrained (-0.01em to -0.015em at display) — Effra’s metrics are already tight, so heavy negative tracking would crush the air between letters.
The hero “Give Your Calendar Superpowers” demonstrates the system: 56–80px Effra 500, sentence case, near-black #1d1e1f, line-height 1.10–1.15. Below sits a 22px deck in #5e6166 muted text, then the primary CTA — a #408fff solid blue pill at 24px radius (fully round at button height), #ffffff text in Effra 500 / 17px, padding 14px 28px. Hover triggers a 0 8px 24px rgba(64,143,255,0.18) blue glow halo — the only chromatic motion on the marketing surface.
Key Characteristics:
- White paper canvas, cool grey nested sections (
#f7f8fa). - Single-family Effra discipline — no second face anywhere.
- Apple system blue
#408fffas the only saturated CTA color. - Fully-round 24px CTA pills — the iOS Continue radius.
- Glass app-icon confetti (cyan / magenta / green / orange) at 22px squircle radius.
- Medium-weight (500) display, never bold — precision over impact.
- Device-tab selector for Mac / iPhone / iPad / Apple Watch screenshots.
- Apple-style blurred shadows on device mockups, hairlines elsewhere.
- Section rhythm clean and unhurried: hero → device tabs → feature → pricing → FAQ.
- iOS color palette as decorative accent, never as content.
2. Color Palette & Roles
Primary
- Background (
#ffffff): paper-white canvas, the page’s defining ground. No off-white calibration. - Text (
#1d1e1f): primary body copy — near-black with a barely-perceptible warm undertone (the 1d in red is a hair higher than 1d in green/blue). - Brand (
#408fff): vivid Apple-system blue — the only saturated CTA hue. A touch warmer than iOS#007affto read better on white.
Brand & Dark
- Brand Hover (
#1f73ec): pressed/hover state — darker blue. - Brand Active (
#1862c4): deepest pressed blue (active state). - Brand Soft (
rgba(116,116,128,0.08)): secondary button bg, iOS tinted-button style. - Brand Tint (
#e8f1ff): info banner tint.
Accent (iOS System Color Confetti)
These appear almost exclusively as glass app-icon confetti floating around the hero — never as button fills, never under text:
- Cyan (
#5ac8fa): iOS system cyan. - Cyan Deep (
#34aadc): darker cyan. - Magenta (
#d94aff): iOS system magenta. - Magenta Deep (
#c71fea): darker magenta. - Green (
#34c759): iOS system green. - Green Deep (
#28a745). - Orange (
#ff9500): iOS system orange. - Orange Deep (
#e07b00). - Yellow (
#ffcc00): iOS yellow. - Pink (
#ff2d55): iOS pink. - Purple (
#af52de): iOS purple. - Indigo (
#5856d6): iOS indigo.
The full iOS system palette is available; only 4–6 hues appear on any given hero. The discipline is which confetti — cyan/magenta/green/orange is the canonical homepage set.
Interactive
- Link / CTA (
#408fff): the brand blue. - Hover (
#1f73ec): darker blue + 18% blue glow. - Focus Ring (
0 0 0 4px rgba(64,143,255,0.30)): iOS-style halo, not a sharp 2px ring.
Neutral Scale
- Text Strong (
#000000): rare display emphasis. - Text (
#1d1e1f): primary body. - Text Muted (
#5e6166): captions, secondary copy. - Text Soft (
#86878a): tertiary, metadata. - Text Faint (
#b5b6b9): disabled, faintest.
Surface & Borders
- Surface (
#f0f2f6): cool card surface. - BG Soft (
#f7f8fa): nested section ground (cool grey with hint of blue). - BG Cooler (
#f2f4f7): pricing section ground. - Surface Warm (
#fafbfc): subtly warmer card variant. - Border (
rgba(0,0,0,0.10)): standard 10% black hairline. - Border Soft (
rgba(0,0,0,0.06)): softer divider. - Border Strong (
rgba(0,0,0,0.16)): hover/focus outline.
Shadow Colors
- Ambient (
rgba(0,0,0,0.04) 0 1px 3px): faint card lift. - Standard (
rgba(0,0,0,0.08) 0 4px 12px): feature card. - Elevated (
rgba(0,0,0,0.12) 0 12px 32px): pricing card. - Device Mockup (
rgba(0,0,0,0.18) 0 32px 64px -8px): the blurred Apple-style shadow under iPhone/Mac mockups. - CTA Glow (
rgba(64,143,255,0.18) 0 8px 24px): blue halo on primary CTA hover.
Semantic
- Success (
#34c759): iOS system green. - Warning (
#ff9500): iOS system orange. - Danger (
#ff3b30): iOS system red. - Info (
#408fff): brand blue dual-duty.
3. Typography Rules
Font Family
- Display + Body:
Effra, "Helvetica Neue", Arial, Helvetica, sans-serif. Foundry Monotype’s humanist geometric sans with slightly-rounded terminals — softer than Helvetica, more geometric than Frutiger. Weights 400/500 (500 is the medium that defines the brand voice); 700 reserved for emphasis spans. - Mono:
"SF Mono", "Menlo", ui-monospace, monospace. System default — Fantastical does not use mono on the marketing surface (only inside the in-app Time Zone code identifiers). - OpenType:
kernandligastandard. No stylistic-set tricks; Effra’s character set is already precision-tuned.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| display-hero | Effra | 80 | 500 | 1.10 | -0.015em | kern, liga | Homepage H1 — medium not bold |
| display-large | Effra | 64 | 500 | 1.15 | -0.01em | kern, liga | Section H1 |
| h1 | Effra | 56 | 500 | 1.15 | -0.01em | kern, liga | Page H1 |
| h2 | Effra | 40 | 500 | 1.20 | -0.005em | kern, liga | Section heads |
| h3 | Effra | 32 | 500 | 1.25 | 0 | kern, liga | Sub-section heads |
| h4 | Effra | 24 | 400 | 1.40 | 0 | kern, liga | Card titles |
| body-large | Effra | 22 | 400 | 1.50 | 0 | kern, liga | Hero deck |
| body | Effra | 18 | 400 | 1.55 | 0 | kern, liga | Default body |
| body-small | Effra | 16 | 400 | 1.55 | 0 | kern, liga | Footer body, metadata |
| button | Effra | 17 | 500 | 1.0 | 0 | kern, liga | CTA label |
| button-large | Effra | 18 | 500 | 1.0 | 0 | kern, liga | Hero primary CTA |
| nav-link | Effra | 16 | 400 | 1.40 | 0 | kern, liga | Top nav |
| label | Effra | 14 | 500 | 1.30 | 0.02em | kern | Form labels |
| label-eyebrow | Effra | 13 | 500 | 1.20 | 0.05em | kern, uppercase | Section eyebrow |
| caption | Effra | 14 | 400 | 1.40 | 0 | kern, liga | Caption |
| micro | Effra | 12 | 500 | 1.30 | 0.01em | kern | Pill / badge text |
Principles
- Single-family discipline. Effra carries every level. Loading a second display face would break the precision-instrument register.
- Medium-weight at scale, not bold. Display tier sets at 500, not 700. The medium weight is what reads as “instrument” rather than “marketing.”
- Weight as hierarchy, not size alone. 500 for headlines, 400 for body. The 100-unit weight gap is the system’s primary readability cue.
- Tracking restraint. Effra’s metrics are tight. Display tracking goes negative
-0.005emto-0.015emonly. Body always 0. UPPERCASE labels positive (0.02–0.05em). - Sentence case throughout. Headlines, body, captions all sentence case. The only UPPERCASE register is the 13px eyebrow label — and it’s used sparingly.
- No serif emphasis. Even italics are rare. Effra carries every voice.
- Line-height precision. Display 1.10–1.15, body 1.50–1.55. The narrow line-height at display lets the headline breathe across two lines without becoming a brick.
- Letter terminals matter. Effra’s slightly-rounded terminals — vs. Helvetica’s sharp ones — soften the page just enough that it reads “approachable Apple” rather than “corporate Apple.” If swapping for SF Pro, the page would tilt clinical.
4. Component Stylings
Buttons
Primary (Blue Pill)
- Background:
#408fff - Text:
#ffffff - Padding:
14px 28px, height 50px - Radius: 24px (fully round at button height) — iOS Continue affordance
- Font: button-large (Effra 18 / 500)
- Hover: background
#1f73ec+ shadow0 8px 24px rgba(64,143,255,0.18)blue glow - Active: background
#1862c4 - Use: hero CTA — Try Free, Buy Fantastical, Subscribe.
Secondary (Soft-Grey Tinted)
- Background:
rgba(116,116,128,0.08)— iOS tinted-button style - Text:
#408fff— blue text on grey tint - Padding:
14px 28px, height 50 - Radius: 24
- Hover: background opacity to 0.14
- Use: Learn More, See Pricing — paired with primary on hero.
Tertiary (Text-Only Blue)
- Background: transparent
- Text:
#408fff - Padding:
14px 28px - Radius: 24
- Hover:
rgba(64,143,255,0.06)background wash - Use: inline blue link with hover emphasis.
Ghost / Nav Button
- Background: transparent
- Text:
#1d1e1f - Padding:
12px 20px - Hover:
rgba(0,0,0,0.04)background - Use: nav menu link, dismiss action.
Cards
Feature Card (White on Cool Grey)
- Background:
#ffffff - Border:
1px solid rgba(0,0,0,0.06) - Radius: 16px (md)
- Padding: 32px
- Shadow:
0 4px 12px rgba(0,0,0,0.04)faint lift - Use: feature card on
#f7f8faground.
Cool-Grey Card (Nested)
- Background:
#f0f2f6 - Border:
1px solid rgba(0,0,0,0.06) - Radius: 20px (lg)
- Padding: 32
- Use: nested feature panel with no shadow.
Pricing Card
- Background:
#ffffff - Border:
1px solid rgba(0,0,0,0.10) - Radius: 20px
- Padding: 40
- Shadow:
0 12px 32px rgba(0,0,0,0.08)— elevated - Use: pricing tier card on
#f2f4f7ground.
Device Mockup
- Background:
#000000(the device frame itself) - Radius: 36 (matching iPhone bezel curvature)
- Shadow:
0 32px 64px -8px rgba(0,0,0,0.18)— Apple-style blurred shadow under the device - Use: iPhone / Mac / iPad / Apple Watch product screenshot.
App-Icon Confetti
The signature decorative primitive:
- 22px squircle radius (iOS app-icon visual radius)
- Glass-effect fill: linear-gradient with translucent base +
inset 0 1px 0 rgba(255,255,255,0.40)highlight - Outer shadow:
0 8px 24px rgba(0,0,0,0.10) - Sizes: 48px / 64px / 80px / 96px (a mix per hero)
- Hues: cyan / magenta / green / orange / yellow (4–6 per hero)
- Slow drift animation (~8s cycle, ±4px translateY, low opacity 0.85–1.0 oscillation)
Inputs / Forms
Input
- Background:
#ffffff - Border:
1px solid rgba(0,0,0,0.16) - Radius: 12px
- Padding:
12px 16px, height 48 - Focus: border
#408fff+ ring0 0 0 4px rgba(64,143,255,0.20)— iOS halo - Use: email signup, contact form.
Device-Tab Selector
Distinctive horizontal selector used to switch between Mac / iPhone / iPad / Apple Watch screenshots:
Tab (Inactive)
- Background: transparent
- Text:
#5e6166 - Radius: 24 (full pill at height)
- Padding:
8px 16px - Hover:
rgba(0,0,0,0.04)bg +#1d1e1ftext
Tab (Active)
- Background:
rgba(64,143,255,0.10)soft blue tint - Text:
#408fff - Radius: 24
Badges
Pill Badge
- Background:
rgba(64,143,255,0.10)blue tint - Text:
#408fff - Radius: 9999, Padding:
4px 12px - Font: micro (12/500)
- Use: NEW / FEATURED tags.
Navigation
Top nav bar 72px tall, white background, hairline 1px solid rgba(0,0,0,0.06) border-bottom on scroll. Links: Effra 16/400, hover opacity 0.7. Right side: Login (ghost) + Try Free (primary blue pill).
5. Layout Principles
Spacing System
Base 4px. Scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128 / 160. Section gaps 96–128px; inside-card padding 32–40; hero vertical margin 96; nav padding 8px 16px.
The density is moderate-to-loose — not as airy as Apple’s own pages (which run 160–200px section gaps), but more spacious than Stripe’s 64–80px tight rhythm.
Grid & Container
- Page width: 1200px max.
- Prose width: 720px (intro paragraphs and FAQ answers).
- Header height: 72px.
- Hero height: ~720px.
- Grid gap: 32px between feature cards.
The page follows a clean single-column rhythm — hero with confetti centered, device-tab selector below, feature spread, pricing, FAQ. No multi-column hero, no asymmetric splits.
Whitespace Philosophy
Calendar apps live or die on clarity. Fantastical’s marketing whitespace earns that clarity: deliberate air around the H1 (96px above and below), generous breathing room between feature cards (32px gutter), unhurried section pacing. The page never feels dense.
Section Cadence
White → cool-grey → white → cooler-grey → white. The grounds don’t strictly alternate; the rhythm is:
- Hero (white) with confetti — 720px
- Device-tab feature spread (white) — 600px
- Feature grid (
#f7f8facool grey) — 600px - Pricing (
#f2f4f7cooler) — 700px - FAQ (white) — 500px
- Footer (white)
The cool-grey nested sections are deliberate accents — they signal “this is a deeper dive” without breaking the white-canvas calm.
6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| None | 0 | Edge-bound elements (rare) |
| Micro | 2 | Tag chips (rare) |
| XS | 6 | Small selector pills |
| SM | 12 | Inputs, secondary chips |
| MD | 16 | Standard card radius |
| LG | 20 | Elevated/pricing cards |
| XL | 22 | iOS app-icon squircle visual radius |
| App-Icon | 22 | Glass-effect confetti pieces |
| Pill | 24 | Primary CTA — fully round at button height |
| Full | 9999 | Pill badges, status chips |
Two radii do most of the work: 24 (the primary CTA pill) and 16 (the standard card). The 22 squircle is reserved for app-icon confetti — it’s a decorative-not-component radius. Mixing these reads as off-system.
Compound radii: none — Fantastical is consistent corners. The radius scale itself is the shape language.
7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 | Flat — no shadow | Body copy, transparent buttons |
| 1 | 0 1px 3px rgba(0,0,0,0.04) | Faint card lift |
| 2 | 0 4px 12px rgba(0,0,0,0.08) | Feature card |
| 3 | 0 12px 32px rgba(0,0,0,0.12) | Pricing card, modal |
| 4 | 0 32px 64px -8px rgba(0,0,0,0.18) | Device mockup — Apple-style blurred |
| 5 | 0 8px 24px rgba(64,143,255,0.18) | Blue CTA glow on hover |
Shadow Philosophy
Fantastical’s shadows are soft and Apple-style: blurred, low-opacity, descended (negative Y offset on device mockups). The page chrome itself is mostly flat with hairline borders; shadows are reserved for:
- Device mockups — the canonical “iPhone floating above the page” Apple shadow.
- Pricing cards — moderate elevation to mark them as actionable.
- CTA hover glow — the only chromatic shadow, blue tinted for the primary action.
Glass app-icon confetti also uses a slight inner highlight (inset 0 1px 0 rgba(255,255,255,0.40)) to mimic the iOS 17 / iOS 26 glass-icon highlight shader — not a true shader, but a CSS approximation that reads similar at small scales.
8. Interaction & Motion ✨
Easing Curves
- Standard:
cubic-bezier(0.4, 0, 0.2, 1)— default ease-in-out. - Emphasized:
cubic-bezier(0.2, 0, 0, 1)— modal entrance, full reveal. - Entrance:
cubic-bezier(0, 0, 0.2, 1)— content fade-in on scroll. - Spring:
cubic-bezier(0.5, 1.25, 0.75, 1.25)— iOS-style overshoot on CTA tap.
Duration Buckets
- Fast (120ms): color transitions, button hover.
- Standard (240ms): card lift, modal, transition.
- Slow (400ms): hero fade-in, large reveal.
- Confetti Drift (8000ms): the slow cyclic motion of glass app-icon squares around the hero.
Per-Component Micro-States
- Button (primary blue pill): background
#408fff→#1f73ec+ shadow grows from none →0 8px 24px rgba(64,143,255,0.18). 240ms standard ease. - Button (secondary tinted): background opacity 0.08 → 0.14. 120ms.
- Card (feature): shadow intensifies
0 4px 12px→0 8px 20px+ 2px lift via translateY. 240ms. - Device-tab: background fades from transparent to soft blue tint. Active indicator slides on tab change with spring ease. 240ms.
- Link / nav-link: opacity 1 → 0.7 on hover, 120ms.
- App-icon confetti: continuous slow drift — translateY ±4px, opacity 0.85 → 1.0 oscillation, 8s cycle, ease-in-out infinite alternate.
Page Transitions
- Hero: content fades + 12px translateY, 400ms ease-entrance.
- Below-fold sections: fade + 8px translateY, 300ms ease-entrance, triggered on scroll-into-viewport.
- Device-tab content swap: cross-fade 240ms, no translation.
- Modal: backdrop fade 240ms + scale 0.96 → 1.0 + opacity 0 → 1, 320ms ease-emphasized.
Reduced Motion
@media (prefers-reduced-motion: reduce):
- App-icon confetti freezes at first frame (no drift).
- All transforms collapse to opacity-only.
- Shadow-grow on hover persists (it’s a state cue, not animation).
- Spring/overshoot easings replaced with standard.
9. Accessibility & A11y ✨
Contrast Pairs
- Body text on white:
#1d1e1fon#ffffff→ 16.4:1. AAA at body sizes. - Button text on blue:
#ffffffon#408fff→ 4.7:1. AA at body sizes. - Muted text on white:
#5e6166on#ffffff→ 7.1:1. AAA at body. - Soft text on white:
#86878aon#ffffff→ 4.5:1. AA at body. - Brand-soft button text:
#408fffonrgba(116,116,128,0.08)(effective#f0f0f2) → 3.8:1. AA at large only — limit to 17px+ button labels, never body. - Faint text:
#b5b6b9on#ffffff→ 2.4:1 — fails. Reserve for disabled-only.
Focus Indicators
iOS-style focus halo: 0 0 0 4px rgba(64,143,255,0.30) — softer and more atmospheric than a sharp 2px ring. Form fields use the same halo pattern. Tab/keyboard focus is always visible; the brand explicitly avoids outline: none without replacement.
ARIA Pattern Recommendations
- Device-tab selector:
role="tablist"withrole="tab"per pill,role="tabpanel"on the displayed device mockup.aria-selected="true"on active tab. - Pricing toggle (monthly/yearly):
role="group"witharia-label="Billing period"and<button>witharia-pressed. - Modal / dialog:
role="dialog"+aria-modal="true"+aria-labelledby. - App-icon confetti:
aria-hidden="true"— purely decorative. - CTA buttons: semantic
<button>or<a>, descriptive labels (“Try Fantastical Free” not “Click Here”).
Keyboard Navigation
- Tab order: nav → primary CTA → secondary CTA → page content → footer.
- Skip-link to
#main-contentfirst focus stop. - Device-tab selector: arrow keys (left/right) navigate tabs, Enter activates.
- FAQ: Tab to expand chevron, Enter to toggle, Esc to collapse.
- Modal: focus trap until dismissed via Esc or close button.
Screen Reader Hints
- Headlines use semantic
<h1>through<h4>— no styled<div>headlines. - App-icon confetti:
aria-hidden="true"(decorative). - Device-tab labels: explicit text “Mac”, “iPhone”, “iPad”, “Apple Watch” — no icon-only.
- Pricing tier badges (“Most Popular”): visible text +
aria-labelconfirms.
Reduced Motion
prefers-reduced-motion: reduce halts confetti drift, transforms, and spring easings. Hover state color/opacity transitions persist (they aid usability).
10. Responsive Behavior
Breakpoints
| Breakpoint | Width | Notes |
|---|---|---|
| Mobile | 0–640px | Single column, hero shrinks to ~600px tall, confetti reduces to 3 pieces |
| Tablet | 640–1024px | Two-column features, hero retains confetti |
| Desktop | 1024–1280px | Three-column features, full confetti spread |
| Wide | 1280–1536px+ | 1200px container caps; confetti density holds |
Touch Targets
- Buttons height ≥48px on all breakpoints (50 desktop, 48 tablet/mobile) — exceeds WCAG 2.5.5 44×44.
- Device tabs 36px height — pad to 44 with surrounding hit area on mobile.
- Nav links 48px hit area via padding on mobile.
Collapsing Strategy
- Hero: display-hero shrinks 80 → 56 → 44 → 36. Line-height stays 1.10–1.20.
- Feature grid: 3-col → 2-col → 1-col. Card padding 32 → 28 → 24.
- Device tabs: horizontal pill bar persists (it’s narrow); on mobile, tabs may scroll horizontally.
- Confetti: desktop 6–8 pieces; tablet 4–5; mobile 2–3 (largest only).
- Pricing: 3-col → vertical stack on mobile, with “Most Popular” surfacing first.
Image Behavior
- Device mockup: aspect-ratio container per device (iPhone 9:19.5, Mac 16:10, etc.), scales to fit viewport with max-width.
- App-icon confetti: SVG, scales fluidly.
- Screenshots: lazy-loaded below fold (
loading="lazy").
Container Queries
Pricing cards may use @container queries to adapt internal padding (32 → 24) when stacked vertically on tablet, while preserving 40 padding on desktop.
11. Content & Voice ✨
Tone
Calm, instrumental, Apple-product-page register. Fantastical talks like a Pro App marketing page, not a SaaS landing. Sentences are short and direct. Avoids superlatives (“the best”) in favor of capability claims (“Schedule meetings in seconds”). Never casual (“Hey, ready to plan your day?”) — the tone is respectfully helpful.
Microcopy Patterns
- Headlines: sentence case, capability-focused. “Give Your Calendar Superpowers”, “Built for the way you work”, “Scheduling, simplified.”
- Decks: specifics over claims. “Connect all your calendars in one place. Schedule meetings, set reminders, and find time with anyone — all from a single app.”
- CTA verbs: “Try Free”, “Buy Fantastical”, “Subscribe”, “Learn More”, “See Pricing.” Always verb-first.
- Error messages (in-app, but the convention): “Couldn’t connect to iCloud — check your internet and try again.” Specific cause + recovery action.
Empty States
In-app: “No events today. Tap + to add one.” — friendly, action-suggesting, never just “Empty.”
Success Confirmations
- Subscribe: “Welcome to Fantastical Premium!”
- Schedule sent: “Invitation sent” — present-perfect, not past simple.
- Form submit: “Thanks — we’ll be in touch.”
CTA Verb Conventions
The verbs Fantastical uses, ranked:
- Try Free (primary conversion — note “Try” not “Start”)
- Buy Fantastical (one-time alternative, where available)
- Subscribe (upsell)
- Learn More (secondary)
- See Pricing
- Sign In (returning users)
What Fantastical doesn’t say: “Get Started” (too SaaS-y), “Sign Up Now” (too aggressive), “Free Trial” (the brand prefers “Try Free” or “14-Day Trial”). The verb register is Apple-Pro-App, not B2B-conversion.
12. Dark Mode & Theming ✨
Fantastical’s marketing site is light-mode only — Flexibits has not shipped a dark-mode variant of the marketing surface. The in-app product offers light/dark/system themes (matching macOS/iOS appearance), but the marketing page stays white-canvas across user preference.
If a future dark-mode variant were implemented, the canonical token swap would mirror Apple’s own dark-mode pages:
colors-dark:
bg: '#000000' # pure black, matching iOS dark mode
bg-soft: '#1c1c1e' # iOS systemGray6 dark
surface: '#2c2c2e' # iOS systemGray5 dark
text: '#ffffff'
text-muted: '#aeaeb2' # iOS systemGray dark
text-soft: '#8e8e93' # iOS systemGray2 dark
brand: '#0a84ff' # iOS systemBlue dark variant
brand-hover: '#409cff' # lighter blue on dark
brand-soft: 'rgba(120,120,128,0.16)' # iOS tinted button on dark
border: 'rgba(255,255,255,0.10)'
border-soft: 'rgba(255,255,255,0.06)'
shadow-card: 'rgba(0,0,0,0.40)'Note that Apple’s system blue shifts from #007aff (light) to #0a84ff (dark) — slightly brighter, slightly cooler. Fantastical’s #408fff is already the warm/light variant, so a dark equivalent should brighten further.
Light-only register — for now, no dark variant offered.
13. Lineage & Influences
Fantastical’s design lineage is Apple Pro Apps, specifically the marketing pages for Final Cut Pro, Logic Pro, and the Pages/Numbers/Keynote suite. Those pages share the visual vocabulary: white canvas, single-family Effra-or-SF, system-blue CTA, fully-round pill radius, glass app-icon confetti, device mockups with blurred shadows. Flexibits has explicitly built the marketing surface to live in that visual universe — the calendar app is positioned as “Apple’s missing Pro App.”
The chromatic accent strategy — iOS system colors (cyan / magenta / green / orange) as decorative confetti only, never as button fills — is borrowed from the App Store’s Today tab and from the Apple Music Now Playing badge sticker animation. The discipline is: system colors are the page’s playfulness; brand blue is the page’s action.
What Fantastical rejects: warm tones (no cream, no off-white), serif emphasis (no Domaine, no Playfair), editorial rhythm (no broadsheet column, no asymmetric grid). The page is precision-instrument register, not editorial register.
Influences:
- Apple iOS App Store / Pro Apps — system blue CTA, fully-round pill radius, glass app-icon confetti, single-family discipline (https://www.apple.com/app-store/)
- Apple Human Interface Guidelines — iOS system color palette as accent confetti (https://developer.apple.com/design/human-interface-guidelines/)
- Foundry Monotype / Effra — humanist geometric sans with rounded terminals (https://www.monotype.com/fonts/effra)
- Stripe — confidence in a single saturated blue as the entire chromatic action layer (https://stripe.com)
- Calendly / Cron (defunct) — calendar-tool conventions (cool greys, blue actions, rounded pills) (https://calendly.com)
14. Do’s and Don’ts
Do’s
- Do use Effra (or a tight humanist geometric sans like Inter / SF Pro / Söhne) at every level. Loading a second display face would break the single-typographic-voice discipline.
- Do ship the primary CTA as a fully-round 24px blue pill — anything less round reads as generic SaaS, not iOS-native.
- Do scatter glass app-icon confetti around hero modules; that ornament is the brand’s playful counterweight to its precision.
- Do weight the display tier at 500 (medium), not 700 (bold). The medium-not-bold choice is the precision register.
- Do use cool grey (
#f7f8fa) for nested sections, never warm grey or cream. The cool register matches iOS chrome. - Do apply Apple-style blurred shadows only to device mockups (
0 32px 64px -8px rgba(0,0,0,0.18)); other shadows stay subtle. - Do lift iOS system colors directly for confetti accent —
#5ac8facyan,#34c759green,#ff9500orange,#d94affmagenta. The exact hex matters. - Do use sentence case for everything except the rare 13px UPPERCASE eyebrow label.
- Do add the iOS-style focus halo (
0 0 0 4px rgba(64,143,255,0.30)) instead of a sharp 2px ring — it’s softer and matches the brand atmosphere.
Don’ts
- Don’t introduce warm tones — Fantastical’s cool grey + system blue is the entire neutral palette; a cream surface would tip the page toward Bear / Things’ editorial-Mac aesthetic.
- Don’t raise body weight above 500; the medium-weight Effra is what gives the page its instrument-grade feel.
- Don’t use a serif anywhere — even for emphasis. Effra sans carries the brand alone.
- Don’t apply confetti hues to button fills or backgrounds — those colors live inside glass-icon decoration only. A magenta CTA would immediately feel off-brand.
- Don’t use a 12px or 8px button radius. The 24px fully-round pill is the iOS lockup; smaller radii read as Material Design or generic SaaS.
- Don’t stack the H1 in all-caps. Fantastical’s display tier is sentence case; UPPERCASE H1s read as a different brand entirely.
- Don’t run drop shadows on every card. Most chrome is flat with hairline borders; shadows are reserved for device mockups, pricing cards, and CTA hover glows.
- Don’t mix Inter or SF Pro mid-page. The single-family Effra discipline is the precision signature; loading a second face dilutes it.
- Don’t add gradient washes to the canvas. The page is white-with-cool-grey-nested; gradient backgrounds would tip toward Stripe / Linear’s chromatic register.
15. Agent Prompt Guide
Quick Color Reference
bg: #ffffff
bg-soft: #f7f8fa
bg-cooler: #f2f4f7
text: #1d1e1f
text-muted: #5e6166
brand: #408fff
brand-hover: #1f73ec
brand-soft: rgba(116,116,128,0.08)
accent-cyan: #5ac8fa
accent-magenta: #d94aff
accent-green: #34c759
accent-orange: #ff9500
border: rgba(0,0,0,0.10)Example Component Prompts
-
Hero: “Create a hero with a
#ffffffcanvas, a centered headline in Effra 80px / weight 500 / line-height 1.10 / tracking -0.015em reading ‘Give Your Calendar Superpowers’, a 22px Effra 400 deck below in#5e6166, a primary CTA pill in#408fffwith white text at 24px radius /14px 28pxpadding, and 5–6 glass app-icon squares (cyan / magenta / green / orange / yellow) at 22px radius drifting around the hero in slow ±4px translateY oscillation.” -
App-icon confetti: “Render a glass-effect rounded-square at 22px radius, 64px size, gradient fill with translucent cyan base +
inset 0 1px 0 rgba(255,255,255,0.40)highlight +0 8px 24px rgba(0,0,0,0.10)outer shadow. Animate continuous drift at ±4px translateY over 8s ease-in-out infinite alternate.” -
Feature card: “Design a feature card on a
#f7f8facool-grey ground with#ffffffbackground,1px solid rgba(0,0,0,0.06)border, 16px radius, 32px padding, faint0 4px 12px rgba(0,0,0,0.04)shadow, h4 title in Effra 24/400, body in Effra 18/400#5e6166.” -
Device-tab selector: “Build a horizontal device-tab selector with full-pill (24) tabs at
8px 16pxpadding, inactive state transparent with#5e6166text, active statergba(64,143,255,0.10)background with#408ffftext. Tabs: ‘Mac’ / ‘iPhone’ / ‘iPad’ / ‘Apple Watch’. On change, cross-fade the device mockup below 240ms.” -
Pricing card: “Place a pricing tier card with
#ffffffbackground,1px solid rgba(0,0,0,0.10)border, 20px radius, 40px padding,0 12px 32px rgba(0,0,0,0.08)elevated shadow. Tier name in Effra 14/500 UPPERCASE eyebrow with0.05emtracking. Price in Effra 56/500. Features list in Effra 18/400. Subscribe CTA at the bottom — primary blue pill.” -
Device mockup: “Render an iPhone device mockup at 36px corner radius,
#000000body color,0 32px 64px -8px rgba(0,0,0,0.18)Apple-style blurred descended shadow. Inside the frame, place a calendar screenshot at 9:19.5 aspect ratio.”
Iteration Guide
- Anchor on white. Cool grey nested sections are accents, not the canvas. If you start from cream or off-white, the precision register collapses.
- Set Effra at 500, not 700. The medium weight at large size is what gives the page its instrument feel. Bold display reads as marketing-not-product.
- Make the primary CTA a fully-round 24px blue pill.
#408fffbackground, white text, 14×28 padding,0 8px 24px rgba(64,143,255,0.18)blue glow on hover. This is the iOS Continue affordance — non-negotiable. - Add app-icon confetti. 4–6 glass-effect squares at 22px radius around the hero, hues from iOS system palette. Drift slowly (±4px / 8s). Without confetti the page reads as generic clean SaaS.
- Use cool grey (
#f7f8fa) for nested sections — it must have a hint of blue in it, not warm. Test by setting it next to white; it should feel cooler. - Apply shadows only where they earn: device mockups (Apple blur), pricing cards (moderate lift), CTA hover glow (blue tint). Everywhere else, hairline borders.
- Single-family discipline. Don’t load a second display face. Effra (or SF Pro / Inter) carries every level — display, body, button, label, caption.
- iOS focus halo, not sharp ring.
0 0 0 4px rgba(64,143,255,0.30)is softer and matches the brand atmosphere — neveroutline: 2px solid blue.
Drop fantastical into your project, then ship the actual sections in an afternoon.
1 · install design
npx design-md add fantastical 2 · ship landing page
npx agentkit init --design fantastical light minimal
Apple
White-canvas product theatre — SF Pro Text, 980px pill CTAs, and a single-blue accent sy…
Docs
Install
Apple
webdesignhot
light minimal
Things
Cool light-blue canvas, system-ui sans, vivid Things-blue accent — a task manager that s…
Docs
Install
Things
webdesignhot
light editorial
Stripe
Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, sig…
Docs
Install
Stripe
webdesignhot