Ivory Glass Mobile Classic

/ivoryGlassMobileClassic
A warm, frosted-glass design system for high-end mobile app landing pages—centered layouts, photographic depth, and tactile minimalism focusing on organic ivory tones, espresso accents, and pristine device presentation.
0 likes
0 bookmarks
Jul 10, 2026
Design System Content
# Ivory Glass Mobile Classic Design System

A design language for polished, premium landing pages built for reusable, world-class app presentation.

---

## Philosophy

> "Warmth grounds the interface; translucency elevates the product."

This system creates digital environments that feel like high-end editorial product showcases—inviting, tactile, and structurally pristine. The design balances the organic warmth of ivory and espresso tones with the modern precision of frosted glass and crisp device mockups. It is built to frame the application perfectly, utilizing depth, photographic reality, and soft translucency.

### Core Beliefs

1. **The Product is the Hero** — Everything centers around the physical context of the app (the phone mockup). The UI serves purely as a beautiful, unobtrusive pedestal.
2. **Warm Minimalism** — Pure stark white is replaced with soft ivory and warm grays. Black is replaced with graphite and charcoal-brown to reduce eye strain and increase perceived luxury.
3. **Photographic Depth** — Backgrounds leverage real-world context (workspaces, lifestyle details, soft landscapes) heavily veiled in white to create a subconscious sense of reality without competing with UI text.
4. **Deliberate Curves** — Components rely on rounded shapes—from dark pill buttons to off-white feature blocks—creating a friendly yet premium tactile feel.
5. **Glass and Light** — Depth is achieved through frosted glass effects and hairline borders, allowing the photographic background to subtly influence the interface's color profile.

### Strict Rules

* **Two-Typeface Rule** — Manrope is exclusively for headings; DM Sans is exclusively for supporting copy. No deviations.
* **No Stark Black or Pure White** — Use charcoal-brown/graphite for high-contrast text and ivory for primary canvases.
* **Centered Anchors** — Hero sections must maintain strict center alignment (headline, description, buttons, mockup) to create immediate structural balance.
* **Restrained Iconography** — Icon grids must be spacious and minimal, acting as subtle visual cues rather than heavy illustrations.
* **No Colored CTAs** — Primary actions are always Deep Espresso to maintain the mature, classic aesthetic.

---

## Color Palette

### The Ivory & Earth Scale

The palette eschews cold grays and harsh blacks in favor of an organic, sophisticated spectrum ranging from warm ivory to deep espresso.

```css
/* Backgrounds (Lightest to Darkest) */
bg-ivory-50           /* Main canvas & subtle veils (#FCFBF9) */
bg-warmgray-100       /* Off-white rounded feature sections (#F5F4F1) */
bg-stone-200/60       /* Glass cards, secondary interactive zones (#E8E6E1) */
bg-stone-200/80       /* Hover states for interactive off-white cards */
bg-stone-300          /* Restrained structural elements, tag backgrounds */

/* Borders */
border-warmgray-200   /* Hairline borders for feature sections */
border-stone-300      /* Card outlines, subtle dividers */
border-graphite-400/20 /* Frosted glass structural borders */

/* Call to Action (The Anchor) */
bg-espresso-900       /* Deep espresso pill buttons (#2C1E16) */
hover:bg-espresso-800 /* CTA hover state (#3D2C22) */
border-espresso-900   /* Focused input rings, active borders */

/* Text Hierarchy (Warm Contrast) */
text-charcoal-900     /* Primary hero headlines, high-impact numbers (#272321) */
text-charcoal-800     /* Calm section headings, active states */
text-graphite-700     /* Supporting copy, paragraph text (#4A4745) */
text-graphite-500     /* Subtle metadata, restrained icon grids, FAQ toggles */
text-stone-400        /* Placeholders, disabled states, micro-labels */

/* Overlays & Effects */
bg-white/80           /* The "Subtle White Veil" for photographic backgrounds */
bg-white/60           /* Frosted navbar base (combined with backdrop-blur) */
```

---

## Typography

The system relies on a strict duo-typeface relationship. Headings are architectural and structured, while body copy is highly legible and inviting.

### Font Families & Weights

```css
font-manrope     /* Headings exclusively */
font-dmsans      /* Body copy, buttons, labels exclusively */

font-normal      /* Standard DM Sans body copy */
font-medium      /* Buttons, navigation links, glass card meta-labels */
font-semibold    /* Manrope headings (Hero, Section, Feature Titles) - MANDATORY */
```

### Font Size Scale

```css
text-xs          /* Compact metadata, footer links (12px) */
text-sm          /* Navigation links, small capsule labels (14px) */
text-base        /* Standard UI elements, input text (16px) */
text-[17px]      /* Primary paragraph text minimum (DM Sans, 17px) */
text-lg          /* Primary paragraph text maximum (DM Sans, 18px) */
text-xl          /* Glass card titles, FAQ question headers (20px) */
text-3xl         /* Calm section headings minimum (Manrope, 32px) */
text-[38px]      /* Calm section headings maximum (Manrope, 38px) */
text-4xl         /* Centered Hero Headline (Manrope, 36px-40px depending on viewport) */
```

### Letter Spacing & Line Height

```css
tracking-tight   /* Manrope headings (-0.02em to -0.04em) */
tracking-normal  /* DM Sans body text (0em) */
leading-snug     /* Headings (1.2 - 1.3) */
leading-relaxed  /* 17-18px paragraph text for maximum readability (1.6) */
```

---

## Animation System

### Core Philosophy: The Smooth Drift

