Overview

What is FORMA?

FORMA is a collection of six premium, ATS-optimized resume templates built entirely with semantic HTML and vanilla CSS. There are no JavaScript frameworks, no npm packages, no build pipelines. Every template is a single self-contained .html file (with linked external CSS and JS files) that you can open directly in your browser, edit in any text editor, and print to PDF with one click.

The design system is controlled through CSS custom properties (--variables) declared in a single :root block at the top of each template's stylesheet. Change your brand color, swap your font stack, or adjust spacing — and every element across the entire template updates automatically.

How it works

Each template follows a strict three-layer architecture: tokens (design variables), base styles (reset and shared utilities), and template-specific styles (the unique layout and visual identity). This means:

Overview

File Structure

FORMA uses a clean, modular file architecture. Shared styles and scripts live in dedicated folders. Each template HTML file is lean — it only contains content markup and links to its CSS layers.

CSS load order

Every template HTML file loads its stylesheets in this exact order. The cascade is intentional — each layer can safely override the previous:

<!-- 1. Design tokens: colors, fonts, spacing -->
<link rel="stylesheet" href="css/tokens.css">

<!-- 2. Reset + shared utilities + animations -->
<link rel="stylesheet" href="css/base.css">

<!-- 3. Preview toolbar (Back / Print / Save PDF) -->
<link rel="stylesheet" href="css/toolbar.css">

<!-- 4. Page background + paper shadow wrapper -->
<link rel="stylesheet" href="css/resume-shell.css">

<!-- 5. @media print rules for PDF export -->
<link rel="stylesheet" href="css/print.css">

<!-- 6. Template-specific styles (last = highest priority) -->
<link rel="stylesheet" href="css/templates/executive.css">

Overview

Requirements

FORMA has zero runtime dependencies. Everything runs in the browser. Here's all you need:

Getting Started

Quick Start

From downloaded ZIP to finished resume in under 10 minutes.

Getting Started

Opening Templates

Because FORMA uses external CSS files, you should always open templates via a local server or directly as a file — both work fine for editing and PDF export.

Method 1: Open directly in browser

Double-click any .html file. It will open in your default browser. If fonts don't load, make sure you have an internet connection (Google Fonts are loaded via CDN). Everything else — CSS, JS — works from local file paths.

Method 2: VS Code Live Server (recommended)

Install the Live Server extension in VS Code. Right-click the HTML file and choose Open with Live Server. This gives you hot reload as you edit — changes appear instantly in the browser without refreshing manually.

# Python 3 (built-in, zero install)
cd path/to/forma-templates
python3 -m http.server 8080
# Open http://localhost:8080 in Chrome

# Or with Node (if you have it)
npx serve .
# Open http://localhost:3000 in Chrome

Getting Started

Editing Content

All resume content lives in the HTML file. Here's a complete map of every editable field and the HTML patterns used across all templates.

Personal information

<!-- Your name appears in both the sidebar and the main header -->
<h1 class="sidebar__name">Alexandra Monroe</h1>
<p  class="sidebar__role">Senior Product Manager</p>

<!-- Avatar initials (2 letters) -->
<div class="sidebar__avatar">AM</div>

<!-- Contact fields inside <address> -->
<address>
  <div class="contact-item">
    <span class="contact-item__icon">✉</span>
    <div>
      <p class="contact-item__label">Email</p>
      <p class="contact-item__value">your@email.com</p>
    </div>
  </div>
</address>

Experience entries

<div class="exp-item">
  <div class="exp-header">
    <span class="exp-company">Company Name</span>
    <span class="exp-date">Jan 2020 – Present</span>
  </div>
  <p class="exp-role">Your Job Title</p>
  <ul class="exp-bullets">
    <li>Led a team of 8 engineers to deliver X, resulting in Y% improvement.</li>
    <li>Built and shipped Z that generated $X in revenue within 6 months.</li>
    <li>Managed cross-functional relationships with design, data science, and marketing.</li>
  </ul>
</div>

Skill bars

Skill bar percentages are set directly via inline style="width:85%" on the fill element. Change the percentage to reflect your actual proficiency level:

<div class="skill-bar">
  <div class="skill-bar__header">
    <span class="skill-bar__name">Python</span>
    <span class="skill-bar__pct">90%</span>
  </div>
  <div class="skill-bar__track">
    <!-- Change the width percentage here ↓ -->
    <div class="skill-bar__fill" style="width:90%"></div>
  </div>
</div>

Adding / removing sections

To add a new section, duplicate an existing <section class="resume-section"> block and update the id and aria-labelledby attributes. To remove a section, simply delete the entire <section> element — no other files need updating.

