Cocoa Glass App Editorial Design System

/cocoaGlassAppEditorialDesignSystem
A warm, premium, dark-themed editorial UI system with organic darks, frosted glass textures, soft lighting, and restrained smoked-almond accents for high-end app experiences.
0 likes
0 bookmarks
Jul 10, 2026
Design System Content
# Cocoa Glass App Editorial Design System

A design language for warm, premium, dark-themed interfaces that blend editorial structure with soft tactile presence.

---

## Philosophy

> "Warmth invites interaction; transparency builds depth."

This system creates interfaces that feel like a high-end lifestyle magazine seamlessly fused with a premium digital product launch. The aesthetic relies on moody, sophisticated photography anchoring a dark canvas, layered with understated frosted glass. The result should feel rich, calm, and effortlessly expensive—favoring soft lighting, inset strokes, and vast breathing room over stark vectors or harsh neons.

### Core Beliefs

1. **Editorial as the Foundation** — The hero canvas is cinematic and photographic. We use darkened, moody lifestyle imagery to set an immediate atmospheric tone.
2. **Glass is a Texture, Not a Gimmick** — Glassmorphism is used with extreme restraint. We rely on soft background blurs, subtle inset light strokes, and low opacity fills rather than heavy, plastic-looking reflections.
3. **Warmth in the Dark** — True black is too sterile. We utilize deep organic darks—cocoa and charcoal—paired with ivory and bone to create a soothing, human-centric contrast.
4. **Deliberate Contrast** — The interface transitions smoothly from a deeply immersive dark hero space into pale-gray, structured editorial grids in the lower sections.
5. **Quiet UI** — Iconography and metadata never shout. They exist in quiet, frosted enclosures that allow the photography and typography to command the room.

### Strict Rules

* **No Harsh Neons or Primary Colors** — All colors must carry an earthy, organic undertone.
* **No Flat True Black (`#000000`)** — Deepest values must be "Cocoa Black" to maintain warmth.
* **Photography Must Be Muted** — Hero imagery (moody interiors, studio desks, city evenings) must be significantly darkened to ensure pure clarity for centered typography.
* **No Heavy Drop Shadows** — Depth is achieved through background blur, tonal shifts in charcoal, and 1px soft white inset strokes. 

---

## Color Palette

### The Organic Scale & Accent

The palette transitions from deep, warm cocoa tones into roasted charcoals, ending in warm ivory for pristine legibility. The accent is a singular, sophisticated smoked-almond.

```css
/* Deep Backgrounds (Dark Aesthetic) */
bg-cocoa-950          /* Main hero/canvas backdrop (#161413) */
bg-charcoal-900       /* Secondary layers, dark card bases (#242120) */
bg-charcoal-800       /* Hover states on dark components (#332F2E) */

/* Glass & Transparency (The Frost) */
bg-white/5            /* Ultra-subtle glass fills */
bg-white/10           /* Active glass states, frosted label backgrounds */
backdrop-blur-md      /* Standard glass blur (12px) */
backdrop-blur-xl      /* Heavy glass blur for dense overlay areas (24px) */

/* Lower Section Backgrounds (Pale Grays) */
bg-taupe-100          /* Lower section canvas, pale-gray blocks (#EBE9E7) */
bg-taupe-200          /* Pale-gray card boundaries or hover states (#DCD9D5) */

/* Borders & Inset Strokes */
border-white/10       /* Default soft inset stroke for glass components */
border-white/20       /* Highlighted glass edges, top-edge lighting */
border-charcoal-700   /* Structural borders in dark zones */
border-taupe-300      /* Structural borders in pale-gray lower zones */

/* The Accent: Smoked-Almond */
bg-almond-500         /* Primary call-to-action buttons (#C49A76) */
text-almond-500       /* Text links, active subtle states */
border-almond-500     /* Focused input rings, CTA borders */
bg-almond-900/30      /* Ultra-subtle CTA hover/backdrop */

/* Text Hierarchy */
text-bone-50          /* Purest highlight, max-contrast headers (#FDFDFD) */
text-ivory-100        /* Primary hero text, main headings (#F5F2ED) */
text-taupe-400        /* Supporting copy in dark zones (#9E9893) */
text-charcoal-900     /* Primary text in pale-gray lower zones (#242120) */
text-charcoal-600     /* Supporting copy in pale-gray lower zones (#595451) */

```

