scientific-luxury-design

name	scientific-luxury-design
description	Apply this skill for ALL UI work in Unite-Group: components, pages, layouts, Tailwind classes, design decisions, CSS, visual styling, colour choices, spacing, typography. Also apply when reviewing or auditing existing UI, suggesting improvements, or building anything that will be rendered in a browser. If there is any visual or interactive element involved, this skill applies.
context	fork

Scientific Luxury Design System

What This Skill Replaces

Claude's defaults produce: white backgrounds, Inter/Roboto fonts, slate-900 text, blue-500 accents, rounded-lg borders, shadow-md depth, purple gradients, Tailwind's out-of-box palette. These are banned in Unite-Group.

The Scientific Luxury system is the aesthetic of precision instruments, observatory equipment, and bioluminescent ocean life. Think OLED screens at maximum brightness, cyan bioluminescence in absolute darkness, surgical precision in every measurement. Not "dark mode" — a completely different visual language where darkness is the signal and light is the data.

---

ABSOLUTE RULES (Never Violate)

NEVER use:

• Any background lighter than #111111 (white, off-white, light grey = absolute ban)
• rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-full — only rounded-sm
• Inter, Roboto, Arial, Helvetica as explicit font families
• shadow-sm, shadow, shadow-md, shadow-lg — no box shadows at all
• Generic Tailwind palette: blue-500, slate-900, gray-700, purple-600, etc.
• gradient in any form (no linear-gradient, no from-/to- Tailwind)
• Decorative elements, illustrations, icons for decoration, background patterns
• Semantic colours for non-semantic purposes (green for "active" state is fine; green as decoration is not)

ALWAYS use:

• rounded-sm as the single border radius for everything
• transition-colors on every interactive element
• disabled:opacity-40 for all disabled states
• Borders defined as border border-white/[0.06] (not border-gray-800)
• var(--color-*) CSS variables from the design token system where available
• Explicit pixel sizes for text: text-[11px], text-[12px], text-[13px], text-[20px], etc.

---

Color System

See references/color-system.md for the full token set.

Core palette (memorise these):

#050505   — Page background (OLED Black)
#0a0a0a   — Card surface (surface-card)
#111111   — Elevated surface (surface-elevated)
#00F5FF   — Primary accent (Cyan)
#22c55e   — Success / positive data
#ef4444   — Danger / negative data
#3b82f6   — Info / secondary action
rgba(255,255,255,0.06)  — Default border
rgba(255,255,255,0.40)  — Muted text
rgba(255,255,255,0.60)  — Secondary text
rgba(255,255,255,0.85)  — Primary text

Accent application rules:

• #00F5FF is used for: primary CTAs, active states, focus rings, key data callouts, progress indicators
• At reduced opacity: #00F5FF/08 for hover backgrounds, #00F5FF/30 for borders on accent elements
• Never use #00F5FF for decorative purposes — only where it conveys meaning

---

Typography

See references/typography-guide.md for the full system.

Core rules:

• All labels: text-[10px] uppercase tracking-widest font-medium (metric labels, nav items, status badges)
• Body text: text-[13px] with leading-relaxed
• Data values: font-mono text-[13px] or text-[14px]
• Page titles: text-[20px] font-semibold tracking-tight
• Section headers: text-[15px] font-semibold tracking-tight
• Meta / timestamps: text-[11px]
• NEVER use text-sm, text-base, text-lg, text-xl Tailwind scale — always explicit pixel sizes

---

Spacing & Layout

See references/spacing-layout.md for the full grid system.

Core rules:

• Page padding: p-6 on all main content areas
• Gap scale: gap-2, gap-3, gap-4, gap-6 only — never gap-5, gap-7, gap-8
• Grid columns: grid-cols-1 md:grid-cols-2 xl:grid-cols-3
• Never arbitrary margins — use gap on flex/grid parents instead

---

Component Patterns

See references/component-patterns.md for full implementations.

Card:

<div class="bg-[#0a0a0a] border border-white/[0.06] rounded-sm p-4">

Button (primary):

<button class="bg-[#00F5FF] text-black text-[13px] font-semibold rounded-sm px-4 py-2
               hover:bg-[#00F5FF]/90 transition-colors disabled:opacity-40">

Button (secondary / ghost):

<button class="border border-white/[0.12] text-white/60 text-[13px] rounded-sm px-4 py-2
               hover:border-white/[0.20] hover:text-white/80 transition-colors disabled:opacity-40">

Input:

<input class="bg-[#111] border border-white/10 rounded-sm px-3 py-2 text-[13px] text-white
              placeholder-white/30 focus:border-[#00F5FF]/50 focus:outline-none transition-colors">

Badge (status):

<span class="text-[10px] font-semibold uppercase tracking-widest px-2 py-0.5 rounded-sm border"
      style="color: #22c55e; border-color: rgba(34,197,94,0.25)">

---

Interaction Language

Every UI element communicates its state through colour opacity, not shadow or elevation:

State	Visual change
Default	As specified
Hover	hover:brightness-110 or hover:bg-[color]/[opacity+5]
Active / pressed	active:opacity-80
Disabled	disabled:opacity-40 disabled:cursor-not-allowed
Focus	focus:border-[#00F5FF]/50 focus:outline-none
Loading	animate-pulse on skeleton elements

---

The Aesthetic Test

Before delivering any UI code, ask: Does this look like it could be part of a $500/month SaaS dashboard used by people who care deeply about what they're looking at? If it looks like a tutorial project, a generic admin panel, or anything that could have come from a free Bootstrap template — revise.

The standard is: every component looks like it was designed by someone who has studied Bloomberg Terminal, Linear, Vercel, and Raycast — and synthesised something more precise than all of them.