Soft Gallery Phone System

/softGalleryPhoneSystem
A premium, gallery-inspired mobile design system using quiet whitespace, soft lighting, warm veils, and meticulous composition to frame UI as an interactive art piece, with strictly curated color, typography, and motion.
0 likes
0 bookmarks
Jul 10, 2026
Design System Content
# Soft Gallery Phone System

A design language for premium, gallery-inspired interfaces centering the mobile experience as an interactive art piece.

---

## Philosophy

> "The device is the artifact; the interface is the gallery."

This system creates digital environments that feel like a contemporary art museum or a high-end architectural exhibition. The aesthetic relies on quiet, expansive whitespace, soft lighting, and meticulous composition to elevate the central visual artifact—the phone mockup. The design feels grounded, premium, and meticulously curated, utilizing warm undertones and soft dimensionality.

### Core Beliefs

1. **The Artifact is Central** — The phone mockup is the undeniable focal point of the space, treated with the reverence of a museum sculpture.
2. **Quiet Surrounds** — Whitespace is not empty; it is a structural element that provides acoustic-like dampening to the visual noise of the web.
3. **Warm Materiality** — Instead of stark, clinical whites, the interface uses porcelain and warm veils to create an inviting, human-centric softness.
4. **Restrained Depth** — Depth is achieved through soft, diffused shadows and frosted glass, never harsh drop shadows or rigid lines.
5. **Typographic Contrast** — Elegance emerges from the interplay between structured, semibold display headings and highly legible, smooth paragraph text.

### Strict Rules

* **The Plinth Requirement** — The primary phone mockup must sit directly beneath the hero headline stack, housed within a frosted glass plinth.
* **Veiled Context** — Hero photography (minimal interiors, calm outdoors, desk details) must never be raw. It must always be veiled with a warm white wash for absolute typographic clarity.
* **Module Curvature** — All structural modules must feature smooth, rounded corners to contrast the strict geometry of the precise feature grid.
* **Restrained Headings** — Hero headlines are strictly capped between 38px and 44px. Massive typography is forbidden; elegance dictates restraint.
* **Color as Material** — Colors must emulate physical, premium materials (chalk, porcelain, smoke, graphite, olive). No synthetic digital hues.

---

## Color Palette

### The Exhibition Scale

The palette replaces stark digital hex codes with warm, natural neutrals. It transitions from a glowing gallery canvas up to a deeply saturated, grounding graphite for primary actions.

```css
/* Core Canvas & Modules */
bg-gallery-white      /* The master canvas, pure but warm (#FCFCFA) */
bg-porcelain          /* Rounded off-white modules, alternating sections (#F5F5F2) */
bg-pale-smoke         /* Hover states, subtle inactive backgrounds (#EBEBE8) */

/* Structural Borders & Lines */
border-gallery-white  /* Inner rings on frosted plinths */
border-porcelain      /* Soft module boundaries */
border-chalk-gray     /* Explicit grid lines, elegant dividers (#D6D6D2) */

/* Text Hierarchy */
text-blackened-olive  /* Primary headings, rich & deep (#2B2C27) */
text-muted-taupe      /* Body copy, subtle metadata, restrained titles (#8F8D88) */
text-chalk-gray       /* Placeholders, disabled states, micro-details */

/* The Anchor: Deep Graphite (CTAs & Focus) */
bg-deep-graphite      /* Primary call-to-action buttons, prominent badges (#1A1A1A) */
text-deep-graphite    /* High-contrast active navigation states */
border-deep-graphite  /* Focused input rings, precise selections */
```

### Contextual Imagery

```css
/* The Warm Veil (Overlay for hero photography) */
bg-gallery-white/85   /* Applied over interior/outdoor context photography */
```

---

## Typography

Typography balances structural authority with reading comfort. Display types are confident but intentionally scaled down to maintain the quiet gallery aesthetic, while paragraph text is generous and legible.

### Font Families

```css
font-manrope     /* Headings, section titles, primary numbers */
font-dmsans      /* Body copy, paragraphs, FAQs, navigation labels */
```

### Font Weights

```css
font-normal      /* Body copy, DM Sans standard text */
font-medium      /* Navigation items, secondary buttons */
font-semibold    /* Manrope only: All headings, section titles, bold body emphasis */
/* font-bold and font-extrabold are forbidden to maintain the soft aesthetic */
```

### Font Size Scale

```css
text-[12px]      /* Micro-labels, footer copyright */
text-[13px]      /* Compact navigation, precise metadata */
text-[14px]      /* Restrained section titles, FAQ toggles */
text-[17px]      /* MANDATORY: Standard body copy, paragraph text (DM Sans) */
text-[22px]      /* Card titles, secondary feature headers */
text-[28px]      /* Alternating section main headers */
text-[38px]      /* Hero headline minimum */
text-[44px]      /* Hero headline maximum - strictly centered */
```

### Letter Spacing & Transforms

```css
tracking-tight   /* Large headings, ensuring cohesive Manrope shapes */
tracking-normal  /* DM Sans body text for optimal reading flow */
tracking-widest  /* Restrained section titles, upper-cased */

uppercase        /* Exclusively for compact section titles and tiny metadata */
```

### Hierarchy Examples

| Element | Font | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Manrope | 38-44px | semibold | blackened-olive | tight |
| Main Body | DM Sans | 17px | normal | muted-taupe | normal |
| Section Titles | Manrope | 14px | semibold | muted-taupe | widest (uppercase) |
| Compact Nav | DM Sans | 13px | medium | blackened-olive | normal |
| Action Buttons | DM Sans | 15px | medium | gallery-white | normal |

