Obsidian Blue Product Gallery

/obsidianBlueProductGallery
A cinematic, ultra-minimal dark UI system that elevates product showcases to premium gallery status using obsidian backgrounds, cobalt accents, restrained typography, and Framer-level fades for a curated, high-end experience.
1 likes
0 bookmarks
Jun 19, 2026
Design System Content
# Obsidian Blue Product Gallery

A cinematic, minimal dark-themed design language that treats every interface image and component like a premium gallery object.

---

## Philosophy

> "Light sculpts the darkness; restraint amplifies the art."

This system creates interfaces that feel like a high-end digital exhibition—cinematic, hyper-polished, and structurally immaculate. The design leans heavily on obsidian depths, precise inner highlights, and breathtaking Framer-level fades. We prioritize the product showcase, elevating interface screenshots into floating works of art while suppressing all unnecessary interface clutter.

### Core Beliefs

1. **The Interface is a Gallery** — Deep obsidian backgrounds exist strictly to make floating screenshots and restrained bento cards look like illuminated museum artifacts. 
2. **Illumination over Coloration** — Volume and depth are defined by soft inner highlights and low-contrast blue-gray strokes, not flat opacity blocks.
3. **The Accent is a Scalpel** — Cobalt is used with ruthless discipline—reserved exclusively for CTAs, active states, small icon glows, and razor-thin underline details.
4. **Cinematic Composition** — Layouts employ massive, confident whitespace and perfectly balanced typographic scales. Overcrowding destroys the premium illusion.
5. **Fluid Restraint** — Animations should feel like polished glass and smooth camera pans—elegant fades and sub-pixel spring physics without bounce.

### Strict Rules

* **No Unnecessary Social Decoration** — Remove all decorative social media bloat, busy avatars, or distracting noise. The focus is strictly on the product gallery and metrics.
* **Single Accent Color** — "Cobalt Blue" is the only saturated color permitted. No traffic-light status colors unless absolutely critical.
* **Oversized & Semibold** — Hero headlines must be oversized and semibold, anchoring the page with modern authority.
* **No Harsh Whites** — Text and highlights should use off-whites and blue-grays to reduce eye strain and maintain the cinematic mood.
* **Controlled Glows** — Radial background glows are strictly controlled. They exist behind primary floating screenshots to create depth, never randomly scattered.

---

## Color Palette

### Monochromatic & Accent Scale

The palette transitions from an abyssal obsidian up through dark graphite and blue-gray structural borders, peaking at a crisp, legible white text layer. The accent is an electric, pure Cobalt.

```css
/* Backgrounds (Darkest to Lightest) */
bg-obsidian-950       /* Main canvas background (#050505) */
bg-graphite-900       /* Core bento cards, secondary panels (#0f1115) */
bg-graphite-800/80    /* Subtle elevated container zones, hover bases */
bg-graphite-800/50    /* Inactive tabs, metric panel backgrounds */
bg-slate-800/40       /* Selection fills, pressed states */
bg-slate-700          /* Structural pills, discrete tags */

/* Borders & Strokes (Low-Contrast Blue-Gray) */
border-slate-800      /* Ultra-subtle divider lines, resting card borders */
border-slate-700      /* Hover state boundaries, comparison row dividers */
border-slate-600      /* Focused boundaries, active panel strokes */
border-slate-500      /* Inner highlights (box-shadow inset) */

/* The Scalpel: Cobalt Blue (Accent) */
text-cobalt-500       /* Small icon glows, active status hooks (#3b82f6) */
bg-cobalt-600         /* Primary CTA buttons, active state indicators */
border-cobalt-500     /* Selected underline details, focused input rings */
shadow-cobalt-500/20  /* Soft radial background glows for heroes/screenshots */

/* Text Hierarchy (5 Opacity Levels) */
text-white            /* Primary hero headlines, critical data points */
text-slate-200        /* Standard body copy, concise supporting text */
text-slate-400        /* Secondary text, elegant comparison row labels */
text-slate-500        /* Restrained metadata, tertiary icons, metric contexts */
text-slate-600        /* Disabled states, placeholders, system hints */

```

