Chalk Glass Mobile Editorial

/chalkGlassMobileEditorial
A mobile-first design system for editorial product pages featuring vertical layouts, chalk-white palettes, glassmorphic layers, bold pill CTAs, and Manrope/DM Sans typography for focused, premium digital storytelling.
0 likes
0 bookmarks
Jun 16, 2026
Design System Content
# Chalk Glass Mobile Editorial Design System

A design language for refined, vertical-first product narratives and premium app landing pages.

---

## Philosophy

> "Elegance is found in the vertical rhythm; clarity in the frosted glass."

This system creates interfaces that feel like a curated digital magazine tailored perfectly for the hand. By constraining the horizontal axis and embracing a strict mobile-first structure even on ultra-wide desktop displays, the design commands absolute focus. It relies on chalk-white surfaces, deeply satisfying rounded geometries, and the interplay between confident typography and restrained glassmorphic depth.

### Core Beliefs

1. **The Vertical Anchor** — Layouts strictly follow a central, vertical spine. Desktop views act as wide, generous framing for the mobile-proportioned core content.
2. **Confident Restraint** — Glassmorphism is used exclusively to establish spatial depth over content (like navbars and floating chips), never as a decorative background.
3. **Typographic Duality** — Manrope provides structural, geometric confidence for large headers, while DM Sans acts as the flawless, invisible workhorse for reading.
4. **Framed Context** — Features do not float endlessly in whitespace; they are intentionally contained within soft, rounded gray modules that echo device hardware.
5. **Tactile Contrast** — Stark, dark pill actions puncture the soft chalk-and-glass environment, creating unmistakable interaction points.

### Strict Rules

* **Mobile-First Desktop** — Max-width constraints are mandatory. The page must never spread edge-to-edge horizontally on large screens. 
* **Pill Geometry Only** — All primary interaction points (CTAs, tags, floating navigation) must use fully rounded (pill) radiuses. No slightly-rounded rectangles for primary actions.
* **No Heavy Backgrounds** — Surfaces must remain in the chalk-white to soft-gray spectrum to maintain the editorial print aesthetic.
* **Subtle Shadows Only** — Shadows are strictly used to detach the phone mockup and elevate glass components. They must be highly diffused and low-opacity.
* **Typography Scaling** — Hero headings are capped precisely at `4xl`. Prominence is achieved through font-weight and negative space, not overwhelming scale.

---

## Color Palette

### The Chalk & Glass Scale

The palette is incredibly restrained, mimicking high-quality uncoated paper stock ("Chalk"), architectural grays, and the deep charcoal of pristine device screens. 

```css
/* Chalk Surfaces (Backgrounds) */
bg-[#FCFCFB]          /* Primary chalk-white canvas */
bg-zinc-50            /* Soft gray framing for lower feature modules */
bg-zinc-100/50        /* Secondary container zones, subtle module backdrops */
bg-zinc-200/30        /* Fine dividers and delicate structural borders */

/* Glass & Translucence */
bg-white/70           /* Primary frosted navigation backdrop */
bg-white/40           /* Translucent caption chips layered over gray modules */
bg-zinc-900/5         /* Subtle hover states for interactive rows (FAQs) */

/* Structural Borders & Dividers */
border-zinc-200/50    /* Fine, barely-there dividers between list items */
border-white/20       /* Inner highlights on glassmorphic elements */
border-zinc-900/10    /* Outer boundaries for frosted components */

/* Dark Interactions (CTAs & Anchors) */
bg-zinc-900           /* Dark pill CTAs, primary active states */
bg-zinc-800           /* Hover states for primary actions */
bg-zinc-100           /* Inactive/Secondary pill backgrounds */

/* Typography (DM Sans & Manrope) */
text-zinc-950         /* Confident hero text, primary headings */
text-zinc-700         /* Concise supporting copy, legible reading text */
text-zinc-500         /* Small uppercase labels, metadata, input placeholders */
text-white            /* Inverse text for dark pill CTAs */

```

