One prop. Three states.
onClickAsync runs loading → success → reset. Click it.
From DevalokYour brand. Every component.
Your brand. Every component.
Out of the box.
Pick one colour. Watch every button, badge, card, and form match instantly. Light mode, dark mode, every screen. No spreadsheet of hex codes. No config files. Just your brand, everywhere.
- Powers Karm, Hiring + studio tools
- WCAG-AA · forced-colors verified
- 119 components · 1,750+ tests
One library. Many worlds.
Each tab below opens a different product surface. Built from the same components, painted by a different brand.
Atlas
1 / 6
Friday, May 24
Welcome back, Mudit.
Four projects active, 88 tasks moving. The team is mostly heads-down today.
Active projects51 shipped this quarter
Tasks shipped312
On-time delivery94%rolling 30 days
Capacity used72%
| Project | Status | Progress | Due | Team |
|---|---|---|---|---|
Q3 launch plan launch | On track | Jun 14 | ML GP YS +1 | |
Brand refresh brand-2026 | On track | Jun 02 | ML AK RM | |
Customer pipeline sales | At risk | May 28 | GP AK | |
Onboarding flows design | On track | Jun 07 | ML AK YS | |
Pricing experiment pricing | Planning | Jul 01 | ML GP | |
Mobile shell rebuild eng | Shipped | Apr 30 | YS RM |
We sweat the small stuff.
A button is just a button. Until you click one and something feels wrong. The spinner shifts the text. The check never comes. The loading bar lies. Ours don't do that. Click through.
Patience, animated.
Long jobs need a different feel from short ones. Watch the marching border change pace.
Working · 2s loop
The text stays still.
Spinners that replace the label feel broken. Pick a side; the label sticks.
The same Button, across ten products.
Email, music, banking, social, code, calendar, deploys. Each card lifts a real interaction shape. The variant, colour, size, and compound shape pick themselves from what the user is being asked to do.
Primary action with an attached alternative. SplitButton fuses the two visually so the user reads it as one decision.
One Button row driving real audio. Play toggles playback, the progress strip tracks position, scrubbing seeks. No native browser chrome.
High-emotion conversion. Pill shape + warning hue catches the eye without screaming red.
ButtonGroup attached. Same context, three sibling actions, shared border radius. Reads as one toolbar.
Ghost variant + icon + counter. Three sibling actions stay quiet until tapped. Content does the work.
Top-level create with three flavours. SplitButton reveals the alternatives without cluttering the toolbar.
Irreversible + sensitive. Solid + lg + onClickAsync. The user sees the confirm cycle, then it rests.
Long-running with high stakes. Processing='urgent' keeps the dotted border alive; processingDisabled=false lets the user roll back.
One primary, many cousins. SplitButton again. This time the dropdown is content variety, not delivery options.
Two-emphasis row. Soft + outline pair: equal weight, different priority signalled by tone alone.
Shipped on shilp-sutra
Devalok ships its own tools on it.
Four products, four brands, one library. The brand swap that powers this site powers every product below. Each card is tinted with its own product's accent ramp, generated by the same OKLCH algorithm shilp-sutra ships.
Flagship · Daily use, 8 hours a day
Karm
The studio runs on Karm. Karm runs on shilp-sutra.
Project workspaces for design and strategy studios. Triage, track, and deliver work to clients with low-friction review and approval.
What it leans on
- Sidebar
- TopBar
- DataTable
- ActivityFeed
- CommandPalette
- Sheet
The brand it wears
hue 360chroma 0.19
Internal
Devalok Hiring
Internal review tool
Design hiring review. Triage, track, and manage applicants end-to-end with brief-keyed scorecards.
- Form
- Combobox
- DataTable
Public beta
BharatTools
Public product
Browser-only utilities for Indian government forms. Photo to spec, signature merge, KB compression. Files never leave your device.
- FileUpload
- Progress
- Alert
Open · MIT
Gurukul
Open knowledge hub
Devalok's practical guides for founders, designers, and builders. Open, MIT, edits welcome.
- Text
- Card
- Breadcrumb
Same care, every component.
Five favourites from the 118 others. Each one picked because it changes the shape of what a real product can do, not because it ticks a box.
Press ⌘K from anywhere.
Power-user shortcut your team will type into muscle memory. Keyboard-first, search-driven, focus-trapped.
Try the shortcut. Works from anywhere on this page.
The system answers back.
Success. Warning. Error. They stack, they breathe, they dismiss when you're done. Fire a few. Watch them queue.
Built on sonner. role="alert" for assertive errors, role="status" for the rest.
Search becomes the interface.
Filter as you type. Keyboard-navigable. Built on Radix Popover + a focus-trapped command list. Plays well with virtualization for big lists.
Try typing "ko" or "bes". Results filter live.
Numbers that move.
Built on d3-scale + framer-motion. Animate-in on mount, hover for tooltip, keyboard-accessible focus rings on data points.
Active users · last 7 days6,740
+18% w/wWhat's inside
Three pillars. One promise.
Your brand. Live.
Pick one colour. Every button, badge, alert, and form across the entire library recolours. Light mode, dark mode, hover, pressed, focus, every state. No theme provider. No re-render. CSS-vars do the work.
The boring work, done.
Keyboard navigation, screen-reader labels, visible focus rings, forced-colors mode, touch targets sized for real fingers. Surface-layer hygiene runs in CI on every PR. The work that usually slips is the work that ships.
Real pages, not toys.
Dashboards. Settings. Pricing. Sign-up. Data tables. Five full blocks ship today, more this beta. Real spacing, real copy, real states. The stuff your users actually use.
For builders, by builders.
Indie devs, studio teams, designers reaching for code, coding agents. One library, one install. Devalok ships on it; so do Karm, Devalok Hiring, BharatTools, and Gurukul.
Built for AI editors
Your editor already knows the library.
Install the Agent Skill once. Cursor, Claude Code, Codex, Aider then write code that compiles the first time. Every component, every prop, every gotcha.
Who's behind this
A studio that ships its own tools.
Devalok is a design and strategy studio based in Bharat. A brand-craft house that makes manifestos, identity systems, packaging, and publications. We build Karm, Devalok Hiring, BharatTools, and Gurukul. Shilp Sutra is studio infrastructure made public.
We needed a way to brand the products we were shipping with AI help without each one looking like every other AI-built SaaS. Shilp Sutra fell out of that need. It is open because keeping it private gives us no edge. The edge is the studio that wields it.
A note to designers
Designers are builders too. Shilp Sutra hands you the base layer. You spend time on the parts that carry the brand. Motion, illustration, voice. Not on rebuilding the fifth Button this year.