No preview available
Soft Helvetica Phone Editorial

/softHelveticaPhoneEditorial
A refined, editorial design system for mobile app landing pages, prioritizing calm storytelling, chromatic restraint, elegant Helvetica/Inter typography, and oversized rounded framing to evoke quiet confidence and print-inspired purity.
0 likes
0 bookmarks
Jun 16, 2026
Design System Content
# Soft Helvetica Phone Editorial Design System

A design language for refined, story-driven mobile app landing pages.

---

## Philosophy

> "Whitespace is the canvas; typography is the narrator."

This system reimagines the classic mobile-first app landing page as a high-end editorial spread. It strips away aggressive marketing tropes in favor of calm, rhythmic storytelling. The design relies on pristine spatial geometry, absolute chromatic restraint, and beautiful Helvetica or Inter typography to project quiet confidence. 

### Core Beliefs

1. **Editorial Pacing** — The page reads like a vertical product story. Layouts flow systematically, guiding the user through alternating visuals and typography without overwhelming their senses.
2. **Chromatic Restraint** — Confidence is quiet. By eliminating loud accent colors and gradients entirely, the product UI inside the phone mockups becomes the sole focal point. 
3. **Soft Framing** — Approachability is achieved through precise, oversized rounded sectioning. Hard, sharp corners are inherently aggressive and strictly avoided.
4. **The Compact Hero** — The initial viewport must be a study in minimalism: perfectly centered, tightly composed, and grounded by a pristine device mockup.
5. **High-Contrast Anchors** — Because the palette is entirely neutral, deep graphite elements (like dark pill buttons) act as the visual anchors that guide interaction.

### Strict Rules

* **No Loud Accent Colors** — Zero primary blues, greens, or purples. Interaction is signaled through contrast (Graphite vs. Warm White), not hue.
* **No Gradients** — Backgrounds must remain flat and solid to maintain an editorial, print-like purity.
* **No Sharp Edges** — All structural containers, buttons, and chips must utilize precise, exaggerated radii (pills and large rounded frames).
* **Strict Center Alignment in Hero** — The hero typography and CTAs must be absolutely centered above the phone mockup. No split-screen heroes at the top of the page.

---

## Color Palette

### The Stone & Graphite Scale

The palette is an exercise in warmth and subtlety. It avoids clinical, digital pure whites (`#FFFFFF`) and harsh, pure blacks (`#000000`), opting instead for natural, tactile tones inspired by high-end paper stocks and slate.

```css
/* Backgrounds (Lightest to Darkest) */
bg-warm-white         /* Main canvas background (#FAFAFA) */
bg-chalk-gray         /* Oversized body sections, secondary frames (#F3F4F6) */
bg-stone-100          /* Feature grid card bases, accordion backgrounds (#E7E5E4) */
bg-stone-200          /* Hover states for interactive elements, subtle fills (#D6D3D1) */

/* Structural Lines & Borders */
border-stone-100      /* Thin dividers inside white containers */
border-stone-200      /* Low-contrast borders for feature grids and cards */
border-stone-300      /* Hover boundaries, accordion separators */

/* Frosted Elements */
bg-white/60           /* Glass navbar base, frosted chips */
border-white/20       /* Inner highlights for frosted glass effects */

/* Primary Interactive Anchors (The "Non-Color" Accent) */
bg-graphite           /* Dark pill CTAs, primary active states (#1C1917) */
text-white            /* Text strictly used inside Graphite containers */
hover:bg-graphite/90  /* Tactile hover state for primary buttons */

/* Text Hierarchy */
text-graphite         /* Hero headlines, primary section titles, core data */
text-stone-700        /* Concise body paragraphs, accordion content */
text-stone-500        /* Feature labels, metadata, footer links */
text-stone-400        /* Disabled states, placeholder text */

```

---

## Typography

Typography is the backbone of the editorial aesthetic. Helvetica (or Inter) is used exclusively, relying on structural tracking and distinct weight variations to build hierarchy without color.

### Font Weights

```css
font-normal      /* Concise paragraphs, accordion answers, feature descriptions */
font-medium      /* Navbar links, accordion triggers, button labels */
font-semibold    /* Small uppercase feature labels, standard section headlines */
font-bold        /* Reserved strictly for the 4xl compact hero headline */

```

### Font Size Scale

```css
text-[10px]      /* Overline indicators, copyright metadata */
text-xs          /* Small uppercase feature labels (12px) */
text-sm          /* Navbar items, frosted chip labels (14px) */
text-base        /* Concise hero paragraph, standard body copy (16px) */
text-lg          /* Feature grid headings, accordion questions (18px) */
text-2xl         /* Section introductory headlines */
text-4xl         /* The Compact Hero headline - MANDATORY size for hero */

```

### Letter Spacing & Transforms

```css
tracking-tighter /* Hero headlines (pulls the text into a tighter, confident block) */
tracking-normal  /* All body copy and paragraph text */
tracking-widest  /* Small uppercase feature labels */

uppercase        /* Feature labels, subheadings, pill tags */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 4xl | bold | graphite | tighter | none |
| Feature Labels | xs | semibold | stone-500 | widest | uppercase |
| Paragraphs | base | normal | stone-700 | normal | none |
| Pill CTAs | sm | medium | white | normal | none |
| Grid Titles | lg | medium | graphite | normal | none |

---

## Animation System

### Core Philosophy: The Editorial Scroll

Animations should mimic the effortless turning of a magazine page. No bouncy springs or aggressive scaling; movements are fluid, linear, and grounded.

### Vertical Scroll Reveals (Sections & Copy)

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

```

