Cloudstone Mobile Editorial

/cloudstoneMobileEditorial
A calm, premium design system blending high-end magazine aesthetics with tactile product staging, featuring serene rhythms, organic neutrals, frosted glass overlays, and precise typography for immersive, editorial mobile app presentations.
0 likes
0 bookmarks
Jul 10, 2026
Design System Content
# Cloudstone Mobile Editorial Design System

A design language for calm, premium app presentations and serene editorial landing pages.

---

## Philosophy

> "Breathe in the structure; stage the product like a physical object of desire."

This system creates interfaces that feel like a high-end lifestyle magazine seamlessly fused with digital product staging. The aesthetic relies on serene pacing, generous vertical rhythm, and the tactile presentation of mobile hardware. It rejects aggressive sales tactics in favor of calm, immersive discovery, utilizing organic neutrals and frosted glass over rich photographic environments.

### Core Beliefs

1. **Airy Pacing** — Vast, intentional whitespace acts as the primary layout mechanism. Elements should feel like they are floating in a well-lit studio, not packed into a grid.
2. **Product as Sculpture** — The app is presented tangibly. Hardware mockups are staged centrally and deliberately, grounding the digital interface in the physical world.
3. **Editorial Rhythm** — The flow between alternating image and text bands creates a narrative cadence, mirroring the experience of flipping through a premium publication.
4. **Soft Geometry** — Sharp edges are banished. Large, sweeping border radii on blocks and buttons create an approachable, organic feel.
5. **Atmospheric Depth** — Depth is achieved through photographic backdrops and lightly frosted glass overlays, rather than harsh, artificial drop shadows.

### Strict Rules

* **Strict Typographic Roles** — *Manrope* is exclusively for headlines and structural titles; *DM Sans* is exclusively for supporting copy and functional text.
* **Centered Anchors** — Primary hero sections and sweeping statements must maintain a perfectly centered text alignment.
* **No Harsh Outlines** — Borders must be hairline-thin (0.5px to 1px) and low contrast.
* **Organic Dark Modes** — Calls to action use a rich, dark "Smoked-Oak" rather than absolute `#000000` or aggressive primary colors.
* **Restrained Iconography** — Icons must be minimal, unembellished, and placed within clean, subtle tiles.

---

## Color Palette

### Natural & Editorial Scale

The palette is rooted in earth and architecture, moving from airy whites to grounding, rich darks. Vibrant, saturated UI colors are deliberately omitted to let the product photography and app interface shine.

```css
/* Backgrounds & Canvas */
bg-cloud-white        /* Main page canvas, pure but soft (#fdfdfc) */
bg-pale-stone         /* Alternating feature bands, subtle contrast (#f5f4f1) */
bg-soft-cement        /* Large rounded blocks, icon tiles (#ebeae7) */
bg-white/40           /* Subtle glassmorphism overlays (requires backdrop-blur) */
bg-white/70           /* Lightly frosted hero text containers */

/* Borders & Dividers */
border-warm-gray/20   /* Ultra-light dividers for FAQ and feature bands */
border-pale-stone     /* Hairline borders on minimal icon tiles */
border-soft-cement    /* Structural boundaries for rounded blocks */

/* Typography & Ink */
text-ink-graphite     /* Primary headlines, high-contrast markers (#222425) */
text-warm-gray        /* Supporting copy, DM Sans paragraphs, metadata (#686766) */
text-soft-cement      /* Disabled text, quiet placeholders */

/* The Anchor: Dark Smoked-Oak (CTAs & Badges) */
bg-smoked-oak         /* Primary CTA buttons, rich dark contrast (#342d2a) */
text-smoked-oak       /* Active tab indicators, key interactive text */
border-smoked-oak     /* Outlined secondary editorial buttons */
text-cloud-white      /* Text resting on Smoked-Oak elements */

```

---

## Typography

The pairing of Manrope and DM Sans establishes the editorial tone. Manrope provides geometric, architectural structure to headings, while DM Sans offers extreme legibility and a friendly, organic curve for body text.

### Font Families & Weights

```css
font-manrope     /* Exclusively for Headlines, Titles, and Large Quotes */
font-dmsans      /* Exclusively for Body Copy, Buttons, FAQs, and UI Labels */

font-normal      /* Standard body copy in DM Sans */
font-medium      /* Button labels, active states, short meta-descriptions */
font-semibold    /* MANDATORY for all Manrope headlines */

```

