Gallery White Device Editorial

/galleryWhiteDeviceEditorial
A premium design system inspired by high-end galleries and editorial print, emphasizing immaculate spacing, device mockups, warm minimalism, strict typographic scales, and glass-like translucency for refined, device-centric digital experiences.
0 likes
0 bookmarks
Jul 10, 2026
Design System Content
# Gallery White Device Editorial

A design language for premium, device-centric interfaces built on the foundation of high-end art galleries and meticulous editorial print.

---

## Philosophy

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

This system leverages massive, deliberate whitespace and a warm, restrained palette to frame digital products with the reverence of physical art pieces. It rejects decoration in favor of immaculate structural alignment, device previews, and hyper-precise typographic scale.

### Core Beliefs

1. **The Product is the Exhibit** — Device mockups and screenshots are the primary visual anchors. The surrounding UI exists only to frame and contextualize them.
2. **Editorial Restraint** — Borrowing from high-end print, layouts utilize structured columns, generous margins, and strict typographic scaling. 
3. **Warm Minimalism** — Pure, harsh black and cold grays are replaced with warm, ink-like charcoals and soft cements to create an inviting, premium atmosphere.
4. **Immaculate Spacing** — Elements require significant breathing room. Equal-width grids and quiet dividers demand flawless spatial alignment.
5. **Translucency over Opacity** — Depth is achieved through faint glass borders and light veils over photographic backdrops rather than drop shadows.

### Strict Rules

* **Device Consistency** — All device screenshots must feature consistent cropping and scale within their grids.
* **Pill-Shaped CTAs** — Primary interactive elements strictly use fully rounded, pill-shaped geometry to contrast the sharp structural grids.
* **Typographic Rigidity** — Adhere entirely to the four predefined size brackets. Do not create intermediate font sizes.
* **Photographic Veils** — Hero backgrounds must utilize a light translucent overlay to ensure foreground typography remains perfectly legible.

---

## Color Palette

### Warm Minimalist Scale

The palette eschews cold, sterile tech colors for a museum-grade aesthetic. It transitions from a foundational gallery white through warm, structural grays, ending in a rich, dark umber-charcoal for primary actions.

```css
/* Backgrounds & Canvas */
bg-gallery-white      /* Main canvas, primary backgrounds (#FAFAFA or #FFFFFF) */
bg-off-white          /* Soft panels, secondary content zones (#F5F4F2) */

/* Structural Grays */
bg-pearl-gray         /* Hover states, subtle inactive tab fills (#EBE9E4) */
border-pale-cement    /* Faint glass borders, structured card boundaries (#DCD9D4) */
border-soft-smoke     /* Quiet dividers, refined icon row lines (#B8B5B0) */

/* Typography & Contrast */
text-ink-charcoal     /* Hero headlines, primary paragraph text (#22201F) */
text-soft-smoke       /* Metadata labels, secondary descriptive text (#7A7772) */

/* The Anchor: Dark Umber-Charcoal (CTA) */
bg-umber-charcoal     /* Primary pill buttons, footer CTA background (#2B2624) */
text-umber-charcoal   /* High-priority active states, critical text highlights */
border-umber-charcoal /* Active input focus rings, selected toggles */

```

### Destructive Actions (Deletions Only)

```css
hover:bg-[#FFF0ED]
hover:text-[#8A3528]
hover:border-[#E8C4BE]

```

---

## Typography

Rooted strictly in premium Swiss and neo-grotesque traditions. The system exclusively uses **Helvetica Now**, **Geist**, or **SF Pro Display**.

### Font Weights

```css
font-regular     /* The dominant weight for paragraphs and section headings */
font-medium      /* Metadata labels, button labels, refined icon rows */
font-semibold    /* Compact hero headlines, strictly used for top-level structural anchor points */

```

### Strict Font Size Scale

The typographic scale is highly restrictive to maintain editorial integrity. Intermediate sizes are prohibited.

```css
text-[12px] md:text-[14px]  /* Metadata labels, refined icon tags, UI footnotes */
text-[18px] md:text-[20px]  /* Paragraph text, structured FAQ bodies, testimonials */
text-[34px] md:text-[42px]  /* Section headings, large rounded image/text section titles */
text-[44px] md:text-[52px]  /* Hero headlines (compact and centered) */

```

### Hierarchy Examples

| Element | Size Bracket | Weight | Color | Alignment |
| --- | --- | --- | --- | --- |
| Compact Hero Headline | 44–52px | semibold | ink-charcoal | Center |
| Section Headings | 34–42px | regular | ink-charcoal | Left |
| Paragraph Text | 18–20px | regular | ink-charcoal | Left / Center |
| Metadata Labels | 12–14px | medium | soft-smoke | Left |
| Button Text | 12–14px | medium | gallery-white | Center |

---

## Animation System

### Core Philosophy: The Physical Slide

Movement mimics high-end physical materials sliding smoothly over one another—glass over paper, photo prints settling into frames.

### Photographic Veil Reveal

