Porcelain Meadow Glass

/porcelainMeadowGlass
A warm, editorial design system blending glassmorphism, soft organic forms, and nature-inspired palettes for premium, calming interfaces rooted in botanical aesthetics.
0 likes
0 bookmarks
Jul 10, 2026
Design System Content
# Porcelain Meadow Glass Design System

A design language for warm, refined interfaces blending organic botanical aesthetics with soft glassmorphism and editorial structure.

---

## Philosophy

> "Interface as a greenhouse—bathed in light, rooted in nature, and viewed through pristine glass."

This system creates interfaces that feel like a high-end lifestyle editorial seamlessly merged with modern software. It relies on the warmth of nature photography, the approachability of geometric-humanist typography, and the depth of frosted glass panels. The design should feel calm, organic, and incredibly premium—relying on soft curves, muted earth tones, and generous structural pacing.

### Core Beliefs

1. **Warmth Over Sterility** — Interfaces should feel inviting and human, utilizing beige and sage undertones rather than clinical, stark whites and cool grays.
2. **Glass as a Lens** — Glassmorphism is used not as a gimmick, but as a functional veil to layer editorial content over rich botanical and landscape photography without sacrificing legibility.
3. **Editorial Pacing** — Generous top margins, deliberate vertical stacking, and a clear rhythm between dense imagery and quiet whitespace create a premium reading experience.
4. **Soft Boundaries** — Sharp edges are eliminated in favor of rounded panels, pill-shaped buttons, and soft icon tiles that mimic the organic curves found in nature.
5. **Calm Intentionality** — Interactions don't snap or bounce aggressively; they breathe, fade, and blur, mimicking natural transitions like shifting mist or changing daylight.

### Strict Rules

* **Photography over Illustration** — Imagery must be rooted in high-end, muted botanical or landscape photography. No flat vectors or isometric tech illustrations.
* **No Sharp Corners** — All structural containers, cards, and buttons must possess deliberate border radii.
* **Restrained Palette** — Colors must exist in nature. No neon highlights, pure blacks, or stark primary colors. 
* **Legibility Through Frost** — Text placed over imagery must always be supported by a soft, frosted glassmorphism veil to ensure contrast.
* **Left-Aligned Reading Flow** — Below the hero, editorial content strictly follows left-aligned copy with imagery anchoring the right.

---

## Color Palette

### The Organic Scale

The palette eschews traditional grays for a warm, earthy progression—from pristine porcelain to deep, smoked olive-charcoal. 

```css
/* Canvas & Foundations */
bg-porcelain          /* Primary canvas, pure warm white (#FAF9F7) */
bg-mushroom-50        /* Subtle panel backgrounds, secondary canvas (#F4F2EE) */
bg-mushroom-100       /* Quiet FAQ modules, inactive structural layers (#EAE7E1) */

/* Glassmorphism & Overlays */
bg-white/40           /* Base glass layer for frosted cards */
bg-porcelain/60       /* Hero botanical veil base */
bg-meadow-100/50      /* Subtle active states, soft icon tile backdrops */

/* Borders & Dividers */
border-mushroom-200   /* Subtle horizontal dividers, quiet boundaries */
border-sage-200       /* Frosted card outer rings, soft tile borders */
border-white/40       /* Inner glass highlights for depth */

/* The Accents: Meadow Mist & Pale Sage */
bg-meadow-200         /* Active selection zones, delicate highlights (#DCE5DE) */
bg-sage-300           /* Muted interactive cues, secondary indicators (#B8C1BA) */
text-sage-600         /* Icons, subtle contextual links */

/* Primary Action & Typography: Olive-Charcoal & Graphite */
bg-olive-800          /* Smoked olive-charcoal: Primary CTAs, Pill buttons (#3D423C) */
border-olive-800      /* Focused input states, strict active boundaries */
hover:bg-olive-900    /* Deep CTA interaction states (#2C302B) */

/* Text Hierarchy */
text-graphite-900     /* Primary typography, hero headlines, section titles (#252423) */
text-graphite-700     /* Paragraph text, editorial body copy (#4A4846) */
text-sage-700         /* Compact labels, secondary metadata (#6B706A) */
text-mushroom-400     /* Subtle placeholders, disabled states (#A39F99) */
```

### Destructive Actions

```css
hover:bg-[#EAE0E0]    /* Soft muted terracotta backdrop */
hover:text-[#8C5252]  /* Faded rust/terracotta text */
```

---

