Consistency by design
Controls share heights, radii, and spacing, so a button, a search field, a dropdown, and a toggle line up without anyone checking.
- Daily
- Weekly
- Monthly
Beautiful interfaces
Thoughtfully built
Wispkit is a modern UI component library that brings design and development together through reusable components, expressive motion, and a consistent design system.
42 foundations, components, and form elements that share one design language, in light and dark.
Spring release
In progress
Design system update, ships May 28
MA
JK
SO
RP
Release progress On track
60%3 of 5 tasks done
Components shipped per week
Up next
Notify the team
- Maya finished “Finalize color tokens”
- Jun shipped the new Tooltip
- Sam wrote the Accordion docs
- Release planned for May 28
A design system, ready to build with.
Wispkit is a library of foundations and the components built on top of them. Tokens decide how things look, components put those decisions to work, and a shared vocabulary keeps designers and developers talking about the same thing.
-
Design foundations
Colors, typography, spacing, layout utilities, and the visual rules that hold them together. Change a token once and everything that uses it follows.
-
Reusable components
Ready-to-use elements for navigation, data display, actions, feedback, and forms, all built from the same foundations.
-
A shared design language
The same names in the design file and in the code, so “medium radius” or “warning badge” means one thing to the whole team, with less duplicated work.
Tokens
Component
--surface
--r-lg: 18px
--shadow-2
--s-5: 24px
Weekly digest
A summary of component changes, every Monday morning.
--accent
--fs-label: 14px
Select a token to see where this card uses it.
Less time rebuilding. More time creating.
Solve a pattern once, then spend your time on the parts of the product that are actually new.
Reusable by nature
Build a pattern once and reuse it across screens and projects. Here, one Avatar Text component, three times.
- MAMaya AlvarezDesign leadOnline
- JKJun KimuraFrontend engineerAway
- SOSam OkaforContent designerOffline
Designed for customization
Adapt colors, radii, and themes to match your brand. Pick an accent and a corner style to re-theme this preview.
New
Developer-friendly
Predictable patterns and clear documentation: every component is a base class, a few modifiers, and native attributes for state.
<button class="wk-btn wk-btn--primary">
Save changes
</button>
<button class="wk-btn wk-btn--secondary">
Cancel
</button>
<button class="wk-btn" disabled>
Archived
</button>Motion that feels natural.
Every transition should have a purpose. From subtle hover feedback to smooth state changes, motion helps interfaces feel responsive, intuitive, and alive.
Quick 120 ms
Base 200 ms
Gentle 320 ms
Ease out cubic-bezier(.2, .8, .2, 1)
Long enough to follow, short enough to never wait for. Most transitions here finish in 200 to 320 ms.
This page follows your system setting and replaces movement with instant changes.
Copy link
Bookmark
Share
2 reviews due today.
5 reviews due this week.
Nothing scheduled yet.
A palette with purpose.
Both brand colors come straight from the Wispkit logo: Wisp gold for actions, focus, and selection, and Dusk indigo for text and depth. Neutral surfaces carry everything else, so the accent always means something.
Select a color to copy its value. Semantic colors copy the value for the theme you're viewing.
In components
Accent
Success
Warning
Error
Info
Changes savedYour tokens are live in both themes.
Low contrastThis text sits below 4.5:1 on its background.
Couldn't publishCheck your connection and try again.
The same component in both themes
Light
Release alerts
2 updatesTooltip and Modal changed.
New
Dark
Release alerts
2 updatesTooltip and Modal changed.
New
Every detail has a voice.
One family carries the interface, from 82-pixel headlines down to 13-pixel captions. Figtree stays open and friendly at small sizes and keeps its shape when set large. Instrument Serif joins for editorial moments, and JetBrains Mono for code.
Ideas in sync
Component library
Design foundations
Components read the same tokens, so a change in one place shows up everywhere it should.
Shown under headings and inside cards to add context.
Notification frequency
Updated 2 minutes ago
Theming in three steps
Override a handful of tokens and every component follows, in both themes.
4 minute read
Read the guide
Shown on comments and reviews.
Not just components. Building blocks that respond.
Everything here works. Press, open, type, toggle, and rate, then copy the markup that drives each example.
Buttons
Press Publish to see the loading state.
Button group
Showing this week
Tooltip
Copy link
Bookmark
Invite people
Accordion
Nine foundations and utilities, twenty-two components, and eleven form elements. The full list is in the library below.
Yes. Colors, radii, spacing, and type are tokens, so changing a few values re-themes every component.
Every token has a light and a dark value. Try the theme button in the header.
Tabs
A live, interactive example.
Variants, sizes, and states.
Keyboard support and focus order.
Modal
A focused task with a clear way out. Press Escape or Cancel to close it.
Alerts
A new version is readyReview what changed before you update.
Theme publishedEveryone on the team sees the new colors.
2 components use old tokensUpdate them to keep both themes in sync.
Upload failedThe file is larger than 10 MB. Choose a smaller file.
Progress bar
40% migrated
Rating
4 of 5
Badges and tags
New
Live
Beta
Failed
Design
Frontend
Docs
Loader
Dropdown
Notification frequency- Immediately
- Hourly digest
- Daily digest
- Weekly digest
- Never
Use the arrow keys, Enter, and Escape.
Toggle
Email updates
Desktop alerts
Beta channel
Checkbox and radio
Textarea
Card with actions
Accordion Group
Keeps one or several sections open. Used on 14 screens.
Avatars
MAMaya AlvarezDesign lead
JKSORP+3
6 reviewers
Table
| Screen | Owner | Status |
|---|---|---|
| Onboarding | Maya | Done |
| Billing | Jun | Review |
| Settings | Sam | Planned |
Timeline
- Tokens finalized
- Components reviewed
- Release
Illustrative markup that mirrors these examples. It isn't the published package API.
Everything you need to build with intention.
Every foundation, component, and form element in Wispkit. Search by name, filter by category, and open any item in the documentation preview.
Design foundations and utilities
9 itemsBorder widths, radii, and colors that outline surfaces the same way everywhere.
Brand, surface, text, and status colors as tokens for both themes.
Utilities for block, inline, flex, grid, and hidden elements.
Direction, alignment, wrapping, and gap utilities for one-dimensional layouts.
Column and row utilities for two-dimensional layouts and responsive tracks.
Relative, absolute, fixed, and sticky placement with consistent offsets.
Width, height, and min/max size steps that follow the spacing scale.
A single scale for margins, padding, and gaps.
Type families, sizes, weights, and line heights in a fluid scale.
Components
22 itemsA set of accordions that can keep one or several sections open.
A heading that expands to reveal related content.
Inline messages for information, success, warnings, and errors.
Overlapping avatars that summarize a group of people.
An avatar paired with a name and supporting detail.
A person or team shown as an image or initials.
Compact labels for status, counts, and categories.
Related actions or a segmented choice in one connected control.
A card with a clear primary action and an optional secondary one.
A surface that groups related content.
Slides that people move through one at a time.
Monoline icons drawn on a shared grid and stroke.
Spinners and skeletons that show work in progress.
A focused dialog that sits above the page until it's dismissed.
A bar that shows how far a task has come.
Stars that capture or display a score.
Vertical navigation for app sections.
Tabs that switch between views of the same context.
Rows and columns for structured data.
Removable keywords and filters.
Events in the order they happened.
A short hint that appears on hover or focus.
Forms
11 itemsA month view for picking a single date.
A selectable card for choosing one or more options.
A box for turning an option on or off within a list.
Start and end dates chosen together.
A button that opens a list of options to choose from.
A single-line text field with a label, hint, and validation.
A selectable card for choosing exactly one option.
A set of options where only one can be selected.
A multi-line text field that can show a character count.
Hours, minutes, and period chosen in one control.
A switch that turns a setting on or off immediately.
Nothing matches “”. Try a shorter word, or look in another category.
One language. Two perspectives. Better products.
Developers and designers look at the same component from different sides. Wispkit gives both sides the same names, so a decision made in one place shows up in the other. Pick a shared token to see it in both.
For developers
- Reusable components with consistent class names, modifiers, and states.
- Predictable styling through CSS custom properties instead of one-off overrides.
- A maintainable structure: tokens first, then components, then your layouts.
.wk-btn {
height: 40px;
padding: 0 var(--s-4);
border-radius: var(--r-md);
font-size: var(--fs-label);
box-shadow: var(--shadow-1);
}
.wk-btn--primary {
background: var(--accent);
}Shared tokens
For designers
- Color and type foundations that match what actually ships.
- Reusable patterns instead of one-off screens, aligned with the design system.
- Specs that use token names, so handoff needs fewer notes and fewer meetings.
40px
--s-4
--r-md
--fs-label
--shadow-1
Your next interface starts here.
Explore the building blocks, shape the experience, and bring your ideas to life with Wispkit.
Everything you need to get started.
A preview of the documentation experience: browse by category, try a live example, copy the markup, and scan the options. Open any item from the library to see it here.
Good design should feel effortless.
Effortless isn't the same as easy. It takes many small, deliberate decisions to make an interface feel like it was never in the way. These are the ones Wispkit makes with you.
Consistency over unnecessary complexity
A few well-chosen tokens beat a hundred special cases. When everything follows the same rules, a new screen feels familiar on its first day.
Reusability without sacrificing flexibility
Components cover the common case out of the box, then open up through tokens and modifiers when your product needs something specific.
Motion with purpose
Things move to show what changed, where it went, or that the interface heard you. Everything else stays still, and reduced-motion settings are respected.
Accessible, usable interactions
Visible focus, real buttons, keyboard support, and readable contrast are where every component starts, not features added at the end.
Design decisions that translate clearly into code
A radius in a design file and a radius in a stylesheet should share a name and a value. Fewer translations mean fewer surprises.
Simplicity that supports long-term maintainability
Small, readable building blocks outlast clever ones. The goal is a system you can still understand a year from now.
Built to bring ideas together.
Wispkit gets better when the people using it help shape it. Explore what's here, learn how it fits together, and tell us what you need next.
- Explore the libraryBrowse all 42 foundations, components, and form elements.
- Read the documentationStart with the quick start, then open any component.
- View the source repositoryThe public repository will be linked here once it's available.Link coming soon
- Report an issue or share feedbackAn issue tracker and feedback channel will be linked here.Link coming soon
- Join the communityA place to ask questions and share what you've built.Link coming soon