Frosted Screenshot Story Column

/frostedScreenshotStoryColumn
A mobile-first, frosted-glass design system that elevates product screenshots in a constrained column with cinematic motion, tactile warmth, translucent layers, rounded cards, and typographic restraint.
1 likes
0 bookmarks
Jun 19, 2026
Design System Content
# Frosted Screenshot Story Column Design System

A design language for consumer-facing interfaces that demand pristine clarity, cinematic pacing, and tactile warmth.

---

## Philosophy

> "Depth is created through light and glass; narrative is built through scrolling."

This system is engineered to feel like a high-end physical device unboxing seamlessly translated to the web. It merges the focused constraint of an elite B2C startup with the hyper-polished, frosted dimensionality of modern iOS environments. The interface acts as a quiet, warm gallery meant exclusively to frame and elevate the product—the "Screenshot Story." 

### Core Beliefs

1. **Mobile-First Footprint** — Even on widescreen displays, content flows within a narrow, centered column. Desktop screens shouldn't mean stretching layout; they mean a broader canvas for the central story to breathe.
2. **Material Translucency** — Depth isn't achieved through heavy darkness, but through light passing through surfaces. We use frosted glass, pearl cards, and subtle inner highlights to create a tactile UI.
3. **The Product is the Hero** — Interface elements step back. The layout serves to heroize stacked rounded cards featuring phone screenshots and cropped app states.
4. **Controlled Typography** — We reject shouting. Typography stays at a controlled, medium scale with relaxed line-heights, creating a calm, effortless reading experience.
5. **Cinematic Motion** — Scrolling drives the narrative. Features don't just appear; they glide in with Framer-level smoothness, subtle parallax, and gentle entrance timing.

### Strict Rules

* **Maximum Width Restraint** — The core reading/viewing column must never exceed a constrained maximum width (e.g., `max-w-2xl` or `max-w-3xl`), maintaining a strict mobile-like vertical flow on desktop.
* **No Sharp Corners** — Every card, button, and container must utilize significant border radii. Primary actions are fully rounded (pill-shaped).
* **Graphite & Slate Only** — Text and primary UI rely on a spectrum of soft slates to deep graphite. No harsh `#000000` blacks.
* **No Flat Grays** — Backgrounds and panels must use warm whites or pale mist-grays to maintain a premium, organic feel.
* **Inner Highlights** — All elevated cards must utilize a top inner white border to emulate a physical glass or pearl edge reflecting light.

---

## Color Palette

### The Warm & Frosted Scale

The palette replaces clinical digital whites with warm, organic foundations, layered with translucent pearl and mist-gray panels. Typography and actions are grounded in soft, dense graphites.

```css
/* Core Foundations (Warm & Pale) */
bg-stone-50/50         /* The absolute base canvas — a very warm, subtle white */
bg-white/80            /* Pearl cards, slightly translucent for frosted layers */
bg-slate-100/60        /* Pale mist-gray panels for secondary feature zones */
bg-white/40            /* Glass caption chips and navbar backgrounds */

/* Borders & Highlights */
border-white/60        /* Inner highlights to create pearl/glass edges */
border-slate-200/50    /* Subtle structural outer borders */
border-slate-300/30    /* Dividers within mist-gray panels */

/* The Graphite & Slate Typographic Scale */
text-slate-800         /* Graphite headlines — highest contrast permitted */
text-slate-700         /* Active navigation items, primary labels */
text-slate-500         /* Muted slate copy — core body text */
text-slate-400         /* Metadata, glass chip captions, secondary hints */

/* Call to Action (The Anchor) */
bg-slate-800           /* Fully rounded primary CTA background (Graphite) */
hover:bg-slate-700     /* Primary CTA hover state */
text-white             /* Text strictly inside the primary graphite CTA */
bg-slate-100           /* Secondary action background (Mist-gray) */
text-slate-800         /* Secondary action text */

```

---

## Typography

Typography relies on modern, geometric, yet highly legible neo-grotesques—specifically **Geist, Manrope, or SF Pro**. The scale is intentionally compressed; we avoid massive 6xl display fonts in favor of controlled, medium-scale elegance with generous line-heights.

### Font Weights

```css
font-regular     /* The foundation. Used for all slate body copy */
font-medium      /* The workhorse. Used for hero headings, CTAs, and glass chips */
font-semibold    /* Reserved strictly for small inline emphasis or primary nav */
/* font-light and font-bold are forbidden to maintain the soft "medium scale" aesthetic */

```

### Font Size Scale & Spacing

```css
text-[13px]      /* Glass caption chips, floating screenshot labels */
text-sm          /* Secondary navigation, footer links, small inputs (14px) */
text-base        /* Standard slate copy, relaxed and readable (16px) */
text-lg          /* Introductory paragraph leads, feature subtitles (18px) */
text-xl          /* Standard card headings, app state titles (20px) */
text-2xl         /* Primary section breaks (24px) */
text-3xl         /* The absolute maximum size: Hero headings (30px) */

leading-relaxed  /* Applied globally to all body text for an airy feel */
leading-snug     /* Applied to all headings (text-xl and above) */
tracking-normal  /* Zero letter-spacing manipulation; trust the typeface */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Line Height |
| --- | --- | --- | --- | --- |
| Hero Heading | 3xl | medium | slate-800 | snug |
| Card Title | xl | medium | slate-800 | snug |
| Muted Copy | base | regular | slate-500 | relaxed |
| Graphite CTA | base | medium | white | normal |
| Glass Chip | [13px] | medium | slate-700 | normal |

---

## Animation System

### Core Philosophy: The Gentle Glide

Animation is functional but highly cinematic. Elements enter with intentional delays, utilizing spring physics with low stiffness to create a floating, effortless reveal.

### Framer-Level Scroll Reveals

Sections do not simply appear; they drift upward into focus with a subtle blur fade.

```tsx
initial={{ opacity: 0, y: 30, filter: 'blur(4px)' }}
whileInView={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
viewport={{ once: true, margin: "-10%" }}
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }} /* Custom Apple-like easing */

