Cool Ivory Device Editorial

/coolIvoryDeviceEditorial
A refined design system for calm, gallery-spaced product UIs—balancing expansive whitespace, quiet luxury, monochrome iconography, and meticulously structured device presentation to evoke a high-end editorial magazine aesthetic.
0 likes
0 bookmarks
Jul 10, 2026
Design System Content
# Cool Ivory Device Editorial Design System

A design language for calm, gallery-spaced, and quietly luxurious product interfaces.

---

## Philosophy

> "Space defines luxury; structure elevates the object."

This system creates digital environments that feel like leafing through a high-end architectural or editorial magazine. It relies on massive, gallery-level spacing, calm neutral tones, and meticulously structured device presentations. The design should feel effortless and quietly confident, allowing the photography and typography to command attention without shouting.

### Core Beliefs

1. **Gallery-Level Spacing** — Elements exist in expansive, breathable canvases. Whitespace is not empty; it is the structural foundation of luxury.
2. **Quiet Luxury** — Restraint is key. We avoid loud colors, intense shadows, or over-engineered interactions. 
3. **Structured Device Presentation** — Hardware is presented like fine sculpture. Alignments are absolute, and rows are perfectly balanced.
4. **Photographic Harmony** — Imagery is deeply integrated into the layout, always washed with a soft veil to ensure perfect clarity for the typography overlaid upon it.
5. **Tactile Minimalism** — Modules use subtle rounding and razor-thin borders to create gentle containment without harsh rigidity.

### Strict Rules

* **Two Typefaces Only** — Manrope for structure and confidence; DM Sans for legibility and warmth. No exceptions.
* **Monochrome Icons Only** — Iconography must remain strictly monochromatic (graphite or ink-black) to avoid distracting from the photography.
* **No Vivid Colors** — The entire palette is built on ivories, whites, cements, and ink. There are no primary color highlights.
* **Centered Hero Anchors** — The primary hero headline stack must remain dead-center over the polished phone mockup.

---

## Color Palette

### Monochromatic Editorial Scale

The palette eschews traditional vibrant accents for a deeply sophisticated, nuanced range of warm whites, architectural grays, and a commanding deep ink-black for actions.

```css
/* Backgrounds & Canvas (Lightest to Darkest) */
bg-gallery-white      /* Pure structural canvas (#ffffff) */
bg-cool-ivory         /* Primary module and lower-section backgrounds (#f8f7f5) */
bg-mist-gray/30       /* Hover states, subtle image veils, secondary containers (#eef0f2) */

/* Borders & Dividers */
border-gallery-white  /* Inner glows, active device outlines */
border-mist-gray      /* Gentle section dividers, subtle module borders */
border-pale-cement    /* Standard structural borders, inactive form elements (#d4d4d4) */

/* Typography & Iconography */
text-pale-cement      /* Placeholders, disabled states, watermarks */
text-mist-gray        /* Secondary metadata, subtle captions */
text-soft-graphite    /* Primary body copy, supporting text (#4a4a4a) */
text-ink-black        /* Headlines, primary icons, strong emphasis (#0a0a0a) */

/* Calls to Action (The Anchor) */
bg-ink-black          /* Primary CTA buttons, terminal active states */
text-gallery-white    /* Text inside primary CTAs */
border-ink-black      /* Focused outlines, dark button borders */
bg-soft-graphite      /* Hover state for primary CTAs */

```

### Destructive Actions

```css
/* Kept intentionally muted to fit the editorial aesthetic */
hover:bg-pale-cement
hover:text-soft-graphite
border-soft-graphite
```

---

## Typography

The typographic system relies on a strict pairing: **Manrope** for confident, structural headings and **DM Sans** for highly readable, elegant supporting text.

### Font Families & Weights

```css
font-manrope     /* Headings, section titles, primary numbers */
font-dmsans      /* Paragraphs, descriptions, buttons, metadata */

font-regular     /* DM Sans body copy */
font-medium      /* DM Sans CTAs, tertiary headers */
font-semibold    /* Manrope ONLY - Confident, structured headings */

```

### Font Size Scale

Pixel-perfect typography is essential for the editorial feel. The scale uses specific, tight ranges to maintain proportion.

```css
text-[13px]      /* Overlines, subtle image captions, footer links */
text-[15px]      /* Secondary buttons, standard metadata */
text-[17px]      /* Primary paragraphs, readable supporting text (min 17px) */
text-[19px]      /* Lead paragraphs, large body copy blocks (max 19px) */
text-[24px]      /* Tertiary section headers, large feature titles */
text-[34px]      /* Standard section titles (min 34px) */
text-[40px]      /* Large section titles (max 40px), Secondary hero blocks */
text-[46px]      /* Hero headlines (40-46px maximum for elegant containment) */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* Hero headlines (40-46px) for solid block feel */
tracking-normal  /* DM Sans paragraphs (17-19px) for ultimate readability */
tracking-wide    /* Navigational elements, buttons */
tracking-widest  /* Overlines and structural section caps */

uppercase        /* Minimal usage: strictly for overlines and micro-labels */

```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Manrope | 46px | semibold | ink-black | tight |
| Section Title | Manrope | 34px-40px | semibold | ink-black | tight |
| Body Paragraph | DM Sans | 17px-19px | regular | soft-graphite | normal |
| Primary CTA | DM Sans | 15px | medium | gallery-white | wide |
| Overline Tag | DM Sans | 13px | medium | pale-cement | widest |