### Font Size Scale & Layout Rules

```css
text-sm          /* Minimal tile descriptions, footer links, small FAQ answers (14px) */
text-base        /* Standard supporting copy, feature band paragraphs (16px) */
text-lg          /* Intro paragraphs, large feature bullet points (18px) */
text-xl          /* Sub-feature headers, FAQ questions (20px) */
text-2xl         /* Alternating band section headers (24px) */
text-4xl         /* Hero headline - MANDATORY target size. (36px) */

```

### Spacing & Alignment

```css
leading-relaxed  /* Applied to all body copy for airy reading */
leading-[1.15]   /* Generous but structured line-height for Manrope 4xl headlines */
tracking-tight   /* Applied to headlines to bind the geometric shapes */
text-center      /* Default alignment for Hero blocks and major transitions */

```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Alignment |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Manrope | 4xl | semibold | ink-graphite | center |
| Hero Subtitle | DM Sans | lg | normal | warm-gray | center |
| Feature Title | Manrope | 2xl | semibold | ink-graphite | left/alt |
| Body Text | DM Sans | base | normal | warm-gray | left/alt |
| CTA Button | DM Sans | base | medium | cloud-white | center |
| FAQ Question | Manrope | xl | semibold | ink-graphite | left |

---

## Animation System

### Core Philosophy: Gentle Staging

Animations mimic a camera pulling focus or physical objects settling into place. Everything is eased, slow, and deliberately fluid.

### The Parallax Hardware Reveal

Phone mockups slide up smoothly while the background photography gently scales, creating physical depth.

```tsx
// Phone Mockup Staging
initial={{ y: 60, opacity: 0 }}
whileInView={{ y: 0, opacity: 1 }}
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }} // Elegant, slow deceleration

// Photographic Background Scale
initial={{ scale: 1.05 }}
animate={{ scale: 1 }}
transition={{ duration: 1.5, ease: "easeOut" }}
```

### Soft Glass Reveal

Glassmorphic tiles gently increase their blur and opacity upon entering the viewport.

```tsx
initial={{ backdropFilter: 'blur(0px)', backgroundColor: 'rgba(255,255,255,0)' }}
animate={{ backdropFilter: 'blur(12px)', backgroundColor: 'rgba(255,255,255,0.7)' }}
transition={{ duration: 0.6 }}
```

---

## UI Components

### The Frosted Hero

The cornerstone of the landing page. A full-width photographic background heavily interacting with a glassmorphism overlay to stage the app.

```tsx
<header className="relative w-full min-h-screen flex flex-col items-center justify-start pt-32 overflow-hidden">
  {/* Full-width Photographic Background */}
  <img src="hero-bg.jpg" className="absolute inset-0 w-full h-full object-cover" />
  
  {/* Lightly Frosted Overlay */}
  <div className="absolute inset-0 bg-cloud-white/20 backdrop-blur-md" />

  {/* Centered Content Container */}
  <div className="relative z-10 flex flex-col items-center max-w-2xl px-6 text-center">
    {/* Centered App Icon */}
    <div className="w-20 h-20 rounded-2xl bg-cloud-white shadow-sm flex items-center justify-center mb-8">
      <AppMark className="w-10 h-10 text-ink-graphite" />
    </div>

    <h1 className="font-manrope font-semibold text-4xl text-ink-graphite leading-[1.15] tracking-tight mb-6">
      Your headline lives here.
    </h1>
    
    <p className="font-dmsans text-lg text-warm-gray leading-relaxed mb-10 max-w-lg">
      A short, supporting paragraph goes here, providing immediate context with generous spacing and editorial calm.
    </p>

    {/* Dark Rounded CTA */}
    <button className="bg-smoked-oak text-cloud-white font-dmsans font-medium text-base px-8 py-4 rounded-full hover:opacity-90 transition-opacity">
      Download the App
    </button>
  </div>

  {/* Staged Phone Mockup Below */}
  <div className="relative z-10 mt-16 w-full max-w-[320px]">
    <img src="phone-mockup.png" className="w-full h-auto drop-shadow-2xl" alt="App Preview" />
  </div>
</header>
```

### Alternating Feature Bands

Wide, airy blocks where text and imagery swap sides as the user scrolls down the page.

