Velvet Graphite Phone Classic

/velvetGraphitePhoneClassic
A dark, premium B2C design system featuring velvet blacks, graphite, amethyst accents, and rounded geometry for fast, reusable, polished launches with inviting, cinematic elegance.
0 likes
0 bookmarks
Jun 17, 2026
Design System Content
# Velvet Graphite Phone Classic Design System

A mature, dark-themed aesthetic designed for fast, reusable launches with premium polish and friendly B2C restraint.

---

## Philosophy

> "Depth creates focus; restraint creates elegance."

This system produces interfaces that feel like a high-end consumer electronic device right out of the box—sleek, inviting, and effortlessly premium. The design relies on a foundation of deep velvet blacks and graphite, softened by generous border radii, warm typography, and a single, atmospheric light source. It prioritizes rapid deployment through structured, highly reusable layout modules.

### Core Beliefs

1. **Structured Elegance** — Narrow, centered sections govern the layout. A tidy, controlled viewport reduces cognitive load and creates a cinematic focus on the product.
2. **Atmospheric Depth over Flat Color** — Backgrounds are deep and absorbing. Color is used environmentally—specifically as a diffused halo—never as a harsh, flat paint.
3. **Friendly Restraint** — The darkness of the theme is balanced by fully rounded geometry, frosted glass textures, and warm off-white text, making it accessible and inherently B2C friendly.
4. **Subtle Tactility** — Depth is achieved through smoked glass transparencies and micro-border highlights (a mere fraction of white) to emulate light catching the edge of a premium physical material.
5. **Rhythmic Modularity** — Layouts alternate predictably between phone-led modules, stacked panels, and tidy grids, optimizing for fast, scroll-friendly narrative pacing.

### Strict Rules

* **No Loud Gradients or Blobs** — Avoid chaotic, unstructured shapes or multi-color neon gradients. Environmental light must feel intentional and grounded.
* **No Generic Accent Fills** — Buttons and active states do not rely on bright, generic primary colors. Interactive elements remain graphite or black with subtle luminous border highlights.
* **Fully Rounded CTAs** — All primary interactive calls-to-action must be fully rounded (`rounded-full`) to maintain the friendly, premium consumer aesthetic.
* **Single Environmental Halo** — The only major color injection is a diffused amethyst-blue light situated strictly behind the primary phone mockup.
* **Strict Centering** — Heroes, headers, and narrow copy blocks must remain strictly text-centered to maintain the classic, balanced landing page structure.

---

## Color Palette

### The Dark Canvas & Warm Lights

The palette is rooted in deep, light-absorbing darks, stepping up to warm, highly legible lights. The accent is atmospheric rather than structural.

```css
/* Canvas & Architecture (Darkest to Lightest) */
bg-[#050505]          /* Velvet Black: Absolute background, deepest canvas */
bg-[#121214]          /* Deep Graphite: Primary surface for panels and cards */
bg-[#18181b]          /* Elevated Graphite: Hover states, secondary panels */
bg-white/5            /* Smoked Glass: Base for frosted panels (requires backdrop-blur) */
bg-white/10           /* Smoked Glass Hover: Elevated frosted interaction */

/* Border Highlights (Light Catching Edges) */
border-white/[0.04]   /* Faint grid lines, ultra-subtle dividers */
border-white/[0.08]   /* Default structural card and panel borders */
border-white/[0.15]   /* Button borders, active card highlights */
border-white/[0.25]   /* Focused input rings, active CTA highlights */

/* The Atmospheric Light: Diffused Amethyst-Blue */
bg-violet-600/30      /* Exclusively used with blur-[120px] behind phone mockups */
text-violet-400       /* Very rare: Highlighting a single keyword or micro-badge icon */

/* Typography (Warm Off-White & Muted Slate) */
text-[#faf9f6]        /* Primary text, hero headlines, CTA labels (Warm Off-White) */
text-[#e7e5e4]        /* Secondary headings, emphasized body text */
text-[#a1a1aa]        /* Body copy, relaxed descriptions, accordion content (Muted Slate) */
text-[#71717a]        /* Micro-copy, subtle timestamps, input placeholders */
text-[#52525b]        /* Disabled states, faint system metadata */
```

### Destructive Actions

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

---

## Typography

Centered, legible, and classic. The system relies heavily on Inter or Helvetica to provide a neutral, invisible framework that lets the product shine.

### Font Weights

```css
font-normal      /* Relaxed body copy, accordion descriptions, feature details */
font-medium      /* Buttons, social proof chips, frosted micro-badges */
font-semibold    /* Centered hero headlines, stacked panel titles, FAQ triggers */
/* Ultra-bold and ultra-light weights are avoided to maintain premium, highly readable restraint */
```

### Font Size Scale

```css
text-xs          /* Social proof metadata, footer links (12px) */
text-sm          /* Frosted micro-badges, secondary button labels (14px) */
text-base        /* Relaxed body copy, accordion text, standard inputs (16px) */
text-lg          /* Feature grid titles, CTA buttons (18px) */
text-xl          /* Sub-section headers, alternating module titles (20px) */
text-2xl         /* Stacked rounded panel headers (24px) */
text-4xl         /* The Hero Headline standard — explicitly paired with tracking-tight (36px) */
text-5xl         /* Scaling for large desktop heroes, max size (48px) */
```

### Letter Spacing & Transforms

```css
tracking-tight   /* Exclusively for Hero Headlines (text-4xl and up) */
tracking-normal  /* All body copy, accordion text, panel descriptions */
tracking-wide    /* Micro-badges and tiny eyebrow tags */

uppercase        /* Exclusively for small categorical eyebrow tags above headers */
```