---

## Animation System

### Core Philosophy: The Slow Breath

Motion in this system is deeply calm. Elements never snap or bounce; they drift into place softly, mimicking the turning of a heavy, glossy magazine page.

### Page Transitions (The Editorial Drift)

```tsx
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }} /* Deep, slow ease-out */

```

### Device Previews (Staggered Reveal)

When scrolling to the balanced row of device previews, they appear sequentially with absolute smoothness.

```tsx
variants={{
  hidden: { opacity: 0, y: 30 },
  visible: { opacity: 1, y: 0 }
}}
transition={{ staggerChildren: 0.15, duration: 0.9, ease: "easeOut" }}
```

---

## UI Components

### The Hero Veil

To ensure Manrope headlines remain perfectly legible over the full-width photography (minimal interiors, desk details), a delicate white wash is applied to the image.

```tsx
<div className="absolute inset-0 bg-gallery-white/40 backdrop-blur-[2px] z-10" />
{/* The photograph sits beneath this, washed in softness */}
```

### Polished Device Mockup

The phone mockup sits precisely below the centered headline stack. It acts as the hero's visual anchor.

```tsx
<div className="relative z-20 mx-auto mt-12 max-w-[320px] drop-shadow-2xl">
  <Image src="/phone-polished.png" alt="Device presentation" className="w-full h-auto" />
</div>
```

### Feature Alternation Block

Lower sections use alternating layouts with off-white (`cool-ivory`) modules.

```tsx
<section className="flex flex-col md:flex-row items-center gap-16 py-24">
  <div className="flex-1 space-y-6">
    <h2 className="font-manrope font-semibold text-[34px] text-ink-black tracking-tight">Quiet Performance</h2>
    <p className="font-dmsans text-[17px] text-soft-graphite leading-relaxed">...</p>
  </div>
  <div className="flex-1 bg-cool-ivory rounded-2xl border border-pale-cement p-12">
    {/* Monochrome icon and secondary imagery */}
  </div>
</section>
```

---

## Component Catalog

### Modules & Cards

Lower section modules are grounded, off-white, and defined by thin architectural borders rather than shadows.

```tsx
// Standard Feature Module
"bg-cool-ivory border border-pale-cement rounded-2xl p-10 lg:p-14 transition-colors duration-500 hover:bg-mist-gray/30"

// Image Gallery Card
"relative overflow-hidden rounded-xl border border-mist-gray bg-gallery-white"
```

### Buttons

Calls to Action act as the visual punctuation of the page. They are completely dark, commanding, and heavily grounded.

```tsx
// Primary CTA (Final lower section anchor)
"bg-ink-black text-gallery-white font-dmsans font-medium text-[15px] tracking-wide rounded-full px-8 py-4 hover:bg-soft-graphite transition-colors duration-300"

// Secondary Button
"bg-transparent border-b border-ink-black text-ink-black font-dmsans font-medium text-[15px] pb-1 hover:text-soft-graphite hover:border-soft-graphite transition-all duration-300"
```

### Icons

```tsx
// Strictly Monochrome System Icons
"w-6 h-6 text-ink-black opacity-80" // Primary module icons
"w-5 h-5 text-soft-graphite" // Secondary list icons
```

---

## Quality Checklist

* [ ] Is the hero photograph full-width, featuring a minimal scene (interior/desk/natural)?
* [ ] Does the hero image have the soft white veil applied for absolute typographic clarity?
* [ ] Is the hero headline sized precisely between 40px and 46px using Manrope Semibold?
* [ ] Are the body paragraphs sized between 17px and 19px using DM Sans?
* [ ] Is the primary device mockup positioned directly and centrally beneath the hero headline stack?
* [ ] Do the lower modules use `bg-cool-ivory` with thin `border-pale-cement` borders?
* [ ] Are all icons strictly monochrome (ink-black or graphite)?
* [ ] Is the final Call to Action a deep ink-black button?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Full-width minimal lifestyle or interior photography.
* Soft white overlays (`bg-gallery-white/40`) on imagery.
* Perfectly balanced, symmetrical rows of device previews.
* Massive, gallery-style padding (`py-24`, `py-32`) between sections.
* Deep ink-black terminal CTAs to end the page.

### ✗ Not Allowed

* Vivid accent colors (no blue, green, or red UI elements).
* Colored icons or multi-tone illustrations.
* Drop shadows on UI cards (use `cool-ivory` backgrounds and thin borders instead).
* Left-aligned hero text (the hero headline stack *must* be centered over the device).
* Typography larger than 46px or body copy smaller than 17px.