```tsx
<section className="w-full py-32 bg-pale-stone flex flex-col md:flex-row items-center justify-between gap-16 px-8 lg:px-24">
  <div className="flex-1 order-2 md:order-1">
    <h2 className="font-manrope text-2xl font-semibold text-ink-graphite mb-4">Intuitive Design</h2>
    <p className="font-dmsans text-base text-warm-gray leading-relaxed">
      Supporting copy rests effortlessly beside the product imagery.
    </p>
  </div>
  <div className="flex-1 order-1 md:order-2 rounded-3xl bg-soft-cement overflow-hidden">
    <img src="feature-1.png" className="w-full h-auto object-cover mix-blend-multiply" />
  </div>
</section>
```

### Minimal Icon Tiles & Rounded Blocks

For bento grids or secondary feature layouts.

```tsx
<div className="bg-soft-cement rounded-3xl p-8 flex flex-col gap-6 border-[0.5px] border-soft-cement/50">
  <div className="w-12 h-12 rounded-full bg-cloud-white flex items-center justify-center shadow-sm">
    <Icon className="w-5 h-5 text-ink-graphite" />
  </div>
  <h3 className="font-manrope text-xl font-semibold text-ink-graphite">Feature Label</h3>
  <p className="font-dmsans text-sm text-warm-gray leading-relaxed">
    Brief description set in DM Sans, maintaining the editorial cadence.
  </p>
</div>
```

### Clean FAQ Section

Minimal, text-focused, with hairline soft dividers.

```tsx
<div className="max-w-3xl mx-auto py-24">
  <h2 className="font-manrope text-4xl font-semibold text-ink-graphite text-center mb-16">Questions & Answers</h2>
  
  <div className="flex flex-col border-t-[0.5px] border-warm-gray/20">
    {/* FAQ Item */}
    <details className="group py-6 border-b-[0.5px] border-warm-gray/20 cursor-pointer">
      <summary className="font-manrope text-xl font-semibold text-ink-graphite list-none flex justify-between items-center">
        How does the integration work?
        <PlusIcon className="w-5 h-5 text-warm-gray group-open:rotate-45 transition-transform" />
      </summary>
      <p className="font-dmsans text-base text-warm-gray leading-relaxed mt-4">
        Detailed explanation expanding below the headline, styled perfectly with generous line height.
      </p>
    </details>
  </div>
</div>
```

---

## Component Catalog Rules

### CTAs and Buttons
Buttons must utilize extreme border radius (`rounded-full`) to complement the hardware curves of modern phones. Never use square corners on primary actions.

### Imagery
Photographs should act as environmental textures, heavily utilizing depth of field. Product UI should always be framed inside a sleek phone mockup, never floating raw in the interface.

### Glassmorphism
Use `backdrop-blur-md` mixed with a low-opacity `bg-cloud-white/20`. Never use dark or highly opaque overlays that obscure the environmental photography behind the hero.

---

## Quality Checklist

* [ ] Is the primary hero headline exactingly set to `text-4xl` and `font-semibold` in Manrope?
* [ ] Is all body copy set in DM Sans with `leading-relaxed` for an airy reading experience?
* [ ] Does the hero feature a full-width background photo, lightly frosted overlay, and a centered app icon?
* [ ] Is the primary CTA styled as a dark, fully-rounded pill using the "Smoked-Oak" palette?
* [ ] Is there exactly *one* hardware mockup staged below the hero text, overlapping the sections like a physical object?
* [ ] Are all borders reduced to hairlines (`border-[0.5px]`) or soft dividers?
* [ ] Is the FAQ section devoid of containing boxes, relying instead on clean typography and soft horizontal dividers?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Manrope for headings; DM Sans for paragraphs and buttons.
* Full-width background photography combined with gentle glassmorphism.
* Generous padding (e.g., `py-24` or `py-32`) to separate alternating bands.
* High-contrast, deeply rounded "Smoked-Oak" buttons against light backgrounds.
* Large, sweeping `rounded-3xl` radii on structural gray blocks.
* Hairline borders and subtle dividers (`border-warm-gray/20`).

### ✗ Not Allowed

* Harsh, dark drop shadows on cards or text.
* Primary branding colors (bright blues, reds, greens) used as background blocks or buttons.
* Left-aligned hero content (the hero must act as a centered stage).
* Mixing serif fonts or substituting Manrope/DM Sans for system defaults.
* Floating app UI screenshots *without* a device mockup casing.
* Heavy, thick borders dividing sections.