This guide does not document the class system — you can query that. It documents what the tooling will get wrong, what it reports incorrectly, and how to verify that a change actually landed. Every failure below has cost real time on this site.
Scope: SLF is the internal framework behind stacklumen.com and iainfeeney.com. Brand colours and the display scale are exclusive to it. Never carry SLF classes, tokens or values into client work — that is what SAF is for.
Three rules. They prevent most of what follows.
Cost: two wasted edit rounds on /how-we-work before anyone noticed the edited class wasn't attached to anything.
The Designer does not run page embeds, site custom code or registered scripts. So an overflow that production hides with runtime overflow-x: hidden is visible there and only there. “It only looks wrong in the Designer” usually means a real bug that production is papering over.
The inverse is also true: a page style embed is invisible in the Designer but wins on the published page. Native styling looks correct while the live site renders something else.
Some writes report success and do nothing. Some report failure and succeeded. Re-read the thing you changed before reporting it done.
Ranked by what they have actually cost. Silent means it reports success and does nothing. Throws means it fails loudly and may take a good batch down with it. Verify means the result is real but misleading. Limit means the platform simply cannot do it.
App-ported pages carry one style embed. Its rules sit in the body, load after the site stylesheet, and beat native classes at equal specificity. Descendant selectors inside it beat them outright.
Cost: fifteen filled badges turned blue-on-blue — invisible label text shipped across several pages.
A global .pp-btn-primary and a combo .pp-btn.pp-btn-primary can both exist. The style tool always resolves the name to the combo, so the global is unreachable and quietly retains stale values.
“MPS did not acknowledge” and “[Conflict] could not be applied” both commonly follow a write that landed. Query first. A blind retry produces the real error.
Vendor-prefixed properties and shorthand padding bound to a variable fail the entire call, taking every sibling action with them. Isolate anything experimental into its own action.
Size variables reject clamp(). Colours, spacing, radii and widths tokenise; the display scale stays literal in the class and is governed by this guide.
It includes the scrollbar. On a fixed element that already has left and right set, the width declaration is redundant and causes horizontal overflow. Use width auto, max-width none, and remove min-width — min-width beats max-width, so leaving it defeats the fix.
Default to native. An embed is justified only when the selector cannot be expressed as a Webflow class. If you cannot name the specific property or selector that blocks you, it does not qualify.
CSS for elements that JavaScript creates at runtime cannot be migrated. Those elements never exist in the Designer, so no class can attach to them. The navbar embeds are legitimately unmigratable for exactly this reason — do not try.
Weight is 600 on every heading — never 400 or 500. Tracking tightens as size grows. Inherited Relume classes shipped with no letter-spacing and line-height 1.2; that untracked setting is what reads as weak, and it is not a weight problem.
Font stack is Inter first, always. Body copy renders Inter, so any class with Helvetica first renders a visibly different face on the same page. Brand blue is #0075ff — ported pages contain #0065ff and #0066f5; both are wrong.
Reference pages like this one deliberately cap at the section tier, not the hero tier. A 112px headline competing with technical content is a mistake.
SLF classes, tokens, brand colours and the display scale are exclusive to Stacklumen products. They do not go into client work, templates or the public clonable. Client projects use SAF; the free clonable uses generic values only.
Publishing ships the entire site, never one page. Review native styling in the Designer; publish in batches only when verifying embed or script behaviour.
The class prefix tells you which framework you are in, and therefore which rules apply. Get this wrong and you leak proprietary styling into client or public work.
Marketing pages also carry a per-page prefix for their own components. These are page-scoped, not framework-scoped, and are safe to edit within their page.
Some pages carry two complete families side by side — an orphaned older set and the live one. /how-we-work has both hw- and sl-hw-, and only sl-hw- is attached to elements. Always confirm against the element before editing.
Every new page on stacklumen.com gets the same chrome, in this order. These component IDs cannot be derived — use them directly.
Section shell is slf-sec wrapping slf-in. One section per parent div — never stack multiple sections inside a shared wrapper. Build repeated chrome as components, not copies.
Create the page, read the Body element at depth 0 for its ID, then append into that. Set SEO title, description and the OG asset at creation — retrofitting them is easy to forget. Draft pages stay out of publishes, which makes them the safe place to prototype.
Pass scope_component_id or the lookup fails with “Element not found”. This applies to the banner, navbar and footer — anything inside the chrome.
Pick one per section. Do not stack them — a hero gets atmosphere or a flat surface, never both.
Colour gathers downward and the top is pure white, so the translucent navbar blends with no seam. Layer order matters — the white scrim is painted first, on top.
Absolutely-positioned blurred circles with drifting keyframes, masked to an ellipse. Requires @keyframes so it lives in an embed. Use for landing heroes only — never on reference or legal pages.
Brand glow is SLF-exclusive. Client and clonable work uses neutral shadows only.
A solid brand-coloured span for the second clause. Cheaper than a gradient and safe anywhere. This is the “Build with Stacklumen” pattern.
Uppercase plus tracking is how a label reads as a label. Never switch to a mono face for that effect — Inter, Helvetica and Arial only.
Variants are always combo classes on the base, never separate globals. A same-named global and combo can both exist and the tool only reaches the combo — that is how values drift.
The 2px left border carries the meaning. Swap only that colour for success or warning — keep every other edge neutral.
A bordered card of key/value rows that renders the system's own tokens. Use in a hero when the page's subject is the system. It doubles as documentation and cannot drift, because it shows the real values.
Composite values cannot bind to a token, so the glow stays literal. Update it by hand when brand colour changes.
Reference pages cap headings at the section tier, never the hero tier. Long technical prose at full container width is unreadable — constrain the measure.
Webflow's base breakpoint covers 992px upward, so there is no way to target small desktops directly. Invert the usual instinct:
Larger breakpoints are min-width, smaller are max-width and cascade downward. There is no 1024px breakpoint — media queries written against one in an embed will not align with anything native.
