Ivory Screenshot Ribbon Flow

/ivoryScreenshotRibbonFlow
A refined design system for premium digital product showcases, featuring gallery-style layouts, soft ivory palettes, restrained typography, and accent-free UIs that highlight vivid product screenshots as the core visual focus.
0 likes
0 bookmarks
Jun 19, 2026
Design System Content
# Ivory Screenshot Ribbon Flow Design System

A design language for pristine, premium digital product showcases where the interface acts as a flawless gallery for product imagery.

---

## Philosophy

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

This system creates digital environments that feel like an elite, modern tech exhibition. The UI itself steps back, utilizing a highly refined, warm-light aesthetic that allows vivid, high-fidelity mobile screenshots to become the sole source of color and visual momentum. Everything structural is soft, approachable, and immaculately spaced.

### Core Beliefs

1. **The Gallery Framework** — The UI exists only to frame the product. If an interface element competes with a screenshot for attention, it must be muted or removed.
2. **Fluidity over Rigidity** — Soft transitions, rounded corners, and continuous scrolling ribbons mimic the smooth physics of modern touch devices.
3. **Restrained Typography** — Headlines should feel conversational yet highly polished. We avoid massive, overly-dramatic typography in favor of medium-scale, meticulously typeset Inter or Helvetica.
4. **Cinematic Pacing** — Generous vertical spacing and precise scroll reveals ensure every new feature or screenshot feels deliberate, premium, and earned.
5. **Tactile Depth** — Depth is achieved not through heavy drops, but through soft, ambient contact shadows that make device mockups look like they are resting gently on an ivory desk.

### Strict Rules

* **Zero UI Accent Colors** — Buttons, text, and borders rely entirely on the Ivory-to-Graphite grayscale. 100% of the brand's vibrant color must come from the screenshot imagery itself.
* **Fully Rounded Interactive Elements** — Primary action buttons must be fully rounded (pill-shaped) to maintain an approachable, tactile friendliness.
* **Large-Radius Containers** — All panels and card containers housing screenshots must use exceptionally large border radii to feel modern and unified with the rounded aesthetic of mobile phone hardware.
* **Always Center the Hero** — The primary story begins directly in the center of the viewport, stacking downward perfectly into the product imagery.
* **No Sharp Edges** — Sharp 90-degree angles are strictly forbidden on structural UI components.

---

## Color Palette

### The Pedestal Scale

The palette eschews cold, clinical grays in favor of a subtly warm, highly sophisticated Ivory and Pearl sequence, anchored by rich, ink-like Graphite.

```css
/* Backgrounds (Lightest to Darkest) */
bg-pearl-white        /* Pure canvas elements, floating cards, inner panels (#ffffff) */
bg-ivory              /* Main site background, subtle warmth (#fcfbf9) */
bg-mist-gray-50       /* Ultra-soft section transitions (#f4f4f5) */
bg-mist-gray-100      /* Hover states, secondary form inputs (#ebebeb) */
bg-mist-gray-200      /* Active states, disabled button backgrounds (#e4e4e7) */

/* Borders */
border-mist-gray-100  /* Delicate borders for cards and inner panels */
border-mist-gray-200  /* Hover state borders, input rings */
border-mist-gray-300  /* Defined structural delineations */

/* The Anchor: Graphite */
bg-graphite           /* Primary call-to-action buttons, active indicators (#1c1c1e) */
border-graphite       /* Focused input rings, high-contrast borders */
hover:bg-graphite/90  /* Subtle lightening for primary button interactions */

/* Text Hierarchy */
text-graphite         /* Primary headlines, CTA button text, core navigation */
text-slate-muted      /* Compact subcopy, body paragraphs, secondary data (#64748b) */
text-mist-gray-400    /* Metadata, micro-labels, disabled text (#a1a1aa) */

```

---

## Typography

The typographic scale is highly controlled. It relies on Inter or Helvetica to provide a neutral, perfectly legible framework. We avoid ultra-thin or ultra-bold extremes, favoring a balanced, medium-scale weight distribution.

### Font Weights

```css
font-normal      /* Compact subcopy, secondary UI descriptions */
font-medium      /* Standard headlines, active UI tabs, standard body text */
font-semibold    /* Hero headlines, CTA buttons, primary section titles */

/* font-light and font-black are excluded to maintain uniform friendliness */

```

### Font Size Scale

```css
text-xs          /* Form hints, footer links (12px) */
text-sm          /* Nav links, secondary buttons, dense body copy (14px) */
text-base        /* Standard subcopy, primary button text (16px) */
text-lg          /* Lead paragraphs, large structural list items (18px) */
text-xl          /* Sub-section titles, highlighted features (20px) */
text-2xl         /* Standard section headers (24px) */
text-3xl         /* Emphasized section headers (30px) */
text-4xl-5xl     /* Hero headlines (responsive, fluid scaling) (36px-48px) */

/* Extreme sizes (7xl+) are forbidden. We scale down, not up. */

```

### Letter Spacing & Line Height