## Typography

The typographic system is built on highly legible, approachable geometric-humanist sans-serifs (**Satoshi, DM Sans, or Manrope**). It balances the scale of a modern editorial magazine with the precision of a software interface.

### Font Weights

```css
font-normal      /* Hero headlines, Section titles — Promotes an airy, calm aesthetic */
font-medium      /* Paragraph text, general body copy, pill buttons */
font-semibold    /* Compact labels, small utility markers, FAQ triggers */
```

### Strict Size Scale

```css
text-[13px]      /* Compact labels, form tags, micro-metadata */
text-[15px]      /* Utility navigation, subtle interface hints */
text-[18px]      /* Paragraph text, core editorial body copy, FAQ answers */
text-[24px]      /* Sub-section callouts, quote blocks */
text-[32px]      /* Standard section titles (Mobile/Small Desktop) */
text-[36px]      /* Standard section titles (Large Desktop) */
text-[40px]      /* Hero headlines (Mobile/Small Desktop) */
text-[46px]      /* Hero headlines (Large Desktop) */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Family | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 40-46px | normal | graphite-900 | DM Sans / Satoshi | tight (-0.02em) |
| Section Title | 32-36px | normal | graphite-900 | DM Sans / Satoshi | tight (-0.01em) |
| Paragraph | 18px | medium | graphite-700 | DM Sans / Satoshi | normal |
| CTA Button | 15px | medium | porcelain | DM Sans / Satoshi | normal |
| Compact Label | 13px | semibold | sage-700 | DM Sans / Satoshi | wide (0.05em) |

---

## Animation System

### Core Philosophy: The Shifting Mist

Animations shouldn't feel mechanical. Elements fade and gently drift upward, while glass overlays smoothly adjust their blur properties to reveal or obscure depth.

### Page Transitions (Mist Reveal)

```tsx
initial={{ opacity: 0, y: 15, filter: 'blur(10px)' }}
animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
```

### Glass Hover Interactions

When interacting with frosted cards, the blur intensifies slightly and the inner white highlight brightens, mimicking light catching the edge of a pane of glass.

```tsx
whileHover={{ 
  backdropFilter: 'blur(24px)', 
  backgroundColor: 'rgba(255, 255, 255, 0.6)' 
}}
transition={{ duration: 0.4, ease: 'easeOut' }}
```

---

## Layout & Structure

### The Botanical Hero Veil

The hero section must feature a full-width landscape or botanical photograph. To maintain readability, it is layered beneath a frosted glassmorphism veil.

**Structure:**
1. Background botanical image (muted, warm tones).
2. `bg-porcelain/60` and `backdrop-blur-md` overlay.
3. Centered organic icon (e.g., leaf, sun, or abstract curve).
4. Tight 40–46px headline.
5. Short supporting copy (18px).
6. Calm, smoked olive-charcoal pill buttons.

```tsx
<section className="relative w-full h-[80vh] flex flex-col items-center justify-center">
  <div className="absolute inset-0 bg-[url('/botanical-bg.jpg')] bg-cover bg-center" />
  <div className="absolute inset-0 bg-porcelain/60 backdrop-blur-md" />
  
  <div className="relative z-10 flex flex-col items-center text-center max-w-2xl px-6">
    <LeafIcon className="w-8 h-8 text-olive-800 mb-6" />
    <h1 className="text-[40px] md:text-[46px] text-graphite-900 font-normal tracking-tight leading-tight">
      Cultivating better habits.
    </h1>
    <p className="mt-4 text-[18px] text-graphite-700 font-medium">
      A serene approach to daily productivity.
    </p>
    <div className="mt-8">
      <button className="bg-olive-800 text-porcelain px-8 py-3 rounded-full text-[15px] font-medium hover:bg-olive-900 transition-colors">
        Get Started
      </button>
    </div>
  </div>
</section>
```

### Frosted Mockup Cards (Beneath Hero)

Mobile mockups are housed in evenly spaced frosted cards, utilizing a generous top margin to detach them slightly from the hero, creating an intentional editorial pause.

```tsx
<div className="relative z-20 -mt-24 md:-mt-32 max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 px-6">
  {/* Frosted Card Container */}
  <div className="rounded-[32px] bg-white/40 backdrop-blur-xl border border-white/60 shadow-[0_8px_32px_rgba(0,0,0,0.04)] p-4 flex justify-center">
    <img src="/mobile-mockup-1.png" alt="App View" className="rounded-[24px]" />
  </div>
