# Designflow — Productized Service Landing Page Template
## Complete Documentation & Customization Guide

> A production-ready, editorial soft-brutalist landing page template for productized service businesses (unlimited design, development, writing, etc.). Built with HTML5, Bootstrap 5.3, AOS, FontAwesome 6, and vanilla JavaScript.

---

## Table of Contents

1. [Overview](#overview)
2. [Tech Stack & Versions](#tech-stack--versions)
3. [File Structure](#file-structure)
4. [Quick Start](#quick-start)
5. [Design System (Theme Tokens)](#design-system-theme-tokens)
6. [Section-by-Section Guide](#section-by-section-guide)
7. [Customization Recipes](#customization-recipes)
8. [Connecting Payments](#connecting-payments)
9. [SEO & Meta Tags](#seo--meta-tags)
10. [Accessibility Notes](#accessibility-notes)
11. [Performance Notes](#performance-notes)
12. [Browser Support](#browser-support)
13. [Troubleshooting](#troubleshooting)
14. [Credits & Attribution](#credits--attribution)

---

## Overview

This template is designed for **productized service businesses** — companies that sell a service (design, development, copywriting, video editing, etc.) as a flat-fee subscription rather than hourly or per-project.

**Key design principles:**
- Editorial soft-brutalist aesthetic (crisp borders, bold typography, warm cream palette)
- No glassmorphism, no gradients on text, no dark mode, no neon
- Typography-first with intentional asymmetry and generous whitespace
- Buttery-smooth, subtle animations only
- Fully responsive via Bootstrap 5.3 grid

---

## Tech Stack & Versions

| Library | Version | Purpose | CDN Source |
|---------|---------|---------|------------|
| Bootstrap | 5.3.3 | Responsive grid & navbar collapse | jsdelivr |
| AOS (Animate On Scroll) | 2.3.4 | Scroll reveal animations | unpkg |
| FontAwesome | 6.5.1 | Minimal icons | cdnjs |
| Google Fonts | — | Space Grotesk (headings), Inter (body) | fonts.googleapis.com |

**Custom code:** Vanilla CSS (no preprocessors) and vanilla JavaScript (no jQuery, no frameworks).

---

## File Structure
your-project/
├── index.html → Main markup (all 11 sections)
├── style.css → Custom theme (overrides Bootstrap defaults)
└── script.js → AOS init, FAQ accordion, smooth scroll, dynamic year



All three files must live in the same directory. No build step required — open `index.html` in a browser and it works.

---

## Quick Start

1. Create a folder and drop the three files inside.
2. Double-click `index.html` — it opens in your default browser.
3. That's it. No `npm install`, no build tools, no server required.

**Optional — run locally with a server (recommended for development):**
```bash
# Python
python -m http.server 8000

# Node
npx serve

# PHP
php -S localhost:8000


Design System (Theme Tokens)
All colors, fonts, borders, and radii are defined as CSS custom properties in :root at the top of style.css. Change them in one place and the entire site updates.
Colors

--color-bg:            #FDFBF7;   /* Main background (warm cream) */
--color-bg-alt:        #F0EBE1;   /* Alternating section background (warm beige) */
--color-text:          #18181B;   /* Primary text (deep charcoal, not pure black) */
--color-text-muted:    #6B6B76;   /* Secondary text */
--color-accent:        #4338CA;   /* Electric Indigo — buttons, links, highlights */
--color-accent-hover:  #3730A3;   /* Darker indigo for hover states */
--color-border:        #18181B;   /* Crisp borders (matches text) */
--color-border-light:  #D6D3CD;   /* Subtle dividers */
--color-white:         #FFFFFF;   /* Card backgrounds */
--color-green:         #16A34A;   /* "Perfect for" card */
--color-green-bg:      #F0FDF4;   /* Green icon bg */
--color-red:           #DC2626;   /* "Not a fit for" card */
--color-red-bg:        #FEF2F2;   /* Red icon bg */


Typography
--font-heading: 'Space Grotesk', sans-serif;   /* Headlines, buttons, logo */
--font-body:    'Inter', sans-serif;            /* Body copy, UI text */

Borders & Radii
--border-thin:   1px solid var(--color-border);
--border-medium: 2px solid var(--color-border);
--radius-sm:     6px;
--radius-md:     10px;
--radius-lg:     14px;
--radius-pill:   100px;

Spacing
--section-py: 7rem;   /* Vertical padding for every major section */

Section-by-Section Guide
1. Navbar (#mainNav)
Sticky, cream background, solid 1px bottom border
Gains a subtle shadow after 10px scroll (JS-controlled)
Mobile: collapses into hamburger menu (Bootstrap)
To customize:
Brand name: search for <!-- REPLACE WITH YOUR BRAND NAME --> in index.html
Nav links: edit the <ul class="navbar-nav"> block
CTA button text: edit <a href="#pricing" class="btn btn-nav-cta">Subscribe</a>
2. Hero (#hero)
Massive left-aligned headline with decorative geometric shapes on the right
Two CTAs: primary (filled) + outline
Micro-copy line below buttons
To customize:
Headline: edit <h1 class="hero-headline"> — use <br /> for line breaks
Subheadline: edit <p class="hero-sub">
Tag pill: edit <span class="hero-tag">
Geometric shapes: styled via .hero-shape and .hero-shape-secondary in CSS (change color, size, rotation, or remove entirely)
3. Logo Marquee
Infinite horizontal scroll via pure CSS @keyframes marquee-scroll
Pauses on hover
Fades at edges via CSS mask-image
To customize:
Replace FontAwesome brand icons with your own client logos (use <img> tags or inline SVG)
Duplicate the entire set of .marquee-item elements exactly once to maintain the seamless loop
Adjust speed: change animation: marquee-scroll 30s linear infinite; — lower = faster
4. Why Productized? (#why)
Two-column comparison: Old Way (muted, red icons) vs. New Way (accent border, green icons)
To customize:
Edit list items inside .compare-list
To add more points: duplicate an <li> block
To swap icons: change FontAwesome class in <i> tags
5. How It Works (#how-it-works)
Three steps connected by dashed lines
Large step numbers (01, 02, 03) as decorative elements
To customize:
Edit step title, description, and FontAwesome icon
On mobile (<992px), steps stack vertically and connectors rotate 90°
6. Services / Bento Grid (#services)
3-column grid with some cards spanning 2 columns (.bento-wide)
Hover lifts card and changes border to accent color
To customize:
Add a card: copy any .bento-card block
Make a card wide: add class bento-wide
On mobile (<768px), collapses to single column
7. Who Is This For? (#who)
Two side-by-side cards: green-bordered (yes) and red-bordered (no)
Builds trust by filtering out bad-fit leads
To customize:
Edit list items inside .fit-list
Change colors via --color-green / --color-red CSS variables
8. Pricing (#pricing)
Two plans side-by-side: Standard and Premium
Premium has accent border, beige background, and "Most Popular" pill
To customize:
Search for <!-- UPDATE PRICING HERE --> in index.html
Change price value in <span class="pricing-value">
Change period (/mo, /wk, /yr) in <span class="pricing-period">
Add/remove features: edit <ul class="pricing-features">
To add a third plan: duplicate a .col-lg-5 block and adjust grid (change to col-lg-4)
9. FAQ (#faq)
Accordion with smooth height transitions (vanilla JS)
Only one item open at a time (change in script.js if you want multi-open)
Plus icon rotates 45° to become an X when open
To customize:
Add a question: copy an entire .faq-item block
Edit question text inside <button class="faq-question">
Edit answer inside .faq-answer-inner > p
10. Final CTA
Beige background, large centered headline, single prominent button
11. Footer
4-column layout: brand + 3 link columns
Dynamic copyright year (set via JS)
Social icons row
To customize:
Social links: replace # with your profile URLs
Link columns: edit the three <ul class="footer-links"> blocks




SEO & Meta Tags
The current <head> has minimal meta tags. Add these before launch:
<!-- Primary Meta Tags -->
<title>Designflow — Unlimited Web Design, One Flat Monthly Fee</title>
<meta name="title" content="Designflow — Unlimited Web Design, One Flat Monthly Fee" />
<meta name="description" content="Get a dedicated senior design team for a flat monthly fee. 48-hour turnaround, unlimited requests, pause or cancel anytime." />
<meta name="keywords" content="unlimited design, productized design, design subscription, flat fee design, web design service" />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://yourdomain.com/" />
<meta property="og:title" content="Designflow — Unlimited Web Design" />
<meta property="og:description" content="Get a dedicated senior design team for a flat monthly fee." />
<meta property="og:image" content="https://yourdomain.com/og-image.png" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://yourdomain.com/" />
<meta property="twitter:title" content="Designflow — Unlimited Web Design" />
<meta property="twitter:description" content="Get a dedicated senior design team for a flat monthly fee." />
<meta property="twitter:image" content="https://yourdomain.com/og-image.png" />

<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

<!-- Canonical -->
<link rel="canonical" href="https://yourdomain.com/" />




Accessibility Notes
All interactive elements have visible focus states (browser default)
FAQ buttons use aria-expanded toggled by JS
Social links have aria-label attributes
Color contrast ratios meet WCAG AA:
#18181B on #FDFBF7 = 15.4:1 ✓
#4338CA on #FDFBF7 = 7.2:1 ✓
#6B6B76 on #FDFBF7 = 5.1:1 ✓
Semantic HTML5 tags used throughout (<nav>, <section>, <footer>, <button>)
Keyboard navigation works (all buttons are real <button> elements)
To improve further:
Add aria-current="page" to the active nav link
Add skip-to-content link at the top of <body>
Add alt text if you replace FontAwesome icons with <img> logos
Performance Notes
No images loaded — entire page uses FontAwesome icons and CSS shapes. Extremely fast initial paint.
AOS disabled on mobile by default (see script.js) to avoid jank on low-end devices.
Passive scroll listeners for navbar shadow (non-blocking).
Marquee uses transform: translateX — GPU-accelerated, no layout thrashing.
Fonts use display=swap — text is visible immediately, fonts load async.
Lighthouse targets:
Performance: 95+
Accessibility: 100
Best Practices: 100
SEO: 100
To optimize further:
Self-host fonts instead of Google Fonts (saves DNS lookup)
Preconnect to CDNs (already done for Google Fonts)
Minify CSS/JS before production deployment
Browser Support
Browser
Version
Chrome
90+
Firefox
90+
Safari
14+
Edge
90+
iOS Safari
14+
Android Chrome
90+
Not supported: IE11 (uses CSS custom properties, modern grid, etc.)
Troubleshooting
Q: The marquee looks choppy on my machine.
A: Disable browser animations in OS accessibility settings, or reduce marquee items. The animation uses transform which is GPU-accelerated — if it's still choppy, your GPU may be throttled.
Q: FAQ items won't open.
A: Check browser console for JS errors. Make sure script.js is loaded AFTER the HTML content (it's at the bottom of <body> — don't move it).
Q: AOS animations aren't firing.
A: AOS requires elements to be in viewport. If you've hidden sections with CSS, AOS won't trigger. Also check that aos.css is loaded in <head>.
Q: Navbar doesn't collapse on mobile.
A: Make sure bootstrap.bundle.min.js is loaded (it includes Popper.js). The slim Bootstrap JS won't handle collapse.
Q: Fonts look wrong / fallback is showing.
A: Google Fonts may be blocked by ad blockers or privacy extensions. The fallback stack (sans-serif) will display. Consider self-hosting fonts for reliability.
Q: I want to change the background to pure white.
A: In style.css, change --color-bg: #FFFFFF; and --color-bg-alt: #F5F5F5; (or any other value).
Q: How do I add a dark mode toggle?
A: This template is intentionally light-only per the design brief. Adding dark mode would require duplicating every color variable and writing a theme switcher — it's a significant refactor, not a quick toggle.
Credits & Attribution
Built with:
Bootstrap 5.3 — MIT License
AOS — Animate On Scroll — MIT License
FontAwesome 6 — CC BY 4.0 / Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT
Space Grotesk — SIL Open Font License 1.1
Inter — SIL Open Font License 1.1
Design inspiration: Editorial soft-brutalism, modern agency sites (Designjoy, ManyPixels, DesignPickle aesthetic).
License: This template is yours to use, modify, and ship. No attribution required (though appreciated).
Deployment Checklist
Before going live, verify:
Replace all <!-- REPLACE WITH YOUR BRAND NAME --> placeholders
Update pricing values and currency
Connect payment links on pricing CTAs
Update FAQ with your actual questions
Replace marquee logos with real client logos (with permission)
Add proper meta tags (title, description, OG, Twitter)
Add favicon and apple-touch-icon
Set up Google Analytics / Plausible / Fathom
Add privacy policy and terms of service pages
Set up a contact form or booking link
Test on mobile (iOS Safari + Android Chrome)
Run Lighthouse audit — target 95+ on all metrics
Compress any images you add (use TinyPNG or Squoosh)
Set up custom domain + SSL (Cloudflare, Vercel, Netlify)
Add robots.txt and sitemap.xml
Submit sitemap to Google Search Console
Support & Updates
For questions, customization help, or feature requests, reach out to the template author.
Happy shipping! 🚀