### Destructive Actions (Deletions Only)

```css
hover:bg-red-950/30
hover:text-red-400
hover:border-red-900/50
shadow-[inset_0_1px_0_rgba(248,113,113,0.1)]

```

---

## Typography

Modern, composed, and architectural. The system strictly utilizes **Geist, Manrope, Inter Tight, Satoshi, or Söhne**. Headlines are bold and oversized, contrasting against restrained, perfectly tracked metadata.

### Font Weights

```css
font-semibold    /* Primary hero headlines, oversized section hooks - MANDATORY */
font-medium      /* Active view titles, buttons, structural tags */
font-normal      /* Gallery descriptions, concise supporting copy */
font-light       /* Rarely used, restricted to massive background watermarks */
/* font-black/extrabold is strictly forbidden — it breaks the elegant balance */

```

### Font Size Scale

```css
text-[10px]      /* High-density bento tags, tiny metric units */
text-[11px]      /* System metadata, subtle graph axes */
text-xs          /* Inline helper notes, tertiary labels (12px) */
text-sm          /* Standard bento body text, input text (14px) */
text-base        /* Standard section descriptions, button text (16px) */
text-lg          /* Elegant comparison row titles, supporting hero copy (18px) */
text-2xl         /* Sub-section headers, metric panel focal points */
text-4xl         /* Secondary page headers */
text-5xl-7xl     /* Oversized hero headlines (responsive) */

```

### Letter Spacing & Transforms

```css
tracking-tighter /* Oversized hero headlines (tight optical tracking) */
tracking-tight   /* Large headers, metric panel numbers */
tracking-normal  /* Default paragraph flow text */
tracking-wide    /* Navigational tabs, small subheadings */
tracking-widest  /* Tiny technical labels, system tags */

uppercase        /* Small tags, structural pills, micro metrics */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 6xl | semibold | white | tighter | none |
| Supporting Copy | lg | normal | slate-200 | normal | none |
| Comparison Labels | sm | medium | slate-400 | normal | none |
| Action Buttons | base | medium | white | normal | none |
| Metric Labels | [11px] | medium | slate-500 | widest | uppercase |

---

## Animation System

### Core Philosophy: Framer-Level Fades

Animations are cinematic. Components do not bounce; they fade in with polished, eased vertical translations, treating the viewport like a camera panning over a gallery wall.

### Page Transitions (Cinematic Reveal)

```tsx
initial={{ opacity: 0, y: 20, scale: 0.98 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }} // Custom cubic-bezier for a silk finish

```

### The Gallery Float (Screenshots)

Screenshots hover over their soft cobalt radial glows with an infinitely slow, elegant levitation.

```tsx
animate={{ y: [0, -8, 0] }}
transition={{ duration: 6, ease: "easeInOut", repeat: Infinity }}

```

---

## UI Components

### Floating Hero Layout

The focal point of the system. An oversized, semibold headline layered above a glowing product screenshot, framed by a glassmorphic navbar.

```tsx
<div className="relative flex flex-col items-center pt-32 pb-20">
  {/* The Cobalt Radial Glow */}
  <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[400px] bg-cobalt-500/20 blur-[120px] rounded-full pointer-events-none" />
  
  <h1 className="text-6xl font-semibold tracking-tighter text-white mb-6 z-10">
    Headline Text
  </h1>
  <p className="text-lg text-slate-200 max-w-xl text-center mb-8 z-10">
    Concise supporting copy goes here.
  </p>
  
  <ButtonGroup className="z-10 mb-16" />
  
  {/* Floating Screenshot */}
  <img 
    src="..." 
    className="z-10 rounded-xl border border-slate-700 shadow-2xl shadow-black/50 ring-1 ring-white/10"
  />
</div>

```

### Glassmorphic Navbar

An ultra-thin, highly blurred shelf resting at the top of the canvas.

```tsx
className="fixed top-0 w-full h-16 bg-obsidian-950/40 backdrop-blur-xl border-b border-slate-800 z-50 flex items-center px-8"

