Scientific Luxury Design

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:

---

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.

Color System — Scientific Luxury

Backgrounds (layered depth through contrast, never shadows)

#050505   — Page background / OLED Black (surface-base)
#0a0a0a   — Card surface (surface-card) — 5-step above base
#111111   — Elevated surface (surface-elevated) — modals, dropdowns, active states
#1a1a1a   — Maximum elevation (surface-max) — use sparingly, tooltip bg alternative

Layering rule: Each layer must be distinguishable by contrast alone. Never use box-shadow to suggest depth — use a darker background beneath a lighter one.

---

Borders

rgba(255,255,255,0.06)  — Default border (border-subtle)
rgba(255,255,255,0.10)  — Medium border (border-default) — cards, inputs unfocused
rgba(255,255,255,0.16)  — Strong border (border-strong) — hover states, dividers
rgba(255,255,255,0.24)  — Emphasis border — active panels, selected rows

Never use: border-gray-700, border-gray-800, border-slate-700 — always rgba on white.

---

Text

rgba(255,255,255,0.85)  — Primary text (text-primary) — headings, values, active labels
rgba(255,255,255,0.60)  — Secondary text (text-secondary) — body text, descriptions
rgba(255,255,255,0.40)  — Muted text (text-muted) — timestamps, placeholders, disabled labels
rgba(255,255,255,0.20)  — Faint text (text-faint) — ghost placeholders, watermarks

Never use raw `#ffffff` for body text — it creates harsh contrast. Reserve #ffffff for focused/selected elements only.

---

Accent — Cyan #00F5FF

#00F5FF          — Primary accent (full saturation)
#00F5FF/90       — Hover on cyan elements
#00F5FF/60       — Secondary accent / inline highlights
#00F5FF/30       — Accent border (focus rings, active edges)
#00F5FF/15       — Accent tint (subtle background on active row)
#00F5FF/08       — Hover background on accent-adjacent elements

Semantic rule: #00F5FF means "active", "primary action", or "key data callout". Never used decoratively. If something glows cyan, it means the user can interact with it or it is the primary insight.

---

Semantic Colors

#22c55e   — Success / positive delta / connected / approved
#ef4444   — Danger / error / negative delta / rejected / critical
#f59e0b   — Warning / pending / unverified
#3b82f6   — Info / secondary action / link
#a855f7   — AI-generated / ML-derived content marker (use sparingly)

At reduced opacity for backgrounds:

rgba(34,197,94,0.10)   — Success tint background
rgba(239,68,68,0.10)   — Danger tint background
rgba(245,158,11,0.10)  — Warning tint background
rgba(59,130,246,0.10)  — Info tint background

Border variants for semantic badges:

rgba(34,197,94,0.25)   — Success badge border
rgba(239,68,68,0.25)   — Danger badge border
rgba(245,158,11,0.25)  — Warning badge border
rgba(59,130,246,0.25)  — Info badge border

---

CSS Custom Properties (use these where defined)

--color-bg:               #050505;
--color-surface-card:     #0a0a0a;
--color-surface-elevated: #111111;
--color-accent:           #00F5FF;
--color-success:          #22c55e;
--color-danger:           #ef4444;
--color-warning:          #f59e0b;
--color-info:             #3b82f6;
--color-text-primary:     rgba(255,255,255,0.85);
--color-text-secondary:   rgba(255,255,255,0.60);
--color-text-muted:       rgba(255,255,255,0.40);
--color-border:           rgba(255,255,255,0.06);
--color-border-default:   rgba(255,255,255,0.10);

---

Prohibited Colors

These colors are banned in Unite-Group UI:

---

Colourblind Accessibility

The cyan/red/green palette creates issues for deuteranopia (red-green blindness). Always supplement color with:

• Shape: Use icons (✓ ✕ ⚠) alongside green/red indicators
• Pattern: Use different line styles (solid vs dashed) in charts
• Label: Never rely on color alone to convey data — always pair with text or value

Cyan #00F5FF is perceptually distinct from both red and green under all common colorblindness types. It is a safe primary accent for semantic data.

Component Patterns — Scientific Luxury

All patterns use Tailwind. All use explicit pixel sizes. All background values are explicit hex/rgba — never Tailwind palette names.

---

Card

Standard card

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

Elevated card (modal, dropdown)

