scientific-luxury

name	scientific-luxury
description	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.
license	MIT
metadata	{"author":"NodeJS-Starter-V1","version":"2.0.1","locale":"en-AU"}

Scientific Luxury Design System

Visual DNA for NodeJS-Starter-V1 Framework. Rejects generic SaaS aesthetics in favour of precision meets elegance.

When to Apply

Activate this skill when:

• Creating new React components
• Styling UI elements
• Implementing animations
• Reviewing designs for compliance
• User mentions: "design", "UI", "component", "style", "animation"

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)

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"
        =   }}
        = ? {  [, , ],  [, , ] }  {}}
        =  ,   }}
      />
    
  );
}

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"

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

---

SCIENTIFIC LUXURY DESIGN SYSTEM - LOCKED