```css
tracking-tight   /* Headers (3xl-5xl) to maintain a compact, polished block */
tracking-normal  /* All body copy and subcopy */
leading-snug     /* Headlines */
leading-relaxed  /* Subcopy, allowing it to breathe gracefully */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Line Height |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 5xl | semibold | graphite | tight | snug |
| Friendly Subcopy | base | normal | slate-muted | normal | relaxed |
| Section Headline | 3xl | medium | graphite | tight | snug |
| CTA Button | base | semibold | pearl-white | normal | normal |
| Small Label | xs | medium | mist-gray-400 | normal | normal |

---

## Animation System

### Core Philosophy: The Framer Reveal

Movement should feel expensive. Every section and screenshot ribbon animates into view with smooth, high-damping spring physics. Elements slide up effortlessly with a soft fade, avoiding harsh snaps or aggressive elastic bounces.

### Scroll Reveal Transition (Premium Fade-Up)

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

```

### The Ribbon Marquee

Screenshot ribbons flow horizontally at a constant, buttery-smooth rate, pausing gracefully when a user hovers to inspect a specific phone mockup.

```tsx
animate={{ x: ["0%", "-50%"] }}
transition={{ repeat: Infinity, ease: "linear", duration: 40 }}
className="hover:[animation-play-state:paused]"

```

---

## UI Components

### Soft Contact Shadows

We strictly avoid large, muddy drop shadows. Instead, device mockups and large-radius panels use highly diffused, multi-layered shadows that simulate ambient light bouncing off an ivory desk.

```css
/* Ambient Panel Shadow */
box-shadow: 0 4px 20px rgba(28, 28, 30, 0.03), 0 2px 8px rgba(28, 28, 30, 0.02);

/* Device Contact Shadow (Applied to bottom of mockups) */
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);

```

### The Centered Hero Layout

The apex of the page structure. Everything aligns to the central Y-axis before bleeding out into the screenshot ribbons.

```tsx
<div className="flex flex-col items-center text-center max-w-2xl mx-auto pt-32 pb-16 px-6">
  <h1 className="text-4xl md:text-5xl font-semibold text-graphite tracking-tight leading-snug mb-6">
    Your product's primary value proposition.
  </h1>
  <p className="text-base md:text-lg font-normal text-slate-muted leading-relaxed mb-10 max-w-lg">
    A compact, friendly explanation of how the product works, designed to support the main headline without overwhelming the page.
  </p>
  <button className="bg-graphite text-pearl-white text-base font-semibold px-8 py-3.5 rounded-full hover:bg-graphite/90 transition-colors">
    Get Started
  </button>
</div>

```

---

## Component Catalog

### Product Mockup Containers (Large-Radius Panels)

Oversized, pillowy containers that house the vibrant screenshots.

```tsx
// Stacked Screenshot Panel
"bg-pearl-white rounded-[32px] border border-mist-gray-100 p-4 md:p-8 shadow-[0_4px_20px_rgba(28,28,30,0.03)] overflow-hidden"

// Device Image Wrapper
"relative rounded-[40px] overflow-hidden border-[6px] border-mist-gray-50 bg-mist-gray-100 shadow-[0_20px_40px_rgba(0,0,0,0.08)]"

```

### Buttons

```tsx
// Primary CTA (Graphite Pill)
"bg-graphite text-pearl-white font-semibold text-base rounded-full px-8 py-3.5 hover:scale-[1.02] hover:bg-graphite/90 transition-all duration-300 ease-out"

// Secondary Action (Ghost Pill)
"bg-transparent text-graphite font-medium text-base rounded-full px-8 py-3.5 border border-mist-gray-200 hover:border-mist-gray-300 hover:bg-mist-gray-50 transition-all duration-300"

```

### Badges & Selectors

```tsx
// Muted Category Tag
"px-4 py-1.5 rounded-full bg-mist-gray-50 text-slate-muted text-sm font-medium border border-mist-gray-100"

// Active Nav Pill
"px-4 py-1.5 rounded-full bg-graphite text-pearl-white text-sm font-medium shadow-sm"

```

### The Screenshot Ribbon Row

A continuous flex layout designed to let device edges peek outside the viewport.

```tsx
<div className="flex gap-6 overflow-x-auto pb-12 px-6 snap-x snap-mandatory hide-scrollbar">
  {screenshots.map((screen) => (
    <div className="flex-none w-[280px] md:w-[320px] snap-center">
       {/* Device Mockup injected here */}
    </div>
  ))}
</div>

```

---

## Quality Checklist

* [ ] Are all primary call-to-action buttons perfectly `rounded-full`?
* [ ] Is the hero typography strictly medium-scale (Inter/Helvetica) and centered?
* [ ] Are the UI structural elements 100% devoid of brand colors? (Only Ivory, Mist, Slate, and Graphite used?)
* [ ] Does every major piece of product imagery utilize soft, multi-layered contact shadows rather than harsh drop shadows?
* [ ] Do screenshot housing panels use exceptionally large border radii (e.g., `rounded-[32px]`)?
* [ ] Are all section scrolls revealing via Framer-style spring animations (`ease: [0.16, 1, 0.3, 1]`)?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-fidelity, vibrantly colored product screenshots.
* Ivory and Pearl White layered backgrounds.
* Centered layout anchors and generous vertical whitespace.
* Fully rounded buttons, pills, and selectors.
* Subtle, highly-diffused ambient contact shadows.
* Medium, conversational typography scaling.

### ✗ Not Allowed

* Colored text, colored buttons, or colored badges anywhere in the UI framing.
* Hard square corners on containers, cards, or buttons.
* Left-aligned hero sections with text columns competing with imagery.
* Massive, screen-filling typography (`text-7xl` or higher).
* Heavy, opaque, or sharp black drop shadows.
* Fast, linear, or heavily bouncy animations.