What this protects
- The
sl-token system and its values - BEM class architecture & naming grammar
- Mega navigation & footer component structure
- Source markup, styles, and interaction logic
- Visual identity: type scale, color, motion, spacing
© Stacklumen · Design Framework
Stacklumen
Design Framework.
The system of record for how Stacklumen products are built — its tokens, naming rules, and component anatomy. This page is both a copyright notice and the definitive structure reference for the design framework (SDF) that powers the mega navigation and footer you're looking at right now.
01 — Ownership
Copyright & ownership
The Stacklumen Design Framework (“SDF”), including its design tokens, class naming system, component structures, source markup, styles, and the compositions documented on this page, is original work © 2026 Stacklumen. All rights reserved.
Internal use
SDF is licensed for use across Stacklumen properties and by Stacklumen clients within their delivered engagements. Within that scope you may extend, re-skin, and compose SDF components freely — that is the framework's entire purpose.
What isn't permitted
Redistribution of the framework as a standalone product, resale, or removal of authorship from source files without written permission. The framework is documented openly for reference; that transparency is not a transfer of ownership.
Questions on licensing or attribution: support@stacklumen.com.
02 — Foundations
Design tokens
Everything a surface might re-theme is a CSS variable, declared once at a component root and overridable at any ancestor scope. These are the canonical SDF tokens.
Color
--sl-blue
#0065ff--sl-blue-soft
rgba(0,101,255,.5)--sl-text
#0a0a0a--sl-text-muted
#3a3a3a--sl-text-faint
#6b6b6b--sl-bg
#ffffff--sl-bg-subtle
#fafafa--sl-border
rgba(10,10,10,.08)Type, radius & motion
--sl-font'Inter', Helvetica, Arial, sans-serif--sl-font-mono'Inter', Helvetica, Arial, sans-serif (label face — never a mono)Body axis
font-variation-settings: "wght" 440Heading axis
font-variation-settings: "wght" 620--sl-radius2px (controls, inputs)--sl-radius-card8px (cards, feature panels)--sl-easecubic-bezier(.4,0,.2,1)--sl-ease-outcubic-bezier(.16,1,.3,1)
Dark theme flips the same tokens under [data-stacklumen-theme="dark"] — a single
attribute on <html>, set before paint to avoid a flash. Toggle the theme
from the nav and this page follows.
03 — Rules
Principles
SDF is not a utility framework — it's a set of rules that keep every surface reading as one system while staying easy to extend.
Semantic HTML
The right element for the job — nav, footer, section, button vs a. Markup is the foundation; everything else is decoration.
Heading hierarchy
One h1 per page; levels reflect document structure, never visual size. Never skip a level.
Tokens over constants
Anything a surface might re-theme is a CSS variable; everything else is a constant. Colors, type, radius, motion, spacing.
BEM naming
sl-{block}__{element}--{modifier}. Any class on a page reads as exactly what it targets — no collisions, no specificity wars.
Shallow nesting
Three to four levels deep, so the component tree stays readable. Deeper than that becomes a sub-component.
Structured data
Real-world entities carry Schema.org hooks — Organization, Product, FAQ — so surfaces are indexable by search and answer engines by default.
Accessibility baseline
WCAG AA minimum: visible focus, ARIA on menus/dropdowns, keyboard paths, and prefers-reduced-motion honored everywhere.
Behavior as standard
Components don't just render — custom-eased transitions, intent-driven hover, sticky nav, smooth scroll, dark mode. The default is polished.
04 — Grammar
Naming convention
Every class follows one grammar, prefixed sl- so it never collides with a consumer's styles.
sl-{block} → .sl-mega .sl-foot
sl-{block}-{element} → .sl-mega-product .sl-foot-col-link
sl-{block}-{element}--{modifier} → .sl-mega-icon-link.is-discord- Block — the component:
sl-mega(mega navigation),sl-foot(footer). - Element — a child of the block:
sl-mega-product-name,sl-foot-col-title. - Modifier / state — a variant, typically an
is-state class:is-discord,is-visible.
05 — Component
Anatomy — mega navigation
Block sl-mega. A sticky bar plus a full-width panel with a products/services rail,
three link columns, a feature card, and a self-contained mobile drawer.
sl-mega (bar)
├ sl-mega-links › sl-mega-link ×4 How We Work · Verticals · Shop · Platform
│ └ sl-mega-link-caret ▾ on "Our Products"
└ sl-mega-actions
├ sl-mega-icon-link Support · Legal (is-discord modifier)
└ sl-mega-cta sl-mega-cta-full / -short / -arrow
sl-mega-panel-inner (dropdown panel)
├ sl-mega-section "Products"
│ ├ sl-mega-section-head › sl-mega-section-title + sl-mega-section-link
│ └ sl-mega-products › sl-mega-product ×3
│ └ sl-mega-product-head › sl-mega-badge
│ sl-mega-product-name · -desc · -meta › -price · -arrow
├ sl-mega-section "Services" › sl-mega-product ×2
├ sl-mega-banner "Selected Work" › -eyebrow · -cta
├ sl-mega-col ×3
│ sl-mega-eyebrow ("Stacklumen" · "Company" · "App")
│ └ sl-mega-col-list › sl-mega-col-link › span + sl-mega-col-link-desc
├ sl-mega-feature -tag · -title · -desc · -cta · -video · -overlay
└ sl-mega-panel-footer › sl-mega-panel-footer-links › -link ×5
Mobile: sl-mega-mobile › sl-mega-mlist › sl-mega-mitem / sl-mega-mlink
sl-mega-mgroup · sl-mega-mview · sl-mega-mcta · sl-mega-mtheme