Stacklumen / Brand Identity
Brand guidelines. Built like the system itself.
The marks, colors, type, and rules that keep Stacklumen consistent across every surface. Hairline-clean. Studio-grade.
01 / Logo system
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.
02 / Color palette
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
Ink Black
Primary text · foundation
- Hex
- #000000
- RGB
- 0, 0, 0
- Token
- --text
Paper
Paper White
Surfaces · foundation
- Hex
- #FFFFFF
- RGB
- 255, 255, 255
- Token
- --bg
Signal
Signal Blue
Accent · the only color
- Hex
- #0065FF
- RGB
- 0, 101, 255
- Token
- --accent
03 / Typography
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).
Helvetica Neue
Display / 600 weightBuild in the light.
- Usage
- Headlines, marks, numbers
- Weight
- 600 (Semibold)
- Tracking
- -0.025em to -0.04em
- Stack
- Helvetica Neue, Helvetica, Arial
Inter
Body / 400–600Clarity over clutter, every time.
- Usage
- Body, UI, links
- Weight
- 400, 500, 600
- Stack
- Inter, -apple-system, Helvetica, Arial
Inter Label
Eyebrow / 500 uppercase[ 01 ] / Studio
- Usage
- Eyebrows, captions, badges
- Weight
- 500 + uppercase
- Tracking
- .06em to .10em
04 / Usage rules
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.