Scientific Luxury

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: 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

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

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

Scientific Luxury — Before/After Examples

Side-by-side comparisons showing generic patterns transformed to Scientific Luxury standard.

---

Example 1: Bootstrap Card Grid → SL Timeline Layout

BEFORE (Generic)

<div className="min-h-screen bg-gray-50 p-8">
  <h1 className="text-2xl font-bold text-gray-900 mb-6">Dashboard</h1>
  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
    <div className="bg-white rounded-lg shadow-md p-6">
      <h3 className="text-sm text-gray-500">Total Users</h3>
      <p className="text-3xl font-bold text-gray-900">1,234</p>
      <span className="text-green-500 text-sm">+12%</span>
    </div>
    <div className="bg-white rounded-lg shadow-md p-6">
      <h3 className="text-sm text-gray-500">Revenue</h3>
      <p className="text-3xl font-bold text-gray-900">$50,000</p>
      <span className="text-green-500 text-sm">+8%</span>
    </div>
    <div className="bg-white rounded-lg shadow-md p-6">
      <h3 className="text-sm text-gray-500">Active Sessions</h3>
      <p className="text-3xl font-bold text-gray-900">456</p>
    </div>
    <div className="bg-white rounded-lg shadow-md p-6">
      <h3 className="text-sm text-gray-500">Error Rate</h3>
      <p className="text-3xl font-bold text-red-500">2.5%</p>
    </div>
  </div>
</div>

Violations: bg-gray-50, bg-white, rounded-lg, shadow-md, grid-cols-4, font-bold, text-gray-500, round numbers, generic shadow.

AFTER (Scientific Luxury)

<div className="min-h-[100dvh] bg-[#050505] px-8 py-8">
  {/* Header */}
  <p className="text-[10px] uppercase tracking-[0.3em] text-white/30">
    Real-Time Monitoring
  </p>
  <h1 className="text-4xl font-extralight tracking-tight text-white">
    Command Centre
  </h1>

  {/* DataStrip — replaces card grid */}
  <div className="mt-6 flex items-center gap-8 border-[0.5px] border-white/[0.06] bg-white/[0.01] px-6 py-3">
    <div className="flex items-baseline gap-2">
      <span className="text-[10px] tracking-widest text-white/30 uppercase">Users</span>
      <span className="font-mono text-lg font-medium tabular-nums text-[#00F5FF]">1,247</span>
    </div>
    <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">Revenue</span>
      <span className="font-mono text-lg font-medium tabular-nums text-[#00FF88]">$48,720</span>
    </div>
    <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">Sessions</span>
      <span className="font-mono text-lg font-medium tabular-nums text-[#00F5FF]">463</span>
    </div>
    <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">Errors</span>
      <span className="font-mono text-lg font-medium tabular-nums text-[#FF4444]">2.3%</span>
    </div>
  </div>

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

Fixes applied: OLED Black #050505 background, DataStrip replaces card grid, font-extralight title, spectral colours for values, font-mono tabular-nums for data, border-[0.5px] single-pixel border, organic numbers, timeline layout.

---

Example 2: Generic Form → SL Form

BEFORE (Generic)

<form className="max-w-md mx-auto bg-white rounded-xl shadow-lg p-8">
  <h2 className="text-xl font-bold text-gray-900 mb-4">Sign In</h2>
  <div className="mb-4">
    <label className="block text-gray-600 text-sm mb-1">Email</label>
    <input
      type="email"
      className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500"
      placeholder="Enter your email"
    />
  </div>
  <div className="mb-6">
    <label className="block text-gray-600 text-sm mb-1">Password</label>
    <input
      type="password"
      className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500"
      placeholder="Enter your password"
    />
  </div>
  <button className="w-full bg-blue-500 text-white rounded-lg py-2 hover:bg-blue-600 transition-all">
    Sign In
  </button>
</form>

Violations: bg-white, rounded-xl, rounded-lg, shadow-lg, border-gray-300, bg-blue-500, focus:ring-blue-500, transition-all, generic placeholder text.

AFTER (Scientific Luxury)

<motion.form
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.6, ease: [0.19, 1, 0.22, 1] }}
  className="max-w-sm mx-auto border-[0.5px] border-white/[0.06] bg-white/[0.01] rounded-sm p-8"
