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:

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: DESIGNVARIANCE=5, MOTIONINTENSITY=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

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

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

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

Rule: Never use arbitrary z-index values (z-[9999]). Use the scale above.

Backdrop Blur Tokens

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.

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-[inset01px0rgba(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

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

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

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

Anti-Patterns

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