Customization

CSS Variables

Every visual property in FORMA is controlled by CSS custom properties. Edit the :root { } block at the top of the template CSS file — all components update automatically.

/* ══ THEME CONFIG ══════════════════════════════════════
   Edit this block to completely rebrand this template.
   All values cascade automatically — no search/replace.
══════════════════════════════════════════════════════ */

:root {

  /* ── Primary brand color ── */
  /* Used for: accent bars, dates, role labels, skill fills */
  --t-primary:   #c84b31;   /* ← Change this first */
  --t-accent2:   #e8743a;   /* ← Gradient end color */

  /* ── Background & surface ── */
  --t-primary:   #1a1a2e;   /* ← Sidebar background */
  --t-text:      #ffffff;   /* ← Sidebar text color */
  --t-text-dim:  rgba(255,255,255,.6);

  /* ── Typography ── */
  /* Override global font-display/body from tokens.css */
  --font-display: 'Playfair Display', serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* ── Layout ── */
  --sidebar-width: 300px;     /* ← Widen/narrow the sidebar */
  --resume-width:  960px;     /* ← Max resume width */
}

Template-specific vs. global tokens

FORMA has two levels of CSS variables:

Template-level variables (--t-*) always take precedence. This lets you maintain global brand consistency while giving each template a distinct visual identity.

Customization

Typography & Fonts

Each template ships with a carefully chosen font pairing. Swapping fonts is a two-step process: update the Google Fonts link in the HTML <head>, then update the CSS variable.

Default font pairings per template

Changing fonts

Step 1: Replace the Google Fonts URL in the template's <head>. You can build a new URL at fonts.google.com.

Step 2: Update the CSS font variables in the template's :root block:

/* In template HTML <head> — replace the fonts link: */
<link href="https://fonts.googleapis.com/css2?family=
  Libre+Baskerville:wght@400;700&amp;
  Source+Sans+3:wght@300;400;600&display=swap"
  rel="stylesheet">

/* Then in css/templates/executive.css :root block: */
:root {
  --font-display: 'Libre Baskerville', serif;
  --font-body:    'Source Sans 3', sans-serif;
}

Customization

Colors & Theming

FORMA's color system is intentionally minimal — a dominant primary color, a dark secondary, and neutral surfaces. This structure makes it easy to swap the entire palette in seconds.

Global color tokens

These live in css/tokens.css and apply globally:

Changing primary color — example

/* In css/templates/executive.css */
:root {
  /* Default red palette → Teal rebrand */
  --t-primary:  #0d9488;  /* was #c84b31 */
  --t-accent2:  #14b8a6;  /* was #e8743a */
  --t-primary:  #0f172a;  /* sidebar bg: was #1a1a2e */
}

Customization

Layout & Spacing

FORMA uses a spacing scale built from CSS custom properties. All padding, gaps, and margins reference these tokens so adjusting one value reflows the entire layout proportionally.

Spacing scale

Sidebar width

Templates with sidebars (Executive, Noir) use the --sidebar-width variable. Adjust it to make the sidebar wider or narrower:

:root {
  --sidebar-width: 260px;  /* narrower */
  --sidebar-width: 320px;  /* wider   */
}

Templates

Template Reference

Six distinct templates — each with its own visual identity, font stack, and CSS file. All share the same semantic HTML structure and print rules.

Export

Print & PDF Export

FORMA is designed from the ground up for print-quality PDF output. Every template includes dedicated @media print rules and @page configuration in css/print.css.

How to export

Print CSS internals

@media print {

  /* Hide the preview toolbar */
  .toolbar { display: none !important; }

  /* A4 page setup — no margins, full bleed */
  @page {
    size:   A4;
    margin: 0;
  }

  /* Remove outer page padding */
  html, body {
    width:   210mm;
    height:  297mm;
    padding: 0 !important;
    margin:  0 !important;
  }

  /* Preserve background colors and images */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust:         exact !important;
  }

  /* Prevent experience blocks from splitting across pages */
  .exp-item, .edu-item, .pub-item {
    break-inside:      avoid;
    page-break-inside: avoid;
  }
}

US Letter vs A4

Templates default to A4 (210mm × 297mm). To switch to US Letter (8.5in × 11in), update the @page rule in css/print.css:

@page {
  size:   letter;   /* Change from 'A4' */
  margin: 0;
}

Export

ATS Optimization

All FORMA templates are built with ATS (Applicant Tracking System) compatibility as a first-class requirement — not an afterthought.

What FORMA does for ATS

