Obsidian Cobalt Product Theater Design System

/obsidianCobaltProductTheaterDesignSystem
A cinematic, premium dark UI system inspired by product keynotes. Utilizes obsidian-black, frosted glass, and focused cobalt accents to frame content as a central, illuminated performer.
0 likes
0 bookmarks
Jun 19, 2026
Design System Content
# Obsidian Cobalt Product Theater Design System

A design language for cinematic, premium dark-themed product presentations.

---

## Philosophy

> "The interface is a darkened theater; the product is the sole performer on stage."

This system creates digital environments that feel like a high-end product keynote—immersive, heavily contrasted, and atmospherically deep. The design relies on an obsidian-black void, structured by glass-like charcoal panels and illuminated by a single, highly controlled cobalt-blue light source. It is an exercise in extreme restraint, elevating the product to an object of desire.

### Core Beliefs

1. **Cinematic focus** — The user's eye must be immediately drawn to the central hero and product imagery via absolute contrast and selective illumination.
2. **Material over color** — Hierarchy is established through the physical properties of UI elements—frosted glass, soft slate borders, and refined multi-layered shadows—rather than saturated color blocks.
3. **Restrained illumination** — Gradients are strictly controlled. The cobalt-blue accent functions as a focused beam of light, never as a decorative splash.
4. **Semibold authority** — Unlike editorial light interfaces, dark presentation thrives on strong, semibold typographic weight to anchor the user's attention in the void.
5. **Floating object permanence** — Product screenshots and primary modules must float above the canvas, utilizing spatial depth and Framer-level motion to feel like tangible, premium hardware.

### Strict Rules

* **Single Light Source** — Only one primary radial glow is allowed per page (anchored at the hero center). No decorative blobs, mesh gradients, or bleeding lights elsewhere.
* **No Pure White Typography** — Pure `#FFFFFF` halates aggressively on obsidian backgrounds. Use "Pearl" (off-white/translucent) values for visual elegance.
* **No Noisy Badges** — Tags and labels must be structurally integrated, subtle, and heavily desaturated.
* **No Solid Gray Cards** — All secondary surfaces must be "Charcoal Glass"—translucent with backdrop blurs—to interact organically with the black canvas.
* **Tight Optical Tracking** — Large typography must employ negative letter-spacing to form tight, cohesive visual blocks.

---

## Color Palette

### Monochromatic & Accent Scale

The palette utilizes a true black foundation, building elevation through translucent whites and slate-tinted borders. The accent is a deep, luminous Cobalt.

```css
/* Canvas & Backgrounds (Darkest to Lightest) */
bg-obsidian           /* Main theater canvas (#050505) */
bg-charcoal-900/40    /* Deepest backdrop blur for massive floating elements */
bg-white/[0.02]       /* Default bento panel base (Charcoal Glass) */
bg-white/[0.04]       /* Subtle container zones, nested modules */
bg-white/[0.08]       /* Hover states for cards, secondary interactive areas */
bg-white/[0.12]       /* Active selection states, pressed modules */

/* Borders */
border-white/[0.04]   /* Ultra-subtle grid dividers */
border-white/[0.08]   /* Default soft slate structural borders */
border-white/[0.15]   /* Focused card boundaries, hover highlights */
border-white/[0.25]   /* Active dark system states, input focuses */

/* The Illumination: Cobalt Blue (Accent) */
bg-blue-600           /* Primary CTA, active toggle states (#2563eb) */
text-blue-500         /* Primary text links, critical selection text */
border-blue-500/30    /* Focused input rings, active module borders */
bg-blue-600/10        /* Micro-hover states for interactive cobalt elements */
glow-blue-900/50      /* The singular hero radial gradient */

/* Pearl Typography Hierarchy (Opacity-based) */
text-white/90         /* Primary text, hero headlines (Pearl) */
text-white/70         /* Secondary text, explanatory body copy */
text-white/50         /* System labels, compact feature descriptions */
text-white/30         /* Muted metadata, timestamps, disabled elements */

```

### Destructive Actions (Deletions Only)

```css
hover:bg-red-950/30
hover:text-red-400
hover:border-red-900/50

```

---

## Typography

The typographic system exclusively relies on highly-engineered geometric sans-serifs: **Geist, Söhne, Manrope, Inter, or ABC Diatype**. It employs strong weights for structural authority and extreme tracking discipline.

### Font Weights

```css
font-semibold    /* Hero headlines (two-line), primary CTAs - MANDATORY for emphasis */
font-medium      /* Active view titles, standard section headers, structural labels */
font-normal      /* Compact explanatory copy, system descriptions */
/* font-light and font-bold are generally avoided to maintain a dense, uniform texture */

```

### Font Size Scale

```css
text-[11px]      /* High-density system labels, tiny localized metadata */
text-xs          /* Subtle feature row tags, micro system inputs (12px) */
text-sm          /* Compact explanatory copy, primary navigation links (14px) */
text-base        /* Standard feature row descriptions, standard buttons (16px) */
text-lg          /* Bento panel headers, secondary callouts (18px) */
text-2xl         /* Large bento focal points, feature introductions */
text-5xl-7xl     /* Primary two-line hero headlines (responsive) */

```

### Letter Spacing & Transforms