```tsx
initial={{ opacity: 0, backdropFilter: 'blur(0px)' }}
animate={{ opacity: 1, backdropFilter: 'blur(12px)' }}
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}

```

### Device Grid Stagger

Mockup cards appear with immense subtlety, gently rising into their strict alignments.

```tsx
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, staggerChildren: 0.1, ease: "easeOut" }}

```

---

## UI Components

### The Photographic Veil (Hero Backdrop)

A full-width, edge-to-edge component that washes the underlying photography in a light, gallery-white haze to ensure the compact headline pops.

```tsx
<div className="relative w-full h-[80vh] overflow-hidden">
  <img src="backdrop.jpg" className="absolute inset-0 object-cover w-full h-full" />
  <div className="absolute inset-0 bg-gallery-white/60 backdrop-blur-md" />
  <div className="relative z-10 flex flex-col items-center justify-center h-full">
    {/* Centered Hero Content */}
  </div>
</div>

```

### Slim Translucent Navigation

Floats lightly above the veil. Features a centered icon and flawless symmetry.

```tsx
<nav className="fixed top-0 w-full h-16 bg-gallery-white/70 backdrop-blur-lg border-b border-pale-cement/50 flex items-center justify-between px-8 z-50">
  <div className="flex-1">{/* Left Links */}</div>
  <IconLogo className="w-6 h-6 text-ink-charcoal" /> {/* Centered Icon */}
  <div className="flex-1 flex justify-end">{/* Right Actions */}</div>
</nav>

```

### Faint Glass Borders

Applied exclusively to device mockup frames to separate them from the canvas without heavy lines.

```tsx
className="border border-white/40 shadow-[0_0_1px_rgba(220,217,212,1)] bg-white/50 backdrop-blur-sm"

```

---

## Component Catalog

### Device Mockup Grid

Equal-width cards beneath the hero with significant breathing room. 

```tsx
// Grid Container
"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 lg:gap-16 px-12 py-24 max-w-7xl mx-auto"

// Device Card Frame
"relative w-full rounded-2xl overflow-hidden border border-pale-cement bg-off-white aspect-[3/4] flex items-center justify-center p-8"

// Consistent Screenshot Cropping
"w-full h-full object-cover object-top rounded-lg shadow-sm"

```

### Buttons

Strictly pill-shaped, utilizing the dark umber-charcoal palette.

```tsx
// Primary CTA Buttons (Hero pairs)
"rounded-full bg-umber-charcoal text-gallery-white px-8 py-3.5 text-[12px] md:text-[14px] font-medium hover:bg-ink-charcoal transition-colors duration-300"

// Secondary Pill Button (Outlined)
"rounded-full bg-transparent border border-umber-charcoal text-umber-charcoal px-8 py-3.5 text-[12px] md:text-[14px] font-medium hover:bg-pearl-gray/30 transition-colors duration-300"

```

### Structural Content Panels

Large rounded image/text sections for feature deep-dives.

```tsx
// Feature Panel
"bg-off-white rounded-[32px] p-12 md:p-20 flex flex-col md:flex-row items-center gap-16"

// Quiet Divider
"w-full h-[1px] bg-soft-smoke/30 my-16"

```

### Structured Testimonials & FAQs

```tsx
// FAQ Row
"border-b border-soft-smoke/30 py-6 flex flex-col gap-2"

// FAQ Question (Metadata Label Scale applied to UI control)
"text-[12px] md:text-[14px] text-ink-charcoal font-medium tracking-wide uppercase"

// FAQ Answer
"text-[18px] md:text-[20px] text-soft-smoke font-regular leading-relaxed"

```

---

## Quality Checklist

* [ ] Are you exclusively using Helvetica Now, Geist, or SF Pro Display?
* [ ] Is the hero headline exactly between 44px and 52px?
* [ ] Does paragraph text strictly sit at 18–20px with generous leading?
* [ ] Do metadata labels sit exactly at 12–14px?
* [ ] Are all call-to-action buttons heavily rounded (pill-shaped) and dark umber-charcoal?
* [ ] Does the hero section feature a full-width photo with a light translucent veil?
* [ ] Is the navigation extremely slim, translucent, and featuring a perfectly centered icon?
* [ ] Does the device mockup grid have massive breathing room and equal-width cards?
* [ ] Are all device screenshots cropped consistently within their containers?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Faint glass-like borders (`border-white/40` over structural grays).
* Massive vertical and horizontal padding (`py-24`, `gap-16`).
* Two pill-shaped buttons placed side-by-side in the hero section.
* Light, photographic background washes.
* Refined icon rows acting as metadata labels.

### ✗ Not Allowed

* Square or slightly rounded buttons (e.g., `rounded-md` is strictly forbidden for CTAs).
* Pure pitch black (`#000000`). Must use ink charcoal or umber-charcoal.
* Any typography sizing outside the four predefined brackets.
* Standard solid-color hero sections (must use the veiled photographic backdrop).
* Heavy, dark drop shadows behind device mockups.