### Destructive Actions

```css
bg-rose-900/40
text-rose-300
border-rose-900/60
```

---

## Typography

The system utilizes premium neo-grotesque or geometric sans-serifs (Satoshi, Manrope, or Neue Haas Grotesk). The hierarchy relies on extreme scale contrast between cinematic headers and precise, structured navigational elements. 

### Font Weights

```css
font-light       /* Hero headlines (44-50px) - Soft, elegant, editorial */
font-normal      /* Feature headings (34-40px) and supporting copy (18px) */
font-medium      /* Navigation (14px), buttons, quiet icon cards */
font-semibold    /* Small frosted labels, micro-data, category tags */
```

### Font Size Scale (Strict Mapping)

```css
text-[10px]      /* Tiny editorial captions, frosted label metadata */
text-[12px]      /* Secondary quiet UI, tertiary labels */
text-[14px]      /* Primary Navigation, UI controls, button labels */
text-[18px]      /* Supporting copy, editorial text pairings */
text-[24px]      /* Mid-level structural callouts */
text-[34px]      /* Minimum feature headings (responsive) */
text-[40px]      /* Maximum feature headings */
text-[44px]      /* Minimum hero headline */
text-[50px]      /* Maximum hero headline */
```

### Letter Spacing & Transforms

```css
tracking-tight   /* Large hero text and feature headings */
tracking-normal  /* Supporting copy, editorial blocks */
tracking-wide    /* Navigation links, small labels */
uppercase        /* Small frosted labels, category eyebrows */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 44–50px | light | ivory-100 | tight | none |
| Feature Heading | 34–40px | normal | bone-50 | tight | none |
| Supporting Copy | 18px | normal | taupe-400 | normal | none |
| Navigation | 14px | medium | ivory-100/80| wide | none |
| Frosted Label | 10px | semibold | ivory-100 | wide | uppercase |

---

## Animation System

### Core Philosophy: The Cinematic Drift

Animations mimic camera movements and aperture adjustments—elements fade in smoothly over rich backgrounds, and glass panes drift gently into place.

### Page Transitions (Soft Exposure)

```tsx
initial={{ opacity: 0, scale: 0.98, filter: 'brightness(0.8)' }}
animate={{ opacity: 1, scale: 1, filter: 'brightness(1)' }}
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
```

### Glass Reveal (Frosted Cards & Previews)

When scrolling into view, glass device frames and pale-gray blocks slide up with an ethereal, weightless physics curve.

```tsx
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-10%" }}
transition={{ duration: 0.6, ease: "easeOut" }}
```

---

## UI Components

### Hero Photography Canvas

The mandatory full-width/full-height hero. The underlying image (moody interior, city evening, etc.) is heavily darkened via an overlay to support the 44-50px centered copy.

```tsx
<section className="relative w-full h-screen flex items-center justify-center">
  <img src="moody-desk.jpg" className="absolute inset-0 object-cover w-full h-full" />
  <div className="absolute inset-0 bg-cocoa-950/70" /> {/* Darkening overlay */}
  <div className="relative z-10 flex flex-col items-center text-center">
     {/* Centered Copy Context */}
  </div>
</section>
```

### Glass Device Preview Grid

Showcases app screenshots floating inside rounded glass borders, placed beneath the hero space. 

```tsx
<div className="relative rounded-3xl bg-white/5 backdrop-blur-md border border-white/10 shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)] p-4">
  <img src="app-ui.jpg" className="rounded-2xl w-full h-auto object-cover" />
