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.
Tokens.
The decisions every other layer inherits. They live as CSS custom properties in ds.css. Click any color to copy its variable.
Atoms.
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.
<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><span class="badge brand"><span class="d"></span>AI cited</span>
<span class="badge ok"><span class="d"></span>Qualified</span><div class="lf-field">
<label>Work email <span class="req">*</span></label>
<div class="lf-control">
<input class="lf-input" type="email" placeholder="[email protected]" />
</div>
</div><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>Molecules.
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.
You show up wherever they look
Search, AI answers, social, paid. You're there first, sending buyers somewhere built to win.
<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>Manual follow-up handed to automation that never drops the ball.
<div class="metric">
<div class="v"><em>$32K+</em></div>
<div class="k">Revenue preserved</div>
</div>They rebuilt the whole pipeline and automated the busywork. I get about twenty hours back every week and nothing slips through anymore.
<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 class="hnav">
<a href="#system">System</a>
<a href="#who">Who it's for</a>
</nav><ul class="cmp-list">
<li><span class="mk-i">✓</span>Every lead captured and tracked.</li>
</ul>What do you actually get?
Why a system instead of just a website?
<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.
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.
Sparks scatter. Systems blaze.
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.
One system. Zero gaps.
Show up wherever they look
Search, AI answers, social, paid. You're there first, sending buyers somewhere built to win.
Every visit becomes opportunity
No lead goes untracked. A bot qualifies and routes them while they're still warm.
Revenue without the chase
Automated follow-up reaches out in minutes. You close while the interest is hot.
A sharp custom site goes up fast, so it starts building trust right away.
Manual follow-up handed to automation that never drops the ball.
A custom site can launch with nothing upfront, so the system proves itself first.
- ×Leads arrive and quietly disappear, untracked.
- ×Follow-up waits on you, and often never happens.
- ×A dozen tools that don't talk to each other.
- ✓Every lead captured, tracked, and accounted for.
- ✓Follow-up fires in minutes, automatically.
- ✓One platform: site, CRM, and automation as one.
Stop choosing between growing the business and running it.
The system gets architected, built, and run for you, so getting found, getting chosen, and closing the loop stop depending on you remembering to.
Revenue systems that get your business found and chosen, then close the loop, built and run so growth compounds without the chaos.
Templates.
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.
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.
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.
Working rules.
How to extend the system without breaking it. When in doubt, compose existing parts before inventing new ones.
Atoms and molecules use flat, semantic class names (.btn, .feature-card). Organisms are page sections keyed by id. No utility soup.
Need something new? Combine atoms into a molecule before writing fresh CSS. Most “new” components are an existing card with different content.
Ember marks a single priority per view. Active state, primary action, or the emphasized word, never more than one at a time.
Radius is 0 everywhere except the logomark. Don't reintroduce rounding on cards, buttons, or inputs.
Layouts collapse to a single column under 780px; the header nav hides under 980px. Type scales with clamp().
Ink-on-Void clears AA. Keep focus rings (the Ember inset on inputs), real <button>/<a> elements, and visible labels.