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.

Defaults: DESIGN_VARIANCE=5, MOTION_INTENSITY=5, VISUAL_DENSITY=3

Adapt these values dynamically based on what the user explicitly requests. Use defaults when no preference is stated.

DESIGN_VARIANCE (1-10): Layout Complexity

Range	Behaviour	Scientific Luxury Mapping
1-3	Structured asymmetric layouts. 40/60 or 30/70 splits. Clean editorial grids.	Asymmetric splits (symmetric grids still banned)
4-7	Timeline layers, overlapping elements, varied aspect ratios. Offset headers.	Default — timeline layout patterns
8-10	Orbital/radial layouts, masonry grids, fractional CSS Grid (2fr 1fr 1fr), massive whitespace zones.	Advanced — orbital grid, staggered masonry

Mobile Override: For levels 4-10, any asymmetric layout above md: MUST fall back to single-column (w-full, px-4, py-8) on viewports < 768px.

MOTION_INTENSITY (1-10): Animation Density

Range	Behaviour	Scientific Luxury Mapping
1-3	Entry-only animations. No perpetual motion. CSS :hover/:active states only.	Breathing animations disabled. DURATIONS.fast ceiling.
4-7	Standard Framer Motion transitions. Stagger children on mount. Hover/tap feedback.	Default — DURATIONS.normal, breathing enabled
8-10	Advanced choreography: spring physics (stiffness: 100, damping: 20), scroll-triggered reveals, parallax, magnetic hover, staggered cascades.	Premium — useSpring presets, useMotionValue/useTransform

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.	Default — matches existing Scientific Luxury aesthetic
4-7	Standard app spacing. space-y-4, p-4-p-6. Balanced for daily-use interfaces.	Standard — tighter padding, more content per view
8-10	Cockpit mode. Minimal padding. Data-dense. 1px line separators instead of cards. font-mono for all numbers.	Dashboard — cross-reference dashboard-patterns skill

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

Layout Concepts

• Bento Grid: Asymmetric tile-based grouping (NOT equal columns)
• Sticky Scroll Stack: Cards that stick and physically stack on scroll
• Split Screen Scroll: Two halves sliding in opposite directions
• Horizontal Scroll Hijack: Vertical scroll translates to horizontal pan

Card Concepts

• Parallax Tilt Card: 3D-tilting card tracking mouse coordinates
• Spotlight Border Card: Borders illuminate dynamically under cursor
• Glassmorphism Panel: True frosted glass with inner refraction (border-white/10 + shadow-[inset_0_1px_0_rgba(255,255,255,0.1)])
• Morphing Modal: Button that seamlessly expands into full-screen dialog

Micro-Interactions

• Staggered Orchestration: Lists/grids reveal with staggerChildren — never mount everything at once
• Skeleton Shimmer: Shifting light reflections across placeholder boxes (not generic spinners)
• Directional Hover: Fill enters from the exact side the mouse entered
• Ripple Click: Visual waves from click coordinates

Performance Rules for Arsenal

• Never mix GSAP/ThreeJS with Framer Motion in the same component tree
• Perpetual animations MUST be React.memo isolated in leaf 'use client' components
• Animate only transform and opacity — never top, left, width, height
• Grain/noise overlays must be fixed inset-0 z-50 pointer-events-none

Colour System

OLED Black Foundation

--background-primary: #050505; /* True OLED black */
--background-elevated: rgba(255, 255, 255, 0.01);
--background-hover: rgba(255, 255, 255, 0.02);

Spectral Colours

Colour	Hex	Usage
Cyan	#00F5FF	Active, in-progress, primary actions
Emerald	#00FF88	Success, completed, approved
Amber	#FFB800	Warning, verification, awaiting
Red	#FF4444	Error, failed, rejected
Magenta	#FF00FF	Escalation, human intervention
Grey	#6B7280	Pending, inactive, disabled

Status Mapping

const STATUS_COLOURS = {
  pending: '#6B7280',
  in_progress: '#00F5FF',
  awaiting_verification: '#FFB800',
  completed: '#00FF88',
  failed: '#FF4444',
  escalated: '#FF00FF',
} as const;

