We migrated to x.com·Visit us

© 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.

Version 1.0Updated July 2026Owner StacklumenPrefix sl-

Framework tiers

Four tiers, four different rights

Stacklumen maintains four distinct design frameworks. They share a design philosophy and nothing else — each carries its own rights, its own audience, and its own restrictions. Where any other Stacklumen document refers to a tier by name, this section is the controlling definition.

SDFCStacklumen Development Framework Clonable. Public and free. Generic structural conventions, neutral values, no Stacklumen brand colour or proprietary treatment. Cloneable and usable commercially, including on client work.
SDFStacklumen Development Framework. Licensed with purchased templates. Usable on the licensee's own and client projects; not redistributable as a competing template or framework product.
SAFStacklumen Agency Framework. Used on client engagements and disclosed under the Master Service Agreement. Confidential. The client receives a licence to the site built for them; the framework itself is never transferred.
SLFStacklumen Framework. Internal only. Powers stacklumen.com and iainfeeney.com. Not licensed, sold or disclosed. Brand colour, display scale and signature treatments are exclusive to this tier.

What actually protects each layer

Different parts of a design system attract different legal mechanisms, and conflating them is how framework claims fall apart. To be precise about ours:

  • Copyright subsists in the written expression — stylesheets, documentation, page compositions and the specific arrangement of components. It does not protect layout ideas or the concept of a utility class.
  • Trade secret covers the parts kept confidential: SAF and SLF token values, naming conventions, component anatomy and the internal build conventions disclosed only under agreement. This is the substantive protection for the upper tiers, and it depends on confidentiality actually being maintained.
  • Trademark covers the names — Stacklumen, and the SDFC, SDF, SAF and SLF designations — as marks identifying the source of these frameworks. It does not protect the underlying code.
  • Not protected, and we do not claim otherwise: HTML structure as such, the idea of a design token, BEM-style naming as a general practice, or any individual CSS declaration.

Client work

Stacklumen retains authorship of what it builds. On delivery the client holds a licence to use, host, modify and extend that site or application in full, for as long as invoices are current; outright copyright transfer is available separately, through the separation framework set out in the Master Service Agreement. Either route covers the delivery only. The framework behind it — the reusable conventions, tokens and component library — is licensed to no one and stays with Stacklumen, and it may not be extracted from a delivery and redistributed as a template, theme or competing product. The Master Service Agreement governs and controls in the event of any conflict with this page.

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-softrgba(0,101,255,.5)
--sl-text#0a0a0a
--sl-text-muted#3a3a3a
--sl-text-faint#6b6b6b
--sl-bg#ffffff
--sl-bg-subtle#fafafa
--sl-borderrgba(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 axis16px · 1.7 line-height · 400
Heading axisclamp(48px, 7.5vw, 112px) · 600 · -0.038em
--sl-radius2px (controls, inputs)
--sl-radius-card8px (cards, feature panels)
--sl-ease-outcubic-bezier(.16, 1, .3, 1)
--sl-borderrgba(10, 10, 10, .08)

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.

01

Semantic HTML

The right element for the job — nav, footer, section, button vs a. Markup is the foundation; everything else is decoration.

02

Heading hierarchy

One h1 per page; levels reflect document structure, never visual size. Never skip a level.

03

Tokens over constants

Anything a surface might re-theme is a CSS variable; everything else is a constant. Colors, type, radius, motion, spacing.

04

BEM naming

sl-{block}__{element}--{modifier}. Any class on a page reads as exactly what it targets — no collisions, no specificity wars.

05

Shallow nesting

Three to four levels deep, so the component tree stays readable. Deeper than that becomes a sub-component.

06

Structured data

Real-world entities carry Schema.org hooks — Organization, Product, FAQ — so surfaces are indexable by search and answer engines by default.

07

Accessibility baseline

WCAG AA minimum: visible focus, ARIA on menus/dropdowns, keyboard paths, and prefers-reduced-motion honored everywhere.

08

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

© 2026 Stacklumen. The Stacklumen Design Framework and all component structures documented here are original work. All rights reserved.

Stacklumen · Lexington, KY · Privacy · Terms