Create a beautiful, modern, and comprehensive visual brand guide website for Calendly. This should be a polished, professional brand guide that a design or marketing team would reference. It should be a single-page application with all sections below. Use the Inter font family from Google Fonts throughout. ## DESIGN REQUIREMENTS (CRITICAL - Apply these globally) - Clean, modern layout with a sticky sidebar navigation on the left for jumping between sections - On mobile, the sidebar should become a top hamburger menu - Primary Blue (#006BFF) should be the dominant accent throughout - Dark Navy (#1A1A2E) for text and dark sections - White (#FFFFFF) and Light Gray (#F8F8FA) for alternating section backgrounds - Smooth scroll animations between sections (use scroll-behavior: smooth and subtle fade-in animations as sections enter viewport) - Fully responsive (mobile, tablet, desktop) - Make it feel like a premium design system documentation page (similar to Material Design guidelines or Apple HIG) - The sidebar nav should highlight the current section as user scrolls (use Intersection Observer) - Each section should have a subtle fade-in animation when scrolling into view ## 1. HERO / COVER SECTION - Large, bold title: "Calendly Brand Guide" - Tagline: "Easy scheduling ahead." in a lighter weight - Subtitle: "World's #1 Scheduling Automation Platform" - Full-width hero with Primary Blue (#006BFF) as dominant background color - Add a subtle geometric pattern or gradient overlay for visual interest - White text on blue background - Add a subtle animated gradient or pattern in the background - Include a down-arrow scroll indicator at the bottom ## 2. BRAND FOUNDATION - Display on a white background section - Show these items in an elegant card/grid layout: - **Mission:** Simplify scheduling for everyone — remove friction so people can focus on connecting, collaborating, and getting things done - **Vision:** A world where scheduling is effortless and accessible to all - **Tagline:** "Easy scheduling ahead." - **CTA:** "Get started in seconds — for free." - **Philosophy:** Scheduling should never be a barrier to human connection - Each item should be in its own card with a blue left border accent - Use icons for each item (lightbulb for mission, eye for vision, quote for tagline, rocket for CTA, heart for philosophy) ## 3. BRAND VALUES (display as visual cards in a grid) Show 5 value cards in a responsive grid: - 🔵 Simplicity — Make complex scheduling feel easy - 🌍 Accessibility — Serve everyone from freelancers to Fortune 500 - 🔒 Trust — Reliable, secure, and dependable - 📈 Growth — Continuously evolve with modern teams - 🌐 Global Reach — Enable connections across 230+ countries Each card should have: - A large emoji/icon at top - The value name in bold - Description text below - Subtle hover effect (lift + shadow) - Light gray background (#F8F8FA) for section Below the cards, show **Brand Personality Traits** as pill/badge elements in a horizontal row: Confident · Approachable · Empowering · Trustworthy · Simple ## 4. COLOR PALETTE (VERY IMPORTANT - Make this visually rich) Show visual color swatches as large rectangular cards in a grid. Each swatch should: - Display the actual color as a large rectangle (at least 120px tall) - Show the color name below - Show hex code - Show RGB values - Show usage description - **INTERACTIVE: Click on any swatch to copy the hex code to clipboard, with a toast notification "Copied #XXXXXX!"** Colors to display: | Color Name | Hex | RGB | Usage | |---|---|---|---| | Primary Blue | #006BFF | rgb(0, 107, 255) | CTAs, links, key UI elements | | Dark Navy | #1A1A2E | rgb(26, 26, 46) | Headlines, body text, dark backgrounds | | Deep Blue | #0B3558 | rgb(11, 53, 88) | Secondary text, supporting elements | | White | #FFFFFF | rgb(255, 255, 255) | Backgrounds, cards, clean space | | Light Gray | #F8F8FA | rgb(248, 248, 250) | Section backgrounds, subtle dividers | | Success Green | #00C853 | rgb(0, 200, 83) | Success states, highlights, testimonials | White swatch should have a subtle border so it's visible. ## 5. TYPOGRAPHY SECTION - Show the primary typeface: "Inter" — Geometric sans-serif, clean, modern - Display a full type scale with ACTUAL rendered examples: - H1: 48px / Bold / "The quick brown fox" — Dark Navy - H2: 36px / Bold / "The quick brown fox" — Dark Navy - H3: 28px / Semi-Bold / "The quick brown fox" — Dark Navy - H4: 22px / Semi-Bold / "The quick brown fox" — Dark Navy - Body: 16px / Regular / A paragraph of lorem ipsum — Dark Navy - Small: 14px / Regular — Deep Blue - Caption: 12px / Medium — Deep Blue - Show each level with the size, weight, and line-height labeled - Show a CTA button example: "Get Started Free" button in Primary Blue with white bold text - Show a "Don't" example with a decorative/script font crossed out with a red X - Use alternating white background ## 6. LOGO GUIDELINES Show logo usage rules with visual placeholder representations: - Create 3 logo variation cards: 1. Full wordmark + icon — "Primary: Website, marketing materials" — show a placeholder rectangle with "Calendly" text styled to look like a logo (blue icon circle + wordmark) 2. Icon only — "Secondary: App icons, favicons, social avatars" — show just a blue circle placeholder 3. Single-color — "Constrained contexts" — show a monochrome version **Clear Space Rules:** - Show a visual diagram with dotted lines around the logo placeholder indicating clear space **Do's and Don'ts grid (2 columns):** - ✅ Do: Logo on white background (show example with green checkmark) - ✅ Do: Logo on dark background with white version (show example) - ✅ Do: Maintain minimum clear space - ❌ Don't: Stretch or distort (show a stretched version with red X) - ❌ Don't: Rotate the logo (show rotated with red X) - ❌ Don't: Place on busy/low-contrast background (show example with red X) - ❌ Don't: Recolor outside approved palette (show rainbow version with red X) Use green borders/badges for Do's and red borders/badges for Don'ts. ## 7. BRAND VOICE & TONE Display as a stylized reference section on light gray background: Show 6 principle cards in a 2-column grid: | Principle | Description | |---|---| | Professional yet approachable | Knowledgeable without being stiff | | Confident, not arrogant | Leadership stated with proof | | Benefit-driven | Always lead with what the user gets | | Simple and clear | Short sentences, plain language, no jargon | | Empowering | Make users feel capable and in control | | Trust-building | Use data, testimonials, and specifics | Then show two columns below: **✅ Do's** (green accent): - Active voice - Lead with benefits - Use real data - Keep copy concise - Maintain human tone **❌ Don'ts** (red accent): - No technical jargon - No unsubstantiated claims - No aggressive sales language - No off-palette colors - No cluttered logo placements ## 8. MESSAGING BY AUDIENCE (show as audience persona cards) Show 4 cards in a grid, each with a distinct icon and colored top border: - **Individuals** (person icon): "Get started in seconds — for free. Share your link and let people book time effortlessly." - **Sales Teams** (chart/dollar icon): "Book more meetings, close more deals. Integrates with your CRM and automates scheduling." - **Recruiters** (briefcase icon): "Reduce time-to-hire by 8 days. Automate interview scheduling." - **Enterprise** (building icon): "Trusted by 86% of the Fortune 500. Enterprise-grade security and compliance." Below, show **Key Messaging Pillars** as styled pills/badges: Simplicity · Scale · Integration · Results · Trust ## 9. TARGET AUDIENCE SEGMENTS (visual cards) Show 6 segment cards in a responsive grid with icons and descriptions: 1. 👤 Solo Professional — Freelancers, consultants, coaches 2. 💼 Sales Team — AEs/SDRs needing CRM integration & round-robin routing 3. 🎯 Recruiter — Talent teams reducing time-to-hire 4. 🤝 Customer Success Manager — CS teams managing onboarding calls at scale 5. 📣 Marketing Team — Marketers using scheduling as a conversion tool 6. 🏢 Enterprise Admin — IT/Ops leaders needing SSO, SCIM, compliance Each card should have a large icon, title, and description. Use subtle hover animations. ## 10. IMAGERY & PHOTOGRAPHY GUIDELINES Show visual Do's and Don'ts in a grid: **Style Guidelines** (show as descriptive cards with icons): - ✅ Clean, minimalist SaaS aesthetic - ✅ Product UI screenshots & mockups as hero visuals - ✅ People-focused photography: diverse, professional, natural - ✅ Flat, modern illustrations using brand color palette **Do's column** (green border): - Show placeholder for clean product screenshot - Show placeholder for natural diverse people photo - Show placeholder for brand-colored illustration **Don'ts column** (red border): - ❌ Avoid generic/staged stock photography - ❌ No cluttered or busy compositions - ❌ No off-brand color schemes in imagery Use placeholder boxes with descriptive labels since we can't use actual images. ## 11. COMPETITIVE POSITIONING Dark Navy (#1A1A2E) background section with white text: - Large stat: "#1 on G2 (2024)" with a trophy/award icon - Show key differentiators as a horizontal stats row: - 20M+ Users - 100+ Integrations - 169% ROI - 230+ Countries - 86% of Fortune 500 - Each stat should be in a card with large number and label below - Use Primary Blue accents for the numbers ## 12. CHANNEL STRATEGY Show 4 channel cards in a grid: - **Website** (globe icon): Blue-dominant, product-led design, conversion-focused with free signup CTAs - **Social** (share icon): LinkedIn (B2B), Twitter/X (product updates), Instagram (culture/brand) - **Advertising** (megaphone icon): Benefit-first messaging, data-driven proof points, A/B tested CTAs - **Content** (document icon): SEO blogs, customer case studies, product-led content, thought leadership ## FOOTER - "Calendly Brand Guide © 2026" - "For internal use by Calendly marketing and design teams" - Small Calendly wordmark - Primary Blue background with white text ## SIDEBAR NAVIGATION The left sidebar should: - Be fixed/sticky on desktop (width ~240px) - Show all 12 section names as navigation links - Highlight the current section based on scroll position (use Intersection Observer) - Have a small Calendly brand mark at the top - Use Dark Navy background with white text - Active section should have a Primary Blue left border and blue text - On mobile: collapse into a hamburger menu at the top - Smooth scroll to section when clicking a nav item Make this a complete, production-quality brand guide. Every section should be visually polished and the overall experience should feel like a premium design system documentation site.