The contract every
component follows.
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.
Nine rules. No exceptions.
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.
Semantic HTML
The right element for the job. <section>, <article>, <header>, <button>, <a>, and a real heading hierarchy — markup is the foundation, everything else is decoration.
Heading hierarchy
One <h1> per page, levels never skipped. Components that ship a heading expose its level as a prop so it lands at the right depth on your page.
Neutral defaults
Every component ships monochrome and tasteful. Nothing fights your brand out of the box — you opt into colour, not out of it.
CSS variables everywhere
Anything a customer might change is a variable: colour, font, radius, easing, spacing. Anything else is a constant. No inline hex.
BEM class naming
sdf-{block}__{element}--{modifier}, strictly. Read any class on a page and know exactly what it targets — no collisions, no specificity wars.
Shallow nesting
Three to four levels of DOM, max. Deep enough to be expressive, shallow enough that the Webflow Navigator stays readable.
Schema.org where it belongs
Tiers carry Offer markup, FAQs carry FAQPage, articles carry Article. SEO and AI-crawler indexing baked into the markup — nothing to configure.
Accessibility baseline
WCAG AA minimum on every component: visible focus, real contrast, correct ARIA on accordions/dialogs/tabs, full keyboard support, reduced-motion fallbacks.
Advanced UI/UX as standard
Components behave, not just render: scroll reveals, custom easing, hover with intent, sticky scrollspy, responsive that was actually thought through.
Neutral by default. Yours in one line.
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.
#ffffffSurface background#fafafaSubtle surface (hover, alternating)#0a0a0aPrimary text#525252Secondary text#8a8a8aTertiary text#ebebebHairline borders#d4d4d4Stronger borders#0a0a0aPrimary action (defaults to ink)#ffffffText/icon on accentThe first components, shipping now.
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-tierPricingPricing tier card — featured variant, deliverables list, Schema.org Offer.
sdf-faqContentAccordion on native <details>/<summary> — ARIA, keyboard, FAQPage markup, zero JS.
sdf-ctaConversionStandalone CTA block — eyebrow, headline, primary + secondary action.
sdf-section-introLayoutReusable section opener — eyebrow, headline, body, optional link.
sdf-contact-modalFormsContact form in a native <dialog> — focus trap, Escape-to-close, scroll lock.
- A rule set for building components that read as one system
- Framework-agnostic — drop output into Webflow, Astro, Next, plain HTML
- Theme-able entirely through CSS custom properties
- Accessible and SEO-structured by default
- A CSS framework — no utility classes, no
.flex.gap-4 - A JS framework — HTML + CSS with minimal scoped JS where needed
- Opinionated about your build or bundler
- Branded — defaults are neutral, the visual identity is yours
SDF is the spec. Baselumen is the product.
SDF 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.
Build on the spec.
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.