Milk Glass Mobile Column Design System

/milkGlassMobileColumnDesignSystem
A mobile-first design system emphasizing a single vertical column, glassmorphic overlays, tactile contrast, and intimate, app-store-inspired warmth. Prioritizes serene photographic backdrops, soft radii, and strict typographic separation for premium, focused experiences.
0 likes
0 bookmarks
Jul 10, 2026
Design System Content
# Milk Glass Mobile Column Design System

A design language for soft, mobile-first, vertical app store-inspired experiences.

---

## Philosophy

> "Intimacy scales vertically; softness invites the tap."

This system creates interfaces that feel like an elevated, highly curated mobile app store—even on desktop monitors. It rejects sprawling horizontal layouts in favor of a single, immaculate vertical column. The aesthetic is anchored in warmth, approachability, and the tactile nature of frosted glass resting over serene photographic environments.

### Core Beliefs

1. **The Vertical Spine** — The layout remains tightly constrained to a single, centered column regardless of viewport size, creating a focused, app-like reading experience.
2. **Photographic Warmth** — Backgrounds feature full-height, serene photography (morning desks, café tables, bedroom details) softened by a milky glassmorphic overlay.
3. **Friendly Authority** — Typography blends bold, rounded geometry with highly readable, generous paragraph structures to feel both premium and approachable.
4. **Tactile Contrast** — Soft, washed-out backgrounds are punctuated by high-contrast, deeply dark interactive elements (pill buttons) that clearly signpost action.
5. **Generous Radii** — Sharp edges are eliminated. Everything from the primary containers to the smallest icon grids features soft, rounded corners.

### Strict Rules

* **No Sprawling Grids on Desktop** — Do not break the single-column vertical layout. Desktop views should feel like looking at a beautifully framed mobile device.
* **No Harsh Shadows** — Depth is created entirely through glassmorphic blurs, subtle border highlights, and milky overlays—never heavy drop shadows.
* **Strict Typeface Separation** — Manrope is exclusively for headings; DM Sans is exclusively for paragraphs and metadata. Do not mix their usage.
* **The Hero Lockup** — The hero must follow a strict vertical stack: Centered Title -> Generous Paragraph -> Dark Pill CTA Stack -> Phone Mockup. 
* **Milky Overlays Only** — Photographic backgrounds must never compete with text. They must always be shielded by a translucent white/cream wash.

---

## Color Palette

### The Soft Scale & Charcoal Actions

The palette avoids stark, digital whites and pure blacks, favoring organic, calming tones. It relies on a "Milk" and "Oat" foundation, accented by "Graphite" and anchored by "Roasted Charcoal" for primary actions.

```css
/* Backgrounds (Canvas & Containers) */
bg-milk-white         /* Primary canvas, pure but soft (#FDFFFC) */
bg-oat-cream          /* Secondary panels, subtle feature blocks (#F8F6F3) */
bg-pale-fog           /* Inactive states, subtle accordion backgrounds (#EBECEF) */
bg-white/60           /* Glassmorphic cards, milky photographic overlays */

/* Borders & Dividers */
border-pale-fog/50    /* Ultra-subtle separations inside rounded panels */
border-white/40       /* Inner highlights for glassmorphic borders */
border-oat-cream      /* Standard container boundaries */

/* The Anchor: Roasted Charcoal (CTAs & High-Contrast Elements) */
bg-roasted-charcoal   /* Primary dark pill CTAs, active states (#1F1E1D) */
border-roasted-charcoal /* Focused input rings, selected toggle borders */
bg-roasted-charcoal/5 /* Hover backdrops for secondary actions */

/* Text Hierarchy */
text-graphite         /* Primary headings, heavy titles (#2C2C2C) */
text-warm-gray        /* Paragraphs, secondary text, testimonials (#73706D) */
text-pale-fog         /* Placeholder text, disabled button text */
text-white            /* Text inside Roasted Charcoal CTAs */
```

### Destructive Actions

```css
hover:bg-red-50/50
hover:text-red-400
```

---

## Typography

The system pairs the bold, friendly geometry of **Manrope** with the clean, legible paragraph structures of **DM Sans**. Line heights are intentionally generous to create a calm pacing.

### Font Families & Weights

```css
font-manrope     /* Headings, App titles, bold numerical stats */
font-dmsans      /* Body copy, FAQs, testimonials, UI labels */

font-normal      /* Standard body copy */
font-medium      /* Pill buttons, navigation links, secondary headers */
font-bold        /* Hero titles, Section headers - MANDATORY for Manrope */
```

### Font Size Scale

```css
text-xs          /* Tiny utility labels, simple icon grid captions */
text-sm          /* Compact navigation items, testimonial metadata */
text-base        /* Standard paragraph body text, FAQ answers */
text-lg          /* Generous introductory text, featured highlights */
text-xl          /* Standard rounded feature panel titles */
text-3xl         /* Calm section titles (30-36px), FAQ group headers */
text-4xl         /* Centered Hero titles, primary value propositions */
```

### Line Height & Spacing

