Porcelain Glass Device Editorial

/porcelainGlassDeviceEditorial
A refined design system emulating high-end editorial spreads through calm porcelain surfaces, tactile glass layering, generous spacing, strict font pairing, and grounded device framing for premium, gallery-like digital experiences.
0 likes
0 bookmarks
Jun 16, 2026
Design System Content
# Porcelain Glass Device Editorial Design System

A design language for calm, world-class interfaces combining refined editorial typography, immaculate surfaces, and tactile device framing.

---

## Philosophy

> "Design should feel like a curated gallery: quiet surfaces, perfect lighting, and the art speaking for itself."

This system creates interfaces that emulate a high-end editorial spread. It relies on the interplay between physical-feeling materials—pristine porcelain canvases and restrained frosted glass—and hyper-crisp digital typography. The result is an art-directed experience that feels calm, authoritative, and effortlessly premium.

### Core Beliefs

1. **Editorial Calmness** — Vast, generous gutters and deliberate whitespace act as the primary structural elements. The interface must never shout.
2. **Material Authenticity** — Backgrounds mimic physical porcelain (soft, matte, ultra-light), while overlapping elements utilize restrained glassmorphism (translucency and blur) to establish depth without visual noise.
3. **Typographic Duality** — The tension between geometric, architectural headings (Manrope) and accessible, humanist body copy (DM Sans) creates immediate high-end editorial contrast.
4. **Grounded Framing** — Imagery and mockups are not floating freely; they are anchored by soft contact shadows within rounded, solid lifestyle or studio-image panels.
5. **Restrained Palettes** — High contrast is achieved through dark charcoal UI elements acting as anchors against the pale canvas, avoiding the need for saturated, colorful accents.

### Strict Rules

* **Restrained Glassmorphism Only** — Blurs and translucency must be subtle and elegant. Heavy, distorted glass effects or intense specular highlights are forbidden.
* **No Floating Drop Shadows** — Depth is created via soft contact shadows directly beneath objects (like a phone resting on a surface) or via pale-gray containers, never via muddy, diffuse drop shadows on UI cards.
* **Strict Font Pairing** — Manrope is exclusively for headings and primary metrics; DM Sans is exclusively for body paragraphs and descriptions.
* **Fine Dividers Only** — Separation between sections or items must use hairline, low-contrast borders.

---

## Color Palette

### The Porcelain & Charcoal Scale

The palette eschews stark, blinding `#FFFFFF` for softer, gallery-wall porcelain tones, contrasted sharply by deep, rich charcoals. 

```css
/* Porcelain Backgrounds (Surfaces & Containers) */
bg-[#FCFCFC]          /* Primary porcelain canvas */
bg-gray-50            /* Pale-gray containers, alternating section blocks */
bg-gray-100/50        /* Secondary panels, studio-image panel backdrops */
bg-white/70           /* Translucent glass layers (requires backdrop-blur) */
bg-white/40           /* Caption chips, ultra-subtle overlays */

/* Dividers & Boundaries */
border-gray-200/60    /* Fine dividers, delicate structural lines */
border-gray-300/40    /* Secondary borders, glassmorphic edges */
border-white/20       /* Inner highlights for glass elements */

/* Dark Charcoal (Actions & High-Contrast Elements) */
bg-zinc-900           /* Primary CTA background, heavy buttons */
bg-zinc-800           /* Hover states for primary actions */
bg-zinc-100           /* Secondary CTA background (paired with primary) */

/* Text Hierarchy */
text-zinc-900         /* Primary headlines, high-contrast markers */
text-zinc-700         /* Section headings, primary labels */
text-zinc-500         /* Body copy, descriptions, secondary notes */
text-zinc-400         /* Uppercase micro-labels, metadata, fine details */
text-white            /* Inverse text on primary charcoal CTAs */

```

---

## Typography

The system relies on a strict dual-font approach. Manrope provides geometric, world-class architecture for headlines, while DM Sans offers clean, readable warmth for descriptions.

### Font Families