### Pristine Phone Parallax

As the user scrolls down through the alternating body sections, the phone mockups move at a slightly slower rate than the text, creating depth within the oversized frames.

```tsx
const y = useTransform(scrollYProgress, [0, 1], ['0%', '10%']);
// Applied strictly to the device mockup container within the rounded section
```

### Accordion Expansion

```tsx
initial={{ height: 0, opacity: 0 }}
animate={{ height: "auto", opacity: 1 }}
transition={{ duration: 0.3, ease: "easeInOut" }}
```

---

## UI Components

### Minimal Glass Navbar

Sits perfectly flush at the top of the viewport. Barely visible until scrolling begins.

```tsx
<nav className="fixed top-0 w-full bg-white/60 backdrop-blur-md border-b border-stone-200/50 z-50 transition-all">
  {/* Centered links, Graphite CTA on the right */}
</nav>
```

### Subtle Frosted Chips

Used for floating UI elements overlaid on top of the phone mockups or structural backgrounds to add depth without utilizing drop shadows.

```tsx
"inline-flex items-center px-3 py-1.5 rounded-full bg-white/60 backdrop-blur-md border border-white/40 text-xs font-medium text-graphite shadow-[0_4px_24px_rgba(0,0,0,0.02)]"
```

### Thin Dividers

Used to establish rhythm in feature grids and accordions.

```tsx
"w-full h-px bg-stone-200"
```

---

## Component Catalog

### Hero Section

The signature composition of the system.

```tsx
<section className="flex flex-col items-center text-center pt-32 pb-0 px-6 overflow-hidden">
  <h1 className="text-4xl font-bold text-graphite tracking-tighter max-w-lg">
    Compact and confident.
  </h1>
  <p className="mt-4 text-base text-stone-700 font-normal max-w-md">
    A concise paragraph explaining the core value proposition.
  </p>
  <div className="mt-8">
    {/* Dark Pill CTA */}
    <button className="bg-graphite text-white px-6 py-3 rounded-full text-sm font-medium hover:bg-graphite/90 transition-colors">
      Download the App
    </button>
  </div>
  {/* Pristine Phone Mockup container (clipped at bottom) */}
  <div className="mt-16 w-full max-w-sm relative translate-y-8">
    <img src="/mockup.png" alt="App interface" className="w-full drop-shadow-2xl" />
  </div>
</section>
```

### Oversized Rounded Frames (Body Sections)

The vertical product story is told through these alternating blocks.

```tsx
// Left-aligned copy, Right-aligned phone
<div className="max-w-6xl mx-auto my-24 p-12 lg:p-20 bg-chalk-gray rounded-[2.5rem] flex flex-col lg:flex-row items-center gap-16">
  <div className="flex-1 space-y-6">
    <span className="text-xs font-semibold text-stone-500 uppercase tracking-widest">
      Feature Label
    </span>
    <h2 className="text-2xl font-semibold text-graphite">
      A refined editorial take.
    </h2>
    <p className="text-stone-700 text-base">
      Detailed product story explaining this specific view.
    </p>
  </div>
  <div className="flex-1 relative">
    {/* Pristine phone mockup placed inside frame */}
  </div>
</div>
```

### Clean Accordion FAQs

```tsx
<div className="group border-b border-stone-200 py-6 cursor-pointer">
  <div className="flex justify-between items-center">
    <h3 className="text-lg font-medium text-graphite group-hover:text-stone-500 transition-colors">
      How does the billing cycle work?
    </h3>
    <ChevronDownIcon className="w-5 h-5 text-stone-400" />
  </div>
  {/* Expandable Body */}
  <p className="text-stone-700 text-base font-normal mt-4 hidden">
    Concise, helpful answer using Helvetica's clean legibility.
  </p>
</div>
```

---

## Quality Checklist

* [ ] Is the hero typography exactly `text-4xl`, centered, and perfectly contained above the phone mockup?
* [ ] Are all primary calls-to-action shaped as perfectly rounded pills (`rounded-full`) utilizing the Graphite color?
* [ ] Are there zero gradients or loud accent colors (blues, greens, reds) on the canvas?
* [ ] Do the body sections utilize oversized rounded borders (`rounded-[2.5rem]` or similar) with Chalk Gray or Soft Stone backgrounds?
* [ ] Does the vertical product story strictly alternate between copy on the left/phone on the right, and vice versa?
* [ ] Are feature labels formatted as `text-xs`, `uppercase`, and `tracking-widest`?
* [ ] Are dividers and borders kept to a minimum and using the low-contrast `border-stone-200`?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Warm whites, chalk grays, and graphite text.
* Helvetica or Inter strictly.
* Pristine, high-resolution phone mockups used as structural layout elements.
* Exaggerated, oversized rounded corners for section containers.
* Perfectly rounded pills for buttons.
* Subtle frosted glass (`backdrop-blur`) for navbars and floating chips.

### ✗ Not Allowed

* Gradients of any kind (except invisible fading masks for scroll).
* Sharp right angles on primary background containers or buttons.
* Left-aligned text in the primary hero section.
* Primary/Secondary accent colors (e.g., brand color highlights for buttons or icons).
* Heavy drop shadows on containers (shadows are reserved exclusively for creating depth behind the device mockups).
* Text sizes larger than `4xl` in the hero.