No preview available
Velvet Pearl Phone Column

/velvetPearlPhoneColumn
A premium, dark-themed design system centered on a tactile, human feel with velvet black backgrounds, oversized rounding, and pristine phone hardware mockups for focused consumer conversion experiences.
0 likes
0 bookmarks
Jun 17, 2026
Design System Content
# Velvet Pearl Phone Column

A design language for polished, dark-themed consumer conversion experiences.

---

## Philosophy

> "The journey is singular, the aesthetic is velvet, the touch is human."

This system creates highly converting consumer interfaces that feel intimate, premium, and tactile. Built around a strict centered column, the design mimics the focused environment of a high-end mobile app brought to the web. It avoids harsh digital blacks in favor of warm, deep shadows and glowing edges, grounding the digital experience in pristine physical hardware mockups.

### Core Beliefs

1. **The Conversion Column** — The user's eye should never wander. Content is strictly centered, narrow, and vertically stacked.
2. **Soft iOS Depth** — Interfaces shouldn't feel flat; they should feel layered. We use frosted glass, nested panels, and subtle rim-lighting to build a tactile environment.
3. **Warmth in the Dark** — Dark mode shouldn't feel cold or developer-centric. Approachable details, soft typography, and friendly avatars make the dark UI feel welcoming.
4. **The Hardware Anchor** — The software value is constantly reinforced through physical context. Pristine phone mockups live directly below the hero and lead the feature moments.
5. **Generous Curves** — Oversized rounded corners (squarcles) on panels and fully rounded pills for interactive elements invite touch.

### Strict Rules

* **Narrow Max Widths** — The central column must never expand beyond optimal readable bounds (e.g., `max-w-2xl` for text, `max-w-4xl` for the bento grid).
* **No Sharp Corners** — Standard cards use heavy rounding (e.g., `rounded-[32px]`), while CTAs use `rounded-full`. 
* **Rim Lighting Over Drop Shadows** — Depth is achieved by lighting the top/inner edges of graphite panels, not by casting muddy black shadows.
* **Strict Center Alignment** — Hero sections and primary content stacks must remain centered. Left/right alignment is reserved only for interior bento card details.

---

## Color Palette

### Velvet & Graphite Scale

The palette replaces pure black with a rich, warm "velvet black" and structures the hierarchy using translucent graphite panels and pearl-white highlights. 

```css
/* Backgrounds (Darkest to Lightest) */
bg-zinc-950           /* Velvet black canvas background (#09090b) */
bg-zinc-900/80        /* Base graphite panels, primary bento backgrounds */
bg-zinc-800/60        /* Elevated graphite panels, secondary nested blocks */
bg-zinc-800           /* Solid interactive elements, CTA bases */
bg-zinc-700/50        /* Hover states for interactive graphite components */

/* Borders & Rim Lighting (The iOS Depth) */
border-white/5        /* Fine, minimal bento grid borders */
border-white/10       /* Base rim-lighting for elevated panels */
shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)] /* Top-edge rim highlight for buttons */
ring-1 ring-white/10  /* Outer glow/boundary for frosted micro-badges */

/* Typography Scale (Pearl to Slate) */
text-zinc-50          /* Pearl-white: Hero headlines, primary CTA text */
text-zinc-200         /* Soft pearl: Subheadings, active UI text */
text-zinc-400         /* Muted slate: Body copy, compact descriptions */
text-zinc-500         /* Deep slate: Metadata, fine print, inactive icons */

```

### Destructive Actions (Deletions Only)

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

```

---

## Typography

The typography leverages modern, warm sans-serifs (Manrope, Geist, or Helvetica) to create an approachable yet premium consumer feel. 

### Font Families & Weights

```css
font-sans        /* Manrope, Geist, or Helvetica exclusively */

font-normal      /* Muted slate body copy, compact descriptions */
font-medium      /* CTA buttons, avatar chip labels, frosted micro-badges */
font-semibold    /* Pearl-white headings, bento card titles */
font-bold        /* Strictly reserved for the hero text-4xl headline */

```

### Font Size Scale

```css
text-[11px]      /* Micro-badge labels, subtle system states */
text-xs          /* Fine print, bottom navbar links (12px) */
text-sm          /* Compact descriptions, friendly avatar chips (14px) */
text-base        /* Main feature body copy, standard buttons (16px) */
text-lg          /* Bento grid card titles, feature headers (18px) */
text-xl          /* Section transition headers */
text-2xl         /* Sub-hero value propositions */
text-4xl         /* STRICT EXCLUSIVE: The primary hero headline */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* Text-4xl hero headlines to create visual density */
tracking-normal  /* All body copy and standard UI text */
tracking-wide    /* Only used for uppercase micro-badges */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 4xl | bold | zinc-50 | tight | none |
| Feature Title | lg | semibold | zinc-200 | normal | none |
| Description | sm | normal | zinc-400 | normal | none |
| CTA Button | base | medium | zinc-50 | normal | none |
| Micro-badge | [11px] | medium | zinc-300 | wide | uppercase |

