Velvet Graphite App Showcase

/velvetGraphiteAppShowcase
A cinematic, glassmorphic design system for premium dark web apps—mono-chrome backgrounds, warm ivory CTAs, soft whites, and pill-shaped components inspired by high-end Framer templates and native OS layouts.
Jul 10, 2026
Design System Content
# Velvet Graphite App Showcase

A design language for premium, dark-themed application launch experiences.

---

## Philosophy

> "Shadows provide the canvas; frosted light provides the architecture."

This system creates landing pages that feel like high-end cinematic trailers for digital products. It relies on extreme monochrome restraint, deep atmospheric backgrounds, and precision glassmorphism. The aesthetic is heavily inspired by top-tier Framer templates—relying on massive, deliberate spacing and perfectly calibrated typography rather than aggressive colors or complex graphics. 

### Core Beliefs

1. **Cinematic Immersion** — The viewport is a lens. Full-bleed imagery with heavy dark overlays creates an infinite, theatrical canvas.
2. **Monochrome Restraint** — The structural palette is strictly grayscale (velvet black to soft white). Color is almost entirely absent.
3. **Warm Ivory as the Anchor** — The single conversion color is a tactile, premium Warm Ivory. It acts as a beacon in the dark, drawing the eye naturally without shouting.
4. **Frosted Depth over Shadows** — We do not use dark drop-shadows on dark backgrounds. Depth is achieved via `backdrop-blur`, soft translucent borders, and light-bleed overlays.
5. **Pill-Shaped Tactility** — Call-to-action elements are fully rounded (pill-shaped), contrasting the sharp, Framer-level spacing of the structural grid.

### Strict Rules

* **Strict Typographic Hierarchy** — Type scale is tightly controlled. No massive 120px headers; the hero peaks elegantly at 48px to maintain a sophisticated, app-like density.
* **No Hard White** — Absolute `#FFFFFF` is avoided. Text and highlights use "Soft White" to prevent optical halation on deep black backgrounds.
* **No Square Buttons** — All primary interaction points must be fully rounded (`rounded-full`).
* **System Fonts Only** — Strictly Inter, Helvetica Neue, or SF Pro. The neutrality of the typeface allows the glassmorphic UI to stand out.
* **Quiet Dividers** — Section breaks are invisible or rely on 1px barely-there borders (`white/5`).

---

## Color Palette

### The Graphite & Velvet Scale

The palette starts at an abyssal velvet black and steps up through translucent graphites and smoke grays. The accent is a rich, premium Warm Ivory that implies physical, high-end paper or luxury hardware.

```css
/* Backgrounds (Darkest to Lightest) */
bg-velvet-950         /* Deepest viewport canvas (#050505) */
bg-velvet-900         /* Dark overlay for cinematic hero images (#0a0a0a/80) */
bg-graphite-800       /* Solid fallback for frosted containers (#171717) */
bg-graphite-800/40    /* Primary glass container backdrop (requires backdrop-blur) */
bg-graphite-700/50    /* Hover state for interactive glass panels */

/* Borders & Dividers */
border-white/5        /* Quiet dividers, structural sectioning */
border-white/10       /* Frosted frames, device mockup outlines */
border-white/20       /* Active focus rings, hover borders */

/* The Beacon: Warm Ivory (Accent & Conversion) */
bg-ivory-400          /* Primary CTA pill buttons (#F5F5F0) */
text-ivory-950        /* Text INSIDE the primary CTA button (#0A0A0A) */
text-ivory-400        /* Ghost button text, subtle text links */
ring-ivory-400/30     /* Focus state glow for inputs */

/* Text Hierarchy (Soft White to Smoke Gray) */
text-white/95         /* Soft white: Hero headings, active stats */
text-white/70         /* Smoke gray: Paragraphs, feature descriptions */
text-white/40         /* Graphite: Labels, quiet metadata, footers */
text-white/20         /* Disabled states, placeholder text */

```

### Destructive Actions

```css
bg-red-900/20
text-red-400
border-red-900/30

```

---

## Typography

The font stack is strictly **Inter, Helvetica Neue, or SF Pro**. The hierarchy is notably compact, avoiding massive display sizes in favor of a refined, highly legible scale that mimics native OS environments.

### Font Weights

```css
font-regular     /* Main paragraphs, long-form descriptions */
font-medium      /* Standard labels, pill CTAs, feature bullets */
font-semibold    /* Hero headings, section titles, focused data */
/* font-black or font-light are forbidden to maintain native-app uniformity */

```

### Strict Size Scale

```css
text-[13px]      /* Tiny system labels, quiet footer links (13-14px range) */
text-[14px]      /* Standard labels, metadata, pill CTA text */
text-[18px]      /* Secondary paragraphs, subtitle text */
text-[20px]      /* Primary hero paragraphs (18-20px range) */
text-[32px]      /* Feature section titles */
text-[38px]      /* Primary section titles (32-38px range) */
text-[48px]      /* Centered hero heading (40-48px range, extremely compact) */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* Headings (40-48px) and Section Titles (32-38px) */
tracking-normal  /* Paragraphs (18-20px) */
tracking-wide    /* Labels (13-14px) */

uppercase        /* ONLY used for tiny pre-header labels (13px) */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- |
| Hero Heading | 48px | semibold | white/95 | tight |
| Section Title | 38px | semibold | white/95 | tight |
| Hero Paragraph | 20px | regular | white/70 | normal |
| Feature Body | 18px | regular | white/70 | normal |
| Button/Label | 14px | medium | ivory-950 (if on ivory) | wide |

---

## Animation System

### Core Philosophy: The Cinematic Fade

Everything loads as if a theater's lights are slowly turning on. Elements float gently upwards through a veil of blur.

### Page Transitions (The Glass Reveal)

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

```