>
  <p className="text-[10px] uppercase tracking-[0.3em] text-white/30">
    Authentication
  </p>
  <h2 className="mt-1 text-2xl font-light tracking-tight text-white">
    Sign in
  </h2>

  <div className="mt-8 space-y-6">
    <div>
      <label className="block text-[10px] uppercase tracking-[0.2em] text-white/40 mb-2">
        Email
      </label>
      <input
        type="email"
        className="w-full bg-transparent border-[0.5px] border-white/[0.06] rounded-sm px-4 py-2.5
                   font-mono text-sm text-white/90 placeholder:text-white/20
                   focus:border-[#00F5FF]/30 focus:outline-none"
        placeholder="admin@local.dev"
      />
    </div>
    <div>
      <label className="block text-[10px] uppercase tracking-[0.2em] text-white/40 mb-2">
        Password
      </label>
      <input
        type="password"
        className="w-full bg-transparent border-[0.5px] border-white/[0.06] rounded-sm px-4 py-2.5
                   font-mono text-sm text-white/90 placeholder:text-white/20
                   focus:border-[#00F5FF]/30 focus:outline-none"
        placeholder="••••••••"
      />
    </div>
  </div>

  <motion.button
    type="submit"
    className="mt-8 w-full rounded-sm border-[0.5px] border-[#00F5FF]/30 bg-transparent
               py-2.5 font-mono text-sm uppercase tracking-wide text-[#00F5FF]"
    whileHover={{ backgroundColor: 'rgba(0, 245, 255, 0.05)', boxShadow: '0 0 20px rgba(0,245,255,0.1)' }}
    whileTap={{ scale: 0.98 }}
    transition={{ ease: [0.19, 1, 0.22, 1] }}
  >
    Authenticate
  </motion.button>
</motion.form>

Fixes applied: Transparent/OLED-safe backgrounds, rounded-sm, border-[0.5px], font-mono inputs, Framer Motion entry + interactions, spectral Cyan focus state, text-[10px] uppercase tracking-[0.3em] labels, no CSS transitions, realistic placeholder.

Premium Button — Generic Dark-Mode Template

Portable premium button component. No project-specific spectral colours — uses CSS custom properties for theming.

'use client';

import { motion } from 'framer-motion';
import { cn } from '@/lib/utils';

interface PremiumButtonProps {
  children: React.ReactNode;
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  onClick?: () => void;
  disabled?: boolean;
  className?: string;
}

const SIZES = {
  sm: 'px-3 py-1.5 text-xs',
  md: 'px-5 py-2.5 text-sm',
  lg: 'px-8 py-3.5 text-base',
};

export function PremiumButton({
  children,
  variant = 'primary',
  size = 'md',
  onClick,
  disabled = false,
  className,
}: PremiumButtonProps) {
  return (
    <motion.button
      onClick={onClick}
      disabled={disabled}
      className={cn(
        'relative rounded-sm border border-white/10 bg-transparent',
        'font-medium tracking-wide',
        'text-white/80',
        SIZES[size],
        disabled && 'opacity-30 cursor-not-allowed',
        className
      )}
      whileHover={
        disabled
          ? undefined
          : { backgroundColor: 'rgba(255, 255, 255, 0.04)' }
      }
      whileTap={disabled ? undefined : { scale: 0.98 }}
      transition={{ duration: 0.3, ease: [0.4, 0, 0.2, 1] }}
    >
      {children}
    </motion.button>
  );
}

Usage

<PremiumButton onClick={handleAction}>Submit</PremiumButton>
<PremiumButton variant="secondary" size="sm">Cancel</PremiumButton>

Customisation Points

• Replace rounded-sm with your project's chosen radius
• Replace border-white/10 with your border opacity token
• Add variant colours via CSS custom properties or a theme object
• Swap Framer Motion for CSS transitions if the project does not use Framer

Premium Card — Generic Dark-Mode Template

Portable premium card component. No project-specific branding — uses generic dark-mode tokens.

'use client';

import { motion } from 'framer-motion';
import { cn } from '@/lib/utils';
import { ReactNode } from 'react';

interface PremiumCardProps {
  title: string;
  label?: string;
  value?: string | number;
  children?: ReactNode;
  index?: number;
  className?: string;
}

export function PremiumCard({
  title,
  label,
  value,
  children,
  index = 0,
  className,
}: PremiumCardProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 12 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{
        delay: index * 0.08,
        duration: 0.4,
        ease: [0.4, 0, 0.2, 1],
      }}
      className={cn(
        'rounded-sm border border-white/[0.08] bg-white/[0.02] p-6',
        className
      )}
    >
      {label && (
        <span className="text-[11px] uppercase tracking-widest text-white/40">
          {label}
        </span>
      )}
      <h3 className="mt-1 text-lg font-light text-white/90">{title}</h3>
      {value !== undefined && (
        <p className="mt-2 font-mono text-2xl font-medium tabular-nums text-white/80">
          {value}
        </p>
      )}
      {children && <div className="mt-4">{children}</div>}
    </motion.div>
  );
}

Usage

<div className="space-y-4">
  <PremiumCard title="Total Users" label="Analytics" value="1,247" index={0} />
  <PremiumCard title="Revenue" label="Monthly" value="$12,340" index={1} />
</div>

Customisation Points

• Replace rounded-sm with your project's chosen radius
• Replace border-white/[0.08] with your border token
• Replace bg-white/[0.02] with your elevation token
• Add accent colour to value via a colour prop
• Swap Framer Motion for CSS transitions if preferred

SpectralButton — Scientific Luxury Button Template

Copy and adapt. Uses OLED Black foundation, spectral colours, single-pixel borders, and Framer Motion.

'use client';

import { motion } from 'framer-motion';
import { cn } from '@/lib/utils';

interface SpectralButtonProps {
  children: React.ReactNode;
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  onClick?: () => void;
  disabled?: boolean;
  className?: string;
}

const VARIANTS = {
  primary: {
    border: 'border-[#00F5FF]/30',
    text: 'text-[#00F5FF]',
    glow: '#00F5FF',
    hoverBg: 'rgba(0, 245, 255, 0.05)',
  },
  secondary: {
    border: 'border-white/[0.1]',
    text: 'text-white/70',
    glow: '#FFFFFF',
    hoverBg: 'rgba(255, 255, 255, 0.02)',
  },
  danger: {
    border: 'border-[#FF4444]/30',
    text: 'text-[#FF4444]',
    glow: '#FF4444',
    hoverBg: 'rgba(255, 68, 68, 0.05)',
  },
} as const;

const SIZES = {
  sm: 'px-3 py-1.5 text-xs',
  md: 'px-5 py-2.5 text-sm',
  lg: 'px-8 py-3.5 text-base',
};

export function SpectralButton({
  children,
  variant = 'primary',
  size = 'md',
  onClick,
  disabled = false,
  className,
}: SpectralButtonProps) {
  const v = VARIANTS[variant];

  return (
    <motion.button
      onClick={onClick}
      disabled={disabled}
      className={cn(
        'relative rounded-sm border-[0.5px] font-mono tracking-wide uppercase',
        'bg-transparent transition-none',
        v.border,
        v.text,
        SIZES[size],
        disabled && 'opacity-30 cursor-not-allowed',
        className
      )}
      whileHover={
        disabled
          ? undefined
          : {
              backgroundColor: v.hoverBg,
              boxShadow: `0 0 20px ${v.glow}15`,
            }
      }
      whileTap={disabled ? undefined : { scale: 0.98 }}
      transition={{ duration: 0.3, ease: [0.19, 1, 0.22, 1] }}
    >
      {children}
    </motion.button>
  );
}

Usage

<SpectralButton variant="primary" onClick={handleSubmit}>
  Initialise
</SpectralButton>

<SpectralButton variant="secondary" size="sm">
  Cancel
</SpectralButton>

<SpectralButton variant="danger" onClick={handleDelete}>
  Terminate
</SpectralButton>

Checklist

• [x] rounded-sm corners
• [x] border-[0.5px] single-pixel border
• [x] Spectral colour variants
• [x] Framer Motion for hover/tap animations
• [x] font-mono for button text
• [x] No CSS transitions
• [x] OLED-safe (transparent background)

DataCard — Scientific Luxury Card Template

Replaces generic Bootstrap/Tailwind cards. Uses timeline-node aesthetic with single-pixel borders and breathing indicators.

'use client';

import { motion } from 'framer-motion';
import { cn } from '@/lib/utils';

interface DataCardProps {
  title: string;
  label?: string;
  value?: string | number;
  status?: 'active' | 'success' | 'warning' | 'error' | 'idle';
  children?: React.ReactNode;
  index?: number;
  className?: string;
}

const STATUS_COLOURS = {
  active: '#00F5FF',
  success: '#00FF88',
  warning: '#FFB800',
  error: '#FF4444',
  idle: '#6B7280',
} as const;

export function DataCard({
  title,
  label,
  value,
  status = 'idle',
  children,
  index = 0,
  className,
}: DataCardProps) {
  const colour = STATUS_COLOURS[status];
  const isActive = status !== 'idle';

  return (
    <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],
      }}
      className={cn(
        'relative rounded-sm border-[0.5px] border-white/[0.06] bg-white/[0.01]',
        'px-6 py-5',
        className
      )}
    >
      {/* Status indicator */}
      <div className="flex items-center gap-3 mb-4">
        <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={
            isActive
              ? { duration: 2, repeat: Infinity, ease: 'easeInOut' }
              : {}
          }
        />
        {label && (
          <span className="text-[10px] uppercase tracking-[0.3em] text-white/30">
            {label}
          </span>
        )}
      </div>

      {/* Title */}
      <h3 className="text-lg font-light tracking-tight text-white/90">
        {title}
      </h3>

      {/* Value */}
      {value !== undefined && (
        <p
          className="mt-2 font-mono text-2xl font-medium tabular-nums"
          style={{ color: colour }}
        >
          {value}
        </p>
      )}

      {/* Children */}
      {children && <div className="mt-4">{children}</div>}

      {/* Active glow */}
      {isActive && (
        <motion.div
          className="pointer-events-none absolute inset-0 rounded-sm"
          animate={{
            boxShadow: [
              `0 0 0 ${colour}00`,
              `0 0 20px ${colour}15`,
              `0 0 0 ${colour}00`,
            ],
          }}
          transition={{ duration: 2, repeat: Infinity }}
        />
      )}
    </motion.div>
  );
}