```css
tracking-tighter /* Hero headlines (essential for Söhne/Geist to look premium) */
tracking-tight   /* Bento panel headers, primary action buttons */
tracking-normal  /* Compact explanatory body copy */
tracking-wide    /* Subtle system labels, secondary metadata */

uppercase        /* Small system labels, functional navigation headers */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 6xl | semibold | text-white/90 | tighter | none |
| Explanatory Copy | sm | normal | text-white/70 | normal | none |
| Primary CTA | base | semibold | text-white | tight | none |
| Bento Title | lg | medium | text-white/90 | tight | none |
| System Labels | [11px] | medium | text-white/50 | wide | uppercase |

---

## Animation System

### Core Philosophy: Framer-Level Discipline

Motion must feel heavily damped, physical, and expensive. Elements do not bounce; they glide into place with deep spatial awareness. 

### The Theater Unveil (Hero Entrance)

The hero opens sequentially: Navbar drops, headline fades up and tracks out slightly, CTA fades, and the premium horizontal screenshot slowly scales up from the depths.

```tsx
// Headline Sequence
initial={{ opacity: 0, y: 20, filter: 'blur(12px)' }}
animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1], delay: 0.1 }}

// Premium Object (Screenshot) Elevation
initial={{ opacity: 0, y: 40, scale: 0.95, rotateX: 5 }}
animate={{ opacity: 1, y: 0, scale: 1, rotateX: 0 }}
transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1], delay: 0.3 }}
```

### Micro-Interactions (Magnetic & Damped)

Buttons and bento cards employ subtle scale reductions on click to mimic dense physical hardware.

```tsx
whileTap={{ scale: 0.98 }}
transition={{ type: "spring", stiffness: 400, damping: 30 }}
```

---

## UI Components

### The Restrained Radial Glow

The singular background light source. Positioned strictly behind the primary floating screenshot to create contrast and focus.

```tsx
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] bg-blue-600/20 blur-[120px] rounded-[100%] pointer-events-none" />
```

### Polished Frosted Navbar

Floats completely detached from the top of the viewport, utilizing strong blurs and minimal borders.

```tsx
<nav className="mx-auto mt-6 rounded-full border border-white/[0.08] bg-white/[0.02] backdrop-blur-2xl px-6 py-3 flex items-center justify-between" />
```

### Refined Premium Shadows

Floating objects (like the main screenshot) require a multi-layered shadow approach to sever them from the obsidian background.

```tsx
className="shadow-[0_0_0_1px_rgba(255,255,255,0.08),0_40px_80px_rgba(0,0,0,0.8),0_20px_40px_rgba(0,0,0,0.4)]"
```

---

## Component Catalog

### Hero Actions

```tsx
// Rounded Blue Primary CTA
"rounded-full bg-blue-600 px-6 py-3 text-sm font-semibold text-white tracking-tight hover:bg-blue-500 transition-colors shadow-[0_0_20px_rgba(37,99,235,0.4)]"

// Dark Secondary Action
"rounded-full bg-white/[0.04] border border-white/[0.08] px-6 py-3 text-sm font-semibold text-white/90 tracking-tight hover:bg-white/[0.08] transition-colors"
```

### Bento Panels (Charcoal Glass Modules)

Spacious, structural containers for lower page sections. Generous padding, no internal dividers unless absolutely necessary.

```tsx
// Spacious Bento Container
"relative overflow-hidden rounded-3xl border border-white/[0.08] bg-white/[0.02] p-10 hover:bg-white/[0.04] transition-colors duration-500"

// Bento Inner Glow (On Hover)
"absolute inset-0 bg-gradient-to-br from-white/[0.04] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
```

### Clean Feature Rows

Used for granular details below the bento grid. Minimalist and horizontally oriented.

```tsx
<div className="flex items-center gap-6 py-4 border-b border-white/[0.04] last:border-0">
  <div className="flex-shrink-0 text-blue-500">/* Linear Icon */</div>
  <div className="flex flex-col">
    <span className="text-sm font-medium text-white/90">Feature Title</span>
    <span className="text-sm text-white/50">Compact explanatory copy details</span>
  </div>
</div>
```

### Subtle System Labels

Replaces traditional "noisy" badges. Completely desaturated.

```tsx
"inline-flex items-center rounded-full border border-white/[0.08] bg-white/[0.02] px-2.5 py-0.5 text-[11px] font-medium uppercase tracking-wide text-white/50"
```

---

## Quality Checklist

* [ ] Is the primary canvas pure obsidian (`#050505` or `#000000`), completely devoid of gray washes?
* [ ] Is there exactly *one* radial glow on the screen, focused at the hero center?
* [ ] Does the hero typography use a semibold weight with `tracking-tighter` applied?
* [ ] Are all secondary container backgrounds transparent with backdrop blurs (Charcoal Glass) instead of solid gray hex codes?
* [ ] Does the primary floating screenshot have a highly refined, multi-layered black shadow rather than a generic dark gray drop shadow?
* [ ] Are all fonts rendered in Geist, Söhne, Manrope, Inter, or ABC Diatype?

---

## Allowed vs Not Allowed

### ✓ Allowed

* True obsidian/black canvas backgrounds.
* Large, semibold, two-line headlines.
* A single restrained cobalt blue light source.
* Polished frosted glass treatments (`backdrop-blur-xl`, `bg-white/[0.02]`).
* Extreme letter spacing discipline (tighter for large text, wider for micro-labels).
* Deep, cinematic Framer-motion entrance animations.

### ✗ Not Allowed

* Multiple competing glowing gradients or "mesh" backgrounds.
* Highly saturated success/warning/error badges (e.g., bright green pills).
* Flat, solid-color secondary cards that obscure the depth of the dark canvas.
* Light or hairline font weights for major headings.
* Decorative geometric blobs or background illustrations.