```css
leading-relaxed  /* Standard DM Sans paragraphs (1.625) */
leading-loose    /* Generous text blocks, hero descriptions (2.0) */
leading-tight    /* Manrope headings to keep them punchy */

tracking-tight   /* Manrope titles (text-3xl and up) */
tracking-normal  /* All DM Sans paragraphs */
```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Line Height |
| --- | --- | --- | --- | --- | --- |
| Hero Title | Manrope | 4xl | bold | graphite | tight |
| Section Title | Manrope | 3xl | bold | graphite | tight |
| Body Paragraph | DM Sans | base | normal | warm-gray | relaxed |
| Dark Pill CTA | DM Sans | base | medium | white | normal |
| Nav Link | DM Sans | sm | medium | warm-gray | normal |

---

## Animation System

### Core Philosophy: The Fluid Scroll

Motion should feel like sliding panes of frosted glass. Elements drift upward gently as the user scrolls the vertical column.

### Glassmorphic Reveal (On Scroll)

```tsx
initial={{ opacity: 0, y: 20, filter: 'blur(12px)' }}
whileInView={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
viewport={{ once: true, margin: "-50px" }}
```

### Pill Button Press

CTAs use a squishy, tactile spring animation that makes the "roasted charcoal" pill feel like a high-quality physical rubber button.

```tsx
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.96, transition: { type: "spring", stiffness: 400, damping: 25 } }}
```

---

## UI Components

### Milky Photographic Wash

The hero background uses a high-resolution, serene photo (e.g., morning desk) overlayed with a gradient milk-wash to ensure text readability while maintaining the vibe.

```tsx
<div className="absolute inset-0 bg-[url('/morning-desk.jpg')] bg-cover bg-center">
  <div className="absolute inset-0 bg-milk-white/80 backdrop-blur-[2px]" />
  <div className="absolute inset-0 bg-gradient-to-b from-transparent to-milk-white" />
</div>
```

### Single Centered Column Layout

The foundational wrapper for the entire application, forcing the vertical app-store aesthetic on all screens.

```tsx
<main className="w-full bg-milk-white flex flex-col items-center overflow-x-hidden">
  <div className="w-full max-w-md md:max-w-xl lg:max-w-2xl px-6 py-12 flex flex-col gap-16">
    {/* All content stacks vertically here */}
  </div>
</main>
```

### Phone Mockup Anchor

Placed directly beneath the CTA stack in the hero section.

```tsx
<div className="relative w-full max-w-[280px] mx-auto mt-8 shadow-2xl shadow-roasted-charcoal/10 rounded-[3rem] border-[8px] border-white z-10">
  <img src="/app-screen.jpg" className="w-full rounded-[2.25rem] overflow-hidden" />
</div>
```

---

## Component Catalog

### Buttons & Navigation

```tsx
// The Dark Pill CTA (Roasted Charcoal)
"w-full sm:w-auto bg-roasted-charcoal text-white font-dmsans font-medium text-base rounded-full px-8 py-4 shadow-md hover:bg-graphite transition-all flex items-center justify-center gap-2"

// Compact Navigation Container
"mx-auto flex items-center justify-center gap-6 px-6 py-3 bg-white/80 backdrop-blur-md rounded-full border border-white/40 shadow-sm"
```

### Cards & Panels

```tsx
// Rounded Feature Panel
"w-full bg-oat-cream rounded-[2rem] p-8 flex flex-col items-center text-center gap-4 border border-white/50"

// Glassmorphic Screenshot Card
"relative w-full bg-white/40 backdrop-blur-xl rounded-[2rem] p-4 border border-white shadow-[0_8px_32px_rgba(0,0,0,0.04)] overflow-hidden"
```

### Content Blocks

```tsx
// Stacked Feature Highlights
<div className="flex flex-col gap-6 w-full">
  <h3 className="font-manrope font-bold text-3xl text-graphite text-center">Calm, clear tracking.</h3>
  <p className="font-dmsans text-warm-gray text-base leading-relaxed text-center">
    Everything you need to capture your morning thoughts, without the noise.
  </p>
</div>

// FAQ Accordion Row
"w-full flex justify-between items-center py-5 border-b border-pale-fog text-left group cursor-pointer"
```

---

## Quality Checklist

* [ ] Is the entire experience constrained to a single, centered vertical column on desktop?
* [ ] Does the hero section follow the strict lockup: Header -> Text -> Dark Pill CTA -> Phone Mockup?
* [ ] Is the typography strictly separated? (Manrope for headings, DM Sans for body).
* [ ] Are all hero background images protected by a milky, semi-transparent white/cream wash?
* [ ] Do all primary buttons use the "Roasted Charcoal" fully-rounded pill styling?
* [ ] Are section titles kept to a calm `text-3xl` (30-36px) size?
* [ ] Are all cards and panels heavily rounded (e.g., `rounded-[2rem]` or `3xl`) with no sharp edges?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-quality, serene, lifestyle photography (cafes, desks, minimal rooms).
* Translucent glassmorphic panels layered over imagery.
* Fully rounded "pill" shapes for buttons, nav bars, and tags.
* Generous vertical spacing between centered elements.
* Centered text alignments for titles and introductory paragraphs.

### ✗ Not Allowed

* Horizontal side-by-side feature grids (bento boxes) on desktop.
* Sharp, 90-degree corners on containers or buttons.
* Unfiltered/unwashed photography that makes text hard to read.
* Any bright, highly saturated colors (neon blues, bright reds, vivid greens).
* Thin, lightweight heading fonts (Manrope must be bold).