Directory App Launch Classic Design System

/directoryAppLaunchClassicDesignSystem
A bold, conversion-focused design system inspired by premium 2015–2018 app launch pages, featuring high-contrast hero sections, strict flat design rules, and structured credibility components to drive instant trust and app downloads.
0 likes
0 bookmarks
Jun 16, 2026
Design System Content
# Directory App Launch Classic Design System

A conversion-focused, credibility-driven design language inspired by premium 2015–2018 app landing pages.

---

## Philosophy

> "Clarity drives conversion; structure builds credibility."

This system creates interfaces that feel like a highly polished, venture-backed startup from the golden era of app launches. It relies on a high-contrast division between a bold, colorful hero section and a meticulously organized, warm, and flat feature directory below the fold. It is designed to build absolute trust in milliseconds and drive immediate app downloads.

### Core Beliefs

1. **The Hero is the Hook** — The initial viewport relies on a solid, highly saturated block of color to create immediate brand impact, housing the product proposition and credibility markers tightly together.
2. **Social Proof as UI** — Rating stars, download counts, and platform badges are not afterthoughts; they are treated as first-class structural elements integrated directly into the primary content stack.
3. **Rhythmic Scrolling** — The layout relies on alternating feature rows and fine horizontal dividers to create a predictable, easily scannable cadence.
4. **Flat and Warm** — Below the fold, the canvas transitions to a comforting warm off-white. The aesthetic relies strictly on flat design—absolute zero gradients.
5. **Device Context** — A single, highly polished phone mockup anchors the digital product in reality, carrying the only permitted drop shadow on the page.

### Strict Rules

* **No Gradients** — Backgrounds, buttons, and text must use solid colors exclusively. 
* **Warmth over Sterility** — Use warm off-whites for the body canvas, never pure hospital white (`#FFFFFF`).
* **The "One Shadow" Rule** — The only drop shadow permitted on the entire page is the soft, diffused shadow beneath the hero phone mockup. Cards and containers must be flat.
* **Strict Alignment** — Hero content is strictly left-aligned in a tight vertical stack; the visual asset is strictly right-aligned.
* **Geometric Typography** — Sans-serif exclusively. Letterforms must be perfectly circular and highly legible.

---

## Color Palette

### The Hero Backgrounds (Choose One)
The system allows for one dominant hero color per product. This color fills the entire top viewport.

```css
/* Hero Foundations (Select one for the launch) */
bg-hero-cobalt        /* #1A56DB - Trust, FinTech, Productivity */
bg-hero-teal          /* #0D9488 - Health, Wellness, Finance */
bg-hero-coral         /* #F43F5E - Social, Lifestyle, Food */
bg-hero-violet        /* #7C3AED - Creative, Crypto, Premium */
bg-hero-charcoal      /* #171717 - Pro Tools, Developer, Luxury */
```

### The Canvas Scale (Below the Fold)
Transitioning away from the hero, the directory switches to flat, warm tones.

```css
/* Backgrounds */
bg-canvas-base        /* Main page background below fold (#FAF9F6 - warm off-white) */
bg-canvas-alt         /* Alternating feature rows (#F4F3EF) */
bg-surface-flat       /* Card interiors and isolated blocks (#FDFDFB) */

/* Structural Lines */
border-divider-fine   /* Ultra-thin 1px horizontal section separators (#E5E4DF) */
border-ui-element     /* Input borders, button outlines (#D6D5D0) */

/* Text Hierarchy */
text-ink-900          /* Primary headers, dark structural text (#1C1B1A) */
text-ink-700          /* Secondary headers, core benefit copy (#3F3E3C) */
text-ink-500          /* Compact metadata, micro-labels (#706E6B) */
text-ink-300          /* Placeholders, disabled states (#A3A19E) */

/* Credibility & Action */
text-star-gold        /* Review stars ONLY (#FBBF24) */
bg-action-primary     /* Primary CTA (Matches Hero Color or Pure Black) */
```

### Hero Text (Inverse Canvas)
When inside the dark/colored hero block, text strictly follows this light scale.

```css
text-white            /* App name, Hero Headers */
text-white/80         /* Hero taglines, rating count text */
text-white/60         /* Secondary micro-copy in hero */
```

---

## Typography

Typography relies on mid-2010s geometric sans-serifs. The aesthetic demands perfectly round "O"s and crisp, flat terminals to look modern, approachable, and engineered.

### Allowed Font Families
* Primary options: **Circular**, **Satoshi**, or **Plus Jakarta Sans**
* Secondary options: **Avenir Next**, **Graphik**, or **Proxima Nova**

### Font Weights

```css
font-regular     /* Benefit copy, long-form directory descriptions */
font-medium      /* Metadata labels, short taglines, button labels */
font-semibold    /* App name, active tabs, secondary headers */
font-bold        /* Primary hero headlines, numeric statistics */
```

### Font Size Scale

```css
text-[11px]      /* Compact metadata labels, version numbers, rating counts */
text-xs          /* Category pills, tight directory labels (12px) */
text-sm          /* Standard metadata, feature list items (14px) */
text-base        /* Concise benefit copy, standard paragraphs (16px) */
text-lg          /* App short tagline (18px) */
text-2xl         /* Sub-section headers in directory (24px) */
text-4xl         /* App Name in Hero (36px) */
text-5xl-6xl     /* Primary landing proposition (responsive 48px-60px) */
```

### Letter Spacing & Transforms

