The Septim Brand Kit.

Logomark & wordmark

Dark background only — light mode is not a Septim context. Clear-space = one badge width on every side. Minimum: logomark 24px, wordmark 14px. Never stretch. Never recolor outside the locked palette. Never overlay on photos without a dark scrim.

Primary monogram · heptagram mandala

Seven outer nodes (Septim = Latin for 7) connected to a central node by spokes, all inside an outer ring. Used in the nav, on every product page, and as the favicon. Always set in the page neon (currentColor picks up --p).

<img src="/assets/brand/septimlabs-monogram.svg"
     alt="Septim Labs"
     width="32" height="32" />

Secondary mark · heptagon motif

The heptagon — six-edge silhouette + spokes to a center node — was the previous primary mark. Now retained as a secondary motif: useful for visual decoration, watermarks, and structural artwork. Don't use it in the nav or as the lockup mark.

<img src="/assets/brand/septimlabs-secondary-mark.svg"
     alt=""
     width="32" height="32" />

Wordmark · full Septim Labs contexts

<img src="/brand/assets/wordmark.svg"
     alt="Septim Labs"
     width="160" />

Color system · one neon per product, forever

Septim has fourteen neon lanes locked in site.css as --n-* tokens. Every product page picks one lane via --p and uses neutrals for everything else. New products pick from this list — never invent a new neon. Three lanes (lime, amber, red) double as status states (.pill.ok / .warn / .err) — a product on those lanes is fine; using them outside their reserved meaning is not.

The fourteen neon lanes

Pairing rules

Neutrals (5 steps)

Semantic (derived — no new hues)

Type system

Inter for display + body (weights 400/500/600/700/800). JetBrains Mono for labels, code, inline technical. Both via Google Fonts. Italic is reserved for gradient em-text only — never italicize body copy.

Components & motifs

Structural conventions. Swap the one --accent value at :root to rebrand the whole page.

<a class="btn-primary">...</a>
<a class="btn-ghost">...</a>

Motion rules

/* durations */
--motion-fast: 120ms;      /* hover state, focus ring */
--motion-base: 180ms;      /* interactive transitions */
--motion-ease: cubic-bezier(0.2, 0, 0, 1);

/* scroll-reveal fade-in only */
[data-animate]      { opacity: 0; transform: translateY(12px); }
[data-animate].in   { opacity: 1; transform: none;
  transition: opacity 500ms var(--motion-ease),
              transform 500ms var(--motion-ease); }

/* never: bounce, rotate, scale > 1.03, infinite loops */

Accessibility baseline

• Text vs background contrast must meet WCAG AA (4.5:1 body, 3:1 large).
• :focus-visible always shows a 2px --labs outline at 2px offset.
• Every interactive target is at least 44×44px (touch-safe).
• prefers-reduced-motion kills all transitions & animations.
• Every icon-only button has an aria-label.
• Every image has meaningful alt text; decorative only → alt="".

Naming a new Septim product

Any new product name must pass all seven constraints. A name that fails one fails the whole family.

1. One word only. No hyphens, no spaces, no descriptors appended.
2. Drawn from craft, mythology, geology, or light-physics. Not AI buzzwords.
3. Communicates its register without a description. The word alone signals what kind of thing the product is.
4. Trabalhos as a verb sometimes. "We Forged it." "Prism refracts it." "Ship it."
5. No portmanteaus. No AI prefix. No .ai or numbers in the name itself.
6. Passes ICP Comprehension Gate 0. Target buyer guesses the product's category in 10 seconds given only the name.
7. Carries the Septim prefix in public surfaces. "Septim Forge." In its own site it may drop to just "Forge."

"Septim Labs" vs "Septim [Product]" vs "Septim"

"Septim Labs" is the legal parent — footers, "Powered by" attribution, About pages. A product is always "Septim [Name]" on first mention on any surface; shortened to just "[Name]" in running copy inside that product's own site. "Septim" alone appears only when referring to the house as a whole.

How Septim sounds, surface by surface

Different surfaces demand different registers. Every Septim writer — human or agent — picks the register first, then writes.

Ten voices. One house.

Each agent is a distinct register. Buyers must hear the difference in a single sentence. These rules apply both to Septim Agents (the buyer installs and runs them) and to Septim Audit deliverables (we run them and write the PDF).

Required and forbidden words

Two lists. Every Septim product page must contain all 6 required words. Every page must contain zero forbidden words. Page reviews check both.

Exception: products not yet live (waitlist, founding access, private beta) substitute the 6th word with an explicit stage label — never claim "production" for anything unshipped.

Drop-in product hero

Paste this into a new Septim product page. Change one --accent value in :root — everything rebrands.

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Septim [Product] — [one-line description]</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet" />
<style>
:root {
  --bg:var(--bg); --text:var(--ink); --muted:var(--ink-2);
  --border:var(--line); --subtle:var(--ink-3);
  --accent: #YOUR-PRODUCT-HEX;  /* ← only line that changes */
  --accent-bg: rgba(R,G,B,0.08);
  --accent-border: rgba(R,G,B,0.3);
}
/* ...reuse /brand component CSS here... */
</style></head><body>
<section class="hero"><div class="wrap">
  <div class="badge"><span class="dot"></span> Lifetime · one-time $X</div>
  <h1>[Primary verb]. [Secondary.] <em>[Tertiary.]</em></h1>
  <p class="sub">[One sentence stating the product. Maybe a second. Never a third.]</p>
  <a class="btn-primary" href="[stripe link]">Buy — $X &rarr;</a>
  <p class="micro">One-time · lifetime updates · 30-day guarantee · private repo</p>
</div></section>
<footer><div class="wrap">
  A <a href="/">Septim Labs</a> product · <a href="/terms">Terms</a>
  · <a href="/privacy">Privacy</a> · <a href="/refund">Refund</a>
</div></footer></body></html>

Before any product page ships

Run this 10-point gate on any new or edited product page. One failure blocks deploy.

1. 01 Page uses theme tokens (var(--bg), var(--ink)) — never hardcoded hex backgrounds. The shared site.css is loaded with the current cache version.
2. 02 Exactly one product accent in :root. No secondary accent outside h1 gradient.
3. 03 Inter + JetBrains Mono preconnected and loaded.
4. 04 Footer links to /terms, /privacy, /refund + mailto:.
5. 05 All 6 required words present: lifetime · one-time · private · 30-day · solo · production (or explicit stage label).
6. 06 Zero forbidden words. Search the rendered page for each banned term.
7. 07 Stripe Payment Link button & confirmation page linked and tested.
8. 08 Meta title, description, and og:title/og:description correct & forbidden-free.
9. 09 First mention uses full "Septim [Product]" form. Running copy may shorten.
10. 10 Lighthouse accessibility ≥ 95. Contrast passes AA. :focus-visible works on Tab.