Opacity Scale

/* Text Hierarchy */
--text-primary: rgba(255, 255, 255, 0.9);
--text-secondary: rgba(255, 255, 255, 0.7);
--text-tertiary: rgba(255, 255, 255, 0.5);
--text-muted: rgba(255, 255, 255, 0.4);
--text-subtle: rgba(255, 255, 255, 0.3);

/* Border Hierarchy */
--border-visible: rgba(255, 255, 255, 0.1);
--border-subtle: rgba(255, 255, 255, 0.06);

Typography

Font Stack

--font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Data/Technical */
--font-sans: 'Inter', 'SF Pro Display', system-ui; /* Editorial/Names */

Hierarchy

Element	Font	Size	Weight	Tracking
Hero Title	Sans	5xl-6xl	Extralight (200)	Tight
Section Title	Sans	2xl-4xl	Light (300)	Tight
Label	Sans	10px	Normal	0.2-0.3em
Data Value	Mono	lg-xl	Medium (500)	Normal
Timestamp	Mono	10px	Normal	Normal

Code Examples

// Hero title
<h1 className="text-5xl font-extralight tracking-tight text-white">
  Command Centre
</h1>

// Label
<p className="text-[10px] uppercase tracking-[0.3em] text-white/30">
  Real-Time Monitoring
</p>

// Data value
<span className="font-mono text-lg font-medium tabular-nums">
  {percentage}%
</span>

Borders

Single Pixel Philosophy

border: 0.5px solid rgba(255, 255, 255, 0.06);

className = 'border-[0.5px] border-white/[0.06]';

Variants

/* Subtle (default) */
border-[0.5px] border-white/[0.06]

/* Visible (hover/focus) */
border-[0.5px] border-white/[0.1]

/* Spectral (active state) */
border-[0.5px] border-cyan-500/30

Corners

Only rounded-sm (2px) is permitted. No rounded-lg, rounded-xl.

Exception: Orbs and indicators can use rounded-full.

Layout Patterns

Timeline Layout (Primary)

Replaces card grids:

<div className="relative pl-4">
  {/* Vertical spine */}
  <div className="absolute top-0 bottom-0 left-8 w-px bg-gradient-to-b from-white/10 via-white/5 to-transparent" />

  <div className="space-y-8">
    {items.map((item, index) => (
      <TimelineNode key={item.id} item={item} index={index} />
    ))}
  </div>
</div>

Data Strip Layout

Horizontal inline metrics:

<div className="flex items-center gap-8 border-[0.5px] border-white/[0.06] bg-white/[0.01] px-6 py-3">
  {metrics.map((metric, index) => (
    <React.Fragment key={metric.label}>
      {index > 0 && <div className="h-4 w-px bg-white/10" />}
      <div className="flex items-baseline gap-2">
        <span className="text-[10px] tracking-widest text-white/30 uppercase">{metric.label}</span>
        <span className="font-mono text-lg" style={{ color: metric.colour }}>
          {metric.value}
        </span>
      </div>
    </React.Fragment>
  ))}
</div>

Asymmetrical Splits

Avoid 50/50. Use asymmetrical ratios:

// 60/40 split
<div className="flex">
  <div className="flex-[3]">Main content</div>
  <div className="flex-[2]">Sidebar</div>
</div>

// 70/30 split
<div className="flex">
  <div className="flex-[7]">Main content</div>
  <div className="flex-[3]">Sidebar</div>
</div>

Animation Patterns

Framer Motion Required

All animations must use Framer Motion. CSS animations are prohibited.

Approved Easings

const EASINGS = {
  outExpo: [0.19, 1, 0.22, 1], // Primary - smooth deceleration
  smooth: [0.4, 0, 0.2, 1], // Gentle ease
  snappy: [0.68, -0.55, 0.265, 1.55], // Snappy with overshoot
};

Breathing Animation

For active/live elements:

