Smoked iOS Editorial Stack

/smokedIosEditorialStack
A cinematic, mobile-native design language for dark, high-end editorial storytelling. Emphasizes vertical rhythm, confident type, pure smoked palettes, and tactile, pill-shaped interactions in a device-centric, distraction-free UI.
0 likes
0 bookmarks
Jun 16, 2026
Design System Content
# Smoked iOS Editorial Stack

A design language for refined, dark-themed, mobile-native product storytelling.

---

## Philosophy

> "Depth is found in the shadows; clarity is forged in the contrast."

This system creates interfaces that feel like a high-end digital editorial magazine—immersive, cinematic, and inherently native. The design relies on a pure, smoked dark palette and confident typography to strip away digital noise. It rejects arbitrary decorations, utilizing crisp structural staging and subtle light-catching borders to guide the user vertically through a meticulously crafted story.

### Core Beliefs

1. **Center of Gravity** — The narrative flow is fiercely vertical and centered. The hero headline drops anchor, immediately followed by the focal device mockup, creating a grounded, symmetrical reading experience.
2. **Typography as Architecture** — Sans-serif headings (Inter or Helvetica Neue) in confident semibold weights provide the structural framing for the entire page. 
3. **Restrained Depth** — Elevation is achieved through frosted micro-treatments and ultra-fine border highlights, never through heavy, artificial lighting or generic colored shadows.
4. **Organic Modularity** — Content lives in beautifully rounded, vertically stacked editorial panels. The rhythm is dictated by the alternating rhythm of text, device modules, and simple, precise feature grids.
5. **The Absence of Color is a Feature** — We reject generic, brightly colored accent buttons. Interactivity is signaled through tactile, fully rounded graphite pills that mimic physical hardware buttons.

### Strict Rules

* **No Decorative Blobs** — Backgrounds must remain stark, smoked, and purposeful. Abstract shapes and gradients detract from the product photography and editorial copy.
* **No Generic Accent Buttons** — Primary interactions must use fully rounded graphite or near-black pills with subtle border highlights. No vibrant blue, green, or purple CTAs.
* **Semibold Heading Supremacy** — Headings strictly utilize a confident semibold weight to establish hierarchy. Thin or overly bold weights are prohibited for primary titles.
* **Mobile-Native Staging First** — The phone mockup is permanently staged directly beneath the hero copy. It is the protagonist of the visual hierarchy.
* **Pearl Over Pure White** — Typography should feel like light hitting matte paper. We use "muted pearl" tones rather than harsh, blinding `#FFFFFF`.

---

## Color Palette

### The Smoked Scale

The palette exists in a meticulous range of deep blacks, charcoals, and graphites, accented only by the delicate glow of frosted glass and muted pearl typography. 

```css
/* Backgrounds (Darkest to Lightest) */
bg-black              /* Main canvas absolute background (#000000) */
bg-zinc-950           /* Smoked black core backdrop, primary canvas (#09090b) */
bg-zinc-900           /* Charcoal editorial panels, alternating modules (#18181b) */
bg-zinc-800/80        /* Graphite gray feature cards, secondary containers */
bg-zinc-800/40        /* Frosted zones, inactive toggle states */
bg-zinc-700/50        /* Hover states for secondary interactive elements */

/* Border Highlights (The "Light Catch") */
border-white/5        /* Ultra-fine dividers, ambient structural lines */
border-white/10       /* Default highlights for rounded pills and panels */
border-white/15       /* Hover states, focused boundaries */
border-zinc-700       /* Stronger delineations in feature grids */

/* Typography: Muted Pearl & Graphite (5 Opacity Levels) */
text-zinc-100         /* Muted pearl — Primary hero headings, active numbers */
text-zinc-300         /* Secondary headings, bright body copy */
text-zinc-400         /* Standard editorial paragraph text */
text-zinc-500         /* Metadata, avatar proof text, elegant FAQ answers */
text-zinc-600         /* Subtle system hints, fine divider labels */

/* CTAs & Pills (No Generic Colors) */
bg-zinc-900           /* Primary CTA resting state (Charcoal/Graphite) */
bg-zinc-800           /* Primary CTA hover state */
ring-white/20         /* Focus ring for accessibility */
```