```css
tracking-tight   /* Hero headlines, App Name (-0.02em to -0.04em) */
tracking-normal  /* Benefit copy, general paragraph text */
tracking-wide    /* Category pills, metadata labels (0.05em) */

uppercase        /* Category pills, platform metadata ONLY */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| App Name | 4xl | bold | white | tight | none |
| Category Pill | xs | medium | white/90 | wide | uppercase |
| Hero Tagline | lg | medium | white/80 | normal | none |
| Feature Title | 2xl | bold | ink-900 | tight | none |
| Metadata Label | [11px] | medium | ink-500 | wide | uppercase |

---

## Animation System

### Core Philosophy: Snappy and Native

Interactions should feel like native iOS or Android app behaviors—fast, responsive, and physically grounded. No slow fades.

### Page Load (The Hero Slide)

```tsx
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }} /* Snappy custom spring */
```

### Micro-Interactions (The Button Press)

Buttons do not hover with color changes; they physically depress to mimic tactile app interactions.

```tsx
whileHover={{ scale: 0.98 }}
whileTap={{ scale: 0.95 }}
transition={{ type: "spring", stiffness: 400, damping: 25 }}
```

### The Phone Mockup (Floating)

The mockup gently breathes to add life to the static hero background.

```tsx
animate={{ y: [0, -10, 0] }}
transition={{ repeat: Infinity, duration: 4, ease: "easeInOut" }}
```

---

## UI Components

### The Hero Content Stack

Elements are tightly packed and strictly left-aligned, showcasing immediate value and social proof before the user scrolls.

```tsx
<div className="flex flex-col items-start gap-6 max-w-xl">
  {/* Category & App Name */}
  <div className="flex flex-col gap-2">
    <Badge className="bg-white/20 text-white uppercase tracking-wide text-xs">Productivity</Badge>
    <h1 className="text-5xl font-bold tracking-tight text-white">FocusTime</h1>
  </div>
  
  {/* Tagline */}
  <p className="text-lg font-medium text-white/80">
    The minimal pomodoro timer for professionals.
  </p>

  {/* Social Proof Block */}
  <div className="flex items-center gap-3">
    <div className="flex text-star-gold">★★★★★</div>
    <span className="text-[11px] font-medium text-white/80 uppercase tracking-wide">
      4.9 • 12K Ratings
    </span>
  </div>

  {/* CTA Pair */}
  <div className="flex items-center gap-4 mt-2">
    <PrimaryAppStoreBadge />
    <SecondaryGhostButton />
  </div>
</div>
```

### The Phone Mockup

The singular source of depth on the page.

```tsx
<div className="relative">
  {/* The "One Shadow" */}
  <div className="absolute -inset-4 bg-black/20 blur-2xl rounded-[3rem] translate-y-8" />
  {/* Polished Mockup Frame */}
  <img src="/iphone-frame.png" className="relative z-10 w-[300px]" alt="App Screen" />
</div>
```

---

## Component Catalog

### Buttons & CTAs

```tsx
// Primary Solid CTA (Used on the warm off-white canvas)
"bg-ink-900 text-white font-semibold text-sm rounded-full px-6 py-3 hover:scale-98 transition-transform"

// Secondary Ghost Button (Used in Hero)
"bg-transparent border-2 border-white/30 text-white font-semibold text-sm rounded-full px-6 py-3 hover:bg-white/10 transition-colors"

// Platform App Store Button
"h-12 w-auto object-contain cursor-pointer hover:opacity-80 transition-opacity"
```

### Directory Elements

```tsx
// Fine Horizontal Divider
"w-full h-[1px] bg-divider-fine my-12"

// Compact Metadata Block
<div className="flex flex-col gap-1">
  <span className="text-[11px] font-medium text-ink-500 uppercase tracking-wide">Developer</span>
  <span className="text-sm font-semibold text-ink-900">Studio Meridian</span>
</div>
```

### Feature Rows (Alternating)

```tsx
// Feature Container
"w-full py-20 border-b border-divider-fine odd:bg-canvas-base even:bg-canvas-alt"

// Feature Text Block
"flex flex-col gap-4 max-w-md"
"text-2xl font-bold text-ink-900 tracking-tight" // Title
"text-base font-regular text-ink-700 leading-relaxed" // Concise Benefit
```

---

## Quality Checklist

* [ ] Is the hero background a solid, flat color without any gradients or subtle noise?
* [ ] Does the hero content stack precisely to the left edge of the grid container?
* [ ] Are the review stars utilizing the exact `text-star-gold` value?
* [ ] Is the background below the fold a warm off-white (`bg-canvas-base`) rather than stark white?
* [ ] Are the feature rows separated purely by layout structure and `border-divider-fine` (1px lines)?
* [ ] Did you ensure that the *only* drop shadow on the entire page exists beneath the right-aligned phone mockup?
* [ ] Are all metadata labels set to `text-[11px]`, `uppercase`, with `tracking-wide`?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-contrast, solid hero colors (Cobalt, Teal, Coral, Violet, Charcoal).
* Warm, comforting off-whites for the directory background.
* Perfectly circular, geometric sans-serif fonts.
* Golden yellow strictly for review stars.
* A single, soft drop shadow beneath the hero device mockup.
* Compact, uppercase micro-labels for metadata.

### ✗ Not Allowed

* Gradients of any kind (linear, radial, or mesh).
* Pure, clinical `#FFFFFF` white backgrounds for structural containers.
* Drop shadows on buttons, feature cards, or navigation bars.
* Centered text alignments in the hero section (strict left/right split only).
* Decorative UI blobs, excessive illustrations, or complex background patterns.
* System font stacks (Inter, SF Pro)—stick strictly to the geometric personality fonts (Circular/Satoshi).