Skip to main content

UI Design System, Styling & UX

I believe that even utility platforms deserve a polished, modern, and delightful visual design. I created a custom, lightweight design system for Borrowd focusing on speed, accessibility, and subtle micro-animations.

Design Principles​

  • Vanilla CSS Tokens over Utility Bloat: I use clean Vanilla CSS design tokens (var(--color-primary), var(--radius-lg)). This gives me maximum flexibility and zero CSS bundle bloat.
  • Micro-Animations & Micro-Interactions: Hover transitions, skeleton loading states, and smooth card lifts make the UI feel alive and responsive.
  • Contextual Visual Hierarchy: Important actions (like "Confirm Borrow" or "Accept Request") use soft primary fills, while destructive actions (like "Reject Request") use clear, distinct warning states.
Aggressive CSS Cleanup

By migrating away from utility-class heavy frameworks and standardizing on the new Vanilla CSS tokens in AppTheme.kt, I was able to drastically reduce CSS duplication. For instance, across the ItemCard and ProfileSettings components, I reduced 181 unique inline styles down to just 22 shared CSS variables!