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.
Instrucciones de origen · Vista previa de solo lectura
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, as explicit font families
Helvetica
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)
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.