</div>
```

### Lower Editorial Sections

Vertically stacked rounded panels. Strict left-aligned copy with large section titles (32-36px), paired with right-side imagery and soft icon tiles.

```tsx
<section className="py-24 px-6 max-w-6xl mx-auto flex flex-col md:flex-row items-center gap-16">
  {/* Left Aligned Copy */}
  <div className="flex-1 space-y-6">
    <h2 className="text-[32px] md:text-[36px] text-graphite-900 font-normal leading-tight">
      Rooted in mindful design.
    </h2>
    <p className="text-[18px] text-graphite-700 font-medium leading-relaxed">
      Every interaction is designed to feel as natural as turning a page.
    </p>
    
    {/* Soft Icon Tiles */}
    <div className="grid grid-cols-2 gap-4 mt-8">
      <div className="p-4 rounded-2xl bg-mushroom-50 border border-mushroom-200">
        <SunIcon className="w-6 h-6 text-sage-600 mb-3" />
        <span className="text-[13px] font-semibold text-sage-700 uppercase tracking-wide">Morning Routine</span>
      </div>
    </div>
  </div>

  {/* Right Side Imagery */}
  <div className="flex-1">
    <div className="aspect-[4/5] rounded-[32px] overflow-hidden bg-mushroom-100">
      <img src="/lifestyle-image.jpg" className="w-full h-full object-cover" />
    </div>
  </div>
</section>
```

---

## Component Catalog

### Buttons

Buttons strictly use the "Pill" shape (fully rounded) to maintain the organic aesthetic.

```tsx
// Primary CTA (Smoked Olive-Charcoal)
"bg-olive-800 text-porcelain text-[15px] font-medium rounded-full px-7 py-3 hover:bg-olive-900 transition-colors duration-300"

// Secondary Calm Pill
"bg-mushroom-50 text-graphite-900 text-[15px] font-medium rounded-full px-7 py-3 border border-mushroom-200 hover:bg-mushroom-100 transition-colors duration-300"
```

### Soft Icon Tiles & Badges

```tsx
// Soft Icon Tile (For feature grids)
"flex flex-col items-start p-5 rounded-2xl bg-white border border-sage-200 shadow-sm"

// Compact Label (For metadata or categories)
"inline-flex items-center px-3 py-1 rounded-full bg-meadow-100 text-[13px] font-semibold text-sage-700 tracking-wide"
```

### Quiet FAQ Modules

Subtle dividers and quiet expandable areas, avoiding heavy dropdown boxes.

```tsx
<div className="border-b border-mushroom-200 py-6">
  <button className="w-full flex justify-between items-center text-left group">
    <span className="text-[18px] text-graphite-900 font-medium group-hover:text-olive-800 transition-colors">
      How do I adjust my settings?
    </span>
    <PlusIcon className="w-5 h-5 text-sage-600" />
  </button>
  {/* Expanded state uses 18px paragraph styling */}
</div>
```

---

## Quality Checklist

* [ ] Does the hero feature a full-width botanical/landscape image with a frosted overlay (`backdrop-blur`)?
* [ ] Are the primary headlines exactly between 40px and 46px, using a `normal` font weight?
* [ ] Is the paragraph text exactly 18px and highly legible against its background?
* [ ] Are all CTAs perfectly rounded pill shapes using the smoked olive-charcoal tone?
* [ ] Do mobile mockups sit inside frosted glass cards with a generous top margin creating an overlap effect?
* [ ] Are the lower sections correctly structured with left-aligned copy and right-aligned imagery?
* [ ] Are all labels sized at exactly 13px?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-quality, muted nature and lifestyle photography.
* Frosted glass containers (`backdrop-blur`) paired with semi-transparent white/porcelain backgrounds.
* Large amounts of padding and editorial-style whitespace.
* Perfectly rounded (pill) buttons and generous border radii (`rounded-2xl` / `rounded-[32px]`) on panels.
* Warm beige, porcelain, sage, and olive tones.

### ✗ Not Allowed

* Stark, clinical white (`#FFFFFF`) as a flat background without any warmth or glassmorphism.
* Sharp corners (`rounded-none` or `rounded-sm`) on cards, images, or buttons.
* Pure black (`#000000`) typography.
* Flat vector tech illustrations or 3D isometric renders.
* Center-aligned paragraph blocks in the lower editorial sections.
* Heavy drop shadows (use soft, diffuse shadows or border highlights instead).