Brand guidelines, built like the system.
The mark, the palette, the type and the rules that keep Stacklumen consistent on every surface, with the files to download.
One mark, drawn on a 24-unit grid.
A notched frame with a detached corner, filled top to bottom with the descend ramp: brand blue into lilac. The geometry is whole units, so it stays sharp at every size.
Blue for action. Purple for atmosphere.
Two neutrals carry the page. Brand blue marks everything you can act on. Deep purple is the accent at the edges: blooms, gradient ends and glows, never a button or a selection.
Ink
Ink
Text and the one ink band
- Hex
- #0A0A0A
- RGB
- 10, 10, 10
- Token
- --sl-ink
- On Paper
- 19.80:1
Paper
Paper
Surfaces in the light theme
- Hex
- #FFFFFF
- RGB
- 255, 255, 255
- Token
- --sl-bg
- On Ink
- 19.80:1
Signal
Brand blue
Actions, links and focus
- Hex
- #0075FF
- RGB
- 0, 117, 255
- Token
- --sl-accent
- On Paper
- 4.21:1
Purple
Deep purple
Accent: blooms and gradient ends
- Hex
- #2E1065
- RGB
- 46, 16, 101
- Token
- --sl-purple
- On Paper
- 15.24:1
Lift
Purple lift
Accent: edges, glows and the mark’s foot
- Hex
- #43198F
- RGB
- 67, 25, 143
- Token
- --sl-purple-lift
- On Paper
- 11.84:1
Inter, first and always.
One family does the whole job, with Helvetica and Arial behind it as fallbacks. There is no fixed-width face anywhere: the label feel comes from uppercase and letter-spacing.
Build in the light.
One idea per section.
Clarity over clutter, every time. Ledes and body copy stay muted so the headline carries the section.
Fig. 1 · Mark construction
How to apply the brand.
Stacklumen reads cleanest when the system gets out of the way. Four rule sets cover the situations that come up most, on client work, on partner sites and on our own surfaces.
0px 2px 3px
Corners · the whole range
Selection · a raised chip in a grey tray
A text link
Blue · actions and links only
The mark
The mark stays exact. Any deviation breaks the system, especially the ones that look like polish.
- Always use the official files. Never recreate, redraw or recolour the mark.
- Keep clear space equal to the height of the “S” cap on every side.
- Use the standard lockup on light backgrounds and the on-dark lockup on dark ones.
- Never stretch, rotate, skew, add a shadow or flatten the ramp.
- Minimum size: 120px wide for digital, 1 inch for print.
Colour
Ink and paper carry the weight. Blue means “you can act here”. Purple sets the atmosphere and never asks for a click.
- Brand blue for primary actions, links and focus rings. Hover goes one step darker, with no gradient, glow or lift.
- Purple for blooms, gradient ends and glows only. Never on buttons, links, hover or selected states, and never as a full-section surface.
- A selected state is a raised white chip in a grey tray, never solid or tinted blue.
- At most one coloured phrase in a headline.
- WCAG AA contrast on all text and every interactive element.
Type
One family, a few tiers. Tracking tightens as size grows, which is what keeps large type from looking loose.
- Inter first in every stack, then Helvetica Neue, Helvetica and Arial.
- Headings at 600, heroes at 700. Never 400 or 500 on a heading.
- Labels are Inter, uppercase and tracked, for captions and metadata. Never an eyebrow above a heading.
- No fixed-width faces anywhere, including code, keycaps and text inside figures.
- text-wrap: balance on display headings.
Surfaces and motion
When in doubt, hairline. When still in doubt, a smaller hairline.
- Corners are 2–3px. Only true circles (avatars, dots, toggles) are round.
- Cards and grids use 1px hairlines; a grid is a 1px gap on a border-coloured container.
- Decorative layers fade into their neighbours, with no hard seams.
- Motion is quiet, and every animation honours prefers-reduced-motion.
- SVG over PNG for marks and figures.