---

## Typography

The typography pairs the geometric, confident structure of **Manrope** for primary anchors with the approachable, ultra-readable metrics of **DM Sans** for paragraph copy. 

### Font Families & Weights

```css
/* Manrope - Structural & Headings */
font-manrope
font-extrabold   /* Text-4xl Hero headings, centered value propositions */
font-bold        /* Lower section feature titles, numeric callouts */
font-semibold    /* Small uppercase labels, frosted nav links */

/* DM Sans - Supporting & Interface */
font-dm-sans
font-medium      /* Dark pill CTAs, translucent caption chips */
font-normal      /* Concise supporting copy, FAQ row descriptions */

```

### Font Size Scale

```css
text-[10px]      /* Overline labels, tiny metadata */
text-xs          /* Translucent caption chips, icon grid labels (12px) */
text-sm          /* Dark pill CTA text, secondary descriptive copy (14px) */
text-base        /* Standard supporting copy, FAQ titles (16px) */
text-lg          /* Subheadings, introductory paragraph text (18px) */
text-xl          /* Small module feature titles */
text-2xl         /* Lower section alternating feature headers */
text-4xl         /* Hero headings, primary page anchors - HARD CAP */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* text-4xl Hero headings to compress Manrope's geometry */
tracking-normal  /* DM Sans supporting copy for optimal reading */
tracking-wider   /* Small uppercase framing labels */

uppercase        /* Small section labels, translucent caption overlines */

```

### Hierarchy Examples

| Element | Typeface | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- | --- |
| Hero Heading | Manrope | 4xl | extrabold | zinc-950 | tight | none |
| Feature Title | Manrope | 2xl | bold | zinc-950 | tight | none |
| Section Label | Manrope | xs | semibold | zinc-500 | wider | uppercase |
| Support Copy | DM Sans | base| normal | zinc-700 | normal | none |
| Pill CTA | DM Sans | sm | medium | white | normal | none |

---

## Animation System

### Core Philosophy: The Soft Rise

Animations should feel like physical objects settling onto a soft surface. No bouncy springs; only smooth, high-friction vertical reveals and gentle glass light-catching.

### Page Transitions (Vertical Settling)

```tsx
initial={{ opacity: 0, y: 24 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }} /* Custom high-friction ease */

```

### Glass & Shadow Interactions

Hovering over interactive glass elements subtlely increases their shadow opacity and border brightness, simulating moving the object closer to a light source.

```tsx
whileHover={{ 
  boxShadow: "0 12px 32px -8px rgba(0,0,0,0.08)",
  borderColor: "rgba(255,255,255,0.4)" 
}}
transition={{ duration: 0.2 }}

```

---

## UI Components

### Minimal Frosted Navbar

Sits detached from the top edge, perfectly centered over the chalk canvas. 

```tsx
<nav className="fixed top-6 left-1/2 -translate-x-1/2 w-[90%] max-w-md 
                bg-white/60 backdrop-blur-md border border-white/20 shadow-sm shadow-zinc-900/5 
                rounded-full px-6 py-3 flex items-center justify-between z-50">
  <Logo className="text-zinc-950" />
  <div className="flex gap-4 items-center">
    {/* Nav Items */}
  </div>
</nav>

```

### The Dark Pill CTA

The single point of high contrast on the page. Highly tactile, unmissable.

```tsx
<button className="bg-zinc-900 text-white font-dm-sans font-medium text-sm 
                   px-8 py-3.5 rounded-full hover:bg-zinc-800 hover:scale-[1.02] 
                   transition-all shadow-md shadow-zinc-900/10">
  Download App
</button>

```

### The Phone Mockup Anchor

Directly beneath the hero text and CTA, creating the primary visual weight of the page. It utilizes a highly diffused shadow to establish spatial separation.

```tsx
<div className="relative mt-12 w-full max-w-[320px] mx-auto">
  <img src="device.png" className="relative z-10 drop-shadow-[0_32px_64px_rgba(0,0,0,0.12)]" />
</div>

```

