Centerline Screenshot Parade

/centerlineScreenshotParade
A mobile-first, image-forward design system with a single, centered column layout. It accentuates app screenshots as premium artifacts and uses only warm grayscale for UI, ensuring the product imagery takes center stage.
0 likes
0 bookmarks
Jun 19, 2026
Design System Content
# Centerline Screenshot Parade Design System

A design language for pristine, product-focused, image-forward digital environments.

---

## Philosophy

> "The interface is the gallery; the product is the art."

This system creates web experiences that mimic a high-end product unveiling. It relies on a rigorous, mobile-first centerline structure, stripping away complex grids to force an absolute focus on the core narrative. The design treats application screenshots not as flat JPEGs, but as premium, physical objects resting on a warm, immaculate surface.

### Core Beliefs

1. **The Single Column Rule** — Every layout is a single, narrow, centered column of text cascading down to rich media. No split grids. No side-by-side distraction.
2. **Media as Physical Objects** — Screenshots are treated as tactile artifacts. They feature rounded edges, delicate borders, and subtle contact shadows that lift them off the canvas.
3. **The Grayscale Canvas** — The UI itself contains zero color accents. Warm whites, pearls, and graphites exist solely to frame the vivid colors inherently present inside the app imagery.
4. **Deliberate Pacing** — Smooth, Framer-style scroll reveals introduce each stacked screenshot, creating a rhythmic "parade" of features as the user descends.
5. **Pill-Shaped Actions** — Interactive elements are fully rounded, creating a soft but substantial tactile contrast against the sharp geometry of the app screenshots.

### Strict Rules

* **No UI Color Accents** — Buttons, text, borders, and backgrounds must remain strictly in the warm white/graphite palette. Color is exclusively reserved for the screenshots.
* **No Split Grids** — Multi-column layouts for text-and-image are strictly forbidden. Text sits centered above; media sits centered below.
* **No Sharp Corners on Media** — All screenshots and media containers must use premium, large-radius rounding.
* **No Flat JPEGs** — Every image must possess a fine hairline border and a subtle contact shadow to establish spatial presence.

---

## Color Palette

### The Warm Grayscale

The palette abandons harsh, clinical blues and stark absolute whites in favor of an inviting, premium warmth. It transitions from a foundational warm white to a deep, grounding graphite.

```css
/* Canvas & Backgrounds */
bg-warm-white       /* Primary page background (#FDFCFB) */
bg-pearl            /* Secondary containers, subtle inputs (#F6F5F3) */
bg-pale-gray        /* Hover states, subtle separators (#EBEAE8) */

/* Structural Borders */
border-pale-gray/50 /* Ultra-fine borders for images and cards */
border-soft-slate   /* Active input borders, structural dividers */

/* Typography & Core UI */
text-graphite       /* Primary headlines, CTA backgrounds (#242424) */
text-soft-slate     /* Secondary text, supporting copy, metadata (#737373) */
text-pearl          /* Text color inside Graphite CTAs */

/* UI Color Accents */
/* DEFINITELY FORBIDDEN. $0.00 color budget for the surrounding UI. */
```

---

## Typography

Typography is confident, concise, and built on the robust geometry of Inter or Helvetica. The hierarchy relies on medium-bold weights for structure, avoiding the fragile, ultra-light editorial look in favor of sturdy, modern software branding.

### Font Family
**Primary:** Inter (or Helvetica as fallback)

### Font Weights

```css
font-medium      /* Supporting copy, buttons, metadata */
font-semibold    /* Hero headlines, section titles - THE ANCHOR WEIGHT */
font-bold        /* Reserved for inline emphasis within supporting copy only */
/* font-light is strictly forbidden — headlines must feel substantial */
```

### Font Size Scale & Containers

Because the layout is strictly a centered single-column, max-widths dictate legibility just as much as font sizes.

```css
/* Container Widths */
max-w-2xl        /* Maximum width for the Hero headline and supporting copy */
max-w-md         /* Maximum width for secondary section text */

/* Typographic Scale */
text-xs          /* Form hints, micro-metadata (12px) */
text-sm          /* Standard supporting copy in dense areas (14px) */
text-base        /* Primary supporting copy, CTA button text (16px) */
text-xl          /* Sub-section headers (20px) */
text-3xl         /* Primary section headers (30px) */
text-5xl-7xl     /* Centered Hero Headline (Responsive, tight leading) */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Line Height |
| --- | --- | --- | --- | --- |
| Hero Headline | 6xl | semibold | graphite | tight (1.1) |
| Section Title | 3xl | semibold | graphite | tight (1.2) |
| Supporting Copy | base | medium | soft-slate | relaxed (1.6) |
| CTA Button | base | medium | pearl | normal (1.0) |

---

## Animation System

### Core Philosophy: The Product Unveil

Animations are built to emulate the feeling of unboxing a premium device. Elements do not simply fade; they slide upward into place with a buttery, high-damping spring physics model.

### Framer-Style Scroll Reveal

Used for the stacked screenshot galleries lower on the page. Images scale up slightly and rise into their physical resting place as they enter the viewport.

```tsx
// Framer Motion variant for screenshots
const productReveal = {
  initial: { 
    opacity: 0, 
    y: 60, 
    scale: 0.97,
    rotateX: 2 // Subtle 3D tilt before resting
  },
  whileInView: { 
    opacity: 1, 
    y: 0, 
    scale: 1,
    rotateX: 0
  },
  transition: { 
    type: "spring", 
    mass: 1.2, 
    stiffness: 100, 
    damping: 24 
  },
  viewport: { once: true, margin: "-100px" }
};
```

### The Parallax Image Row

For the horizontal row of phone screenshots directly underneath the hero, a subtle horizontal shift is applied as the user scrolls down, emphasizing depth.

---

## UI Components

### Contact Shadows

Images are not flat. They require "contact shadows"—shadows that are tighter and more intense directly beneath the object, spreading out softly, simulating real-world studio lighting.

```css
/* Premium Product Shadow */
shadow-[0_20px_40px_-15px_rgba(36,36,36,0.1),_0_0_2px_1px_rgba(36,36,36,0.05)]
```

### Media Frames (Screenshots)

Screenshots must be housed in specific, highly rounded containers with fine borders to define their edges against the warm white canvas.

```tsx
// Mobile App Screenshot Container
className="relative overflow-hidden rounded-[40px] border border-pale-gray bg-warm-white shadow-contact"