</div>
```

### Soft Inset Stroke Pattern (Glassmorphism)

Never use dark external box shadows for glass. Instead, use an internal white highlight to mimic rim lighting on polished glass edges.

```css
className="shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),_inset_0_0_0_1px_rgba(255,255,255,0.05)]"
```

---

## Component Catalog

### Lower-Section Blocks (Pale-Gray Editorial)

Transitioning from the dark hero, the lower page sections utilize pale-gray rounded blocks with dark charcoal text for editorial pairings.

```tsx
// Editorial Image/Text Block
"bg-taupe-100 rounded-[32px] p-12 flex flex-col md:flex-row gap-8 items-center"

// Pale-Gray Feature Card
"bg-white/50 backdrop-blur-lg border border-taupe-200 rounded-2xl p-8 shadow-sm"
```

### Buttons

```tsx
// Primary CTA (Smoked-Almond)
"bg-almond-500 text-cocoa-950 font-medium text-[14px] rounded-full px-6 py-3 hover:bg-almond-400 transition-colors shadow-lg shadow-almond-500/20"

// Quiet Glass Button
"bg-white/10 backdrop-blur-md border border-white/10 shadow-[inset_0_1px_0_rgba(255,255,255,0.1)] text-ivory-100 font-medium text-[14px] rounded-full px-6 py-3 hover:bg-white/20 transition-all"
```

### Badges & Small Frosted Labels

```tsx
// Small Frosted Category Label
"inline-flex items-center px-3 py-1 text-[10px] font-semibold uppercase tracking-wide rounded-full bg-white/5 backdrop-blur-md border border-white/10 text-ivory-100"

// Lower-Section Dark Tag
"inline-flex items-center px-3 py-1 text-[10px] font-semibold uppercase tracking-wide rounded-full bg-charcoal-900/10 text-charcoal-900"
```

### Quiet Icon Cards

Used for secondary features. Emphasizes negative space and minimalist line icons.

```tsx
<div className="flex flex-col items-start p-6 rounded-2xl bg-white/5 border border-white/5 backdrop-blur-sm hover:bg-white/10 transition-colors">
  <div className="p-3 rounded-full bg-white/10 mb-4 text-almond-500">
    <Icon className="w-5 h-5 stroke-[1.5]" />
  </div>
  <h4 className="text-[18px] font-normal text-ivory-100">Card Title</h4>
</div>
```

---

## Quality Checklist

* [ ] Does the hero section utilize full-height, full-width moody photography?
* [ ] Is the hero photograph sufficiently darkened with a `cocoa-950` overlay to guarantee legibility of the 44-50px headline?
* [ ] Are device screenshots wrapped in soft, rounded glass frames with an inset 1px white border stroke?
* [ ] Does the design transition cleanly into pale-gray (`taupe-100`) rounded blocks in the lower sections?
* [ ] Are typography sizes strictly adhering to the 44-50px / 34-40px / 18px / 14px hierarchy?
* [ ] Is the Smoked-Almond CTA the sole primary accent color on the page?
* [ ] Have all heavy black drop shadows been replaced with soft background blurs and inset highlights?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-quality, warm, muted lifestyle photography (desks, interiors, city evenings).
* Layering frosted glass containers strictly with `backdrop-blur` and soft `white/10` inset borders.
* Using pale, warm gray backgrounds (`bg-taupe-100`) for extensive reading/editorial pairings further down the page.
* Extremely generous whitespace around text and device grids.
* Slow, smooth, cinematic fade-in animations.

### ✗ Not Allowed

* Harsh neon accents, primary blues, or stark reds (outside of isolated destructive states).
* Artificial or heavy gradients overlaying the main photographic hero.
* Dark external drop shadows on any glass components.
* Using true white (`#FFFFFF`) or true black (`#000000`) for large background washes.
* Cluttered top navs (keep navigation to 14px, cleanly spaced).