# STWOF Design System

The component system behind the **Set The World On Fire** website, organized the way it is actually built: small parts compose into larger ones. **Tokens** become **atoms**, atoms combine into **molecules**, molecules assemble into **organisms**, organisms fill **templates**, and templates render as live **pages**. One ground, one accent, square edges, mono labels.

## Contents

1. [Methodology](#methodology) — the ladder
2. [Tokens](#tokens) — layer 0
3. [Atoms](#atoms) — layer 1
4. [Molecules](#molecules) — layer 2
5. [Organisms](#organisms) — layer 3
6. [Templates](#templates) — layer 4
7. [Pages](#pages) — layer 5
8. [Working rules](#working-rules)

Companion document: [Brand guideline](https://stwof.com/brand/guideline) · machine-readable at https://stwof.com/brand/guideline.md

---

## Methodology

### A system, not a screen library.

STWOF builds revenue systems where every layer amplifies the next. The website is built the same way. Nothing here is a one-off; every page is assembled from a small, shared set of parts. Read it bottom-up: **master the tokens and atoms and everything above them stays consistent for free.**

| # | Layer | Kind | Definition |
| --- | --- | --- | --- |
| 0 | Tokens | Decisions | The non-negotiables, expressed as CSS variables in **ds.css**: surfaces, ink, the one Ember accent, type, spacing, radius. Change a token, change everything downstream. |
| 1 | Atoms | Single elements | The smallest usable pieces, the mark, a button, a badge, an input, a label, an icon. They carry no layout of their own. |
| 2 | Molecules | Small groups | A few atoms doing one job together, a feature card, a metric, a testimonial quote, a form field, a nav cluster. |
| 3 | Organisms | Page sections | Full, self-contained sections, the header, the hero, the system row, the stats band, the closing CTA, the footer. |
| 4 | Templates | Layouts | The order and rhythm of organisms on a page, structure without final content. The skeleton a page is poured into. |
| 5 | Pages | Live | A template filled with real copy and imagery, the shipped, running website. The proof the system holds. |

---

## Tokens

*Layer 0 of 5.*

The decisions every other layer inherits. They live as CSS custom properties in **ds.css**. Click any color to copy its variable.

### Surfaces & ink

| CSS variable | Hex | Name | Role |
| --- | --- | --- | --- |
| `--void` | `#080808` | Void | Primary ground |
| `--panel` | `#0D0D0D` | Panel | Raised surface |
| `--panel-3` | `#161616` | Panel · 3 | Hover · chip |
| `--ink` | `#F2F2F2` | Ink | Primary text |
| `--ink-dim` | `#9A9A9A` | Ink · dim | Secondary |
| `--ink-faint` | `#808080` | Ink · faint | Labels · meta |
| `--brand` | `#DB262C` | Ember | The one accent |
| `--brand-deep` | `#9E1A1F` | Ember · deep | Pressed state |

### Type tokens

| CSS variable | Face | Weights | Role |
| --- | --- | --- | --- |
| `--font-display` | Poppins | 600–700 | Display & headlines · wordmark. Tight tracking, set big. |
| `--font-body` | Hanken Grotesk | 400–600 | Body & UI copy. Set at 1.55–1.65 line-height. |
| `--font-mono` | JetBrains Mono | 400–500 | Labels, eyebrows, metadata. Uppercase, wide tracking. |

Poppins is set at 600 for headlines, statements, and metric values. Hanken Grotesk carries body copy, leads, and buttons. JetBrains Mono carries labels, eyebrows, and meta.

### Type scale

| Step | Size / weight | Face | Tracking | Sample |
| --- | --- | --- | --- | --- |
| Display | 64 / 700 | `--font-display` | -0.03em | Set the world on fire |
| H1 | 44 / 700 | `--font-display` | -0.03em | A system, not a service |
| H2 | 32 / 600 | `--font-display` | -0.02em | Every layer compounds |
| H3 | 24 / 600 | `--font-display` | -0.01em | Built to iterate |
| Body L | 18 / 400 | `--font-body` | 0 | We build the foundation that makes results possible. |
| Body | 16 / 400 | `--font-body` | 0 | Each layer feeds the next, producing compounding results. |
| Small | 14 / 400 | `--font-body` | 0 | Supporting detail, captions, and secondary UI text. |
| Label | 11 / mono | `--font-mono` | 0.18em | System · metadata · eyebrow |

Fluid ranges as published on the page's scale strip — type scales with `clamp()`:

| Step | Range (px) |
| --- | --- |
| Display | clamp 40–76 |
| Section | clamp 30–54 |
| Body | 15–18 |
| Mono | 10–11 |

### Radius

All radii are 0. The system is square — buttons, cards, chips, inputs, badges.

---

## Atoms

*Layer 1 of 5.*

The smallest usable parts. Each one is a single element with no layout of its own, dropped into molecules and organisms wherever needed. Grouped here by the job they do.

### Button

- **Selector:** `.btn` · `.btn-primary` / `.btn-secondary` / `.btn-ghost`
- **Rule:** Primary is the only Ember element on most screens. Sizes: `.btn-sm` / default / `.btn-lg`.
- **Anatomy:** a primary CTA carries a trailing arrow in `<span class="ar">→</span>`.

```html
<a class="btn btn-primary">Book a build call <span class="ar">→</span></a>
<a class="btn btn-secondary">See the system</a>
<a class="btn btn-ghost">Learn more</a>
```

### Badge

- **Selector:** `.badge` · `.badge.brand` / `.badge.ok` (`.badge.signal` also ships)
- **Rule:** Mono status pill. Carries an optional leading dot.
- **Anatomy:** the leading dot is `<span class="d">`.

```html
<span class="badge brand"><span class="d"></span>AI cited</span>
<span class="badge ok"><span class="d"></span>Qualified</span>
```

### Input field

- **Selector:** `.lf-field` · `.lf-input` (wrapper `.lf-control`, required mark `.req`)
- **Rule:** Mono uppercase label with an Ember required mark, over a panel-2 input with a resting hairline border that flips to an Ember inset ring (and Void fill) on focus. Matches the contact form.

```html
<div class="lf-field">
  <label>Work email <span class="req">*</span></label>
  <div class="lf-control">
    <input class="lf-input" type="email" placeholder="your@email.com" />
  </div>
</div>
```

### Icon

- **Selector:** `.icon-grid svg` (each cell `.icon-cell` with a `.lab` caption)
- **Rule:** 1.6px stroke, 24px grid, square joins. Line only, never filled.

```html
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
     stroke-width="1.6">
  <circle cx="11" cy="11" r="6" /><path d="M20 20l-5-5" />
</svg>
```

The published set, all on the same 24×24 grid:

| Icon | Geometry |
| --- | --- |
| Search | `<circle cx="11" cy="11" r="6" /><path d="M20 20l-5-5" />` |
| Analytics | `<path d="M4 18V8M10 18V4M16 18v-7M22 18H2" />` |
| Email | `<path d="M4 7h16v12H4zM4 7l8 6 8-6" />` |
| Capture | `<path d="M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7z" />` |
| Automate | `<circle cx="12" cy="12" r="8" /><path d="M12 8v4l3 2" />` |
| Route | `<path d="M5 12h14M13 6l6 6-6 6" />` |

### Mark

The logomark ships as its own atom (`Mark`, rendered from `marks.js`), used at `mark="t"` `mode="fill"` in the header, the closing CTA, and the footer. It is the one element in the system allowed to carry curvature.

---

## Molecules

*Layer 2 of 5.*

A handful of atoms grouped to do one job. These are the reusable units a page is actually assembled from, the smallest thing worth naming and reusing.

### Feature card

- **Selector:** `.feature-card` (icon well `.ic`)
- **Rule:** Icon atom + heading + body. The repeating unit in feature rows.
- **Anatomy:** the inner svg is 22px square on the 24-grid.

```html
<div class="feature-card">
  <div class="ic"><svg>…</svg></div>
  <h4>You show up wherever they look</h4>
  <p>Search, AI answers, social, paid…</p>
</div>
```

### Metric & stat

- **Selector:** `.metric` · `.stat` (value `.v`, key `.k`, optional supporting `<p>`)
- **Rule:** Display-weight value with an Ember emphasis span, mono key beneath.

```html
<div class="metric">
  <div class="v"><em>$32K+</em></div>
  <div class="k">Revenue preserved</div>
</div>
```

### Testimonial quote

- **Selector:** `.qcard` / `figure` (quote mark `.qmark`, caption `.qrole` + `.qnote`)
- **Rule:** Ember quote mark, display blockquote, role + mono note caption.
- **Anatomy:** emphasis inside the blockquote uses `<em>`.

```html
<figure class="qcard">
  <span class="qmark">“</span>
  <blockquote>They rebuilt the whole pipeline…</blockquote>
  <figcaption>
    <span class="qrole">Operations-led service business</span>
    <span class="qnote">Automation · CRM · pipeline</span>
  </figcaption>
</figure>
```

### Nav cluster

- **Selector:** `.hnav` · `.demo-nav`
- **Rule:** Label links, dim until hover.

```html
<nav class="hnav">
  <a href="#system">System</a>
  <a href="#who">Who it's for</a>
</nav>
```

### Comparison row

- **Selector:** `.cmp-list li` (marker `.mk-i`)
- **Rule:** Paired without/with rows. Ember check vs faint cross — `✓` for with, `×` for without.

```html
<ul class="cmp-list">
  <li><span class="mk-i">✓</span>Every lead captured and tracked.</li>
</ul>
```

### FAQ item

- **Selector:** `.faq details` (question `.q`, toggle `.ix`, answer `.a`)
- **Rule:** Native disclosure. Display question, ± toggle.

```html
<details>
  <summary>
    <span class="q">What do you actually get?</span>
    <span class="ix"></span></summary>
  <div class="a">One revenue system…</div>
</details>
```

---

## Organisms

*Layer 3 of 5.*

Full page sections, assembled from molecules and atoms. Each one below is a **live, faithful recreation** of a real homepage section, idealized to the system. Open the page to see it in its shipped context.

Note: on the page these are rebuilt inline with `.od-*` demo classes (`.od-hdr`, `.od-hero`, `.od-stats`, `.od-cmp`, `.od-cta`, `.od-foot`). The shipped selectors are the ones named in each caption below — build against those.

| Organism | Shipped selector | Live |
| --- | --- | --- |
| Site header | `.site-header` | https://stwof.com/ |
| Hero | `.hero` | https://stwof.com/ |
| System row | `#system` | https://stwof.com/#system |
| Stats band | `#results` | https://stwof.com/#results |
| Comparison | `#change` | https://stwof.com/#change |
| Closing CTA | `#start` | https://stwof.com/#start |
| Footer | `.site-foot` | https://stwof.com/ |

### Site header · `.site-header`

Brand lockup (Mark + `.wm` wordmark "STWOF") on the left, `.hnav` label links in the middle (System · Who it's for · Results), and a right cluster of a plain `.lnk` ("Contact") plus a `.btn.btn-primary.btn-sm` ("Book a build call →"). Sticky on every template.

### Hero · `.hero`

Two columns. Left: an `h1` with the second sentence in `<em>` for the Ember emphasis — "Sparks scatter. *Systems blaze.*" — a `.hl` lede, then `.acts` holding a single `.btn.btn-primary.btn-lg`.

Lede copy: "Get found by the right buyers. Get chosen the moment they land. Close the loop before a competitor can reply. **Growth stops being a grind and starts compounding.**"

Right: a three-step stack (`.od-layer`, one `.lit`) of node + label + index — Get found 01, Get chosen 02, Close the loop 03. Exactly one layer is lit.

### System row · `#system`

Mono eyebrow ("The system"), an `h3` with an `<em>` emphasis ("One system. *Zero gaps.*"), then a three-up row of `.feature-card` molecules. Each card carries a mini visual above the heading: a ranked-rows list (`.row`, one `.lit`, with a `.tag`), a pipeline-status list, or a `.bars` sparkline whose final bar is `.lit`.

Card headings: "Show up wherever they look" · "Every visit becomes opportunity" · "Revenue without the chase".

### Stats band · `#results`

Three `.stat` molecules across: value `.v` (Ember `<em>` + optional unit), mono key `.k`, supporting sentence. Shipped set: "Days / From handshake to live", "~20 hrs / Returned every week", "$0 / To get started".

### Comparison · `#change`

Two columns, `.col.without` and `.col.with`, each led by a `.ch` column heading ("Without a system" / "With your system") over a `ul` of `.mk-i` marker rows — `×` on the left, `✓` on the right, paired line for line.

### Closing CTA · `#start`

Centered: Mark, an `h2` with two `<em>` emphases ("Stop choosing between *growing* the business and *running* it."), a supporting paragraph, then `.acts` with one `.btn.btn-primary.btn-lg`.

### Footer · `.site-foot`

Top row is a four-column grid: brand column (Mark + `.wm` + positioning paragraph) then three `h5`-headed link columns — **System** (The system · Who it's for · What changes), **Start** (What it returns · Common questions · Contact us), **Legal** (Privacy Policy · Terms of Service). Bottom row is two mono lines: "© 2026 Set The World On Fire LLC" and "Systems, not deliverables."

---

## Templates

*Layer 4 of 5.*

The order and rhythm of organisms, structure before content. Each page in the site is one of these skeletons. The homepage is a long single-column scroll; legal and contact share a tighter masthead-and-body frame.

### Homepage · long scroll

| # | Region | Organism | Emphasis |
| --- | --- | --- | --- |
| 01 | Header | `.site-header` | |
| 02 | Hero | `.hero` | accent · tall |
| 03 | Intro statement | `.intro-statement` | |
| 04 | System row | `#system` | |
| 05 | Testimonial | `.tfire` | |
| 06 | Who it's for | `#who` | |
| 07 | Stats band | `#results` | |
| 08 | Comparison | `#change` | |
| 09 | Proof + FAQ | `#proof` · `#faq` | |
| 10 | Closing CTA | `#start` | accent |
| 11 | Footer | `.site-foot` | |

### Contact & legal · masthead + body

| # | Region | Organism | Emphasis |
| --- | --- | --- | --- |
| 01 | Header | `.site-header` | |
| 02 | Masthead | `.legal-hero` | accent · tall |
| 03 | Body / form | `.wrap2` | tall |
| 04 | Footer | `.site-foot` | |

### Shared frame rules

Every template opens with the sticky **header** and closes with the four-column **footer**. Content lives inside `.wrap2` (max 1440px). Sections alternate Void and Panel grounds; Ember appears at most once per viewport.

---

## Pages

*Layer 5 of 5.*

Templates filled with real copy and imagery, the shipped site. These are **live captures of the running pages**; open any one to interact with it.

| Page | URL | What it is |
| --- | --- | --- |
| Homepage | https://stwof.com/ | The full revenue-system narrative: hero, system, proof, comparison, FAQ, CTA. |
| Contact | https://stwof.com/contact | Masthead over the booking form, built on the shared frame. |

Captures: `/brand/guides/page-homepage.jpg`, `/brand/guides/page-contact.jpg`.

---

## Working rules

How to extend the system without breaking it. When in doubt, compose existing parts before inventing new ones.

- **Naming** — Atoms and molecules use **flat, semantic class names** (`.btn`, `.feature-card`). Organisms are page sections keyed by **id**. No utility soup.
- **Compose first** — Need something new? **Combine atoms into a molecule** before writing fresh CSS. Most “new” components are an existing card with different content.
- **One accent** — Ember marks a **single** priority per view. Active state, primary action, or the emphasized word, never more than one at a time.
- **Square edges** — Radius is **0** everywhere except the logomark. Don't reintroduce rounding on cards, buttons, or inputs.
- **Responsive** — Layouts collapse to a single column under **780px**; the header nav hides under **980px**. Type scales with `clamp()`.
- **Accessibility** — Ink-on-Void clears AA. Keep focus rings (the Ember inset on inputs), real `<button>`/`<a>` elements, and visible labels.

---

| | |
| --- | --- |
| System | Website · Atomic |
| Source | ds.css · marks.js |
| Companion | [Brand guideline](https://stwof.com/brand/guideline) |
| © 2026 | Set The World On Fire LLC |

*This document mirrors https://stwof.com/brand/design-system.*