// Desktop App Screenshot Container
className="relative overflow-hidden rounded-[24px] border border-pale-gray bg-warm-white shadow-contact"
```

---

## Component Catalog

### Buttons

Buttons are universally pill-shaped, creating a distinct UI signature that contrasts against the rectangular app screenshots.

```tsx
// Primary CTA (Solid Graphite)
"rounded-full bg-graphite text-pearl font-medium text-base px-8 py-3.5 hover:scale-[1.02] hover:shadow-lg transition-all duration-300 active:scale-[0.98]"

// Secondary Action (Outlined)
"rounded-full bg-transparent border border-soft-slate text-graphite font-medium text-base px-8 py-3.5 hover:bg-pale-gray transition-colors duration-300"
```

### Hero Section Architecture

A strict blueprint for the top of the page.

```tsx
<section className="flex flex-col items-center text-center pt-32 pb-16 px-6">
  <div className="max-w-2xl flex flex-col items-center">
    <h1 className="text-6xl font-semibold text-graphite tracking-tight leading-[1.1]">
      Medium-Bold Headline Here
    </h1>
    <p className="mt-6 text-base font-medium text-soft-slate max-w-lg leading-relaxed">
      Concise supporting copy sits directly underneath, forming an inverted pyramid of text.
    </p>
    <div className="mt-10">
      <button className="rounded-full bg-graphite text-pearl px-8 py-3.5 font-medium">
        Call to Action
      </button>
    </div>
  </div>
  
  {/* Horizontal Screenshot Row */}
  <div className="w-full flex justify-center gap-6 mt-20 overflow-visible px-4">
    <img src="app-1.png" className="w-[280px] rounded-[40px] shadow-contact border border-pale-gray" />
    <img src="app-2.png" className="w-[280px] rounded-[40px] shadow-contact border border-pale-gray -translate-y-8" />
    <img src="app-3.png" className="w-[280px] rounded-[40px] shadow-contact border border-pale-gray" />
  </div>
</section>
```

### Stacked Screenshot Gallery (Lower Sections)

The rhythm for the rest of the page. Text centered, followed by a massive, beautifully framed screenshot.

```tsx
<section className="flex flex-col items-center text-center py-24 px-6">
  <div className="max-w-xl mb-16">
    <h2 className="text-3xl font-semibold text-graphite mb-4">Feature Headline</h2>
    <p className="text-base text-soft-slate font-medium">Supporting text stays narrow.</p>
  </div>
  
  <motion.div 
    variants={productReveal}
    className="w-full max-w-5xl rounded-[24px] shadow-contact border border-pale-gray p-2 bg-warm-white"
  >
    <img src="desktop-ui.jpg" className="w-full rounded-[20px] overflow-hidden" />
  </motion.div>
</section>
```

---

## Quality Checklist

* [ ] Are all UI elements totally devoid of color accents (using only warm white, pearl, pale gray, and graphite)?
* [ ] Do the only pops of color come natively from inside the app screenshots?
* [ ] Are all text blocks restricted to a narrow, centered `max-w` container?
* [ ] Are there absolutely zero side-by-side text/image split grids?
* [ ] Do all main headlines use a solid, sturdy `font-semibold`?
* [ ] Are all primary and secondary buttons fully pill-shaped (`rounded-full`)?
* [ ] Do all screenshots feature a subtle fine border and a heavy-bottomed contact shadow?
* [ ] Do lower-page images use spring-based scroll reveals to enter the viewport?

---

## Allowed vs Not Allowed

### ✓ Allowed
* Warm-leaning grayscale backgrounds (`#FDFCFB`).
* Center-aligned everything (text, buttons, images).
* Large, highly rounded corners on images to simulate premium hardware.
* Bouncy, physical, Framer-style unboxing animations on scroll.
* Dense, highly saturated colors—**but only inside the screenshot image files.**

### ✗ Not Allowed
* Colored UI buttons, text links, or badges.
* Left-aligned content blocks with an image placed on the right side.
* Sharp, 0px border-radius corners on containers or media.
* Light or ultra-light font weights for main headlines.
* Flat JPEGs sitting on the background without a border or shadow.