Lab
AI tools, creative workflows, developer deep-dives, and behind-the-scenes from RAXXO Studios.
45 articles
The Micro-Interactions I Add Last That Make a UI Feel Fast
Optimistic UI updates before the server confirms feel instant to users 150ms is my default transition duration for hover and press states Skeleton screens beat spinners because they show layout, not just waiting Focus rings and press feedback make an...
Read articleAccessible Color Contrast Without Killing the Brand
I keep a dark UI with a bright accent WCAG-AA readable at 4.5:1 Shift lightness not hue to fix failing text Two documented exceptions: decorative...
The CSS color-mix Patterns I Use Across Every RAXXO Theme
One brand variable feeds hover, disabled, surface, and text colors 5 color-mix patterns replaced a 40-line hand-curated palette Accessible text picks itself from the background...
Managing Design Tokens Across 14 Projects Without a Tool
One tokens.json source feeds 14 projects with zero infrastructure A 30-line Node script outputs CSS, JS, and JSON Style Dictionary adds config overhead a solo...
The Anatomy of a Good Empty State: 6 Patterns That Guide the Next Action
Three empty state types: first-run, cleared, error-empty, each needs different copy One primary action rule: never give an empty screen two equal buttons Copy teaches,...
The Native HTML Dialog Element: 6 Modal Patterns I Ship Without a Library
Native dialog removed a 14KB modal library from 9 sites method=dialog forms close and return values with zero JS @starting-style plus closedby="any" handle exit animation...
5 CSS Animations That Needed JavaScript Until 2026
interpolate-size and calc-size finally let a panel transition to height auto with no measuring script. transition-behavior allow-discrete plus @starting-style animates elements both into and out...
CSS Carousels With Zero JavaScript: 5 Patterns
A scroll-snap track plus the new pseudo-elements replaced a 14KB carousel dependency in my UI. scroll-marker-group and ::scroll-marker render the dot navigation with no script...
Viral AI Photo Trends of 2026 (With the Exact Prompts)
The toy-figure, Chibi, film-look, Y2K and scrapbook AI photo trends of 2026, with the exact prompt templates I reuse before posting.
CSS Scroll-Driven Animations: 6 Patterns I Ship in 2026
CSS scroll-driven animations in 2026: 6 copy-paste patterns using animation-timeline scroll() and view(), zero JavaScript.
CSS :has() in Production: 6 Selectors That Replaced JavaScript Across My Sites
Six :has() selectors deleted roughly 240 lines of JS across my sites Form validation styling now uses form:has(:user-invalid), zero input listeners nav:has(a[aria-current]) styles parent menus...
Why I Standardized on Phosphor Icons Across 15 Repos (And Cut 60% of Icon Bundle Size)
Five icon systems across 15 repos created visual drift and 84KB bundles in the worst Next.js app. Phosphor ships six weights from one designer, so...