---

## Component Catalog

### Soft Gray Rounded Frames

Lower layout sections alternate within these contained modules instead of floating unmoored on the page.

```tsx
<section className="w-full max-w-lg mx-auto bg-zinc-50 rounded-[32px] p-8 
                    border border-zinc-200/50 flex flex-col items-center text-center gap-6">
  <span className="font-manrope text-xs font-semibold uppercase tracking-wider text-zinc-500">
    Feature Label
  </span>
  <h3 className="font-manrope text-2xl font-bold text-zinc-950 tracking-tight">
    Refined Data Control
  </h3>
  <p className="font-dm-sans text-base text-zinc-700">
    Concise, readable supporting copy placed securely inside the module framework.
  </p>
</section>

```

### Translucent Caption Chips

Layered over device visuals or gray modules to provide contextual annotations without heavy blocks of UI.

```tsx
<div className="inline-flex items-center gap-2 bg-white/40 backdrop-blur-sm 
                border border-white/40 shadow-sm px-3 py-1.5 rounded-full">
  <span className="w-1.5 h-1.5 rounded-full bg-zinc-900 animate-pulse" />
  <span className="font-dm-sans text-xs font-medium text-zinc-950">
    Live Sync Active
  </span>
</div>

```

### Tidy Icon Grid

A spacious `grid-cols-2` or `grid-cols-3` contained within a module for secondary features.

```tsx
<div className="grid grid-cols-2 gap-x-8 gap-y-10">
  <div className="flex flex-col items-center text-center gap-3">
    <div className="h-12 w-12 rounded-full bg-white shadow-sm flex items-center justify-center text-zinc-900 border border-zinc-100">
      <Icon />
    </div>
    <span className="font-dm-sans text-sm font-medium text-zinc-950">Quick Tap</span>
  </div>
</div>

```

### Spacious FAQ Rows

Fine dividers with generous vertical padding, keeping the DM Sans typography cleanly separated.

```tsx
<div className="w-full border-b border-zinc-200/50 py-6 group cursor-pointer">
  <div className="flex justify-between items-center">
    <h4 className="font-dm-sans text-base font-medium text-zinc-950 group-hover:text-zinc-600 transition-colors">
      How does the syncing work?
    </h4>
    <PlusIcon className="text-zinc-400 group-hover:rotate-90 transition-transform" />
  </div>
</div>

```

---

## Quality Checklist

* [ ] Is the primary container constrained to a mobile-first maximum width (e.g., `max-w-md` or `max-w-lg`) even on 4K desktop screens?
* [ ] Does the hero headline utilize `font-manrope` exactly at `text-4xl` with `tracking-tight`?
* [ ] Are all buttons and floating navigational elements perfectly rounded (pill-shaped)?
* [ ] Is the primary CTA a dark/charcoal value (`bg-zinc-900`), starkly contrasting the chalk surfaces?
* [ ] Do lower sections cleanly alternate inside `bg-zinc-50` rounded frames rather than bleeding into the background?
* [ ] Is the glassmorphism restrained *only* to floating navs and translucent caption chips?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Chalk-white canvases (`#FCFCFB`) and highly contained soft gray bounding frames (`bg-zinc-50`).
* A strict, single-column vertical flow that mimics an elite mobile app experience on desktop.
* Mixing bold, tight Manrope headings with standard, open DM Sans body copy.
* Fine, razor-thin dividers (`border-zinc-200/50`) for grids and lists.
* A massive, highly detailed phone mockup anchoring the very center of the hero section.

### ✗ Not Allowed

* Edge-to-edge multi-column grid layouts on desktop that break the vertical mobile aesthetic.
* Standard rounded-md buttons (all primary actions must be full pills).
* Saturated, vibrant colors for backgrounds or UI elements.
* Heavy, dark opaque drop shadows.
* Text sizes exceeding `4xl` for hero headings. Ensure impact through whitespace, not shouting.