---

## Animation System

### Core Philosophy: The Museum Unveil

Motion should feel like shifting light or gliding camera movements in a quiet room. No bouncing, no snapping.

### Hero & Plinth Entrance

```tsx
// The Plinth rises softly from the bottom while the image veil resolves
initial={{ opacity: 0, y: 30, filter: 'blur(12px)' }}
animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }} // Ultra-smooth friction
```

### Elegant Hover States

Buttons and cards do not lift; their internal shadows or background colors shift smoothly, maintaining their physical placement in the gallery.

```tsx
transition={{ duration: 0.4, ease: 'easeOut' }}
```

---

## UI Components

### The Frosted Glass Plinth

The mandatory housing for the central phone mockup. Placed directly below the 38-44px centered hero headline.

```tsx
<div className="relative mx-auto mt-12 p-6 rounded-[2rem] bg-gallery-white/40 backdrop-blur-2xl border border-gallery-white shadow-[0_16px_48px_-12px_rgba(43,44,39,0.08)]">
  {/* Phone Mockup Image Here */}
</div>
```

### The Warm Veil (Hero Backdrop)

Applies clarity and warmth over minimal interior, outdoor, or desk photography.

```tsx
<div className="absolute inset-0 bg-[url('/calm-interior.jpg')] bg-cover bg-center">
  <div className="absolute inset-0 bg-gallery-white/85 backdrop-blur-[2px]" />
</div>
```

### Gallery Modules

Rounded off-white containers used for alternating feature sections and grid items.

```tsx
<section className="bg-porcelain rounded-[2.5rem] px-10 py-16 shadow-[inset_0_1px_2px_rgba(255,255,255,0.6)]">
  {/* Content */}
</section>
```

---

## Component Catalog

### Compact Navigation

A restrained, pill-like or minimal inline navigation bar that floats without distracting from the hero.

```tsx
// Compact Floater
"flex items-center gap-6 px-6 py-3 bg-gallery-white/80 backdrop-blur-md rounded-full border border-chalk-gray/50 shadow-sm"

// Nav Links
"font-dmsans text-[13px] font-medium text-muted-taupe hover:text-blackened-olive transition-colors"
```

### Buttons

```tsx
// Primary CTA (Deep Graphite)
"bg-deep-graphite text-gallery-white font-dmsans font-medium text-[15px] px-8 py-3.5 rounded-full hover:bg-blackened-olive transition-all shadow-[0_4px_14px_rgba(26,26,26,0.15)]"

// Secondary / Module Button
"bg-gallery-white text-blackened-olive border border-chalk-gray font-dmsans font-medium text-[15px] px-8 py-3.5 rounded-full hover:bg-porcelain transition-all"
```

### The Precise Feature Grid

A meticulously aligned bento-style grid utilizing soft shadows and rounded boundaries.

```tsx
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
  <div className="bg-porcelain rounded-[2rem] p-8 border border-gallery-white shadow-[0_4px_24px_-8px_rgba(43,44,39,0.05)]">
    <h4 className="font-manrope font-semibold text-[22px] text-blackened-olive mb-3">Feature Name</h4>
    <p className="font-dmsans text-[17px] text-muted-taupe leading-relaxed">
      Description goes here, utilizing the mandatory 17px body copy sizing.
    </p>
  </div>
</div>
```

### Elegant FAQs

Minimalist accordion structure relying on typographic hierarchy rather than heavy bounding boxes.

```tsx
// FAQ Row
"border-b border-chalk-gray py-6 group cursor-pointer"

// FAQ Question
"font-manrope font-semibold text-[18px] text-blackened-olive group-hover:text-deep-graphite transition-colors flex justify-between items-center"

// FAQ Answer
"font-dmsans text-[17px] text-muted-taupe mt-4 leading-relaxed pr-12"
```

---

## Quality Checklist

* [ ] Is the hero headline strictly scaled between 38px and 44px, using Manrope Semibold, and centered?
* [ ] Is the phone mockup placed directly beneath the hero stack inside a Frosted Glass Plinth?
* [ ] Is the primary body copy strictly set to 17px DM Sans?
* [ ] Are all hero background photographs veiled with a warm white wash (`bg-gallery-white/85`) to ensure typographic legibility?
* [ ] Do all modules and cards use smooth, rounded corners (e.g., `rounded-[2rem]`) over a porcelain or off-white background?
* [ ] Are primary CTAs executed in Deep Graphite with generous border radii?
* [ ] Is the interface completely devoid of harsh, opaque black drop shadows?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-quality, minimal context photography (desks, interiors, soft outdoors) deeply veiled in warm white.
* Generous, quiet whitespace flanking all sides of the central mockup and gallery modules.
* Soft, diffused shadows that emulate physical lighting in a gallery setting.
* Alternating off-white background layers (Gallery White to Porcelain) to delineate sections.
* Strict adherence to the 17px body copy rule for premium readability.

### ✗ Not Allowed

* Un-veiled, raw, or high-contrast background photography that competes with the typography.
* Flat, unstyled device mockups without a plinth or environmental grounding.
* Huge, oversized typography (anything above 44px is strictly forbidden).
* Sharp-cornered feature cards or harsh borders.
* Saturated UI colors (blues, greens, reds) for primary buttons or structural elements.