```

### The Screenshot Glide (Parallax)

The signature move. As the user scrolls down the narrow column, the screenshot row glides upwards or sideways independently of the page scroll, creating deep spatial layers.

```tsx
const { scrollYProgress } = useScroll();
const yGlide = useTransform(scrollYProgress, [0, 1], [50, -150]);

<motion.div style={{ y: yGlide }} className="screenshot-row">
  {/* Cropped app states inside */}
</motion.div>

```

---

## UI Components

### The Pearl Card (Inner Highlight & Soft Shadow)

Cards mimic physical surfaces. They use a stark white inner top border to catch the light, combined with a highly diffuse, colored shadow.

```tsx
<div className="
  bg-white/80 backdrop-blur-xl 
  rounded-[32px] 
  border border-slate-200/50 
  shadow-[0_20px_40px_-15px_rgba(148,163,184,0.15)] 
  relative overflow-hidden
">
  {/* Inner highlight simulating physical glass edge */}
  <div className="absolute inset-0 rounded-[32px] ring-1 ring-inset ring-white/60 pointer-events-none" />
  {children}
</div>

```

### Slim Glass Navbar

A tightly constrained, floating pill that acts as the control center, remaining fixed at the top or bottom of the mobile-first column.

```tsx
<nav className="
  fixed top-6 left-1/2 -translate-x-1/2
  h-12 px-6
  bg-white/40 backdrop-blur-md saturate-150
  border border-white/40
  shadow-sm
  rounded-full
  flex items-center gap-6
  z-50
">
  {/* Nav Items */}
</nav>

```

### Glass Caption Chips

Floating identifiers pinned to cropped app states or screenshots.

```tsx
<div className="
  absolute bottom-4 left-4
  bg-white/60 backdrop-blur-lg
  border border-white/50
  rounded-full px-4 py-2
  text-[13px] font-medium text-slate-700
  shadow-sm
">
  Dynamic Sync
</div>

```

---

## Component Catalog

### Buttons

Strictly fully rounded (pill-shaped). Deep graphite for primary, mist-gray for secondary.

```tsx
// Primary Graphite CTA
"bg-slate-800 text-white font-medium text-base rounded-full px-8 py-3.5 hover:bg-slate-700 hover:scale-[0.98] transition-all duration-300 shadow-md shadow-slate-800/10"

// Secondary Mist-Gray Action
"bg-slate-100 text-slate-800 font-medium text-base rounded-full px-8 py-3.5 hover:bg-slate-200 transition-colors duration-300"

```

### Product Framing (Screenshot Rows)

Screenshots are never dumped raw onto the canvas. They are cropped, rounded, and nested inside mist-gray or pearl environments.

```tsx
// Screenshot Image Wrapper
<div className="p-2 bg-slate-50 border border-slate-100 rounded-[40px] shadow-sm">
  <img 
    src="app-state.png" 
    className="rounded-[32px] overflow-hidden border border-slate-200/40" 
    alt="App interface"
  />
</div>

```

### Mobile-First Core Container

The foundational wrapper that keeps the design constrained and focused on desktop.

```tsx
<main className="
  w-full max-w-2xl mx-auto 
  px-4 sm:px-8 py-24 
  flex flex-col gap-24
">
  {/* Stacked feature cards and typography go here */}
</main>

```

---

## Quality Checklist

* [ ] Is the primary layout strictly constrained to a narrow, mobile-first centered column (e.g., `max-w-2xl`)?
* [ ] Do all elevated elements (cards, chips) feature an inner white highlight (`ring-white/60`)?
* [ ] Are the hero headings constrained to `text-3xl` or smaller, utilizing `font-medium` rather than bold?
* [ ] Is the primary Call to Action fully rounded (`rounded-full`) and set to deep graphite (`bg-slate-800`)?
* [ ] Are background colors utilizing warm whites (`stone-50`) and translucent pearl (`white/80`) instead of flat white?
* [ ] Do screenshots glide independently on scroll using Framer Motion parallax?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Warm white bases layered with translucent frosted glass components.
* Generous, fully rounded border radii (`rounded-[32px]`, `rounded-full`).
* Soft, highly-diffuse slate drop shadows.
* Medium-weight typography with relaxed line-heights.
* Pinned, floating UI elements like caption chips or a slim center nav.
* Deeply nested, visually padded screenshot framing.

### ✗ Not Allowed

* Edge-to-edge full-width desktop content rows.
* Sharp, 90-degree corners on any interactive element or card.
* Stark blacks (`#000000`) or harsh, high-contrast borders.
* Heavy, muddy drop shadows with zero transparency.
* Massive, oversized hero typography (`6xl`+).
* Vibrant primary colors (brand identity comes exclusively from the framed screenshots).