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 logomark · prismatic

<img src="/brand/assets/logomark.svg"
     alt="Septim"
     width="32" height="32" />

Mono logomark · inherits color

/* wraps pick up the accent */
<span style="color: var(--forge)">
  <img src="...logomark-mono.svg">
</span>

Wordmark · full Septim Labs contexts

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

Color system · one accent per product, forever

Each product owns exactly one accent. A secondary accent is allowed only for gradient em-text in h1. Everything else is neutrals. Bundles own gradients. Parent Labs color is #0ea5e9 — distinct from Kit cyan to avoid confusion.

Product accents

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. Works 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 Agents Pack (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:#0a0a0a; --text:#f5f5f7; --muted:rgba(245,245,247,0.62);
  --border:rgba(255,255,255,0.08); --subtle:rgba(245,245,247,0.42);
  --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 Background is #0a0a0a, not #000. --bg declared in :root.
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.