# What's the Difference Between template.html, template-dark.html, and template-full.html?

> Understand the differences between template.html, template-dark.html, and template-full.html. Choose the right HTML template for your diagram design project.

- Repository: [Cathryn Lavery/diagram-design](https://github.com/cathrynlavery/diagram-design)
- Tags: deep-dive
- Published: 2026-08-14

---

**[`template.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template.html) is a minimal light-theme diagram scaffold, [`template-dark.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template-dark.html) is its dark-mode counterpart with swapped color variables, and [`template-full.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template-full.html) adds a comprehensive UI layer with headers, cards, and footers for architecture documentation.**

All three HTML templates live in `skills/diagram-design/assets/` within the **cathrynlavery/diagram-design** repository. They provide the foundational structure for exporting SVG-based diagrams, but each serves a distinct workflow—from quick personal sketches to polished technical documentation.

## Theme and Visual Design Differences

The most immediate distinction between these templates is their **visual theme** and **design system scope**.

### Light vs. Dark Color Schemes

**[`template.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template.html)** and **[`template-dark.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template-dark.html)** share identical markup structure but invert their color tokens. This creates a clean "theme-swap" pattern that the repository extends for environment-specific rendering.

- **[`template.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template.html)** (light): Paper background `#f5f5f5` with dark ink `#2d3142`
- **[`template-dark.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template-dark.html)** (dark): Paper background `#2d3142` with light ink `#f5f5f5`

Both use a **minimal CSS variable set** defined in lines 10–18:

```html
<!-- template.html -->
<style>
  :root {
    --color-paper:   #f5f5f5;
    --color-ink:     #2d3142;
    --color-muted:   #4f5d75;
    --color-accent:  #eb6c36;
  }
</style>

```

```html
<!-- template-dark.html -->
<style>
  :root {
    --color-paper:   #2d3142;
    --color-ink:     #f5f5f5;
    --color-muted:   #bfc0c0;
    --color-accent:  #f08a59;
  }
</style>

```

### Extended Color System in template-full.html

**[`template-full.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template-full.html)** expands the design token palette for richer, multi-layered interfaces. Lines 11–26 define additional variables:

```html
<style>
  :root {
    --color-paper:       #f5f5f5;
    --color-paper-2:     #ececec;
    --color-ink:         #2d3142;
    --color-muted:       #4f5d75;
    --color-soft:        #7a8399;
    --color-rule:        rgba(45,49,66,0.12);
    --color-link:        #2e5aa8;
    /* …additional variables… */
  }
</style>

```

## Structural and Layout Differences

Beyond color, the templates diverge significantly in **HTML hierarchy** and **component architecture**.

### Minimal Structure: template.html and template-dark.html

Both minimal templates use a simple `<div class="frame">` containing:

- An eyebrow label
- A title
- The SVG canvas

No additional UI elements exist beyond the diagram area. This structure appears in both files with identical class names, ensuring **interchangeable styling** through CSS variables alone.

### Full-Featured Architecture: template-full.html

**[`template-full.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template-full.html)** implements a **layered design system** with distinct layout components:

```html
<div class="container">
  <header>
    <p class="header-eyebrow">Architecture · [Date]</p>
    <h1>[Project Name]</h1>
    <p class="subtitle">[One-sentence description...]</p>
  </header>
  
  <div class="diagram-container">
    <!-- SVG canvas here -->
  </div>
  
  <div class="cards">
    <!-- Optional info cards -->
  </div>
  
  <div class="footer">
    <!-- Footer text -->
  </div>
</div>

```

This template adds:

- **Header** with eyebrow, title, and subtitle
- **Legend** component for diagram notation
- **Card components** for contextual information
- **Footer** for attribution or versioning

## Customization Points and Intended Usage

| Template | Placeholders | Best For |
|----------|-----------|----------|
| [`template.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template.html) | `[Type]`, `[Diagram title]`, `[diagram-slug]` | Quick, clean exports of single diagrams; personal sketches |
| [`template-dark.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template-dark.html) | Same as light template | Presentations in dark rooms; dark-mode documentation |
| [`template-full.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template-full.html) | Above plus header eyebrow, subtitle, card titles, legend entries, footer text | Architecture documentation; generated technical overviews; stakeholder presentations |

## SVG Consistency Across All Templates

Despite their structural differences, all three templates maintain **identical SVG canvas definitions**:

- Standard viewBox: `0 0 1000 600` or `0 0 1000 700`

This ensures diagrams render consistently regardless of which template wrapper you choose. The SVG scaling logic remains portable—you can switch templates without redrawing your diagram.

## Key Architectural Patterns

The three-file organization demonstrates two important patterns from the **cathrynlavery/diagram-design** source code:

1. **Theme isolation through CSS variables**: The dark template proves you can support multiple themes without duplicating markup—only `:root` values change.

2. **Progressive enhancement via template variants**: Rather than conditional logic in a single file, the repository provides explicit template choices. This simplifies automation (scripted exports can select [`template-full.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template-full.html) for architecture docs, [`template.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template.html) for quick shares) and makes customization predictable.

## Summary

- **[`template.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template.html)** provides a **minimal light-theme** scaffold with four core CSS variables and a single-frame layout—ideal for fast, uncluttered diagram exports.

- **[`template-dark.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template-dark.html)** is a **theme-swapped twin** using identical HTML structure but inverted color tokens for dark environments.

- **[`template-full.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template-full.html)** delivers a **comprehensive documentation template** with expanded design tokens, header/subtitle components, optional cards, legend support, and footer elements—suited for architecture documentation and presentations.

All three share consistent SVG sizing and use the same placeholder substitution pattern (`[Type]`, `[Diagram title]`, `[diagram-slug]`), making them interchangeable within automated export workflows.

## Frequently Asked Questions

### Can I use my own color theme without modifying the repository files?

Yes. Since [`template.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template.html) and [`template-dark.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template-dark.html) isolate all color values in `:root` CSS variables, you can override these in a `<style>` block after the template loads or post-process the file with your own token values. The [`template-full.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template-full.html) file follows the same pattern with its expanded variable set.

### Why does template-full.html use a different viewBox height?

The [`template-full.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template-full.html) canvas may use `0 0 1000 700` versus `0 0 1000 600` in the minimal templates to accommodate vertical space consumed by the header and footer components. Check your specific export requirements—diagrams scale to fit, but aspect ratios differ slightly.

### Is there a dark version of template-full.html?

Not in the current repository structure. You can create one by combining the **expanded variable set** from [`template-full.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template-full.html) (lines 11–26) with the **inverted color values** from [`template-dark.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template-dark.html) (lines 11–14), then adjusting specific tokens like `--color-rule` and `--color-link` for dark-mode contrast.

### Which template should I use for automated diagram generation?

Use **[`template.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template.html)** for pipeline outputs where you want clean, embeddable SVG diagrams without chrome. Use **[`template-full.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template-full.html)** when your automation produces architecture documentation requiring contextual headers, descriptive cards, or professional presentation formatting. Swap to **[`template-dark.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template-dark.html)** when your target environment (slides, dashboards) uses dark themes.