Starter Templates Pro: Overview

Four production-ready responsive starter templates for web developers. Each template is a complete, self-contained static website you can open in a browser, customise, and deploy in minutes.

What Is Starter Templates Pro?

Starter Templates Pro is a pack of four distinct website templates that share a common design-token layer (shared/tokens.css). The shared tokens define colors, spacing, typography, border radius, shadows, and motion — so every template feels visually coherent, but each has a completely different layout suited to its purpose.

All templates are zero-dependency: no npm, no bundler, no framework. Just HTML, CSS, and vanilla JavaScript.

The Four Templates

1. Landing Page (templates/landing/)

A marketing landing page for a SaaS product. Best for: product launches, app signups, campaign pages.

Key sections: hero · logo strip · 6-card feature grid · 3-step how-it-works · testimonials · 3-tier pricing · FAQ accordion · email CTA

2. Admin Dashboard (templates/dashboard/)

A full app-shell layout with sidebar navigation. Best for: admin panels, internal tools, analytics dashboards.

Key sections: collapsible sidebar · sticky topbar · 4 stat cards · CSS bar chart · activity feed · projects data table

3. Portfolio (templates/portfolio/)

A personal portfolio for developers and designers. Best for: freelance sites, job applications, personal branding.

Key sections: hero with availability badge · filterable project grid · about + skills · contact cards

4. Documentation Site (templates/docs/)

A documentation site shell. Best for: open-source docs, product manuals, knowledge bases.

Key sections: topbar with search · collapsible sidebar TOC · article with code blocks + callouts · reference table · prev/next navigation

Features All Templates Share

• Dark / light theme — toggle persists to localStorage; inline script prevents flash of wrong theme
• Mobile-first responsive — works on 320 px phones through 1440 px desktops
• Accessible — semantic HTML5, ARIA attributes, keyboard navigation, visible :focus-visible ring
• Reduced motion — all animations disabled or instant when prefers-reduced-motion: reduce is set
• Zero network requests — no external fonts, icons, or scripts; fully offline-capable

File Structure

starter-templates-pro/
├── shared/
│   └── tokens.css              ← canonical design tokens
├── templates/
│   ├── landing/
│   │   ├── index.html
│   │   ├── style.css
│   │   ├── script.js
│   │   └── README.md
│   ├── dashboard/
│   │   ├── index.html
│   │   ├── style.css
│   │   ├── script.js
│   │   └── README.md
│   ├── portfolio/
│   │   ├── index.html
│   │   ├── style.css
│   │   ├── script.js
│   │   └── README.md
│   └── docs/
│       ├── index.html
│       ├── style.css
│       ├── script.js
│       └── README.md
├── guide/
│   ├── 01-overview.md          ← this file
│   ├── 02-customization-guide.md
│   └── 03-template-catalog.md
├── README.md
├── manifest.json
└── LICENSE

Quick Start

# No install step — just open a template:
open templates/landing/index.html

# Or serve locally for relative-path assets:
python -m http.server 8000
# → http://localhost:8000/templates/landing/

*Continue to guide 02 for step-by-step customisation instructions.*

Customization Guide

How to adapt Starter Templates Pro to your own brand, content, and deployment environment.

1. Changing the Color Palette

Every template uses the same CSS custom-property token structure. To re-skin a template, edit the :root block at the top of its style.css:

:root {
  /* --- Your brand colors --- */
  --color-primary:       #2563eb;  /* Main action color: buttons, links, accents */
  --color-primary-dark:  #1d4ed8;  /* Hover / pressed state (slightly darker) */
  --color-primary-light: #dbeafe;  /* Backgrounds behind primary text, badge fills */
  --color-accent:        #f59e0b;  /* Secondary highlight: stars, prices, badges */
}

Then mirror the change in [data-theme="dark"]:

[data-theme="dark"] {
  --color-primary:       #3b82f6;  /* Slightly lighter for dark backgrounds */
  --color-primary-dark:  #2563eb;
  --color-primary-light: #1e3a5f;  /* Dark-safe tinted surface */
  --color-accent:        #fbbf24;
}

Tip: Use a contrast checker (e.g. WebAIM) to verify your chosen primary color passes WCAG AA (4.5:1) against both --color-bg (light) and the dark --color-bg (#0f172a).

2. Updating Fonts

All templates use the system font stack — no external network requests by default:

--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
             'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

To use a custom font, download the WOFF2 files and add a @font-face rule:

@font-face {
  font-family: 'InterVariable';
  src: url('../fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans:    'InterVariable', ui-sans-serif, system-ui, sans-serif;
  --font-heading: 'InterVariable', ui-sans-serif, system-ui, sans-serif;
}

Never link a Google Fonts — that adds a render-blocking external request that breaks offline use.

3. Replacing Demo Content

All text content is in index.html. Each section is clearly commented — search for the comment to find the section you want:

<!-- ── HERO ── -->
<!-- ── FEATURES ── -->
<!-- ── PRICING ── -->
<!-- ── FAQ ── -->

Landing: updating the pricing tiers

Find the .pricing-grid section and update the amount, period, feature list, and CTA button href:

<span class="amount">29</span>
<span class="period">/month</span>
...
<a href="https://buy.stripe.com/your-product-link" class="btn btn-primary btn-block">
  Get started
</a>

Dashboard: changing nav items

Duplicate a .nav-item list item and update the label and icon SVG:

<li>
  <a href="#your-page" class="nav-item">
    <!-- replace with your icon SVG -->
    <svg ...>...</svg>
    Your Page
  </a>
</li>

Set aria-current="page" on the active item and add is-active to its class list.

Portfolio: adding a project card

Copy an existing .project-card block and set data-category to one of your filter values:

<li class="project-card" data-category="web" data-reveal>
  <div class="project-preview project-preview--blue" aria-hidden="true">
    <!-- decorative content or replace with <img> -->
  </div>
  <div class="project-body">
    <h3 class="project-name">Your Project Name</h3>
    <p class="project-desc">What it does and why it matters.</p>
    ...
  </div>
</li>

To add a new filter category, add a button to .filter-bar:

<button class="filter-btn" data-filter="mobile" type="button">Mobile</button>

Docs: adding a new page

1. Duplicate templates/docs/index.html as a new file (e.g. projects.html)

2. Update the breadcrumb, article

, and article body content

3. Add a link in the sidebar TOC in all pages

4. Update the prev/next nav links at the bottom of adjacent pages

---

4. Wiring Up the Email Capture Form

The landing template's CTA form is rendered as a disabled control by default — the and both have the disabled attribute and there is no action attribute on the form.

When you have provisioned an email service (e.g. ConvertKit, Mailchimp, Beehiiv):

1. Remove the disabled attribute from the and

2. Set the form action to your ESP's endpoint, or wire up a fetch() call in script.js

3. Add a GDPR consent checkbox and a privacy policy link before the submit button

html

Copy