The visual grammar behind every page we ship.
--:--:-- · UTC
001Color tokens
Three layers: --bg-* for surfaces, --ink-* for type, six neons used semantically. Click any swatch to copy the variable.
002Neon palette
Fourteen neons, one assigned to every product or service. The neon is how you recognize the thing without reading the name. Three neons (lime, amber, red) are reserved for status states.
003Product icons
Twenty-two unique glyphs — one per Septim product. Built on a shared grammar: 24×24 viewBox, 1.4 stroke, sharp miters, fills used sparingly to weight the most important shape. Each renders in its product's neon. Hover any icon to enlarge.
003.5Marks — primary + secondary
The Septim PRIMARY monogram is the heptagram mandala — seven outer nodes (Septim = Latin for 7) connected to a central node by spokes, all inside an outer ring. It appears in the nav, on every product page, and as the favicon. Always set in the page neon (currentColor inherits --p) with a soft glow filter applied via the .mark wrapper. The previous heptagon mark is now retained as a SECONDARY motif — usable for visual decoration, watermarks, and structural artwork, but never as the lockup mark.
Source: /assets/brand/septimlabs-monogram.svg · PNGs: septimlabs-monogram-blue.png, septimlabs-monogram-black.png. Inline SVG version lives in site-shell.js as MARK_SVG.
004Product palettes
Same data, compact view. Hover a cell — the neon underline draws in.
005Typography
No serifs. Two faces total: Geist for everything readable, Geist Mono for labels, code, status, anything tabular. Italic emphasis is retired — emphasis is now color (the page's neon).
const payback = ownOnce / rentMo;
return payback < 12 ? "buy it" : "rent another year";
006Spacing & radii
An 8-point base scale. Small radii (4–8px) for cards, hairline borders for everything else. Octagons and pill buttons are the only exceptions.
007Visual motifs
A short, recurring vocabulary: terminal prompts, code symbols as dividers, monospace meta lines, blinking cursor accents, ASCII diagrams, status pills. Used sparingly. Try clicking the terminal.
008Icon patterns
The product icons aren't just for nav — they're a tertiary asset library. Used as repeating fields, hero decorations, footer signatures, page-corner sigils, and animated transitions. The grid below shows the same icon system applied as: field, orbit, cascade, signature.
009Data display
HUD cells, sparklines, ticking counters. Everything tabular gets font-variant-numeric: tabular-nums.
010Chrome & nav
A persistent top bar with a small mark, the wordmark, version sigil, links, theme toggle. Active link gets a glowing 1px underline.
Footer hands off to a thin status strip — system status dot, build hash, copyright. The footer is a quiet log, not a sitemap dump.
012Status & pills
A four-state pill — neutral / ok / warn / err — used everywhere status lives. Always uppercase mono.
013Forms
Hairline borders, tight padding, generous focus ring in the page's neon.
014Discoverables
Easter-egg behaviors scattered across the site. Documented here so anyone on the team can find them. Press ? anywhere on the site to bring up the keyboard cheatsheet.
Shortcut overlay
Press ? to see every shortcut for the page you're on.
Quick-jump
Type GT to leap to Herramientas, GB for Blog, etc.
Live coordinates
The bottom-right HUD shows your cursor coordinates and the active section.
Konami
Type the sequence anywhere on the site. You'll find a colophon page with build details.
Boot any tool
Hover a product anywhere on the site — the name "boots" inline like a terminal command.
Section telemetry
Each section announces itself: chapter number, scope line, last-updated stamp.