bg-szy Design Taste Frontend — High-Agency UI/UX Engineering System
A comprehensive frontend architecture guide establishing baseline configurations and engineering directives for premium interface design.
Core Configuration Dials
Three primary dials (adjustable per request):
| Dial | Default | Range | Effect |
|---|---|---|---|
| Design Variance | 8 | 1–10 | How distinctive vs. conventional the design is |
| Motion Intensity | 6 | 1–10 | Amount and complexity of animations |
| Visual Density | 4 | 1–10 | Information density (4 = comfortable) |
Users can override via explicit requests ("make it more minimal", "less animation").
Architectural Requirements
- Framework: React/Next.js with Server Components as default
- Styling: Tailwind CSS for 90% of styling coverage
- Viewport:
min-h-[100dvh]noth-screen(prevents iOS Safari layout issues) - Dependencies: Always verify in
package.jsonbefore importing
Design Engineering Directives
Typography
- Avoid Inter for premium contexts — choose distinctive alternatives
- Never generic system font stacks for display text
- Establish typographic hierarchy before layout
Color
- Maximum one accent color below 80% saturation
- No pure black (
#000000) — use off-black (#0a0a0a,#111111) - No purple/blue AI aesthetic gradients (most identifiable AI design fingerprint)
Layout
- Reject centered Hero sections when Design Variance > 4
- Use asymmetric grids, not three equal columns for feature rows
- Bento grid layouts for dashboard-style content
Motion
- Spring physics:
stiffness: 100, damping: 20(Framer Motion) - Staggered animations with
staggerChildren - Perpetual micro-interactions on dashboard cards (not on every click)
Bias Correction — Anti-AI-Default Patterns
Combat common AI design defaults:
- Liquid Glass refraction effects for depth
- Magnetic micro-physics for interactive elements
- Motion that responds to cursor proximity without React state
Performance Standards
- Animate exclusively via
transformandopacity(GPU-accelerated) - Grain/noise filters only on fixed, non-interactive
::before/::afterpseudo-elements - Z-index strictly constrained (document z-index layers at component level)
Strictly Forbidden
- Emojis anywhere in code, markup, or text content (replace with icon library)
- Pure neon glows or oversaturated accent colors
- Text-fill gradients
- Inter font for premium/display contexts
- Three-column equal card layouts as feature rows
- Generic placeholder names ("John Doe", "Acme Corp")
- AI startup terminology ("Nexus", "Streamline", "Elevate")
- Broken Unsplash image links
The Bento 2.0 Dashboard Paradigm
Modern SaaS dashboards use five card archetypes:
- Intelligent Lists — sortable, filterable, with status indicators
- Command Inputs — search/filter bars with keyboard shortcuts
- Live Status — real-time indicators with subtle pulse animations
- Wide Data Streams — sparklines, mini-charts, trend indicators
- Contextual UI Focus — detail panels that expand in-place
Each card type has perpetual micro-interactions using spring physics. Cards breathe — they're never static.
Pre-Flight Checklist
Before delivering any UI:
- No pure black colors used
- No Inter font in display/hero contexts
- Animations use only transform/opacity
- Design Variance setting respected
- No emojis present
- No three-column equal-width feature grid
- Viewport uses dvh not vh
- Dependencies verified in package.json