### Destructive Actions

```css
text-red-400/90       /* Muted alert text */
bg-red-950/30         /* Subtle destructive panel backdrops */
border-red-900/50
```

---

## Typography

The typographic system heavily leverages **Inter** or **Helvetica Neue**. It relies on confident semibold headings to create a modern, editorial backbone, contrasted against clean, highly readable body copy.

### Font Weights

```css
font-normal      /* Long-form editorial storytelling, FAQ answers, proof details */
font-medium      /* Badges, interactive pill labels, button actions */
font-semibold    /* MANDATORY for hero headlines, section headers, and sub-titles */
/* font-light and font-black are excluded to maintain uniform, confident density */
```

### Font Size Scale

```css
text-[11px]      /* Frosted micro-badges, soft avatar proof details */
text-xs          /* Fine divider labels, secondary metadata (12px) */
text-sm          /* Body copy in feature grids, standard buttons (14px) */
text-base        /* Standard editorial paragraphs, FAQ questions (16px) */
text-lg          /* Panel subheadings, introductory blurbs (18px) */
text-xl          /* Standard section titles within alternating modules */
text-2xl         /* Feature grid primary callouts */
text-4xl         /* The Hero Headline — centered strictly above concise copy */
```

### Letter Spacing & Transforms

```css
tracking-tight   /* text-4xl hero headers, text-2xl module headers */
tracking-normal  /* All editorial body copy */
tracking-wide    /* Frosted micro-badges, small uppercase system metadata */

capitalize       /* Pill labels */
uppercase        /* Micro-badges and ambient structural labels */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 4xl | semibold | text-zinc-100 | tight | none |
| Panel Titles | 2xl | semibold | text-zinc-100 | tight | none |
| Main Editorial | base | normal | text-zinc-400 | normal | none |
| Action Pills | sm | medium | text-zinc-200 | normal | capitalize |
| Micro-badges | [11px] | medium | text-zinc-300 | wide | uppercase |

---

## Animation System

### Core Philosophy: The Cinematic Reveal

Motion should mimic the slick, frictionless feeling of native iOS interfaces. Elements glide into place with a subtle, physical spring, while frosted elements dissolve and blur beautifully into the charcoal canvas.

### Page Transitions (Vertical Stacking)

```tsx
initial={{ opacity: 0, y: 24 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1], staggerChildren: 0.1 }}
```

### Interaction: The Hardware Press

CTAs and pills do not wildly change color; they scale down slightly and increase their border highlight, mimicking a physical hardware button press on a premium device.

```tsx
whileHover={{ scale: 0.98, backgroundColor: "#27272a" }} // zinc-800
whileTap={{ scale: 0.95 }}
transition={{ type: "spring", stiffness: 400, damping: 25 }}
```

---

## UI Components

### The Hero Device Staging

The centerpiece of the entire system. It acts as the anchor point directly below the `text-4xl` headline.

```tsx
<section className="flex flex-col items-center justify-center pt-24 pb-12 text-center">
  <h1 className="text-4xl font-semibold tracking-tight text-zinc-100 mb-4">
    Headline Goes Here
  </h1>
  <p className="text-base text-zinc-400 max-w-md mb-8">
    Concise, editorial copy goes here.
  </p>
  {/* The Graphite Pill */}
  <button className="rounded-full bg-zinc-900 border border-white/10 text-zinc-200 px-6 py-2.5 text-sm font-medium hover:bg-zinc-800 transition-colors mb-16">
    Action Pill
  </button>
  {/* Directly Staged Mockup */}
  <div className="relative w-full max-w-sm drop-shadow-2xl">
    <PhoneMockup />
  </div>
