SDF is not a CSS framework like Tailwind or Bootstrap. It's a set of rules that govern how every Baselumen component is built — so the library reads as one coherent system, and so you can customize, extend, and ship without fighting the source.
Every SDF component is built against the same nine principles. They're what make a Baselumen tier card and a Baselumen FAQ feel like they came from one place — because, structurally, they did.
The right element for the job.
One
Every component ships monochrome and tasteful. Nothing fights your brand out of the box — you opt into colour, not out of it.
Anything a customer might change is a variable: colour, font, radius, easing, spacing. Anything else is a constant. No inline hex.
sdf-{block}__{element}--{modifier}, strictly. Read any class on a page and know exactly what it targets — no collisions, no specificity wars.
Three to four levels of DOM, max. Deep enough to be expressive, shallow enough that the Webflow Navigator stays readable.
Tiers carry Offer markup, FAQs carry FAQPage, articles carry Article. SEO and AI-crawler indexing baked into the markup — nothing to configure.
WCAG AA minimum on every component: visible focus, real contrast, correct ARIA on accordions/dialogs/tabs, full keyboard support, reduced-motion fallbacks.
Components behave, not just render: scroll reveals, custom easing, hover with intent, sticky scrollspy, responsive that was actually thought through.
Every component ships monochrome, tasteful defaults that don't fight any brand. Override at :root, at a section, or on a single instance — the cascade is the entire customization model. No theme files, no build step, no utility classes.
--sdf-bg #ffffff Surface background --sdf-bg-alt #fafafa Subtle surface (hover, alternating) --sdf-text #0a0a0a Primary text --sdf-text-2 #525252 Secondary text --sdf-text-3 #8a8a8a Tertiary text --sdf-border #ebebeb Hairline borders --sdf-border-2 #d4d4d4 Stronger borders --sdf-accent #0a0a0a Primary action (defaults to ink) --sdf-accent-fg #ffffff Text/icon on accent --sdf-radius 2px Border radius --sdf-font 'Inter', system-ui Body type --sdf-ease cubic-bezier(…) Standard easing /* Global — every SDF component */
:root {
--sdf-accent: #0075ff;
--sdf-radius: 8px;
}
/* Section scope */
.dark-section {
--sdf-bg: #0a0a0a;
--sdf-text: #fafafa;
}
/* Single instance */
.sdf-tier.special {
--sdf-accent: gold;
}Baselumen launches with a focused set of SDF components — each one a reference implementation of the framework. More land continuously. Hit a snag? Component support →
sdf-tier Pricing Pricing tier card — featured variant, deliverables list, Schema.org Offer.
sdf-faq Content Accordion on native <details>/<summary> — ARIA, keyboard, FAQPage markup, zero JS.
sdf-cta Conversion Standalone CTA block — eyebrow, headline, primary + secondary action.
sdf-section-intro Layout Reusable section opener — eyebrow, headline, body, optional link.
sdf-contact-modal Forms Contact form in a native <dialog> — focus trap, Escape-to-close, scroll lock.
.flex .gap-4SDF defines how a component must be built. Baselumen is the library of components built that way — and the application that delivers them into your site. Hublumen ships client work; Stacklumen AI, on the roadmap, is trained on the same patterns SDF formalizes. One source of truth, four surfaces.
Every Baselumen component is an SDF component. Browse the library, copy what you need, override the tokens, and ship — without inheriting someone else's brand.