Documentation — Poppie

Quickstart

Welcome. Here's how to get from zip to live in under five minutes.

Download the Poppie zip from Themeforest
Unzip it wherever you like
Double-click index.html — you should now be looking at a working site
Open any .html file in your favorite editor and start replacing copy

No build step. No npm install. Open the file, edit the text, save, refresh. That's the whole workflow.

File structure

Everything is where you'd expect it:

// top level
index.html        -- home v1 (light coral)
index-dark.html   -- home v2 (dark neon)
index-mint.html   -- home v3 (mint palette)
features.html
pricing.html
about.html
blog.html blog-post.html
changelog.html docs.html 404.html

// styles
css/
  tokens.css      -- THE file to edit first
  base.css        -- reset + typography
  components.css  -- buttons, nav, cards, etc.
  sections.css    -- hero, pricing, faq, etc.
  pages.css       -- page-specific (blog, docs)
  theme-dark.css  -- dark mode overrides

// vanilla JavaScript
js/
  main.js         -- all interactions
  theme-toggle.js -- dark mode switch

Design tokens

Every color, font, radius, and shadow in Poppie is a CSS custom property defined in css/tokens.css. To re-skin the whole template, you edit that one file. That's it.

Example — change coral to teal:

/* tokens.css */
:root {
  --primary: #14B8A6;        /* was #FF6B6B */
  --primary-hover: #0D9488;
  --shadow-colored-primary: 0 16px 40px -8px rgba(20, 184, 166, 0.4);
}

Fonts

Poppie uses three Google Fonts, loaded with display=swap:

Fraunces — display / headings (variable, with SOFT axis for playful curves)
Plus Jakarta Sans — body + UI
JetBrains Mono — code, tags

To swap a font, change the <link> in the HTML <head> and update --font-display / --font-body in tokens.css.

Deployment

Poppie is static HTML. Drop it anywhere that serves static files:

Netlify — drag-and-drop the folder onto their deploy UI
Vercel — vercel --prod from the directory
Cloudflare Pages — connect a GitHub repo and deploy
FTP / shared hosting — upload the folder, point your domain at it
GitHub Pages — push to a gh-pages branch