Helvetica Device Gallery Column

/helveticaDeviceGalleryColumn
A minimalist B2C design system that frames mobile UI as gallery art, using restrained typography, neutral palettes, and vertical layouts to spotlight curated device screenshots.
0 likes
0 bookmarks
Jun 19, 2026
Design System Content
# Helvetica Device Gallery Column

A minimalist B2C design language framing mobile interfaces as curated digital art.

---

## Philosophy

> "The interface is merely the gallery wall; the product is the masterpiece."

This system creates a consumer-facing landing aesthetic that feels like scrolling through a high-end, carefully curated exhibition of mobile screens. The page relies on a strict vertical rhythm. UI elements are stripped back to their absolute minimum, acting only as structural mounts and subtle backplates for the vibrant, image-heavy product screenshots.

### Core Beliefs

1. **The Device as Art** — Product screenshots and mobile frames are the primary visual anchor. The surrounding website exists solely to elevate these images.
2. **Typographic Restraint** — Headings are bold but tightly proportioned. Body copy is neutral, relaxed, and never competes with the imagery for attention.
3. **Generous Framing** — Oversized rounded corners and subtle gray backplates create a soft, welcoming, yet premium framing for sharp device imagery.
4. **Vertical Focus** — The layout strictly prioritizes a narrow, centered reading column, allowing the user's eye to cascade down seamlessly into rows of product screens.
5. **Quiet Interfaces** — Absolute elimination of noisy web-specific UI. No decorative blobs, no avatars, no floating badges.

### Strict Rules

* **No Avatars or Badges** — Eliminate noisy social proof clusters or colorful notification badges from the web UI. 
* **Hero Constriction** — The hero text block must remain aggressively narrow and perfectly centered.
* **Oversized Radii Only** — Hard corners are strictly forbidden on structural elements. All framing utilizes generous, oversized border radii.
* **No Decorative Web UI** — Do not use abstract geometric shapes, mesh gradients, or web-specific illustrations. The product screens *are* the illustration.
* **Shadows for Devices Only** — Soft, diffused shadows are reserved exclusively for mobile device mockups to lift them off the canvas. Web containers remain flat.

---

## Color Palette

### Neutral Scale & Backplates

The palette completely avoids injecting color into the web layer. It utilizes a highly controlled spectrum of whites and grays, ensuring that the only vibrant colors on the page emanate from the mobile screenshots themselves.

```css
/* Backgrounds & Backplates */
bg-white              /* Primary global canvas (#ffffff) */
bg-neutral-50         /* Subtle backplates for image-heavy lower sections (#fafafa) */
bg-neutral-100        /* Interactive hover states for secondary buttons */
bg-neutral-200        /* Deepest gray allowed for structural backgrounds */

/* Dividers & Borders */
border-neutral-100    /* Barely-there structural dividers */
border-neutral-200    /* Default framing borders for oversized image cards */

/* Primary Interactivity */
bg-neutral-900        /* Primary CTA background, solid dark contrast (#171717) */
hover:bg-black        /* Primary CTA hover state */
text-white            /* Primary CTA text */

/* Text Hierarchy */
text-neutral-900      /* Primary headings, bold numeric metrics */
text-neutral-600      /* Standard neutral body copy, secondary UI links */
text-neutral-400      /* Subtle metadata, footer links, micro-labels */
```

---

## Typography

The system relies entirely on neo-grotesque sans-serifs (Helvetica Neue, Inter, or SF Pro). The structural contrast is achieved through weight and line-height rather than elaborate font pairings. 

### Font Families

```css
font-sans        /* System UI stack prioritizing Helvetica Neue, Inter, SF Pro Display */
```

### Font Weights

```css
font-normal      /* Core neutral body copy */
font-medium      /* CTA buttons, navigation items */
font-bold        /* Restrained headings, primary hero statements */
/* font-light, font-black, and italics are strictly forbidden to maintain clinical neutrality */
```

### Font Size & Line Height Scale