Usage

<div className="space-y-4">
  <DataCard
    title="Agent Runs"
    label="Real-Time"
    value="47"
    status="active"
    index={0}
  />
  <DataCard
    title="Success Rate"
    label="Last 24 Hours"
    value="94.7%"
    status="success"
    index={1}
  />
  <DataCard
    title="Failed Tasks"
    label="Requires Attention"
    value="3"
    status="error"
    index={2}
  />
</div>

Checklist

• [x] rounded-sm corners
• [x] border-[0.5px] border-white/[0.06] single-pixel border
• [x] bg-white/[0.01] OLED-safe elevated background
• [x] Breathing orb status indicator
• [x] Glow pulse for active states
• [x] Staggered entry via index prop
• [x] font-mono for data values with tabular-nums
• [x] text-[10px] tracking-[0.3em] uppercase for labels
• [x] Framer Motion only — no CSS transitions

Page Layout — Scientific Luxury Layout Template

Standard page layout with OLED Black background, fixed sidebar, header with DataStrip, and main content area.

'use client';

import { motion, AnimatePresence } from 'framer-motion';
import { cn } from '@/lib/utils';
import { ReactNode, useState } from 'react';

interface PageLayoutProps {
  children: ReactNode;
  title: string;
  label?: string;
  sidebar?: ReactNode;
  metrics?: Array<{
    label: string;
    value: string | number;
    colour?: string;
  }>;
}

