Violet Halo Mobile Classic

/violetHaloMobileClassic
A premium, dark design system for app launches—combining mobile-native structure, matte graphite canvases, and a single soft violet halo to maximize conversion with minimalist, focused elegance.
0 likes
0 bookmarks
Jun 17, 2026
Design System Content
# Violet Halo Mobile Classic

A design language for premium, conversion-focused dark app-launch interfaces.

---

## Philosophy

> "Restrained luminosity stages the product; classic structure drives the conversion."

This system creates app-launch experiences that feel like an exclusive, dimly-lit keynote stage. By bringing mobile-native architectural rhythms to desktop viewing, the design maintains absolute focus. The interface relies on subtle glows, deep graphite canvases, and polished phone mockups to build premium desirability without overwhelming the user with loud visual noise.

### Core Beliefs

1. **The Stage is Sacred** — The centered phone mockup is the absolute focal point. All surrounding elements exist purely to elevate and frame the device.
2. **Mobile-Native Rhythm on Desktop** — Desktop sprawl dilutes focus. Content remains tightly contained in narrow, vertically stacked modules that mirror the scroll logic of a mobile device.
3. **Restrained Illumination** — Light is treated as a physical, localized element. A single soft violet halo acts as a spotlight behind the product, strictly contained and never bleeding into edge-to-edge gradients.
4. **Classic Conversion Structure** — Navigation and action logic follow proven, classic patterns. Fully rounded, high-contrast CTAs anchor the journey without decorative ambiguity.
5. **Material Contrast** — The interface relies on the friction between a matte graphite canvas, translucent charcoal glass, and crisp off-white typography.

### Strict Rules

* **Inter or Helvetica Only** — Typography must remain purely structural and invisible. No expressive display serifs or geometric novelties.
* **Hero-Restricted Grid** — Faint technical gridlines are permitted *only* in the hero section to ground the phone staging. The rest of the canvas must remain void-like.
* **No Loud Gradients** — Backgrounds remain flat deep graphite. Gradients are strictly reserved for the localized radial halo behind the mockup.
* **Fully Rounded Actions** — Primary interactive elements (CTAs) must use maximum border-radius (`rounded-full`) to contrast against the sharp technical grid.
* **No Desktop Sprawl** — Content containers must not exceed narrow column widths (e.g., 400px–480px) even on ultra-wide desktop monitors. 

---

## Color Palette

### Monochromatic & Illumination Scale

The palette uses a matte, deep graphite base elevated by translucent charcoal layers. Typography utilizes a warm off-white for headers and a muted slate for body content, creating a comfortable low-contrast reading experience. 

```css
/* Canvas & Containers (Darkest to Lightest) */
bg-zinc-950           /* Deep graphite canvas (#09090b) - The void */
bg-zinc-900           /* Solid charcoal sections (#18181b) */
bg-zinc-800/60        /* Charcoal glass modules, backdrop-blurred */
bg-zinc-800/40        /* Subtle glass labels, inactive compact cards */
bg-zinc-700/50        /* Hover states for glass components */
bg-black              /* Pure black, reserved strictly for primary CTAs */

/* Borders & Structure */
border-white/5        /* Faint technical grid lines (Hero only) */
border-zinc-800       /* Default structural bounds for glass cards */
border-zinc-700       /* Active states, focused boundaries */

/* The Illumination: Soft Violet Halo */
bg-violet-500/20      /* The localized radial glow behind the staging */
shadow-[0_0_80px_rgba(139,92,246,0.15)] /* Centered phone staging aura */
border-violet-500/30  /* Extremely subtle active states (rare) */

/* Text Hierarchy */
text-stone-50         /* Warm off-white: Headings, Hero copy, Active actions (#fafaf9) */
text-slate-400        /* Muted slate: Body copy, FAQ descriptions (#94a3b8) */
text-slate-500        /* System hints, disabled labels, footer links */

```

---

## Typography

The typographic system is built entirely on **Inter** or **Helvetica**. It is stripped down, legible, and structurally engineered for conversion.

### Font Weights

```css
font-normal      /* Core body copy, FAQ descriptions, glass labels */
font-medium      /* Feature module titles, standard navigation links */
font-semibold    /* High-priority CTAs, stacked module headers */
font-bold        /* Hero headlines (coupled with tracking-tight) */
```

### Font Size Scale

```css
text-xs          /* Glass labels, micro metadata, legal disclaimers (12px) */
text-sm          /* Standard slate body copy, compact card text (14px) */
text-base        /* Primary CTA text, FAQ row questions (16px) */
text-lg          /* Stacked feature module titles (18px) */
text-2xl         /* Secondary section headers */
text-4xl         /* Hero headline - strict standard for concise impact */
```

### Letter Spacing & Transforms

