Velvet Aurora App Editorial Design System

/velvetAuroraAppEditorialDesignSystem
A dark, premium editorial system evoking midnight galleries. It uses velvet blacks, strategic aurora gradients, and vertical storytelling for atmospheric, high-end app launches with strict minimalism and structured, magazine-like pacing.
0 likes
0 bookmarks
Jun 17, 2026
Design System Content
# Velvet Aurora App Editorial Design System

A design language for premium, dark-themed, atmospheric application launches.

---

## Philosophy

> "True premium after-dark aesthetics are defined by the shadows we keep, illuminated only by precision."

This system creates interfaces that feel like a midnight gallery or a high-end editorial feature. The design blends immaculate, structured app-launch foundations with a deeply atmospheric, velvety finish. Depth is achieved not through lightness, but through profound, light-absorbing blacks and the strategic, razor-thin placement of ethereal color.

### Core Beliefs

1. **The Aurora is a thread, not a blanket** — Color exists exclusively as delicate edge-lighting, narrow device halos, and subtle text gradients. Color must never flood a background.
2. **Vertical Storytelling** — The journey is a continuous scroll down a central spine. We avoid desktop-heavy split grids in favor of a cinematic, alternating vertical rhythm.
3. **Velvet Contrast** — Backgrounds recede completely into velvet black and midnight graphite. Typography emerges in muted pearl and slate-gray, creating calm, low-strain legibility.
4. **Editorial Pacing** — Lower sections utilize oversized, heavily rounded panels, translucent captions, and fine dividers to pace the content like a high-end digital magazine.
5. **The Compact Hero** — The top of the page is an anchor: a tightly grouped, centered composition that rests directly on the product, bringing the user instantly to the physical reality of the app.

### Strict Rules

* **No Decorative Blobs** — Broad, glowing background orbs and loud, sprawling gradients are strictly forbidden. They ruin the precision of the dark aesthetic.
* **No Desktop-Heavy Split Grids** — Avoid side-by-side 50/50 layouts that feel like standard B2B SaaS. Center the narrative or alternate oversized asymmetric modules.
* **Text-Centric Accents** — Multi-color aurora gradients (cyan, turquoise, lavender, rose) are reserved for single key words (`text-transparent bg-clip-text`) or 1px borders. 
* **Strict Center Gravity** — The hero must maintain absolute center alignment with a tidy, constrained maximum width.

---

## Color Palette

### The Midnight Scale

The canvas relies on deeply crushed blacks and extremely subtle graphite shifts. Text moves from a soft, non-blinding pearl to deeply receded slate.

```css
/* Backgrounds (Darkest to Lightest) */
bg-black              /* Velvet Black: The ultimate void canvas (#000000) */
bg-zinc-950           /* Midnight Graphite: Oversized editorial panels (#09090b) */
bg-zinc-900/50        /* Subtle module differentiation, hover states */
bg-black/60           /* Frosted navbar backgrounds (requires backdrop-blur) */
bg-white/5            /* Translucent structural fills, tidy icon grid boxes */

/* Borders & Dividers */
border-white/5        /* Fine dividers, panel outlines */
border-white/10       /* Active panel outlines, input borders */
border-zinc-800       /* Structural separations inside panels */

/* Typography (Muted Pearl to Slate) */
text-zinc-100         /* Muted Pearl: Primary hero headlines, active tabs */
text-zinc-300         /* Secondary headers, primary module copy */
text-zinc-400         /* Slate-Gray: Standard body text, short paragraphs */
text-zinc-500         /* Translucent captions, calm FAQ answers */
text-zinc-600         /* Extremely muted metadata, fine print */

```

### The Aurora Accents

Cyan, Turquoise, Lavender, and Rose. These never exist as solid background fills. They are light sources.

```css
/* Text Gradients (Single words or short phrases only) */
bg-gradient-to-r from-cyan-400 via-indigo-400 to-rose-400 bg-clip-text text-transparent

/* Edge-Lighting & Borders */
border-t-cyan-400/50       /* Delicate CTA edge-lighting */
ring-1 ring-turquoise-500/20 /* Subdued focused inputs */

/* Device Halos (Strictly behind product mockups) */
shadow-[0_0_40px_-10px_rgba(167,139,250,0.15)] /* Lavender halo */
shadow-[0_0_40px_-10px_rgba(45,212,191,0.15)]  /* Turquoise halo */

```

---

## Typography

Built exclusively on **Inter** or **Helvetica**. The typography feels ultra-modern, neo-grotesque, and perfectly anti-aliased against the dark canvas. 

### Font Weights

```css
font-normal      /* Core slate-gray paragraphs, captions, FAQs */
font-medium      /* Muted pearl body text, active tabs, rounded CTA text */
font-semibold    /* Text-4xl Hero headlines, module titles */
/* font-black is prohibited. Presence is established via crisp contrast, not bulk. */

```

### Font Size Scale