Motion should mimic the physical sliding of glass and paper—smooth, friction-based, and never springy or erratic.

### Glass Reveal Transitions

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

### Mockup Parallax

The phone mockup gently shifts on scroll, anchoring the page's physical presence.

```tsx
const y = useTransform(scrollY, [0, 1000], [0, -40]);
<motion.div style={{ y }} className="relative z-10 mx-auto mt-12" />
```

---

## UI Components

### The Hero Anchor

The signature component of this aesthetic. A highly structured, centered layout layered over real-world photography.

```tsx
<header className="relative w-full min-h-[90vh] flex flex-col items-center justify-start pt-32 overflow-hidden">
  {/* Photographic Background with Subtle White Veil */}
  <div className="absolute inset-0 z-0">
    <img src="/workspace-bg.jpg" className="object-cover w-full h-full" alt="" />
    <div className="absolute inset-0 bg-ivory-50/85 backdrop-blur-[2px]" />
  </div>
  
  {/* Centered Content */}
  <div className="relative z-10 max-w-3xl mx-auto text-center px-6">
    <h1 className="font-manrope font-semibold text-4xl text-charcoal-900 tracking-tight mb-6">
      Your headline here
    </h1>
    <p className="font-dmsans text-[17px] md:text-lg text-graphite-700 leading-relaxed mb-8 max-w-2xl mx-auto">
      Supporting description goes here.
    </p>
    <Button className="bg-espresso-900 text-ivory-50 rounded-full px-8 py-3.5">
      Download App
    </Button>
  </div>

  {/* Phone Mockup Directly Below */}
  <div className="relative z-20 mt-16 w-full max-w-[320px] mx-auto">
    <PhoneMockup shadow="soft-ambient" />
  </div>
</header>
```

### Frosted Navigation (Compact)

Floats cleanly at the top of the viewport, blending perfectly with the veiled photography.

```tsx
<nav className="fixed top-4 left-1/2 -translate-x-1/2 z-50 rounded-full bg-white/70 backdrop-blur-md border border-white/20 shadow-sm px-6 py-3 flex items-center gap-8">
  {/* Nav Items */}
</nav>
```

### Alternating Feature Blocks

Off-white rounded sections paired with device mockups, alternating left/right across the page canvas.

```tsx
<section className="bg-warmgray-100 rounded-[2.5rem] py-24 px-12 mx-4 my-8">
  <div className="flex flex-col md:flex-row items-center gap-16 max-w-6xl mx-auto">
    {/* Text/Mockup alternating structure */}
  </div>
</section>
```

---

## Component Catalog

### Cards & Containers

```tsx
// Glass Card (For feature grids resting on photographic/warm canvases)
"bg-white/60 backdrop-blur-lg border border-white/40 rounded-2xl p-8 shadow-[0_4px_24px_-8px_rgba(0,0,0,0.05)]"

// Spacious FAQ Block
"border-b border-warmgray-200 py-6 hover:bg-warmgray-100/50 transition-colors px-4 rounded-xl cursor-pointer"

// Restrained Icon Grid Container
"grid grid-cols-2 md:grid-cols-4 gap-x-8 gap-y-12 py-16"
```

### Buttons

```tsx
// Primary CTA (Deep Espresso Pill)
"font-dmsans font-medium text-base bg-espresso-900 text-white rounded-full px-7 py-3.5 hover:bg-espresso-800 transition-colors duration-300"

// Secondary Outline (Pill)
"font-dmsans font-medium text-base bg-transparent border border-graphite-400 text-charcoal-800 rounded-full px-7 py-3.5 hover:bg-stone-200/50 transition-colors duration-300"
```

### Restrained Iconography

```tsx
// Icon wrapper (Soft, no heavy containers)
"h-10 w-10 flex items-center justify-center text-graphite-700 mb-4"
// Icons must have a stroke-width of 1.5, never filled.
```

---

## Quality Checklist

* [ ] Are all headings using **Manrope Semibold**?
* [ ] Is all paragraph text using **DM Sans** at exactly 17px or 18px?
* [ ] Is the primary CTA a pill-shaped button utilizing the **Deep Espresso** background?
* [ ] Does the Hero section include a full-width photograph heavily masked by a white/ivory veil?
* [ ] Is the hero completely center-aligned (text, button, and the immediate phone mockup below)?
* [ ] Are feature sections encased in off-white (`bg-warmgray-100`) rounded containers?
* [ ] Have you ensured there are absolutely no brightly colored CTAs (no blue, green, or red buttons)?
* [ ] Is the navigation bar compact, pill-shaped, and heavily frosted?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Warm ivory whites, stone grays, and espresso darks.
* Soft, ambient photographic backgrounds (workspaces, soft landscapes, product context).
* Translucent frosted glass layers (`backdrop-blur`) over photography.
* Hairline borders (`1px solid rgba(0,0,0,0.05)`) to separate glass elements.
* Generous, airy padding around text and inside glass cards.
* Clean, alternating left-right alignments for deep-dive feature blocks.

### ✗ Not Allowed

* Pure black (`#000000`) or pure white (`#FFFFFF` without context/warmth).
* Neon or highly saturated accent colors (no bright blues, purples, or greens).
* Sharp right angles on major structural blocks or buttons (must use generous border-radius).
* Heavy, dark drop shadows. (Use large, ultra-diffused, low-opacity shadows if needed).
* Left-aligned hero sections. (The classic mobile hero must be strictly centered over the device).
* Complex vector illustrations. (Rely entirely on typography, photography, and UI mockups).