```css
/* Body & UI */
text-sm leading-relaxed     /* Secondary descriptions, footer text */
text-base leading-relaxed   /* Concise neutral body paragraphs */
text-lg leading-relaxed     /* Slightly elevated lead paragraphs in the hero */

/* Headings (Restrained Scale) */
text-xl leading-tight       /* Small section headers */
text-3xl leading-tight      /* Standard section titles over image backplates */
text-5xl leading-tight      /* Primary hero headline (Restricted maximum size) */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Line Height | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 5xl | bold | neutral-900 | tight | tight |
| Section Title | 3xl | bold | neutral-900 | tight | normal |
| Body Copy | base | normal | neutral-600 | relaxed | normal |
| CTA Button | base | medium | white | normal | normal |
| Metadata | sm | normal | neutral-400 | relaxed | normal |

---

## Animation System

### Core Philosophy: The Smooth Entrance

Animations are exclusively tied to scroll progress. There are no looping web animations, hover wobbles, or typing effects. Elements drift into the gallery space smoothly.

### Scroll-Triggered Screenshot Entrances

Mobile screens in the lower sections slide upward and fade in with an elegant, delayed easing curve as they enter the viewport.

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

### Image Array Stagger

When a row of phone screenshots appears beneath the hero, they stagger smoothly from the center outwards.

```tsx
transition={{ staggerChildren: 0.15, delayChildren: 0.2 }}
```

---

## UI Components

### The Narrow Hero Block

A strictly constrained text column that forces the user's eye straight down toward the product imagery.

```tsx
<div className="max-w-2xl mx-auto text-center flex flex-col items-center gap-6 pb-12">
  <h1 className="text-5xl font-bold text-neutral-900 tracking-tight">Headline.</h1>
  <p className="text-lg text-neutral-600 leading-relaxed max-w-md">
    Brief, concise paragraph describing the value.
  </p>
  {/* Rounded CTA Pair below */}
</div>
```

### Oversized Media Backplate

Used in the lower, image-heavy sections to frame mobile screenshots.

```tsx
<section className="w-full bg-neutral-50 rounded-[40px] border border-neutral-100 p-12 lg:p-24 overflow-hidden flex flex-col items-center">
  {/* Restrained Heading & Screenshot go here */}
</section>
```

### Soft Device Shadow

Applied *only* to the product screenshots to create spatial depth against the flat gray backplates.

```css
/* Device Shadow Utility */
className="shadow-[0_24px_48px_-12px_rgba(0,0,0,0.12)] rounded-[32px]"
```

---

## Component Catalog

### Buttons (Rounded CTA Pair)

Always presented as a centered pair beneath the hero paragraph. Fully rounded (pill shape) to contrast with the sharp verticality of the mobile screens.

```tsx
// Primary Rounded CTA
"bg-neutral-900 text-white font-medium text-base rounded-full px-8 py-3.5 hover:bg-black transition-colors"

// Secondary Rounded CTA
"bg-white text-neutral-900 font-medium text-base rounded-full px-8 py-3.5 border border-neutral-200 hover:bg-neutral-50 transition-colors"
```

### Fine Dividers

Used exclusively to separate macro-sections if an oversized backplate is not utilized.

```tsx
<hr className="w-full max-w-4xl mx-auto border-t border-neutral-200 my-24" />
```

### Gallery Screenshot Row

The primary visual component below the hero. A clean row of overlapping or closely spaced phone mockups.

```tsx
<div className="flex justify-center items-end gap-6 w-full overflow-hidden px-8">
  <img src="device-left.png" className="w-64 rounded-[32px] shadow-2xl translate-y-12 opacity-80" />
  <img src="device-center.png" className="w-72 rounded-[32px] shadow-2xl z-10" />
  <img src="device-right.png" className="w-64 rounded-[32px] shadow-2xl translate-y-12 opacity-80" />
</div>
```

---

## Quality Checklist

* [ ] Is the hero text constrained to a narrow, perfectly centered column?
* [ ] Are all headings styled as bold, tight, and completely devoid of bright colors?
* [ ] Is the body copy utilizing a `relaxed` line-height for effortless scanning?
* [ ] Are the primary buttons presented as a fully rounded (pill-shaped) pair?
* [ ] Have you completely removed all user avatars, star ratings, and floating notification badges from the layout?
* [ ] Are the lower section backplates using an oversized border radius (e.g., `rounded-[40px]`)?
* [ ] Do soft, diffused drop shadows exist *only* on the mobile device mockups?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Neo-grotesque fonts (Helvetica Neue, Inter, SF Pro).
* Pure white and subtle gray palettes (`neutral-50`, `neutral-100`).
* Massive, oversized corner radii on media containers.
* Soft drop shadows specifically on product images to create a 3D gallery effect.
* Smooth, scroll-triggered Y-axis translation animations.

### ✗ Not Allowed

* Avatars, faces, or profile thumbnails.
* Colorful web UI elements, gradients, or non-product illustrations.
* Hard square corners on structural cards or background plates.
* Left-aligned hero sections (hero must remain narrow and centered).
* Heavy, dark backgrounds or dark mode variants (disrupts the light gallery aesthetic).