What to avoid

Even with FORMA's ATS-safe structure, a few customizations can hurt ATS scores:

Reference

CSS Variable Reference

Complete reference of every CSS custom property across the FORMA system, with their default values and usage locations.

tokens.css — Global tokens

Template-level overrides (--t-*)

Each template CSS file declares its own --t-* variables that override the global tokens within that template's scope:

Reference

HTML Structure Guide

All six templates share the same semantic HTML skeleton. Understanding the structure makes it easy to add, remove, or reorder sections.

Outer shell

<body>

  <!-- Preview toolbar (hidden on print) -->
  <nav class="toolbar">…</nav>

  <!-- Outer page background -->
  <div class="page-bg">
    <div class="resume-shadow-wrap">

      <!-- The "paper" — white card with shadow -->
      <article class="resume">

        <!-- Sidebar (where applicable) -->
        <aside class="sidebar">…</aside>

        <!-- Main content -->
        <main class="main">

          <!-- Each section follows this pattern: -->
          <section
            class="resume-section"
            aria-labelledby="h-experience"
          >
            <h2 class="section-heading" id="h-experience">
              Professional Experience
            </h2>
            <!-- content -->
          </section>

        </main>
      </article>

    </div>
  </div>

  <script src="js/resume.js"></script>
</body>

Section heading pattern

Every resume section uses this exact pattern for ATS accessibility. The aria-labelledby on the <section> and the matching id on the <h2> must always be paired:

<!-- Always use this exact pattern for new sections -->
<section class="resume-section" aria-labelledby="h-skills">
  <h2 class="section-heading" id="h-skills">Skills</h2>
  <!-- your content here -->
</section>

Reference

Fonts Guide

FORMA loads all fonts from Google Fonts via CDN. Here are recommended alternative pairings organized by personality, ready to drop in as replacements.

Corporate / Professional

Creative / Design

Technical / Engineering

Support

Frequently Asked Questions

Can I use FORMA without internet?

Yes, with one exception. The CSS, JS, and HTML all work offline. Google Fonts, however, require an internet connection to load. To use offline, download the font files from Google Fonts and update the @font-face declarations in the stylesheet to reference local files instead of the CDN URL.

My PDF is missing sidebar background colors. Why?

Chrome's print dialog has a Background graphics checkbox that defaults to off. Click More settings in the print dialog and enable it. This is required any time a template has colored sidebars, gradient headers, or filled elements.

Can I add a photo to my resume?

Yes. The avatar circle in sidebar templates can be replaced with a real photo. Replace the initials <div> with an <img> element and remove the gradient background:

<!-- Replace this: -->
<div class="sidebar__avatar">AM</div>

<!-- With this: -->
<img
  src="your-photo.jpg"
  alt="Alexandra Monroe"
  class="sidebar__avatar"
  style="object-fit:cover;background:none"
>

How do I add a second page?

FORMA templates are designed to be single-page. If your content overflows, first check for ways to tighten the copy. If a second page is truly needed, reduce font sizes slightly (edit the --text-* tokens) or reduce section padding. The HTML will naturally flow to a second page when printed.

Can I host this as a live website?

Yes — just upload the entire folder to any static hosting service (GitHub Pages, Netlify, Vercel, Cloudflare Pages). All external links, CSS, and JS work with standard relative paths. No server-side configuration needed.

Does the Extended License cover white-labeling?

Yes. The Extended License grants permission to rebrand, modify, and incorporate FORMA templates into commercial products, SaaS platforms, or tools distributed to end users. The Regular License covers personal use only. See the License section for the full terms.

Are there Figma or design source files?

Figma source files are included with the Extended License ($149). They contain all six templates as responsive Figma frames with Auto Layout and shared style variables matching the CSS token system.

Support

License

Support

Changelog

v1.0.0 — March 2026 Latest

• Initial release — 6 templates: Executive, Creative, Minimal, Noir, Infographic, Academic
• Full external CSS architecture with shared tokens.css, base.css, toolbar.css, resume-shell.css, print.css
• Per-template CSS files in css/templates/ with :root theme config block
• Shared js/resume.js (print handler, scroll reveal, scroll hint) and js/landing.js
• Fully semantic HTML5 with ARIA labels on all sections
• @media print + @page { size: A4; margin: 0 } baked into print.css
• Mobile-responsive scroll wrapper for preview on small screens
• Landing page (index.html) with filterable template gallery, pricing, and testimonials
• This documentation page (docs.html)

Future versions will include additional templates, Figma source file updates, and additional font pairings. All purchases include lifetime updates.