Tokens & attributes, at a glance.
A searchable reference for every --sdf-* design token, BEM class convention, and data-* hook the library actually uses — the global palette, per-component tokens, and the theming scope. Override any of them to reskin. Click any row to copy.
Color & surface
The neutral palette every component reads from — override once to reskin all.
--sdf-bg — Global #fff Base page / component background.
--sdf-bg-alt — Global #fafafa Secondary background for insets and alternating bands.
--sdf-surface — Global #fbfbfd Raised surface — cards, panels, wells.
--sdf-text — Global #0a0a0a Primary text color.
--sdf-text-2 — Global #52525b Secondary / supporting text.
--sdf-text-3 — Global #8a8a8a Muted text — captions, meta, placeholders.
--sdf-border — Global #ededf0 Hairline border / divider color.
Brand accent
The single accent color and its foreground. Used sparingly for emphasis.
--sdf-accent — Brand #005fff The single brand accent — links, primary CTAs, live dots. Use sparingly.
--sdf-accent-fg — Brand #fff Foreground color on top of the accent.
Shape, type & motion
Radius, the Inter-only type stack, and the shared easing curve.
--sdf-radius — Shape 8px Base corner radius; component radii derive from it.
--sdf-font — Type 'Inter', Helvetica, Arial Body font stack. Inter / Helvetica / Arial only.
--sdf-font-display — Type 'Inter', Helvetica, Arial Display / heading font stack.
--sdf-ease — Motion cubic-bezier(.4,0,.2,1) Shared easing curve for transitions.
Component tokens
Scoped custom properties for tuning a single component in isolation.
--sdf-banner-max — Scoped length Maximum content width for the banner component.
--sdf-bento-gap — Scoped length Grid / flex gap for the bento component.
--sdf-bento-max — Scoped length Maximum content width for the bento component.
--sdf-cases-max — Scoped length Maximum content width for the cases component.
--sdf-contact-modal-width — Scoped length Width for the contact modal component.
--sdf-cta-banner-max — Scoped length Maximum content width for the cta banner component.
--sdf-cta-max — Scoped length Maximum content width for the cta component.
--sdf-faq-max — Scoped length Maximum content width for the faq component.
--sdf-feature-grid-gap — Scoped length Grid / flex gap for the feature grid component.
--sdf-feature-grid-icon — Scoped length Icon size for the feature grid component.
--sdf-feature-grid-max — Scoped length Maximum content width for the feature grid component.
--sdf-feature-grid-pad — Scoped length Internal padding for the feature grid component.
--sdf-feature-split-gap — Scoped length Grid / flex gap for the feature split component.
--sdf-feature-split-max — Scoped length Maximum content width for the feature split component.
--sdf-featured-max — Scoped length Maximum content width for the featured component.
--sdf-featured-radius — Scoped radius Corner radius for the featured component.
--sdf-hero-split-gap — Scoped length Grid / flex gap for the hero split component.
--sdf-hero-split-max — Scoped length Maximum content width for the hero split component.
--sdf-integrations-gap — Scoped length Grid / flex gap for the integrations component.
--sdf-integrations-max — Scoped length Maximum content width for the integrations component.
--sdf-integrations-tile-radius — Scoped radius Corner radius for the integrations tile component.
--sdf-logos-duration — Scoped time Loop / animation duration for the logos component.
--sdf-logos-fade — Scoped length Edge-fade width for the logos component.
--sdf-logos-gap — Scoped length Grid / flex gap for the logos component.
--sdf-logos-logo-height — Scoped length Element height for the logos logo component.
--sdf-logos-max — Scoped length Maximum content width for the logos component.
--sdf-logos-opacity — Scoped 0–1 Resting opacity for the logos component.
--sdf-marquee-duration — Scoped time Loop / animation duration for the marquee component.
--sdf-marquee-fade — Scoped length Edge-fade width for the marquee component.
--sdf-marquee-gap — Scoped length Grid / flex gap for the marquee component.
--sdf-members-gap — Scoped length Grid / flex gap for the members component.
--sdf-members-max — Scoped length Maximum content width for the members component.
--sdf-metrics-max — Scoped length Maximum content width for the metrics component.
--sdf-navbar-pro-max — Scoped length Maximum content width for the navbar pro component.
--sdf-newsletter-max — Scoped length Maximum content width for the newsletter component.
--sdf-pagehero-max — Scoped length Maximum content width for the pagehero component.
--sdf-post-grid-gap — Scoped length Grid / flex gap for the post grid component.
--sdf-post-grid-max — Scoped length Maximum content width for the post grid component.
--sdf-post-grid-radius — Scoped radius Corner radius for the post grid component.
--sdf-section-intro-max — Scoped length Maximum content width for the section intro component.
--sdf-showcase-max — Scoped length Maximum content width for the showcase component.
--sdf-steps-card-radius — Scoped radius Corner radius for the steps card component.
--sdf-steps-gap — Scoped length Grid / flex gap for the steps component.
--sdf-steps-max — Scoped length Maximum content width for the steps component.
--sdf-steps-pad — Scoped length Internal padding for the steps component.
--sdf-support-max — Scoped length Maximum content width for the support component.
--sdf-tabs-max — Scoped length Maximum content width for the tabs component.
--sdf-testimonial-avatar-radius — Scoped radius Corner radius for the testimonial avatar component.
--sdf-testimonial-avatar-size — Scoped length Element size for the testimonial avatar component.
--sdf-testimonial-grid-max — Scoped length Maximum content width for the testimonial grid component.
--sdf-testimonial-max — Scoped length Maximum content width for the testimonial component.
--sdf-timeline-gap — Scoped length Grid / flex gap for the timeline component.
--sdf-timeline-indent — Scoped length Rail indent for the timeline component.
--sdf-timeline-max — Scoped length Maximum content width for the timeline component.
Class conventions
The BEM naming contract and the theming scope every component follows.
.sdf-<block> — BEM block The component root, e.g. .sdf-hero-split.
.sdf-<block>__<element> — BEM element A part of the block, e.g. .sdf-hero-split__title.
.sdf-<block>__<el>--<mod> — BEM modifier A variant of an element, e.g. .sdf-tier__card--featured.
.dark / [data-theme="dark"] — Theme scope Ancestor scope that flips every --sdf-* token to its dark value.
Interaction hooks
The data-* attributes the library’s interactive components listen for.
data-sdf-modal-open — Modal selector | id Marks a trigger that opens the contact modal.
data-sdf-modal-close — Modal — Marks a control that closes the contact modal.
No matching attributes
Try a shorter query or browse the categories above.
Quick reference
Always use the data- prefix
Custom attributes must start with data- to remain valid HTML5. Webflow strips anything else on publish.
Case insensitivity
HTML attribute names are case-insensitive in the spec, but DOM tooling prefers lowercase kebab-case.
Access via dataset
In JavaScript, read attributes off element.dataset. The prefix is dropped, kebab-case becomes camelCase.
Naming convention
Use kebab-case for multi-word attributes (data-wf-cart-type). Avoid spaces, dots, or capitals.
