Ship in minutes, not days.

Installation

There's no package to install and no build step. Components ship as self-contained markup and a scoped stylesheet. Three ways to use them:

• Webflow — paste the markup into an Embed, or drag the registered component from the library into your Designer.
• React / framework projects — copy the .tsx file; the styles ship with it and dedupe across instances.
• Anywhere else — drop the HTML into your page and the CSS into your stylesheet. No dependencies.

Anatomy of a component

Each component is built from three parts: the markup (semantic HTML with sdf- classes), the tokenized CSS (every visual property is a variable), and an anatomy doc describing its elements and recipes. Copy the first two and you're done.

<!-- markup -->
<section class="sdf-cta">
  <p class="sdf-cta__eyebrow">Get started</p>
  <h2 class="sdf-cta__title">Ship faster.</h2>
  <a class="sdf-cta__action sdf-cta__action--primary" href="#">Start</a>
</section>

The class names tell you the structure: sdf-cta is the block, sdf-cta__title is an element inside it, and sdf-cta__action--primary is a modified variant. You never have to guess what a class targets.

Use in Webflow

Two paths, depending on how much you want to customize in the Designer:

• Registered component (recommended) — install the Baselumen library, then drag the component onto the canvas. It arrives with real props and variants, editable in the Designer, and updates when the library updates.
• Embed — add an Embed element, paste the component markup, and paste the CSS once into your site's custom code (Project Settings → Custom Code, or a page <style>). Reuse the markup anywhere; the CSS only needs to live on the site once.

Use in React / Astro

Copy the component's .tsx from its detail page and drop it into your project. Each render imports its own scoped CSS and is dependency-free, so there's nothing else to wire up.

// app/page.tsx
import SdfHeroSplit from './components/sdf-hero-split';

export default function Page() {
  return <SdfHeroSplit />;
}

In Astro, render it as an island (client:visible) or, since components are static HTML + CSS, drop the markup straight into an .astro file. The same --sdf-* tokens theme it identically to the Webflow build.

Design tokens

Anything a consumer might want to change is a CSS custom property. Override them at :root, at a section, or on a single instance — the cascade is the entire customization model. There are no config files, no Sass, no theme objects.

/* Make every component use your brand */
:root {
  --sdf-bg: #fff;         /* base background */
  --sdf-text: #0a0a0a;    /* primary text */
  --sdf-border: #ededf0;  /* hairlines */
  --sdf-accent: #005fff;  /* the single brand accent */
  --sdf-radius: 8px;       /* base corner radius */
  --sdf-font: 'Inter', system-ui;
}

Beyond the global palette, each component exposes its own scoped tokens — for example --sdf-hero-split-max or --sdf-testimonial-avatar-size — that derive from the globals but let you tune one component without touching the rest.

Token scoping

Because tokens are plain CSS variables, where you set them decides what they affect. This is the whole system for managing components at scale:

• Site-wide — set tokens on :root to reskin every component at once.
• Per-section — set tokens on a wrapper element to theme just the components inside it (a dark hero above a light page, say).
• Per-instance — set a token inline on a single element to tweak exactly one component.

/* One dark section on a light page */
.promo {
  --sdf-bg: #0a0a0a;
  --sdf-text: #fafafa;
  --sdf-accent: #7aa2ff;
}
/* Everything with sdf- classes inside .promo now inherits it */

Later, more specific declarations win — so a per-instance override beats a section override, which beats :root. That's the normal cascade; there are no !important hacks anywhere in the library.

Attributes & interaction hooks

Beyond tokens, components expose a small, predictable set of attributes for state, theming, and behavior. These are the hooks you use to manage a component's state without writing custom CSS:

• data-theme="dark" — set on any ancestor to switch that subtree to dark values. Toggle it with one line of JS (see the tutorial below).
• State attributes — interactive components read state from attributes like aria-expanded, data-state="open", or [open] on a native <details>, so styling follows state automatically.
• ARIA hooks — accordions, dialogs, and tabs ship with the correct role, aria-controls, and aria-selected wiring already in place; you inherit accessible behavior for free.
• Modifier classes — variants (e.g. --dark, --center, --bordered) are applied as BEM modifier classes rather than props, so they're portable across every framework.

Theming & dark mode

Every component supports light and dark out of the box. Light values are the defaults; dark overrides apply through a parent scope, so flipping a single attribute themes the whole tree.

[data-theme="dark"] {
  --sdf-bg: #0a0a0a;
  --sdf-bg-alt: #141414;
  --sdf-surface: #17171a;
  --sdf-text: #fafafa;
  --sdf-border: #26262b;
}

Class naming (BEM)

Every class follows sdf-{block}__{element}--{modifier}, strictly. Read any class on the page and you know exactly what it targets — no collisions, no specificity wars.

• sdf-tier — the block (a whole component).
• sdf-tier__card — an element inside the block.
• sdf-tier__card--featured — a modified variant of that element.

Tutorial: rebrand in 3 lines

Take the entire library from our blue to your brand without editing a single component.

1. Add a global stylesheet (or Webflow custom code) after the component CSS.
2. Set your accent, radius, and font on :root.
3. Reload — every button, link, card, and CTA is now on-brand.

:root {
  --sdf-accent: #6d28d9;   /* your brand */
  --sdf-radius: 14px;      /* softer corners */
  --sdf-font: 'Inter', system-ui;
}

Tutorial: add a dark-mode toggle

Since dark values live behind [data-theme="dark"], a toggle is a single attribute flip on the root element.

// toggle button
const root = document.documentElement;
btn.addEventListener('click', () => {
  const dark = root.getAttribute('data-theme') === 'dark';
  root.setAttribute('data-theme', dark ? 'light' : 'dark');
});

Persist the choice in localStorage and read it on load if you want it to stick between visits. Every component re-themes instantly because they all read the same tokens.

Tutorial: compose a full page

Components are designed to stack top-to-bottom into complete pages. A typical marketing page:

1. Nav — sdf-navbar at the top.
2. Hero — sdf-hero-split for the headline + CTA.
3. Proof — sdf-logos, then sdf-metrics.
4. Features — sdf-feature-split or sdf-bento.
5. Pricing — sdf-tiers, then an sdf-faq.
6. Close — sdf-cta-banner and sdf-footer.

Each section is independent and self-spacing, so order them however you like. Set your tokens once on :root and the whole page is cohesive. Browse the component library to see every block, or the collections (Northwind, Bricklumen, Foliotype) for full worked examples.

Tutorial: copy from the app

On any component's detail page, the live preview is free to explore. To view and copy the source:

1. Sign in and choose a plan — source and copying are for members.
2. Open a component and hit Copy; the full file is on your clipboard.
3. Paste into your project. Starter includes 50 copies per month; Premium is unlimited.

Accessibility

WCAG AA is the floor on every component:

• Visible focus states and full keyboard support.
• Correct ARIA on accordions, dialogs, and tabs.
• Real contrast ratios, checked before a version number is assigned.
• Reduced-motion fallbacks for every animation.

Versioning

Components carry version numbers, changelogs, and migration notes. If a class name changes, you'll see it in the changelog with exactly how to update. Nothing breaks silently.