```css
font-sans             /* Manrope - Headlines, display text, large numbers */
font-serif            /* DM Sans - Body copy, descriptions, button text */
```

### Font Weights

```css
font-normal      /* DM Sans: Default description text, secondary notes */
font-medium      /* DM Sans: Buttons, interactive elements, translucent chips */
font-semibold    /* Manrope: Section headings, FAQ triggers, sub-labels */
font-extrabold   /* Manrope: Exclusively for text-4xl Hero headlines to anchor the page */
```

### Font Size Scale & Layout

```css
text-[10px]      /* Caption chips, tiny metadata */
text-xs          /* Small uppercase labels, pre-headers */
text-sm          /* Secondary descriptions, standard button labels */
text-base        /* Primary body descriptions (DM Sans) */
text-lg          /* Semibold section headings (Manrope) */
text-2xl         /* Sub-hero callouts, block headings */
text-4xl         /* Hero headline (Manrope, centered, extrabold) */
```

### Letter Spacing & Transforms

```css
tracking-tight   /* text-4xl Hero headlines to maintain solid typographic blocks */
tracking-normal  /* DM Sans body descriptions */
tracking-widest  /* Small uppercase labels, pre-headers */

uppercase        /* Small pre-header labels, translucent caption chips */
```

### Hierarchy Examples

| Element | Font | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- | --- |
| Hero Headline | Manrope | 4xl | extrabold | zinc-900 | tight | none |
| Section Headings | Manrope | lg | semibold | zinc-900 | normal | none |
| Body Description | DM Sans | base | normal | zinc-500 | normal | none |
| Small Labels | Manrope | xs | semibold | zinc-400 | widest | uppercase |
| CTA Buttons | DM Sans | sm | medium | white/zinc-900 | normal | none |

---

## Layout & Spatial System

### Generous Gutters

Art-direction relies on massive breathing room. Elements should never feel constrained.

```css
/* Section Spacing */
py-24 md:py-32        /* Default vertical padding for major sections */
gap-16 md:gap-24      /* Spacing between alternating heading-description blocks and images */

/* Inner Padding */
px-8 md:px-16         /* Page gutters */
p-12                  /* Inside pale-gray lifestyle/studio containers */
```

---

## Animation System

### Elegant Accordion Motion (FAQ Rows)

Expansions must feel fluid, spring-driven, and highly polished, avoiding linear, robotic reveals.

```tsx
initial={{ height: 0, opacity: 0 }}
animate={{ height: "auto", opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
transition={{ type: "spring", bounce: 0, duration: 0.5, opacity: { duration: 0.2 } }}
```

### Restrained Glass Reveal

Used for translucent chips and floating navbars entering the viewport.

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

---

## UI Components

### Navigation

```tsx
// Slim Navbar
"fixed top-0 w-full h-14 bg-white/70 backdrop-blur-md border-b border-gray-200/60 flex items-center justify-between px-8 z-50 transition-all"
```

### Buttons & CTAs

```tsx
// Dark Charcoal CTA Pair (Container)
"flex items-center justify-center gap-4 mt-8"

// Primary Dark Charcoal Button
"bg-zinc-900 text-white font-serif font-medium text-sm px-6 py-3 rounded-full hover:bg-zinc-800 transition-colors"

// Secondary Pale Button
"bg-zinc-100 text-zinc-900 font-serif font-medium text-sm px-6 py-3 rounded-full hover:bg-gray-200 transition-colors"
```

### Glassmorphism & Labels

```tsx
// Translucent Caption Chip (Over Images)
"inline-flex items-center px-3 py-1.5 rounded-full bg-white/40 backdrop-blur-md border border-white/20 text-[10px] font-sans font-semibold uppercase tracking-widest text-zinc-900 shadow-[0_2px_8px_rgba(0,0,0,0.04)]"

// Small Uppercase Label (Standard)
"text-xs font-sans font-semibold uppercase tracking-widest text-zinc-400 mb-3 block"
```

### Dividers

```tsx
// Fine Divider
"w-full h-[1px] bg-gray-200/60"
```

---

## Component Catalog

### Hero Section