export function PageLayout({
  children,
  title,
  label,
  sidebar,
  metrics,
}: PageLayoutProps) {
  const [sidebarOpen, setSidebarOpen] = useState(true);

  return (
    <div className="relative min-h-[100dvh] bg-[#050505] text-white">
      {/* Sidebar */}
      {sidebar && (
        <aside
          className={cn(
            'fixed top-0 left-0 h-full border-r border-white/[0.06] bg-[#050505]',
            'transition-none z-20',
            sidebarOpen ? 'w-60' : 'w-16'
          )}
        >
          <div className="flex h-full flex-col">
            {/* Sidebar toggle */}
            <motion.button
              className="flex h-14 items-center justify-center border-b border-white/[0.06]"
              onClick={() => setSidebarOpen(!sidebarOpen)}
              whileHover={{ backgroundColor: 'rgba(255,255,255,0.02)' }}
              transition={{ ease: [0.19, 1, 0.22, 1] }}
            >
              <span className="font-mono text-xs text-white/40">
                {sidebarOpen ? '◀' : '▶'}
              </span>
            </motion.button>

            {/* Sidebar content */}
            <nav className="flex-1 overflow-y-auto py-4">
              {sidebar}
            </nav>
          </div>
        </aside>
      )}

      {/* Main content */}
      <div className={cn(sidebar && (sidebarOpen ? 'ml-60' : 'ml-16'))}>
        {/* Header */}
        <header className="border-b border-white/[0.06] px-8 py-6">
          {label && (
            <p className="text-[10px] uppercase tracking-[0.3em] text-white/30">
              {label}
            </p>
          )}
          <h1 className="text-4xl font-extralight tracking-tight text-white">
            {title}
          </h1>

          {/* DataStrip — inline metrics */}
          {metrics && metrics.length > 0 && (
            <div className="mt-4 flex items-center gap-8 border-[0.5px] border-white/[0.06] bg-white/[0.01] px-6 py-3">
              {metrics.map((metric, index) => (
                <div key={metric.label} className="flex items-center gap-2">
                  {index > 0 && (
                    <div className="mr-6 h-4 w-px bg-white/10" />
                  )}
                  <span className="text-[10px] uppercase tracking-widest text-white/30">
                    {metric.label}
                  </span>
                  <span
                    className="font-mono text-lg font-medium tabular-nums"
                    style={{ color: metric.colour || '#00F5FF' }}
                  >
                    {metric.value}
                  </span>
                </div>
              ))}
            </div>
          )}
        </header>

        {/* Content area */}
        <main className="px-8 py-8">
          <AnimatePresence mode="wait">{children}</AnimatePresence>
        </main>

        {/* Footer */}
        <footer className="border-t border-white/[0.06] px-8 py-4">
          <p className="font-mono text-[10px] text-white/20">
            {new Date().toLocaleDateString('en-AU')}
          </p>
        </footer>
      </div>
    </div>
  );
}