```css
tracking-tight   /* Exclusively for the text-4xl Hero headline */
tracking-normal  /* All body copy and UI elements */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- |
| Hero Headline | 4xl | bold | stone-50 | tight |
| Feature Title | lg | medium | stone-50 | normal |
| Body Content | sm | normal | slate-400 | normal |
| Primary CTA | base | semibold | stone-50 | normal |
| Glass Labels | xs | normal | slate-400 | normal |

---

## Animation System

### Core Philosophy: The Polished Unveil

Animations should feel like physical glass sliding over velvet. Movements are restricted to smooth vertical translations and subtle opacity shifts.

### Mobile-Native Slide Up

Used for stacking feature modules as the user scrolls down the canvas.

```tsx
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-40px" }}
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
```

### The Violet Breathe (Halo Focus)

The violet halo maintains a nearly imperceptible, continuous breathing loop behind the centered mockup.

```tsx
animate={{ opacity: [0.15, 0.25, 0.15], scale: [0.98, 1.02, 0.98] }}
transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
```

---

## UI Components

### The Centered Staging Halo

The single source of light. Placed absolutely behind the phone mockup, strictly avoiding the edges of the screen.

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

### Hero Technical Grid

A faint structural background strictly limited to the top staging section.

```tsx
<div className="absolute inset-0 bg-[linear-gradient(to_right,rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:linear-gradient(to_bottom,black_20%,transparent_100%)]" />
```

### Mobile-Native Container

The structural wrapper that forces desktop screens to maintain a high-conversion, single-column reading rhythm.

```tsx
<div className="max-w-md mx-auto w-full px-6 flex flex-col gap-6">
  {/* Stacked modules go here */}
</div>
```

---

## Component Catalog

### Call to Actions (CTAs)

Fully rounded, pitch black or deep graphite. Classic, unmistakable conversion targets.

```tsx
// Primary Conversion CTA
"w-full bg-black text-stone-50 text-base font-semibold rounded-full px-6 py-4 flex items-center justify-center hover:bg-zinc-900 transition-colors shadow-lg border border-white/5"

// Secondary App-Store / Link CTA
"w-full bg-zinc-800/50 backdrop-blur-md text-stone-50 text-sm font-medium rounded-full px-6 py-3 border border-zinc-700/50 hover:bg-zinc-700/50 transition-colors"
```

### Charcoal Glass Cards & Modules

Used for stacked feature modules and compact grids.

```tsx
// Stacked Feature Module
"w-full bg-zinc-800/60 backdrop-blur-xl border border-zinc-700/50 rounded-2xl p-6 flex flex-col gap-3 hover:bg-zinc-700/40 transition-colors"

// Compact Feature Grid Card (Side-by-side in a 2-col grid within the max-w-md container)
"flex-1 bg-zinc-900 border border-zinc-800 rounded-xl p-4 flex flex-col gap-2"
```

### Glass Labels

Used for category tags, version numbers, or micro-metadata floating above the Hero.

```tsx
"inline-flex items-center px-3 py-1 rounded-full bg-zinc-800/40 backdrop-blur-md border border-zinc-700 text-xs text-slate-400 font-normal"
```

### Elegant FAQ Rows

Minimalist, tightly stacked expandable rows. No bulky borders.

```tsx
// FAQ Row Container
"w-full border-b border-zinc-800 py-4 flex flex-col gap-2 cursor-pointer hover:border-zinc-600 transition-colors"

// FAQ Question (Warm off-white)
"text-base font-medium text-stone-50 flex justify-between items-center"

// FAQ Answer (Muted slate)
"text-sm font-normal text-slate-400 leading-relaxed"
```

---

## Quality Checklist

* [ ] Is the primary hero copy set exactly to Inter/Helvetica, `text-4xl`, and `tracking-tight`?
* [ ] Is the violet halo strictly localized behind the phone mockup without bleeding into a full-screen gradient?
* [ ] Does the page layout restrict body content to a mobile-native narrow container (e.g., `max-w-md`) on desktop?
* [ ] Are all primary call-to-action buttons heavily rounded (`rounded-full`) and styled in solid black or graphite?
* [ ] Is the faint technical grid isolated *only* to the hero section?
* [ ] Is the typography color mapping strictly observed? (Warm off-white for headers, muted slate for body).

---

## Allowed vs Not Allowed

### ✓ Allowed

* Deep graphite (`zinc-950`) and charcoal (`zinc-900`) base layers.
* Translucent charcoal glass modules overlapping standard backgrounds.
* A single, soft violet radial blur centered behind the product mockup.
* Narrow, vertically-stacked content modules mimicking mobile scrolling.
* Fully rounded buttons (`rounded-full`).

### ✗ Not Allowed

* Edge-to-edge desktop grids (content must remain in narrow central containers).
* Colorful UI elements, solid violet buttons, or vibrant icons.
* Linear or radial gradients used as section backgrounds.
* Sharp or slightly rounded corners on primary CTAs (`rounded-md` or `rounded-lg` are forbidden for actions).
* Faint technical grid lines extending into the body content or footer.