```

### Soft Inner Highlights (The "Glass Edge")

Used on all bento cards and premium inputs to create tactile realism without flat shadows.

```tsx
className="shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]"

```

---

## Component Catalog

### Restrained Bento Cards

Cards act as dark graphite plinths. They use low-contrast strokes and subtle inner lighting.

```tsx
// Premium Graphite Bento Card
"bg-graphite-900 border border-slate-800 rounded-2xl p-6 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] hover:bg-graphite-800/80 transition-colors duration-300"

// Selected/Active Card (Cobalt Accent)
"bg-graphite-900 border border-cobalt-500/50 rounded-2xl p-6 shadow-[inset_0_1px_0_rgba(59,130,246,0.2)]"

```

### Buttons (Slightly Rounded Pair)

```tsx
// Primary CTA (Cobalt)
"bg-cobalt-600 text-white font-medium text-base rounded-xl px-6 py-2.5 hover:bg-cobalt-500 transition-colors shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]"

// Secondary CTA (Ghost/Glass)
"bg-white/5 border border-slate-700 text-slate-200 font-medium text-base rounded-xl px-6 py-2.5 hover:bg-white/10 hover:text-white transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]"

```

### Elegant Comparison Rows & Metric Panels

```tsx
// Comparison Row Item
"flex items-center justify-between py-4 border-b border-slate-800 last:border-0 hover:bg-white/[0.02] px-4 transition-colors"

// Metric Panel Data Point
"flex flex-col gap-1 p-5 rounded-xl bg-obsidian-950 border border-slate-800"
/* Inside: <span className="text-[11px] uppercase tracking-widest text-slate-500">Metric</span> */
/* Inside: <span className="text-2xl tracking-tight text-white font-medium">10.4ms</span> */

```

### Inputs & Toggles

```tsx
// Cinematic System Input
"w-full px-4 py-3 rounded-xl bg-obsidian-950 border border-slate-700 text-white placeholder-slate-600 focus:outline-none focus:border-cobalt-500 focus:ring-1 focus:ring-cobalt-500 shadow-[inset_0_2px_4px_rgba(0,0,0,0.4)] transition-all"

// Small Icon Glow (Hover State)
"text-slate-400 hover:text-cobalt-400 hover:drop-shadow-[0_0_8px_rgba(59,130,246,0.6)] transition-all"

```

---

## Quality Checklist

* [ ] Is the hero headline oversized, semibold, and utilizing tight optical tracking?
* [ ] Is the primary hero screenshot floating over a strategically placed, soft cobalt radial glow?
* [ ] Do all cards and inputs feature a low-contrast blue-gray stroke (`border-slate-800/700`) and a soft inner highlight?
* [ ] Is the interface entirely free of unnecessary social decorations, avatars, and distracting layout bloat?
* [ ] Are hover states utilizing Framer-level polished fades rather than snappy, un-eased instant transitions?
* [ ] Is Cobalt strictly reserved for CTAs, selected details, active states, and specific glows?
* [ ] Does the background utilize true obsidian/graphite darks rather than washed-out, muddy grays?

---

## Allowed vs Not Allowed

### ✓ Allowed

* True obsidian blacks and dark graphite bento containers.
* Soft, highly blurred cobalt radial glows positioned firmly behind focal images.
* Slightly rounded corners (`rounded-xl`, `rounded-2xl`) for organic, modern component framing.
* Low-contrast blue-gray strokes to separate layout zones.
* Glassmorphic elements (highly blurred, low-opacity backgrounds) for sticky navbars and overlays.

### ✗ Not Allowed

* High-contrast white borders or pure white icon states unless actively selected/hovered.
* Bouncy, springy animations that disrupt the serious, cinematic gallery aesthetic.
* Light mode overlays, white modal backgrounds, or opaque tooltips.
* Any saturated colors (green, yellow, purple) outside of the Cobalt accent, unless critical to charting/graphs.
* Heavy outer drop-shadows on cards (depth must be achieved via inner borders and background differentiation).