the front-end system

loop.css

Tokens, then components; every component rendered beside the exact HTML that produces it. Copy the snippet, keep the vocabulary. This page is the handoff: a person — or an agent — can extend the site from here without guessing.

Pure HTML and CSS. No framework, no build step, no downloads. JavaScript adds motion only; everything works without it.

layer 1

Tokens

Semantic custom properties on :root. Reskin the whole site by editing these seven lines — nothing downstream hardcodes a color.

token	value	role
`--background`	`#F7F3EA`	warm paper
`--foreground`	`#171410`	warm ink
`--muted-foreground`	`#6F6759`	captions, spec labels
`--primary`	`#F5C518`	yellow — highlighter, markers
`--accent`	`#C8102E`	red — underlines, asterisks, fig tags
`--border`	`#E2DACA`	hairline rules
`--card`	`#FBF8F1`	raised paper

fig. 01 — the palette. Type, spacing (4px base), radius, and motion durations are tokens too; see loop.css layer 1.

layer 2

Components

One class, one component, one snippet. Compose against the vocabulary; never re-derive design inline.

Type

Display

Heading

Body — 17px, line-height 1.6, 68ch measure via .prose.

kicker — mono overline

<h1>Display</h1>
<h2>Heading</h2>
<div class="prose"><p>Body</p></div>
<p class="kicker">kicker — mono overline</p>

Section marker

03 — catalog

<section class="section">
  <p class="section-no">03 — catalog</p>
  …
</section>

Serial

S-04

<p class="serial">S-04</p>

Badge

design systemscollateralautomation

<div class="badges">
  <span class="badge">design systems</span>
</div>

Highlight

Design captured as vocabulary is design that ships at conversation speed.

<span class="highlight" data-highlight>conversation speed</span>

The data-highlight attribute is optional — it adds the draw-in animation when JavaScript is present.

Annotation

the obvious objection

An editor's red underline, and its mono margin label above.

<p class="annotation-label">the obvious objection</p>
<span class="annotation">red underline</span>

Spec table

inputone design-token system

output88 registered assets

replacesbespoke decks, brand drift

<div class="spec-table">
  <div class="spec-row">
    <span class="spec-key">input</span>
    <span class="spec-leader"></span>
    <span class="spec-val">one design-token system</span>
  </div>
</div>

Card

S-00

Standard card

A spec sheet inside the hairline-ruled grid.

catalog

—

Studio card

Inverted by overriding two tokens. Nothing else changes.

token override

<div class="grid">
  <article class="card">…</article>
  <article class="card card--feature">spans two columns</article>
  <article class="card card--studio">inverted</article>
</div>

Details panel

Why this matters

What this gives you

The value, stated plainly.

Why now

The timing argument.

The friction today

What organizations fight without it.

<details class="details">
  <summary>Why this matters</summary>
  <div class="panel">
    <div><h4>What this gives you</h4><p>…</p></div>
  </div>
</details>

Stat strip

7palette tokens

onedesign language, every page

<div class="stat-strip">
  <div class="stat"><span class="n">7</span><span class="l">palette tokens</span></div>
</div>

Figure and caption

fig. 02 — inline SVG inside a framed figure.

<figure class="figure"><svg …></svg></figure>
<p class="figcap"><span class="fig-no">fig. 02</span> — caption</p>

Footnote

Currently embedded full-time. Taking select conversations soon.

<p class="footnote">Currently embedded full-time…</p>

Button

bob@30loops.com

<a class="btn" href="mailto:bob@30loops.com">bob@30loops.com</a>

Card link and pager

full spec

<a class="card-link" href="s-04.html">full spec</a>
<nav class="pager">
  <a href="s-03.html">← S-03 · Call Intelligence</a>
  <a href="s-05.html">S-05 · Account Desk →</a>
</nav>

Discovery field

01How does this happen today?

manually, every time fully systematized

<fieldset class="field" data-q="method">
  <legend><span class="q-no">01</span>How does this happen today?</legend>
  <div class="choices">
    <label class="choice"><input type="radio" name="x-method" value="manual"> manually, every time</label>
  </div>
  <input class="notes" type="text" placeholder="notes — their words">
</fieldset>

Pick a pill above — the question number takes the marker swipe and the pill fills yellow, all in CSS. Answered state needs no JavaScript.

Forms live inside <form class="discovery" data-instrument="…">; discovery.js adds autosave and local export. Score exports with node score.mjs <file>.

Motion hooks

Add data-reveal to any block for a scroll-in; add data-highlight to a .highlight span for the marker draw. main.js binds them, honors prefers-reduced-motion, and the page is complete without it.

<div class="container" data-reveal>…</div>
<script src="main.js" defer></script>