A calm, centered focal point transitioning down into a polished physical product showcase.

```tsx
// Hero Container
<section className="flex flex-col items-center text-center pt-32 pb-16 px-8">
  <h1 className="font-sans font-extrabold text-4xl text-zinc-900 tracking-tight max-w-2xl">
    {/* Headline */}
  </h1>
  <p className="font-serif font-normal text-base text-zinc-500 max-w-lg mt-6">
    {/* Short description */}
  </p>
  <div className="flex gap-4 mt-8">
    {/* Dark Charcoal CTA Pair */}
  </div>
</section>

// Polished Phone Mockup in Studio Panel
<div className="mx-auto max-w-5xl bg-gray-50 rounded-3xl p-12 flex justify-center items-end overflow-hidden relative">
  {/* Soft Contact Shadow beneath device */}
  <div className="absolute bottom-10 w-[280px] h-[20px] bg-black/20 blur-xl rounded-[100%]" />
  <img src="phone-mockup.png" className="relative z-10 drop-shadow-none" />
</div>
```

### Alternating Device Blocks

Lower sections balance text and product imagery in pale containers.

```tsx
// Block Container (Alternating flex-row / flex-row-reverse)
<div className="flex flex-col md:flex-row items-center gap-24 py-24 px-8 max-w-6xl mx-auto">
  // Text Half
  <div className="flex-1">
    <span className="text-xs font-sans font-semibold uppercase tracking-widest text-zinc-400 mb-3 block">Label</span>
    <h3 className="font-sans font-semibold text-lg text-zinc-900 mb-4">Heading</h3>
    <p className="font-serif text-base text-zinc-500">Description</p>
  </div>
  // Mockup Half
  <div className="flex-1 bg-gray-50 rounded-3xl p-8 flex justify-center relative">
    <div className="absolute bottom-6 w-[80%] h-[15px] bg-black/10 blur-lg rounded-full" /> {/* Contact Shadow */}
    <img src="mobile-mockup.png" className="relative z-10" />
  </div>
</div>
```

### Spacious FAQ Rows

```tsx
// FAQ Row
<div className="border-b border-gray-200/60 py-6 group cursor-pointer">
  <div className="flex justify-between items-center">
    <h4 className="font-sans font-semibold text-lg text-zinc-900 group-hover:text-zinc-600 transition-colors">
      Question text
    </h4>
    {/* Elegant Plus/Minus Icon */}
  </div>
  {/* Accordion Motion Container */}
  <div className="overflow-hidden">
    <p className="font-serif text-base text-zinc-500 pt-4 max-w-3xl">
      Answer text
    </p>
  </div>
</div>
```

---

## Quality Checklist

* [ ] Is the Hero headline exactly `text-4xl`, centered, and using the Manrope font?
* [ ] Are all long-form descriptions short, punchy, and set in DM Sans?
* [ ] Do all mockups feature soft contact shadows beneath them rather than floating drop shadows?
* [ ] Are the UI containers utilizing pale-gray (`bg-gray-50`) to emulate studio panels?
* [ ] Are the CTAs paired using dark charcoal (`bg-zinc-900`) and pale (`bg-zinc-100`) combinations?
* [ ] Do glassmorphic caption chips use strict backdrop blurs without becoming illegible?
* [ ] Are dividers restricted to ultra-fine lines (`border-gray-200/60`)?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High contrast between porcelain backgrounds (`#FCFCFC`, `gray-50`) and dark charcoal typography.
* Translucent glass caption chips overlapping photography.
* Centered, tightly tracked headlines.
* Soft contact shadows painted underneath devices to ground them.
* Generous gutters (`py-24`, `gap-24`) to enforce an art-directed layout.

### ✗ Not Allowed

* Drop shadows applied directly to UI cards or text boxes.
* Saturated, vibrant colors for primary buttons or accents (no bright blues, greens, or reds).
* Mixing typography rules (e.g., using DM Sans for a main headline or Manrope for a paragraph).
* Cluttered or dense feature grids—grids must be minimal and spacious.
* Thick borders or heavy, solid dividing lines.