### Glassmorphic Hover

```tsx
whileHover={{
  backgroundColor: "rgba(255, 255, 255, 0.08)",
  borderColor: "rgba(255, 255, 255, 0.15)",
  transition: { duration: 0.2 }
}}

```

---

## UI Components

### The Cinematic Hero Container

The cornerstone of the landing page. A full-viewport wrapper with a cinematic background, dark overlay, and a perfectly centered glass container.

```tsx
<section className="relative w-full h-screen flex items-center justify-center overflow-hidden">
  {/* Full-bleed background with cinematic dark overlay */}
  <div className="absolute inset-0 bg-[url('cinematic-bg.jpg')] bg-cover bg-center" />
  <div className="absolute inset-0 bg-velvet-950/80 mix-blend-multiply" />
  
  {/* Centered Translucent Glass Container */}
  <div className="relative z-10 flex flex-col items-center max-w-2xl px-6 py-12 
                  bg-graphite-800/30 backdrop-blur-2xl border border-white/10 rounded-3xl">
    <AppIcon className="w-16 h-16 rounded-2xl mb-6 shadow-2xl" />
    <h1 className="text-[48px] font-semibold text-white/95 tracking-tight text-center mb-4">
      Flawless execution.
    </h1>
    <p className="text-[20px] text-white/70 text-center mb-8 max-w-md">
      The only platform engineered for perfect harmony.
    </p>
    <div className="flex gap-4">
      <PrimaryPillCTA />
      <GhostPillCTA />
    </div>
  </div>
</section>

```

### Frosted Device Mockups

Displayed in a row directly beneath the hero. Devices are wrapped in glass frames rather than flat vector outlines.

```tsx
<div className="flex gap-8 overflow-x-auto pb-12 snap-x">
  <div className="snap-center shrink-0 w-[300px] h-[600px] p-2 rounded-[2.5rem] 
                  bg-white/5 backdrop-blur-md border border-white/10 shadow-2xl">
    <img src="app-screen-1.jpg" className="w-full h-full rounded-[2rem] object-cover" />
  </div>
</div>

```

### Alternating Feature Layout

Image-right/copy-left layouts separated by quiet dividers. Media is always softly rounded.

```tsx
<section className="grid grid-cols-1 md:grid-cols-2 gap-16 py-32 border-t border-white/5 items-center">
  <div className="flex flex-col items-start pr-12">
    <h2 className="text-[38px] font-semibold text-white/95 tracking-tight mb-6">
      Precision tracking.
    </h2>
    <p className="text-[18px] text-white/70 leading-relaxed">
      Monitor every interaction in real-time with our completely rebuilt engine.
    </p>
  </div>
  <div className="relative aspect-square rounded-3xl overflow-hidden border border-white/10">
    <img src="feature-ui.jpg" className="w-full h-full object-cover" />
  </div>
</section>

```

---

## Component Catalog

### Call-to-Action Buttons (Pills)

The only fully opaque, brightly colored element on the page.

```tsx
// Primary Conversion Pill (Warm Ivory)
"bg-[#F5F5F0] text-[#0A0A0A] text-[14px] font-medium tracking-wide rounded-full px-8 py-3.5 hover:scale-[1.02] active:scale-[0.98] transition-transform"

// Secondary/Ghost Pill
"bg-transparent border border-white/20 text-white/95 text-[14px] font-medium tracking-wide rounded-full px-8 py-3.5 hover:bg-white/5 transition-colors"

```

### Badges & Labels

```tsx
// Pre-header Label
"text-[13px] text-white/40 uppercase tracking-widest font-medium mb-3"

```

### Polished Dark Footer

```tsx
<footer className="w-full py-12 border-t border-white/5 bg-velvet-950 flex justify-between items-center px-12">
  <Logo className="opacity-40 grayscale" />
  <div className="flex gap-6 text-[13px] text-white/40">
    <a href="#" className="hover:text-white/95 transition-colors">Privacy</a>
    <a href="#" className="hover:text-white/95 transition-colors">Terms</a>
  </div>
</footer>
```

---

## Quality Checklist

* [ ] Is the Hero heading strictly bounded between 40px and 48px?
* [ ] Are all primary and secondary buttons perfectly rounded pills (`rounded-full`)?
* [ ] Is the primary CTA using the Warm Ivory accent color against the dark backdrop?
* [ ] Do all containers and device frames utilize `backdrop-blur` and `border-white/10` rather than flat gray fills?
* [ ] Is the background a true velvet black (`#050505` to `#0a0a0a`) rather than a washed-out mid-gray?
* [ ] Are section dividers "quiet" (no thicker than 1px, no brighter than `white/5`)?
* [ ] Does the Hero section span the full viewport (`100vh`) with a cinematic, darkened photographic or 3D background?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Strict adherence to Inter, Helvetica Neue, or SF Pro.
* Extensive use of `backdrop-blur` for floating panels, headers, and device mockups.
* Deep, pitch-black canvases with subtle, localized light bleeds.
* Perfectly rounded (pill-shaped) interactive targets.
* Wide spacing (Framer-level paddings of 128px+ between sections).

### ✗ Not Allowed

* Typography larger than 48px (destroys the compact, premium app aesthetic).
* Square or slightly-rounded (`rounded-md`) buttons. All CTAs must be pills.
* Saturated accent colors (no neon blue, vibrant purple, or bright green). Use Warm Ivory exclusively.
* Drop shadows on dark containers (rely entirely on border-white/10 and blur to establish hierarchy).
* Solid white `#FFFFFF` text (always use soft white like `white/95` to avoid harsh contrast).
Preview