Brand guidelines. Built like the system itself.

The mark stays exact. Any deviation breaks the system — especially the ones that look like polish.

• Always use official files — never recreate, redraw, or recolor.
• Maintain clear space equal to the height of the "S" cap on every side.
• Black wordmark on light backgrounds, white wordmark on dark.
• Never stretch, rotate, skew, drop-shadow, or apply effects.
• Minimum size: 120px wide for digital, 1 inch for print.

Black and white carry the weight. Signal blue earns its place by being rare and consistent.

• Signal blue for primary CTAs, links, the period accent, and active states — not for surfaces or fills.
• Use the --accent-soft wash (6% blue) for active TOC states and subtle callouts.
• Never gradient the wordmark; the only sanctioned gradient is the about-hero brand card.
• Maintain WCAG AA contrast minimum on all text and interactive elements.
• The trademark blue period (e.g., "Stacklumen.") is reserved for headlines and section titles.

Three roles, three families. Don't blur the assignments — that's how the system stays legible at glance.

• Helvetica Neue for headlines and marks — always 600 weight, never 700+.
• SF Pro Text for body, UI labels, and links — 400 default, 500–600 for emphasis.
• SF Mono for eyebrows, numbered labels, and code only — 500 weight, .06em tracking.
• Headline letter-spacing scales: -0.025em at section size, -0.035em at hero size.
• Use text-wrap: balance on all display headings under 80 characters.

When in doubt, hairline. When still in doubt, smaller hairline.

• Cards and grids: 1px hairline borders, --r: 2px radius. Never 8px+ rounded.
• Hairline grid pattern: 1px gap on a border-colored container, cells with --bg fill.
• Animation: cubic-bezier(.25,.46,.45,.94) as the canonical easing curve.
• Always honor prefers-reduced-motion — system animations are nice-to-have.
• SVG always over PNG; system fonts always over webfonts.