### Hierarchy Examples

| Element | Size | Family | Weight | Color | Alignment |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 4xl | Inter/Helvetica | semibold | Warm Off-White | text-center |
| Relaxed Body | base | Inter/Helvetica | normal | Muted Slate | text-center |
| Section Title | 2xl | Inter/Helvetica | semibold | Warm Off-White | text-center |
| Micro-Badge | sm | Inter/Helvetica | medium | Warm Off-White | inline-flex |
| Feature Grid | base | Inter/Helvetica | normal | Muted Slate | text-left |

---

## Animation System

### Core Philosophy: Ambient & Smooth

Motion should feel like shifting glass and slow-breathing light. Nothing snaps aggressively; everything glides and dissolves.

### Atmospheric Halo Pulse

The amethyst-blue light behind the phone mockup slowly breathes to create depth.

```tsx
animate={{ opacity: [0.4, 0.6, 0.4], scale: [0.95, 1.05, 0.95] }}
transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
```

### Accordion / Panel Expansion

Clean, linear smoothing for FAQs and stacked panels.

```tsx
initial={{ height: 0, opacity: 0 }}
animate={{ height: "auto", opacity: 1 }}
transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
```

---

## UI Components

### Faint Hero Grid

Provides strict architectural grounding behind the centered hero typography, preventing the velvet black background from feeling like an empty void.

```tsx
<div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff0a_1px,transparent_1px),linear-gradient(to_bottom,#ffffff0a_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
```

### The Phone Halo

A heavily diffused, singular light source positioned directly behind the center or alternating phone mockup.

```tsx
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[300px] h-[500px] bg-violet-600/30 rounded-full blur-[120px] pointer-events-none" />
```

### Centered Narrow Container

The structural backbone of the B2C storytelling experience.

```tsx
<section className="max-w-2xl mx-auto px-6 py-24 flex flex-col items-center text-center">
  {/* Content */}
</section>
```

---

## Component Catalog

### Stacked Rounded Panels & Feature Grids

Deep graphite containers with generous border radii and light-catching edges.

```tsx
// Stacked Rounded Panel (Narrow Section)
"bg-[#121214] border border-white/[0.08] rounded-3xl p-8 w-full flex flex-col items-center text-center shadow-2xl shadow-black/50"

// Tidy Feature Grid Item (Within a grid-cols-2 or 3)
"flex flex-col items-start text-left p-6 rounded-2xl bg-white/[0.02] border border-white/[0.04] hover:bg-white/[0.04] transition-colors"
```

### Buttons

Fully rounded geometry relying on structural contrast rather than loud color fills.

```tsx
// Primary CTA Button (Graphite with Subtle Highlight)
"bg-[#18181b] text-[#faf9f6] font-medium text-lg rounded-full px-8 py-3 border border-white/[0.15] hover:bg-white/10 hover:border-white/[0.25] transition-all shadow-lg"

// Secondary App Store / Play Store Chip
"bg-black text-[#faf9f6] font-medium text-sm rounded-full px-6 py-2.5 border border-white/[0.08] hover:bg-[#121214] transition-all"
```

### Frosted Micro-Badges & Social Proof Chips

Small indicators that sit above the hero headline or below the CTA.

```tsx
// Frosted Micro-Badge (Eyebrow above Hero)
"inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 backdrop-blur-md text-[#e7e5e4] text-sm font-medium"

// Social Proof Chip (Below CTA)
"flex items-center gap-3 px-4 py-2 rounded-full bg-[#121214]/80 border border-white/[0.04] text-[#a1a1aa] text-xs backdrop-blur-sm"
```

### Clean Accordion FAQs

Minimalist interactive rows. No bounding boxes per item—just clean dividers.

```tsx
// FAQ Row Wrapper
"w-full border-b border-white/[0.08] py-4 last:border-0"

// FAQ Trigger
"flex justify-between items-center w-full text-left text-[#faf9f6] font-semibold text-lg hover:text-white transition-colors"

// FAQ Muted Slate Copy (Expanded)
"text-[#a1a1aa] text-base font-normal leading-relaxed pt-2 pb-4 text-left"
```

---

## Quality Checklist

* [ ] Is the primary hero headline perfectly centered, sized around `text-4xl`, and formatted in Inter/Helvetica?
* [ ] Are all primary and secondary buttons fully rounded (`rounded-full`)?
* [ ] Did you restrict background colors exclusively to velvet black and deep graphite?
* [ ] Is there exactly *one* diffused amethyst-blue halo in the hero/phone section, heavily blurred to avoid sharp edges?
* [ ] Have you verified that no loud gradients, blobs, or neon structural shapes exist on the page?
* [ ] Are sections noticeably narrow and text-centered to maintain an effortless, guided B2C reading experience?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Velvet black (`#050505`) and deep graphite (`#121214`) canvases.
* Warm off-white (`#faf9f6`) for headlines and muted slate (`#a1a1aa`) for relaxed paragraphs.
* Fully rounded buttons with subtle, razor-thin white border highlights.
* Smoked glass transparencies (`bg-white/5` with `backdrop-blur`).
* A singular, deeply blurred amethyst halo highlighting a device mockup.
* Centered layout structures and clean, alternating phone-led rows.

### ✗ Not Allowed

* Generic accent fills (e.g., solid purple or bright blue primary buttons).
* Loud, multi-color gradient blobs anywhere in the background.
* Sharp square corners on primary buttons or major panel containers.
* Left-aligned text in the primary hero section.
* Stark, pure white (`#ffffff`) typography that causes eye strain against the black canvas.