</section>
```

### Vertically Stacked Editorial Panels

Seamless, charcoal rectangles with heavy corner radii that stack vertically to carry the narrative.

```tsx
className="w-full bg-zinc-900 rounded-[32px] border border-white/5 p-8 flex flex-col md:flex-row items-center gap-8 mb-6"
```

### Frosted Micro-Badges

Small, sophisticated blur containers that float above device modules or within feature grids.

```tsx
className="inline-flex items-center px-3 py-1 rounded-full bg-white/5 backdrop-blur-md border border-white/10 text-[11px] font-medium tracking-wide uppercase text-zinc-300 shadow-xl"
```

---

## Component Catalog

### Feature Grid (Simple & Grounded)

A strict 2x2 or 3x1 structural layout utilizing graphite containers.

```tsx
// Grid Container
"grid grid-cols-1 md:grid-cols-2 gap-4 w-full"

// Grid Cell
"bg-zinc-900/80 rounded-2xl p-6 border border-white/5 hover:border-white/10 transition-colors"
```

### Buttons & CTAs (Fully Rounded Pills)

```tsx
// Primary Graphite Pill
"rounded-full bg-zinc-900 border border-white/10 text-zinc-100 font-medium text-sm px-6 py-2.5 hover:bg-zinc-800 hover:border-white/20 transition-all shadow-sm"

// Subtle Secondary Pill
"rounded-full bg-transparent border border-white/5 text-zinc-400 font-medium text-sm px-6 py-2.5 hover:text-zinc-200 hover:bg-white/5 transition-all"
```

### Dividers & Proof

```tsx
// Fine Divider
<div className="h-px w-full bg-gradient-to-r from-transparent via-white/10 to-transparent my-12" />

// Soft Avatar Proof Details
<div className="flex items-center gap-3">
  <div className="flex -space-x-2">
    <Avatar className="w-6 h-6 border-2 border-black rounded-full" />
    <Avatar className="w-6 h-6 border-2 border-black rounded-full" />
  </div>
  <span className="text-[11px] font-normal text-zinc-500">Trusted by 10,000+ designers</span>
</div>
```

### Elegant FAQ Rows

Minimalist, cleanly delineated rows for bottom-of-page structures.

```tsx
// FAQ Row Wrapper
"flex flex-col py-5 border-b border-white/5 cursor-pointer group"

// FAQ Question
"text-base font-medium text-zinc-300 group-hover:text-zinc-100 transition-colors"

// FAQ Answer
"text-sm font-normal text-zinc-500 mt-2 leading-relaxed"
```

---

## Quality Checklist

* [ ] Is the hero headline precisely sized around `text-4xl` and centered?
* [ ] Does the hero headline and sub-copy sit perfectly above a directly staged phone mockup?
* [ ] Are all primary and secondary buttons shaped as fully rounded pills?
* [ ] Are generic colored backgrounds or text strictly eliminated in favor of smoked black, charcoal, and graphite?
* [ ] Do all headings use a confident `font-semibold` weight (using Inter or Helvetica Neue)?
* [ ] Is depth created strictly through fine `border-white/10` highlights and frosted glass rather than heavy drop shadows?
* [ ] Are decorative blobs or illustrative abstract backgrounds completely absent?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Smoked blacks, deep charcoals, and graphite grays.
* Typography in muted pearl (`text-zinc-100`) and soft grays (`text-zinc-400`).
* Fully rounded pills that mimic hardware buttons with subtle border highlights.
* High-quality, perfectly aligned device mockups serving as the visual anchor.
* Vertically stacked layouts with massive, rounded editorial panels.
* Background blurring for micro-badges and overlays.

### ✗ Not Allowed

* Decorative blobs, abstract waves, or arbitrary layout vectors.
* Generic accent colors (e.g., bright purple buttons, blue links) that break the dark editorial flow.
* Square or slightly-rounded (`rounded-md`) buttons—primary CTAs must be full pills.
* Hero text that dominates the screen with `text-7xl` or higher; it must remain controlled and concise around `text-4xl`.
* Heavy, opaque drop shadows on text or cards.
* Thin or ultra-light heading font weights.