---

## Animation System

### Core Philosophy: iOS Fluidity

Animations should mimic the physical physics of an iOS interface—spring-based, fluid, and heavily reliant on depth and scale rather than aggressive lateral movement.

### Page Transitions (Scale & Fade)

```tsx
initial={{ opacity: 0, scale: 0.96, y: 10 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
transition={{ type: 'spring', damping: 25, stiffness: 300 }}

```

### Micro-Interactions (The Button Press)

Interactive elements physically depress when clicked, reinforcing the tactile consumer aesthetic.

```tsx
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.97 }}
transition={{ type: "spring", stiffness: 400, damping: 25 }}

```

---

## UI Components

### Slim Frosted Navbar

Sits at the very top of the conversion column, letting the velvet canvas scroll smoothly beneath it.

```tsx
<nav className="fixed top-4 left-1/2 -translate-x-1/2 w-[calc(100%-2rem)] max-w-2xl rounded-full bg-zinc-900/60 backdrop-blur-xl border border-white/10 px-6 py-3 flex items-center justify-between z-50">
  {/* Nav Items */}
</nav>
```

### The Pristine Phone Mockup Anchor

Directly beneath the hero, the phone mockup acts as the central gravitational pull for the entire page.

```tsx
<div className="relative mx-auto w-full max-w-[320px] mt-12 rounded-[48px] ring-1 ring-white/10 shadow-[0_0_80px_rgba(255,255,255,0.05)] overflow-hidden">
  <img src="/phone-ui.png" alt="App Interface" className="w-full object-cover" />
  <div className="absolute inset-0 ring-1 ring-inset ring-white/10 rounded-[48px] pointer-events-none" />
</div>
```

### Alternating Phone-Led Feature Moments

Subsequent sections stack vertically, alternating text and hardware visuals.

```tsx
<section className="flex flex-col items-center text-center max-w-md mx-auto gap-6 py-20">
  <MicroBadge>Feature</MicroBadge>
  <h3 className="text-xl font-semibold text-zinc-50">Seamless Integration</h3>
  <p className="text-sm text-zinc-400">Your concise, muted slate description here.</p>
  <HardwarePhoneComponent />
</section>
```

---

## Component Catalog

### Panels & Bento Cards

Oversized rounded corners with fine borders and calm spacing.

```tsx
// Oversized Graphite Panel (Main Bento Container)
"bg-zinc-900/80 backdrop-blur-md rounded-[32px] border border-white/5 p-8 flex flex-col gap-4"

// Minimal Bento Grid Layout
"grid grid-cols-1 md:grid-cols-2 gap-4 max-w-3xl mx-auto w-full p-4"

```

### Buttons & Avatars

Friendly, fully rounded tactile elements.

```tsx
// Graphite CTA Button (with subtle rim-lighting)
"w-full sm:w-auto px-8 py-3.5 bg-zinc-800 text-zinc-50 font-medium text-base rounded-full shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)] ring-1 ring-white/10 hover:bg-zinc-700 transition-colors"

// Friendly Avatar Chip
"flex items-center gap-3 p-1.5 pr-4 bg-zinc-900/80 border border-white/10 rounded-full hover:bg-zinc-800 transition-all cursor-pointer"

```

### Badges

```tsx
// Frosted Micro-badge
"inline-flex items-center px-2.5 py-1 rounded-full bg-zinc-800/50 backdrop-blur-md border border-white/10 text-[11px] font-medium uppercase tracking-wide text-zinc-300"

```

---

## Quality Checklist

* [ ] Is the primary hero headline exactly `text-4xl` using Manrope, Geist, or Helvetica?
* [ ] Does the page adhere to a strict, narrow centered conversion column?
* [ ] Did you use `shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]` on buttons to create iOS rim-lighting?
* [ ] Is the phone mockup placed directly beneath the hero text/CTA?
* [ ] Are bento cards using oversized `rounded-[32px]` corners and `border-white/5` for fine borders?
* [ ] Is the primary text color a warm pearl-white (`text-zinc-50`) instead of harsh pure white?
* [ ] Are the lower sections vertically stacked and explicitly centered?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Deep velvet blacks (`zinc-950`) and warm graphite panels.
* Heavy use of `backdrop-blur` for frosted depth effects.
* Fully rounded buttons (`rounded-full`) and heavily rounded cards (`rounded-[32px]`).
* Pristine, highly-detailed hardware phone mockups as structural anchors.
* Small, friendly avatar photos to inject human warmth into the dark UI.

### ✗ Not Allowed

* Left-aligned hero sections or sprawling, full-width grid layouts.
* Sharp square corners (`rounded-none` or `rounded-sm`) on cards or buttons.
* Pure flat black (`#000000`) backgrounds—they destroy the warm velvet aesthetic.
* Heavy, spreading drop shadows (use rim-lighting and inner borders instead).
* Typographic hero sizes larger than `4xl` or weights lighter than `normal`.