Sidebar Navigation Item

interface NavItemProps {
  label: string;
  active?: boolean;
  onClick?: () => void;
  collapsed?: boolean;
  icon?: ReactNode;
}

function NavItem({ label, active, onClick, collapsed, icon }: NavItemProps) {
  return (
    <motion.button
      onClick={onClick}
      className={cn(
        'flex w-full items-center gap-3 px-4 py-2.5 text-left',
        active
          ? 'border-l-2 border-[#00F5FF] text-white/90'
          : 'border-l-2 border-transparent text-white/40 hover:text-white/60'
      )}
      whileHover={{ backgroundColor: 'rgba(255,255,255,0.02)' }}
      transition={{ ease: [0.19, 1, 0.22, 1] }}
    >
      {icon && <span className="text-sm">{icon}</span>}
      {!collapsed && (
        <span className="text-sm font-light">{label}</span>
      )}
    </motion.button>
  );
}

Usage

<PageLayout
  title="Command Centre"
  label="Real-Time Monitoring"
  sidebar={
    <>
      <NavItem label="Overview" active />
      <NavItem label="Agents" />
      <NavItem label="Analytics" />
      <NavItem label="Settings" />
    </>
  }
  metrics={[
    { label: 'Active', value: 12, colour: '#00F5FF' },
    { label: 'Completed', value: 847, colour: '#00FF88' },
    { label: 'Failed', value: 3, colour: '#FF4444' },
  ]}
>
  <TimelineContent />
</PageLayout>

Checklist

