Core
The foundation: tokens, buttons, fields, toggles, segmented control, cards, feedback basics and the signature hero blob.
Button
.sf-btn with --light, --ghost, --danger, --sm, --lg. Press it: it squashes. Add data-sf-confetti or data-sf-magnet for extras.
Input, textarea, select
.sf-field wraps .sf-label, .sf-input / .sf-textarea / .sf-select and .sf-hint or .sf-error.
Toggle, checkbox, radio
.sf-toggle (role="switch"), .sf-check, .sf-radio inside .sf-option.
Segmented control
.sf-seg, CSS only, 2 to 4 options. Set --sf-n to the option count.
Card, badge, avatar
.sf-card (--hover lifts), .sf-badge (--solid), .sf-avatar.
Cards float just above the page.
Progress and skeleton
.sf-progress (set --sf-value), --busy for indeterminate, .sf-skeleton shimmer.
Tooltip, toast, modal
data-sf-tip, data-sf-toast, data-sf-modal-open with a dialog.sf-modal.
Hero blob
.sf-hero[data-sf-blob] with .sf-blob and .sf-hero__title. Move your cursor: the blob chases it and the title inverts where it passes. Words use .sf-pop and .sf-hop.
Simple things,
done softly.
Body copy with .sf-hero__lede stays readable wherever the blob goes.