```css
text-xs          /* Translucent captions, fine print beneath product mockups */
text-sm          /* Tidy icon grid labels, navbar links, standard buttons */
text-base        /* Standard editorial body, short hero paragraphs */
text-lg          /* Module subheaders, FAQ questions */
text-2xl         /* Editorial panel titles */
text-4xl         /* Hero headline (Strictly constrained to 4xl for a compact feel) */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Special |
| --- | --- | --- | --- | --- |
| Hero Headline | 4xl | semibold | text-zinc-100 | tight tracking |
| Hero Paragraph | base | normal | text-zinc-400 | max-w-md center |
| Editorial Title | 2xl | medium | text-zinc-100 | none |
| Captions | xs | normal | text-zinc-500 | uppercase tracking-wide |
| Navbar Links | sm | medium | text-zinc-400 | hover:text-zinc-100 |

---

## Layout & Animation System

### Core Layout Philosophy: The Vertical Story

1.  **Compact Hero:** Tightly stacked center column. Frosted navbar at the absolute top -> 4xl Headline -> Short base-size paragraph -> Rounded CTA pair -> Immediate polished phone mockup bridging the fold.
2.  **Editorial Flow:** Beneath the hero, layout shifts to alternating (left/right bias) oversized rounded panels with generous internal padding, separated by fine 1px line dividers.

### Animations: Atmospheric Emergence

Elements don't slide aggressively; they fade up from the velvet black like a slow exposure.

```tsx
// Standard Module Reveal
initial={{ opacity: 0, filter: 'blur(4px)', y: 20 }}
animate={{ opacity: 1, filter: 'blur(0px)', y: 0 }}
transition={{ duration: 0.7, ease: [0.16, 1, 0.3, 1] }}

// Hover Halo (Product Mockup)
whileHover={{ boxShadow: "0 0 60px -15px rgba(45,212,191,0.25)" }}
transition={{ duration: 0.5 }}

```

---

## Component Catalog

### Navigation & Hero Structure

```tsx
// Frosted Navbar
"fixed top-0 w-full h-16 bg-black/60 backdrop-blur-md border-b border-white/5 flex items-center justify-center z-50"

// Compact Hero Container
"flex flex-col items-center text-center pt-32 pb-12 px-6 max-w-2xl mx-auto"

// Polished Phone Mockup Container (Sits immediately beneath CTAs)
"relative mt-12 mx-auto w-full max-w-[320px] rounded-[3rem] shadow-[0_0_40px_-10px_rgba(167,139,250,0.15)] ring-1 ring-white/10"

```

### Call to Action (Rounded CTA Pair)

Buttons are entirely pill-shaped (fully rounded). One commands the Aurora, the other recedes into the velvet.

```tsx
// Primary CTA (Aurora Edge-Lit)
"rounded-full bg-zinc-900 border border-white/10 border-t-cyan-400/30 text-zinc-100 px-6 py-2.5 text-sm font-medium shadow-[0_2px_10px_-3px_rgba(45,212,191,0.2)] hover:bg-zinc-800 transition-all"

// Secondary CTA (Muted Pearl Outline)
"rounded-full bg-transparent border border-white/10 text-zinc-300 px-6 py-2.5 text-sm font-medium hover:bg-white/5 hover:text-zinc-100 transition-all"

```

### Editorial Panels

Oversized, vastly rounded corners, reading like a digital magazine spread.

```tsx
// Oversized Product Module
"w-full max-w-4xl mx-auto rounded-[2.5rem] bg-zinc-950 border border-white/5 p-12 lg:p-16 flex flex-col md:flex-row items-center gap-12"

// Tidy Icon Grid Item
"flex flex-col items-center justify-center p-6 rounded-2xl bg-white/[0.02] border border-white/5 hover:bg-white/[0.04] transition-colors"

```

### Typography Elements

```tsx
// Translucent Caption
"text-xs font-normal text-zinc-500 uppercase tracking-widest"

// Calm FAQ Block
"border-b border-white/5 py-6 group cursor-pointer"
// FAQ Question: "text-lg text-zinc-300 group-hover:text-zinc-100 transition-colors"
// FAQ Answer: "text-base text-zinc-500 mt-2"

```

---

## Quality Checklist

* [ ] Is the primary hero headline locked exactly to `text-4xl` with tight tracking?
* [ ] Does the hero section feel highly compact, resting directly atop a glowing device mockup?
* [ ] Have all broad decorative background blobs and heavy gradients been removed?
* [ ] Are the Aurora colors (cyan, turquoise, lavender, rose) restricted *only* to text-gradients, 1px edge lights, or soft device halos?
* [ ] Are lower sections housed in heavily rounded (`rounded-[2.5rem]`) oversized editorial panels?
* [ ] Do secondary actions and text utilize the slate-gray (`zinc-400`/`zinc-500`) scale to avoid high-contrast fatigue?
* [ ] Does the page read sequentially as a vertical product story rather than a complex multi-column dashboard?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Velvet blacks (`bg-black`) and midnight graphites (`bg-zinc-950`).
* Delicate Aurora halos directly beneath or behind high-fidelity product imagery.
* Text gradients applied to 1-3 critical headline words.
* Oversized border-radii for primary product panels.
* Translucent, widely-tracked captions floating above grid items.

### ✗ Not Allowed

* Split-screen desktop layouts (e.g., 50vw text on left, 50vw image on right stretching to screen edges).
* Radial gradients painted across the background canvas.
* Sharp, squared-off (`rounded-none` or `rounded-sm`) primary buttons or hero panels.
* High-opacity solid color fills for buttons or badges.
* Complex, chaotic layouts that break the single-column scrolling narrative rhythm.