• [x] bg-[#050505] OLED Black background
• [x] border-white/[0.06] single-pixel borders throughout
• [x] rounded-sm only (none used — sharp layout edges)
• [x] font-extralight tracking-tight hero title
• [x] text-[10px] tracking-[0.3em] uppercase labels
• [x] font-mono tabular-nums data values
• [x] Framer Motion for hover states
• [x] AnimatePresence for content transitions
• [x] Cyan #00F5FF active nav indicator
• [x] min-h-[100dvh] for full-height
• [x] Australian date format in footer

Scientific Luxury — Anti-Patterns Reference

Extracted from SKILL.md §Banned Elements and §AI Tells. Each ban includes before/after code examples.

---

Banned Element: Standard Bootstrap/Tailwind Cards

Why banned: Generic, overused. Betrays factory-default aesthetic.

// BEFORE (banned)
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
  <div className="bg-white rounded-lg shadow-md p-6">
    <h3 className="text-lg font-bold">Metric</h3>
    <p className="text-3xl">1,234</p>
  </div>
</div>

// AFTER (correct)
<div className="relative pl-4">
  <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>

---

Banned Element: Generic Neon Borders (border-cyan-500)

Why banned: Cheap gaming aesthetic. Lacks precision.

// BEFORE (banned)
<div className="border-2 border-cyan-500 rounded-lg p-4">
  Content
</div>

// AFTER (correct)
<div className="border-[0.5px] border-white/[0.06] rounded-sm bg-white/[0.01] p-4">
  Content
</div>

// Spectral border for active state:
<div className="border-[0.5px] border-cyan-500/30 rounded-sm p-4">
  Content
</div>

---

Banned Element: Symmetrical Grids (grid-cols-2, grid-cols-4)

Why banned: "The Bento Trap" — symmetrical grids are the most generic layout pattern.

// BEFORE (banned)
<div className="grid grid-cols-2 gap-4">
  <div>Left</div>
  <div>Right</div>
</div>

// AFTER (correct) — 60/40 asymmetric split
<div className="flex">
  <div className="flex-[3]">Main content</div>
  <div className="flex-[2]">Sidebar</div>
</div>

// AFTER (correct) — 70/30 asymmetric split
<div className="flex">
  <div className="flex-[7]">Main content</div>
  <div className="flex-[3]">Sidebar</div>
</div>

---

Banned Element: Standard Rounded Corners (rounded-lg, rounded-xl)

Why banned: Soft, unprofessional appearance. Violates sharp precision aesthetic.

// BEFORE (banned)
<div className="rounded-lg p-4">Content</div>
<div className="rounded-xl p-4">Content</div>
<div className="rounded-2xl p-4">Content</div>

// AFTER (correct)
<div className="rounded-sm p-4">Content</div>

// Exception: Orbs and indicators may use rounded-full
<div className="h-2 w-2 rounded-full bg-cyan-500" />

---

Banned Element: Lucide/FontAwesome Icons for Status

Why banned: Visual noise. Lacks scientific precision.

// BEFORE (banned)
import { CheckCircle, XCircle, Clock } from 'lucide-react';
<CheckCircle className="text-green-500" />

// AFTER (correct) — Breathing orb
<motion.div
  className="h-2 w-2 rounded-full"
  style={{ backgroundColor: '#00FF88' }}
  animate={{ scale: [1, 1.3, 1], opacity: [1, 0.6, 1] }}
  transition={{ duration: 2, repeat: Infinity }}
/>

---

Banned Element: Linear CSS Transitions

Why banned: Mechanical, lifeless motion. Violates physics-based animation requirement.

// BEFORE (banned)
<div className="transition-all duration-300 ease-linear hover:bg-gray-100">
  Content
</div>

// AFTER (correct) — Framer Motion with physics easing
<motion.div
  whileHover={{ backgroundColor: 'rgba(255,255,255,0.02)' }}
  transition={{ duration: 0.4, ease: [0.19, 1, 0.22, 1] }}
>
  Content
</motion.div>

---

Banned Element: White/Light Backgrounds

Why banned: Generic SaaS look. Violates OLED Black foundation.

// BEFORE (banned)
<div className="bg-white min-h-screen">
  <div className="bg-gray-50 p-4">Card</div>
</div>

// AFTER (correct)
<div className="bg-[#050505] min-h-screen">
  <div className="bg-white/[0.01] p-4">Card</div>
</div>

---

Banned Element: text-muted-foreground

Why banned: Semantic but generic. Does not convey precise opacity hierarchy.

// BEFORE (banned)
<p className="text-muted-foreground">Secondary text</p>

// AFTER (correct) — explicit opacity
<p className="text-white/40">Secondary text</p>
<p className="text-white/70">More prominent secondary text</p>

---

AI Tells — Visual & CSS

AI Tells — Typography

AI Tells — Content

AI Tells — Components

Premium Dark-Mode Design Standards (Generic)

Portable dark-mode design standards for any project. No project-specific branding or colour palette references.

---

Colour Foundation

Background

Use a near-black background, not pure #000000. A value like #050505 or #0A0A0A gives depth without the harshness of pure black.

--background-primary: #0A0A0A;
--background-elevated: rgba(255, 255, 255, 0.02);
--background-hover: rgba(255, 255, 255, 0.04);

Accent Colours

Define a limited palette (4-6 colours) with semantic meaning. Every colour should have a clear purpose — do not introduce colours without a role.

Text Opacity Hierarchy

Use opacity rather than grey shades for text hierarchy on dark backgrounds:

--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.35);