<motion.div
  animate={{
    opacity: [1, 0.6, 1],
    scale: [1, 1.05, 1],
  }}
  transition={{
    duration: 2,
    repeat: Infinity,
    ease: 'easeInOut',
  }}
/>

Glow Pulse

For error or attention states:

<motion.div
  animate={{
    boxShadow: [`0 0 0 ${colour}00`, `0 0 20px ${colour}40`, `0 0 0 ${colour}00`],
  }}
  transition={{
    duration: 1.5,
    repeat: Infinity,
  }}
/>

Staggered Entry

For lists:

<motion.div
  initial={{ opacity: 0, x: -20 }}
  animate={{ opacity: 1, x: 0 }}
  transition={{
    delay: index * 0.1,
    duration: 0.5,
    ease: [0.19, 1, 0.22, 1],
  }}
/>

Component Patterns

Breathing Orb (Status Indicator)

function BreathingOrb({ colour, isActive, size = 'md' }) {
  const sizes = { sm: 'h-8 w-8', md: 'h-12 w-12', lg: 'h-16 w-16' };

  return (
    <motion.div
      className={cn(sizes[size], 'flex items-center justify-center rounded-full border-[0.5px]')}
      style={{
        borderColor: isActive ? `${colour}50` : 'rgba(255,255,255,0.1)',
        backgroundColor: isActive ? `${colour}10` : 'rgba(255,255,255,0.02)',
        boxShadow: isActive ? `0 0 30px ${colour}40` : 'none',
      }}
    >
      <motion.div
        className="h-2 w-2 rounded-full"
        style={{ backgroundColor: colour }}
        animate={isActive ? { scale: [1, 1.3, 1], opacity: [1, 0.6, 1] } : {}}
        transition={{ duration: 2, repeat: Infinity }}
      />
    </motion.div>
  );
}

Australian Localisation

Element	Format	Example
Date	DD/MM/YYYY	23/01/2026
Time	H:MM am/pm	2:30 pm
Timezone	AEST/AEDT	2:30 pm AEDT
Currency	AUD ($)	$1,234.56
Spelling	Australian English	colour, behaviour

// Date formatting
new Date().toLocaleDateString('en-AU', {
  day: '2-digit',
  month: '2-digit',
  year: 'numeric',
}); // "23/01/2026"

Anti-Patterns

Pattern	Problem	Correct Approach
Bootstrap/Tailwind card grids (grid-cols-2, grid-cols-4)	Generic SaaS aesthetic, "The Bento Trap"	Timeline nodes, data strips, or asymmetrical splits (40/60, 30/70)
Lucide/FontAwesome icons for status indicators	Visual noise, lacks scientific precision	Breathing orbs with spectral colours and glow pulse animations
White or light backgrounds	Violates OLED black foundation	Use #050505 as primary background with rgba(255,255,255,0.01) elevation
rounded-lg or rounded-xl corners	Soft, unprofessional appearance	Only rounded-sm (2px) permitted; rounded-full for orbs only
Linear CSS transitions (transition: all 0.3s linear)	Mechanical, lifeless motion	Framer Motion with physics-based easing ([0.19, 1, 0.22, 1])

Checklist for New Components

Before committing any new UI component, verify:

• Uses OLED Black (#050505) background
• Uses single pixel borders (border-[0.5px] border-white/[0.06])
• Uses spectral colours for status (not semantic Tailwind)
• Uses Framer Motion for animations (not CSS transitions)
• Uses JetBrains Mono for data values
• Uses editorial typography for names/titles
• Uses physics-based easing ([0.19, 1, 0.22, 1])
• Avoids card grids (uses timeline or data strip)
• Avoids Lucide icons for status (uses breathing orbs)
• Includes breathing/glow animations for active states
• Uses Australian date/time formats

Response Format

[AGENT_ACTIVATED]: Scientific Luxury
[PHASE]: {Audit | Implementation | Review}
[STATUS]: {in_progress | complete}

{design analysis or component guidance}

[NEXT_ACTION]: {what to do next}

---

SCIENTIFIC LUXURY DESIGN SYSTEM - LOCKED