Brand guidelines. Built like the system itself.
The marks, colors, type, and rules that keep Stacklumen consistent across every surface. Hairline-clean. Studio-grade.
Marks for every background.
Two official wordmarks cover every context — black for light surfaces, white for dark. Always download from here, no recreations or manual recolors.
A three-color system.
Pure ink, pure paper, signal blue. The whole palette is two neutrals plus one accent — used sparingly enough that when blue shows up, it means something.
Ink Black
Primary text · foundation
Paper White
Surfaces · foundation
Signal Blue
Accent · the only color
A modern system stack.
No webfonts, no FOIT, no licensing tax. Two families do the whole job — Helvetica Neue for display, Inter for everything else (including the small-caps label treatment that replaces what other systems use a mono face for).
Build in the light.
Headlines, marks, numbers
600 (Semibold)
-0.025em to -0.04em
Helvetica Neue, Helvetica, Arial
Clarity over clutter, every time.
Body, UI, links
400, 500, 600
Inter, -apple-system, Helvetica, Arial
[ 01 ] / Studio
Eyebrows, captions, badges
500 + uppercase
.06em to .10em
How to apply the brand.
Stacklumen reads cleanest when the system gets out of the way. These four rule sets cover the situations we hit most often — in studio work, on partner sites, and across all of our own surfaces.
Logo usage
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.
Color application
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.
Typography standards
Two families, three roles. 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+.
- Inter for body, UI, and links — 400 default, 500–600 for emphasis.
- Inter (uppercase + tracked) for eyebrows, numbered labels, and captions — 500 weight, .06–.10em tracking. No mono face anywhere.
- 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.
System & surfaces
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.