Design system | Component library

Drift UI

Drift UI

Drift UI

A dark, blue-glass component library designed and art-directed end to end: 95 UI components, 43 loaders, 38 interaction demos, a live playground and over 5,000 icons, with every hard-won design correction locked into the system as a rule instead of a one-off fix.

A dark, blue-glass component library designed and art-directed end to end: 95 UI components, 43 loaders, 38 interaction demos, a live playground and over 5,000 icons, with every hard-won design correction locked into the system as a rule instead of a one-off fix.

A dark, blue-glass component library designed and art-directed end to end: 95 UI components, 43 loaders, 38 interaction demos, a live playground and over 5,000 icons, with every hard-won design correction locked into the system as a rule instead of a one-off fix.

Role

Design direction | Frontend build

Timeline

Self-directed build, no deadline

Stack

Static HTML | CSS | ES5 | Motion v12

Platform

Web

Context

Personal project: a reference-grade component and interaction-design library site, built to show range across motion, glass surfaces, and systemized UI at scale. It started as a rebuild of an existing free component library (craftui.space) and was pushed far past that starting point, rebranded mid-build from CraftUI to Drift UI. No client, no team, no deadline other than a self-imposed one.

Problem

Left unchecked, the build kept drifting toward generic defaults: colored edge-stroke highlights on glass cards, off-palette greens, a nav menu icon that changed per page and stopped reading as a menu at all. At 95+ exactingly specified components, one-off fixes wouldn’t scale and the same visual mistakes kept recurring across pages.

Approach

Yash designed and art-directed every component and wrote exacting specs for behavior, spacing, color and motion; implementation was executed with an AI pair-build process under his direction and review. Built as plain static HTML/CSS/ES5 with Motion v12 for animation, no framework, no build step, so every page is inspectable and portable. Design corrections were written down as hard, durable rules the moment they were caught, not just patched in place: colored edge-stroke highlights were banned everywhere and replaced with a single one-sided animated gradient glow; a nav-menu bug where the trigger’s icon mutated to match the current page (and stopped reading as a menu) was fixed by locking the trigger to one constant glyph and moving location info inside the opened menu. A large component surface (95 UI components) was audited read-only first to map every defect before a single fix pass touched anything, rather than fixing ad hoc. A full second pass added a real light theme to all eight pages rather than a quick recolor.

Outcome

Live at craftui-rebuild.netlify.app with 95 UI components, 43 loaders, 38 interaction-design demos, a 40-component live playground, and 5,123 icons, confirmed directly against the deployed site. Our pre-deploy audit surfaced 72 defects across the 95 components (7 high / 20 medium / 45 low) that were resolved in one pass, and an 8-agent cross-page check we ran on both light and dark themes came back 7 pass / 1 warning (fixed) / 0 fail before promotion to production. Open items remain: the social links in the footer are still placeholder URLs, and the Netlify project itself is still named after the old CraftUI branding.

Decisions | Reasoning

Split the accent color into two tokens: a saturated fill blue (#0000D7) for filled surfaces with white content, and a lighter soft blue (#4B4BFF) for text, hairlines and dots on black.

Split the accent color into two tokens: a saturated fill blue (#0000D7) for filled surfaces with white content, and a lighter soft blue (#4B4BFF) for text, hairlines and dots on black.

The saturated blue was picked as the brand accent, but it was nearly illegible as thin text or hairlines directly on black. Rather than compromise the brand color, the system got a second token so legibility and brand consistency didn't have to trade off against each other.

The saturated blue was picked as the brand accent, but it was nearly illegible as thin text or hairlines directly on black. Rather than compromise the brand color, the system got a second token so legibility and brand consistency didn't have to trade off against each other.

Banned colored edge-stroke highlights everywhere and replaced the emphasis language for glass surfaces with a single one-sided animated gradient glow (blurred radial pseudo-element, ~28px blur, ~.45 opacity, drifting via transform/opacity only, never animating blur).

Banned colored edge-stroke highlights everywhere and replaced the emphasis language for glass surfaces with a single one-sided animated gradient glow (blurred radial pseudo-element, ~28px blur, ~.45 opacity, drifting via transform/opacity only, never animating blur).

Direct correction after live review: colored border highlights read as a generic default, not as premium glass. The fix was locked as a durable rule, not a one-time patch, so it would hold across every future component and page rather than resurfacing.

Direct correction after live review: colored border highlights read as a generic default, not as premium glass. The fix was locked as a durable rule, not a one-time patch, so it would hold across every future component and page rather than resurfacing.

Locked the nav menu trigger to one constant glyph (a 2x2 grid icon) instead of showing the current page's icon, and moved 'you are here' feedback to the active item inside the opened menu.

Locked the nav menu trigger to one constant glyph (a 2x2 grid icon) instead of showing the current page's icon, and moved 'you are here' feedback to the active item inside the opened menu.

A glyph that changes per page stopped functioning as a menu affordance at all, since users couldn't tell what the control was for. Keeping the trigger's animation, color and glass style but making its identity constant restored the basic promise of a menu icon: it always means 'menu.'

A glyph that changes per page stopped functioning as a menu affordance at all, since users couldn't tell what the control was for. Keeping the trigger's animation, color and glass style but making its identity constant restored the basic promise of a menu icon: it always means 'menu.'

Ran a read-only multi-agent audit across all 95 UI components to map every defect before starting any fixes, then resolved everything in one serialized pass.

Ran a read-only multi-agent audit across all 95 UI components to map every defect before starting any fixes, then resolved everything in one serialized pass.

At that scale, finding and fixing issues ad hoc risked the same defect pattern (like the edge-stroke or off-palette-green issues) recurring silently across components. Mapping the full defect set first, then fixing once, meant every instance of a given mistake got caught in the same pass instead of being whack-a-mole'd one component at a time.

At that scale, finding and fixing issues ad hoc risked the same defect pattern (like the edge-stroke or off-palette-green issues) recurring silently across components. Mapping the full defect set first, then fixing once, meant every instance of a given mistake got caught in the same pass instead of being whack-a-mole'd one component at a time.

Batched all build, audit, and fix work locally and pushed exactly one consolidated production deploy at the end instead of deploying incrementally.

Batched all build, audit, and fix work locally and pushed exactly one consolidated production deploy at the end instead of deploying incrementally.

The hosting plan's deploy credits were limited and each deploy spent one. Working entirely locally with rigorous headless verification meant the single deploy that mattered could be trusted without needing a safety net of smaller pushes.

The hosting plan's deploy credits were limited and each deploy spent one. Working entirely locally with rigorous headless verification meant the single deploy that mattered could be trusted without needing a safety net of smaller pushes.

Treated the light theme as a full second design pass across all eight pages rather than an automatic color inversion.

Treated the light theme as a full second design pass across all eight pages rather than an automatic color inversion.

A straight recolor would have left contrast problems (one nav state was measured at roughly 1:1 contrast, effectively invisible). Each surface, including canvases and glass recipes that were hardcoded dark, got a deliberately designed light variant so the theme switch held up to real accessibility scrutiny, not just visual parity.

A straight recolor would have left contrast problems (one nav state was measured at roughly 1:1 contrast, effectively invisible). Each surface, including canvases and glass recipes that were hardcoded dark, got a deliberately designed light variant so the theme switch held up to real accessibility scrutiny, not just visual parity.

Results

Live at craftui-rebuild.netlify.app with 95 UI components, 43 loaders, 38 interaction-design demos, a 40-component live playground, and 5,123 icons, confirmed directly against the deployed site.

95

95

UI components

43

43

Loaders

5,123

5,123

Icons

Next project

Understudy

Understudy