<div className="bg-[#111111] border border-white/[0.10] rounded-sm p-4">
  {children}
</div>

Accent card (active/selected state)

<div className="bg-[#0a0a0a] border border-[#00F5FF]/30 rounded-sm p-4">
  {children}
</div>

KPI card

<div className="bg-[#0a0a0a] border border-white/[0.06] rounded-sm p-4 flex flex-col gap-2">
  <span className="text-[10px] uppercase tracking-widest font-medium text-white/40">
    {label}
  </span>
  <span className="font-mono text-[20px] font-semibold tracking-tight text-white/85">
    {value}
  </span>
  <span className={`font-mono text-[11px] ${delta >= 0 ? 'text-[#22c55e]' : 'text-[#ef4444]'}`}>
    {delta >= 0 ? '+' : ''}{delta}% vs prior period
  </span>
</div>

---

Buttons

Primary button

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

Secondary / ghost button

<button className="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 disabled:cursor-not-allowed">
  {label}
</button>

Destructive button

<button className="border border-[#ef4444]/30 text-[#ef4444]/80 text-[13px] rounded-sm px-4 py-2
                   hover:border-[#ef4444]/60 hover:text-[#ef4444] transition-colors
                   disabled:opacity-40 disabled:cursor-not-allowed">
  {label}
</button>

Icon button

<button className="w-8 h-8 flex items-center justify-center rounded-sm
                   text-white/40 hover:text-white/70 hover:bg-white/[0.04]
                   transition-colors disabled:opacity-40">
  <Icon size={14} />
</button>

---

Inputs

Text input

<input
  className="w-full bg-[#111] border border-white/10 rounded-sm px-3 py-2
             text-[13px] text-white/85 placeholder-white/30
             focus:border-[#00F5FF]/50 focus:outline-none transition-colors
             disabled:opacity-40 disabled:cursor-not-allowed"
  placeholder="Enter value..."
/>

Textarea

<textarea
  className="w-full bg-[#111] border border-white/10 rounded-sm px-3 py-2
             text-[13px] text-white/85 placeholder-white/30 leading-relaxed
             focus:border-[#00F5FF]/50 focus:outline-none transition-colors resize-none
             disabled:opacity-40"
  rows={4}
/>

Select

<select
  className="w-full bg-[#111] border border-white/10 rounded-sm px-3 py-2
             text-[13px] text-white/85 appearance-none
             focus:border-[#00F5FF]/50 focus:outline-none transition-colors">
  <option>Option</option>
</select>

Input with label

<div className="flex flex-col gap-1.5">
  <label className="text-[10px] uppercase tracking-widest font-medium text-white/40">
    {label}
  </label>
  <input className="bg-[#111] border border-white/10 rounded-sm px-3 py-2
                    text-[13px] text-white/85 placeholder-white/30
                    focus:border-[#00F5FF]/50 focus:outline-none transition-colors" />
</div>

---

Badges / Status Pills

Status badge

// success
<span className="text-[10px] font-semibold uppercase tracking-widest px-2 py-0.5 rounded-sm border"
      style={{ color: '#22c55e', borderColor: 'rgba(34,197,94,0.25)', background: 'rgba(34,197,94,0.08)' }}>
  ACTIVE
</span>

// danger
<span className="text-[10px] font-semibold uppercase tracking-widest px-2 py-0.5 rounded-sm border"
      style={{ color: '#ef4444', borderColor: 'rgba(239,68,68,0.25)', background: 'rgba(239,68,68,0.08)' }}>
  FAILED
</span>

// warning
<span className="text-[10px] font-semibold uppercase tracking-widest px-2 py-0.5 rounded-sm border"
      style={{ color: '#f59e0b', borderColor: 'rgba(245,158,11,0.25)', background: 'rgba(245,158,11,0.08)' }}>
  PENDING
</span>

// neutral / info
<span className="text-[10px] font-semibold uppercase tracking-widest px-2 py-0.5 rounded-sm border
                 text-white/40 border-white/[0.12] bg-white/[0.04]">
  DRAFT
</span>

---

Table

<div className="border border-white/[0.06] rounded-sm overflow-hidden">
  <table className="w-full text-[13px]">
    <thead>
      <tr className="border-b border-white/[0.06]">
        <th className="text-left text-[10px] uppercase tracking-widest font-medium text-white/40 px-4 py-3">
          Column
        </th>
      </tr>
    </thead>
    <tbody>
      <tr className="border-b border-white/[0.04] hover:bg-white/[0.02] transition-colors">
        <td className="px-4 py-3 text-white/70">
          Value
        </td>
      </tr>
    </tbody>
  </table>
</div>

Table rules:

• Column headers: 10px uppercase tracking-widest text-white/40
• Body text: text-white/70 (never full white — contrast would overwhelm headers)
• Row hover: bg-white/[0.02] — barely visible, not a block highlight
• Row dividers: border-white/[0.04] — one step below default border opacity

---

Modal / Dialog

{/* Backdrop */}
<div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
  {/* Panel */}
  <div className="bg-[#111111] border border-white/[0.10] rounded-sm p-6
                  w-full max-w-lg mx-4 flex flex-col gap-4">
    {/* Header */}
    <div className="flex items-center justify-between">
      <h2 className="text-[15px] font-semibold tracking-tight text-white/85">
        Modal Title
      </h2>
      <button className="w-7 h-7 flex items-center justify-center rounded-sm
                         text-white/30 hover:text-white/60 hover:bg-white/[0.04]
                         transition-colors">
        <X size={14} />
      </button>
    </div>
    {/* Content */}
    <div className="text-[13px] text-white/60 leading-relaxed">
      {children}
    </div>
    {/* Actions */}
    <div className="flex gap-3 justify-end">
      <button className="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">
        Cancel
      </button>
      <button className="bg-[#00F5FF] text-black text-[13px] font-semibold rounded-sm px-4 py-2
                         hover:bg-[#00F5FF]/90 transition-colors">
        Confirm
      </button>
    </div>
  </div>
</div>

---

Divider

<hr className="border-0 border-t border-white/[0.06]" />

Never use border-gray-* for dividers.

---

Empty State

<div className="flex flex-col items-center justify-center py-12 gap-3">
  <div className="w-10 h-10 rounded-sm border border-white/[0.06] flex items-center justify-center
                  text-white/20">
    <Icon size={18} />
  </div>
  <p className="text-[13px] text-white/40">No items yet</p>
  <button className="text-[#00F5FF] text-[13px] hover:text-[#00F5FF]/80 transition-colors">
    + Add first item
  </button>
</div>

---

Loading / Skeleton

{/* Skeleton line */}
<div className="h-3 bg-white/[0.06] rounded-sm animate-pulse" style={{ width: '60%' }} />

{/* Skeleton card */}
<div className="bg-[#0a0a0a] border border-white/[0.06] rounded-sm p-4 flex flex-col gap-3">
  <div className="h-2 bg-white/[0.06] rounded-sm animate-pulse w-1/3" />
  <div className="h-5 bg-white/[0.06] rounded-sm animate-pulse w-2/3" />
  <div className="h-2 bg-white/[0.06] rounded-sm animate-pulse w-1/2" />
</div>

Never use a spinner alone without accompanying text. Always show a skeleton that represents the eventual shape of the content.

---

Tooltip

<div className="bg-[#111] border border-white/[0.12] rounded-sm px-2.5 py-1.5
                text-[11px] text-white/70 whitespace-nowrap pointer-events-none">
  {content}
</div>

Tooltip background is #111 (elevated), not #0a0a0a — it must float above the card surface.

Spacing & Layout — Scientific Luxury

Gap Scale

Only these gap values are used. No odd-numbered gaps. No gaps above 6 in component interiors.

gap-2   (8px)   — tight: between icon and label, between badge items
gap-3   (12px)  — compact: between form fields, between list items
gap-4   (16px)  — standard: between card sections, between related components
gap-6   (24px)  — loose: between unrelated sections, between grid cards

Never use: gap-1, gap-5, gap-7, gap-8, gap-10, gap-12 — these break the rhythm.

---

Padding Scale

p-2     (8px)   — tight container: icon buttons, compact chips
p-3     (12px)  — compact container: small cards, inline inputs
p-4     (16px)  — standard container: cards, panels
p-6     (24px)  — main content areas: page sections, large modals

Never mix padding and gap for the same structural purpose. Use gap on flex/grid parents. Use p for the container's interior breathing room.

---

Page Structure

{/* Root page */}
<div className="min-h-screen bg-[#050505] text-white">
  {/* Page content */}
  <div className="p-6 flex flex-col gap-6">
    {/* Page header */}
    <div className="flex items-center justify-between">
      <h1 className="text-[20px] font-semibold tracking-tight text-white/85">
        Page Title
      </h1>
      {/* Actions */}
    </div>
    {/* Sections */}
    <section className="flex flex-col gap-4">
      {/* Section content */}
    </section>
  </div>
</div>

---

Grid System

Standard responsive grid

<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">

4-column grid (KPI cards, metrics)

<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">

2-column split (form + preview, list + detail)

<div className="grid grid-cols-1 lg:grid-cols-[1fr_2fr] gap-6">

Rule: Grid column counts must match the content. Never use a 3-column grid for 4 items — use 4 columns or a 2×2.

---

Section Rhythm

Sections within a page follow this rhythm:

Page header               gap-6
├── Section A             gap-4
│   ├── Card grid         gap-4
│   └── Table             —
├── Divider               —
└── Section B             gap-4
    └── Form              gap-3

Section header pattern:

<div className="flex items-center justify-between mb-4">
  <h2 className="text-[15px] font-semibold tracking-tight text-white/85">
    Section Name
  </h2>
  <button className="text-[#00F5FF] text-[13px] hover:text-[#00F5FF]/80 transition-colors">
    + Add
  </button>
</div>

---

Sidebar Layout

<div className="flex min-h-screen bg-[#050505]">
  {/* Sidebar */}
  <aside className="w-56 border-r border-white/[0.06] flex flex-col p-4 gap-1">
    {/* Nav items */}
  </aside>
  {/* Main */}
  <main className="flex-1 p-6 overflow-auto">
    {/* Page content */}
  </main>
</div>

Sidebar width: Always w-56 (224px) — never arbitrary pixel widths.

---

Sidebar Nav Item

<a className={`flex items-center gap-2.5 px-3 py-2 rounded-sm text-[11px] uppercase
               tracking-widest font-medium transition-colors
               ${isActive
                 ? 'bg-[#00F5FF]/08 text-[#00F5FF] border border-[#00F5FF]/20'
                 : 'text-white/40 hover:text-white/70 hover:bg-white/[0.03]'
               }`}>
  <Icon size={13} />
  {label}
</a>

---

Content Max Width

For long-form content (documents, settings pages):

<div className="max-w-3xl mx-auto p-6">

For dashboards: no max-width — use full width with grid.

---

Spacing Anti-Patterns

Typography Guide — Scientific Luxury

Font Stack

Primary (UI text, labels, body):

font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;

Monospace is the default for data-rich dashboards — it creates implicit grid alignment across values and provides the "precision instrument" quality of the aesthetic.

Secondary (headings only, when distinct treatment needed):

font-family: 'DM Sans', 'Outfit', 'Space Grotesk', sans-serif;

Use only for page-level titles and marketing-facing text. Never for data values, labels, or body text in the app.

Fallback (system mono):

font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', monospace;

NEVER use: Inter, Roboto, Arial, Helvetica, system-ui, sans-serif as an explicit choice.

---

Size Scale

All sizes are explicit pixels — never Tailwind's text-sm/text-base/text-lg scale.

---

Hierarchy Construction

Hierarchy is established through size + weight + opacity + case — never through size alone.

Example: KPI card header

[10px uppercase tracking-widest text-white/40]  MONTHLY REVENUE
[20px font-semibold tracking-tight text-white/85]  $142,500
[11px text-white/40]  +12.4% vs last month

The 10px uppercase label, 20px value, and 11px delta create three distinct levels using size AND opacity, never relying on a single dimension.

---

Line Height

Rule: Data-dense areas use leading-snug. User-facing prose uses leading-relaxed.

---

Letter Spacing

---

Data Value Formatting

All numeric data values use font-mono with consistent alignment:

// Currency
<span className="font-mono text-[14px] font-semibold text-white/85">
  $142,500
</span>

// Percentage
<span className="font-mono text-[13px] text-[#22c55e]">
  +12.4%
</span>

// Negative delta
<span className="font-mono text-[13px] text-[#ef4444]">
  −3.2%
</span>

Always use monospace for numbers — proportional fonts cause jitter when values update live.

---

Prohibited Typography Patterns