---

Typography

Font Selection

• Monospace for data values, code, timestamps: system monospace or a premium mono like JetBrains Mono
• Sans-serif for headings and body: choose a distinctive typeface rather than defaults
• Avoid Inter as a heading font — it is overused in AI-generated UIs

Hierarchy

Control hierarchy through weight and colour, not just scale:

---

Borders

Thin Border Philosophy

Use sub-pixel or single-pixel borders with low opacity for elegance:

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

Corner Radius

Choose one consistent radius and apply it everywhere. Avoid mixing rounded-lg, rounded-xl, and rounded-2xl in the same interface. A sharp radius (2px) conveys precision; larger radii convey softness.

---

Animation

Easing Curves

Use physics-based easing functions. Avoid linear and default ease:

--ease-smooth:   cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring:   cubic-bezier(0.68, -0.55, 0.265, 1.55);
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

Engine

Use a declarative animation library (e.g., Framer Motion for React) rather than CSS transitions for complex interactions. Reserve CSS transitions for simple hover state colour changes.

Performance

• Animate only transform and opacity — never top, left, width, height
• Isolate perpetual animations in leaf components
• Use will-change sparingly and only when needed

---

Layout

Asymmetric Splits

Avoid 50/50 symmetrical layouts. Use ratios like 60/40 or 70/30 for visual interest.

Avoid Equal-Column Card Grids

Three equal cards in a row is the most common AI-generated layout pattern. Use timeline layouts, masonry grids, or horizontal scroll instead.

---

Depth Layering

Z-Index Scale

Define a consistent z-index scale rather than using arbitrary values:

Backdrop Blur

Apply backdrop blur only to fixed/sticky elements. Avoid on scrolling containers — causes GPU repaint storms on mobile.

---

Status Indicators

Replace icon-based status indicators with animated elements:

• Breathing dot: Scales and fades subtly for active/live states
• Glow pulse: Box-shadow animation for error/attention states
• Colour transition: Smooth colour shift for state changes

---

Content Quality

• No placeholder text (Lorem Ipsum, "Click here")
• No generic names ("John Doe", "Acme Corp")
• Avoid round numbers that look artificial (99.99%, $100.00)
• Write real copy appropriate to the domain

---

Responsive Strategy

Use min-h-[100dvh] instead of h-screen for full-height sections.

Scientific Luxury — Design Standards Reference

Extracted from SKILL.md. Core tokens, typography, spacing, animation easings, and border rules.

---

Colour Palette

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 Colour Mapping

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

Opacity Scale — Text

--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);

Opacity Scale — Borders

--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

---

Borders

Single Pixel Philosophy

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

Tailwind Class

className="border-[0.5px] border-white/[0.06]"

Variants

Corners

Only rounded-sm (2px) is permitted. Exception: rounded-full for orbs and indicators.

---

Animation Easings

Approved Easings (Framer Motion)

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
};

CSS Custom Properties

--ease-spring:   cubic-bezier(0.68, -0.55, 0.265, 1.55);
--ease-smooth:   cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

Animation Engine

All animations must use Framer Motion. CSS transitions and @keyframes are prohibited.

---

Depth Layering

Z-Index Scale

Never use arbitrary z-index values (z-[9999]).

Backdrop Blur Tokens

Apply backdrop blur only to fixed/sticky elements. Never on scrolling containers.

---

Design Parameters

Three configurable dials. Defaults: DESIGN_VARIANCE=5, MOTION_INTENSITY=5, VISUAL_DENSITY=3.

Immutable constraints (OLED Black, rounded-sm, spectral colours, single-pixel borders, Framer Motion) are never overridden by parameter values.

---

Navigation Patterns

Active nav item: spectral Cyan #00F5FF indicator (2px left border or bottom border on mobile).

---

Australian Localisation