Design system enforcement for Scientific Luxury tier UI. Triggers on \"design\", \"UI\", \"component\", \"styling\", \"animation\", or when creating React components. Enforces OLED black backgrounds, spectral colours, single-pixel borders, physics-based animations, and timeline layouts. Configurable design parameters (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) for layout complexity, animation density, and content spacing.
context
fork
Scientific Luxury Design System
Visual DNA for NodeJS-Starter-V1 Framework. Rejects generic SaaS aesthetics in favour of precision meets elegance.
Description
Enforces the Scientific Luxury design tier across all React components and UI work. Mandates OLED black backgrounds, single-pixel borders, spectral colour mapping, physics-based Framer Motion animations, timeline/orbital layouts, and JetBrains Mono typography for data. Rejects Bootstrap card grids, Lucide icons for status, rounded corners, and linear transitions.
When to Apply
Positive Triggers
Creating new React components
Styling UI elements
Implementing animations
Reviewing designs for compliance
User mentions: "design", "UI", "component", "style", "animation"
Negative Triggers
Writing backend-only logic, API routes, or database schemas
Optimising algorithms or data structures (use council-of-logic instead)
Configuring CI/CD, deployment, or infrastructure
Core Principle
If it looks like a Bootstrap template, it's wrong.
Banned Elements
These patterns are explicitly PROHIBITED:
Banned Element
Why
Alternative
Standard Bootstrap/Tailwind cards
Generic, overused
Timeline nodes, data strips
Generic neon borders (border-cyan-500)
Cheap gaming aesthetic
Single pixel borders with opacity
Symmetrical grids (grid-cols-2, grid-cols-4)
"The Bento Trap"
Asymmetrical splits (40/60, 30/70)
Standard rounded corners (rounded-lg, rounded-xl)
Soft, unprofessional
Sharp (rounded-sm) or none
Lucide/FontAwesome icons for status
Visual noise
Breathing orbs, pulse indicators
Linear transitions
Mechanical, lifeless
Physics-based easing curves
White/light backgrounds
Generic SaaS look
OLED Black (#050505)
text-muted-foreground
Semantic but generic
Explicit opacity (text-white/40)
Design Parameters
Three configurable dials that control layout complexity, animation density, and content spacing. These parameters COMPLEMENT the immutable constraints (OLED Black, rounded-sm, spectral colours, single-pixel borders, Framer Motion). Immutable constraints are NEVER overridden by parameter values.
Performance Rule: Perpetual motion (levels 7+) MUST be isolated in microscopic 'use client' leaf components. Never trigger parent re-renders. Use React.memo and useMotionValue outside the React render cycle.
VISUAL_DENSITY (1-10): Content Spacing
Range
Behaviour
Scientific Luxury Mapping
1-3
Luxury spacing. Generous space-y-8, p-8+. Art gallery feel. Everything breathes.
Rule: Even at VISUAL_DENSITY=10, OLED Black background and spectral colours remain mandatory.
Depth Layering
Z-index scale and backdrop blur hierarchy for consistent depth management.
Z-Index Scale
Layer
z-index
Usage
Base
0
Default content
Elevated
10
Cards with elevation, floating elements
Overlay
20
Dropdowns, popovers, tooltips
Modal
30
Modal dialogs, drawers
Toast
40
Toast notifications
Tooltip
50
Tooltip overlays (highest)
Rule: Never use arbitrary z-index values (z-[9999]). Use the scale above.
Backdrop Blur Tokens
Token
Value
Usage
blur-sm
backdrop-blur-[4px]
Subtle depth hint
blur-md
backdrop-blur-[8px]
Overlay panels
blur-lg
backdrop-blur-[12px]
Modal backgrounds
Rule: Apply backdrop blur only to fixed/sticky elements. Never on scrolling containers (causes GPU repaint storms on mobile).
Navigation Patterns
Responsive navigation behaviour across breakpoints.
Breakpoint
Pattern
Details
Desktop (≥1024px)
Fixed sidebar
240px width, collapsible to 64px icon-only
Tablet (768-1023px)
Overlay sidebar
Slides in from left, backdrop blur behind
Mobile (<768px)
Bottom navigation bar
4-5 items max, icon + label, min-h-[60px]
Rules:
Sidebar always uses OLED Black background with single-pixel right border
Active nav item uses spectral Cyan #00F5FF indicator (2px left border or bottom border on mobile)
Navigation transitions use Framer Motion AnimatePresence for mount/unmount
AI Tells — Forbidden Patterns
Common AI-generated design signatures that MUST be avoided. These patterns betray generic AI output and violate Scientific Luxury standards.
Visual & CSS Tells
NO neon outer glows: No default box-shadow glows. Use inner borders or tinted shadows.
NO pure #000000: Use OLED Black #050505 (already enforced by design system).
NO oversaturated accents: Spectral colours are pre-defined. Do not invent new saturated accents.
NO gradient text on headers: Excessive bg-clip-text gradients are a top AI tell.
NO 3-column equal card layouts: The "three cards horizontally" feature row is the most generic AI pattern. Use asymmetric grids, zig-zag layouts, or horizontal scroll instead.
Typography Tells
NO Inter font: Banned. Use JetBrains Mono (data), Editorial New (headings), or system sans-serif (body).
NO oversized H1: Control hierarchy with weight and colour, not just massive scale.
NO "Elevate", "Seamless", "Unleash", "Next-Gen": AI copywriting cliches. Use concrete, specific language.
Content Tells
NO "John Doe" or "Jane Smith": Use diverse, creative, realistic-sounding names.
NO round numbers: 99.99%, 50%, $100.00 are AI tells. Use organic data: 47.2%, $87.50.
NO "Acme Corp": Invent contextual, premium brand names.
NO Lorem Ipsum: Write real draft copy in en-AU.
Component Tells
NO generic avatars: No SVG egg icons. Use styled initials, photo placeholders, or squircle shapes.
NO pill badges for "New"/"Beta": Use square badges or plain text labels.
NO accordion FAQ sections: Use side-by-side lists, searchable help, or progressive disclosure.
Creative Arsenal
High-end component concepts to pull from when building interfaces. These replace generic patterns with premium alternatives.
Navigation Concepts
Mac OS Dock Magnification: Icons scale fluidly on hover proximity
Magnetic Button: Buttons that physically pull toward the cursor (use useMotionValue/useTransform)
Dynamic Island: Pill-shaped component that morphs to show status/alerts
Contextual Radial Menu: Circular menu expanding at click coordinates
