Universal Genius UI/UX Framework

A master design rulebook for creating premium, highly usable digital experiences across any platform (iOS, Android, Web, Desktop) and any industry. Built on the universal psychological principles of design to eradicate "boring" UI through strategic architecture, precise color theory, and physics-based interactions.

When to Apply

Reference these guidelines when:

• Designing screens for any platform (mobile apps, web dashboards, e-commerce sites).
• Establishing a brand new, cross-platform design system or visual language.
• Structuring complex data or user flows, regardless of the industry.
• Adapting layouts between large desktop displays and compact mobile viewports.

Rule Categories by Priority

Priority	Category	Core Principle
1	Universal Usability	Ergonomics (touch/click) and accessibility dictate all base decisions.
2	Structural Architecture	Scannability and spatial grouping guide the user's focus seamlessly.
3	UX Psychology	Structure in grayscale first; prioritize logic before aesthetics.
4	Visual Depth & Texture	Eradicate flatness with subtle overlays, shadows, and overlaps.
5	Color Mastery	Contrast, legibility, and proportional usage over raw vibrance.
6	Fluid Interactions	Animations must mimic real-world physics and reward interactions.

Quick Reference & Directives

• responsive-architecture - Use Bento box grids for large screens; adapt to stacked, swipeable cards for mobile viewports.
• thumb-zone-ergonomics - Place primary CTAs and critical navigation within the bottom 30% of mobile screens.
• law-of-proximity - Group related elements tightly; use whitespace (not just lines) to separate unrelated sections.
• grayscale-first - Build all wireframes in gray to lock visual hierarchy before introducing brand colors.
• z-and-f-patterns - Align web elements for Z-pattern scanning (Hero sections) or F-pattern (data-heavy feeds).
• 60-30-10-rule - 60% neutral background, 30% secondary interface (cards/nav), 10% primary accent color (strictly CTAs).
• tinted-darks - Never use pure #000000 or #FFFFFF. Use tinted neutrals (slate, zinc, off-white) to reduce eye strain.
• overlapping-elements - Allow secondary elements (badges, floating FABs, tooltips) to physically overlap boundaries to create depth.
• physics-based-motion - Gestures (swipe, drag, pull-to-refresh) must scale down slightly and utilize spring physics on release.

How to Use This Skill

When processing UI/UX requests across any platform, follow this exact workflow:

1. Context & Ergonomics: Determine the primary platform (Mobile Touch vs. Desktop Mouse). Ensure minimum 44x44px touch targets for mobile.
2. Grayscale Wireframing (UX First): Output structural code using neutral placeholders. Apply the Law of Proximity and layout systems without color.
3. Color & Contrast Injection: Replace grayscale placeholders adhering to the 60-30-10 rule. Verify a minimum 4.5:1 text contrast ratio.
4. Texture & Depth: Elevate the UI by adding overlapping elements, subtle mesh gradients, or 1% noise overlays to prevent "flat" designs.
5. Fluid Interactions: Add platform-appropriate motion (e.g., hover states for web, tap-highlights and swipe reveals for mobile).

Cross-Platform Implementation Guidelines

• Web (React/Next.js/Tailwind): - Layouts: Use grid and flex utilities.
  • Interactions: Apply transition-all duration-300 ease-in-out and hover:-translate-y-1.
  • Backgrounds: Use bg-primary/20 blur-[100px] for mesh glows.
• Mobile (React Native/Flutter/SwiftUI):
  • Layouts: Utilize safe area insets and scroll views.
  • Interactions: Use native gesture handlers. Implement spring physics for modals and bottom sheets.
  • Sizing: Hardcode minimum touch targets (min-h-[44px] min-w-[44px]).

Actionable Execution: Do's and Don'ts

Rule	Do	Don't
Color Base	Use tinted darks/lights (e.g., slate-900 or gray-50)	Use harsh #000000 or #FFFFFF
Mobile UX	Place primary actions in the bottom "thumb zone"	Hide critical CTAs at the top-left of mobile screens
Element Spacing	Use strict spacing multiples (e.g., 4pt/8pt grid)	Use arbitrary or inconsistent padding
Backgrounds	Layer a subtle noise texture or blurred mesh glow	Leave vast amounts of empty, flat hex color
Gestures	Provide instant visual feedback (scale/opacity) on touch	Have static elements that don't react to user input

Pre-Delivery Checklist

• Wireframe passes the grayscale test (hierarchy and flow are clear without color).
• Pure black (#000000) and pure white (#FFFFFF) are replaced with tinted alternatives.
• The 60-30-10 color proportion rule is strictly maintained.
• Interface is ergonomically sound for the target platform (proper touch targets for mobile, hover states for web).
• A subtle mesh gradient, shadow depth, or noise texture is present to eliminate flatness.
• Draggable/swipeable/clickable elements utilize physics-based scaling and visual feedback.
• Accessibility standards are met (4.5:1 contrast, logical tab/focus order).