Clean Gray Device Showcase

/cleanGrayDeviceShowcase
A minimalist, gray-accented design system focused on centering high-fidelity device mockups, calm sectioning, and structural typography—eschewing decorative trends for pure product elevation in modern, light-themed marketing interfaces.
0 likes
0 bookmarks
Jun 16, 2026
Design System Content
# Clean Gray Device Showcase

A design language for modern, light-themed product marketing interfaces, built strictly around high-fidelity device presentation, cool gray sectioning, and stark typographic clarity.

---

## Philosophy

> "The interface is the pedestal; the product is the sculpture."

This system is designed to elevate physical or digital product mockups through rigorous spacing, cool gray containment, and highly deliberate typography. Visual interest is generated purely through alignment, contrast, and the polished clarity of device screens, rather than relying on decorative UI trends.

### Core Beliefs

1. **The Mockup is the Core** — UI elements exist solely to frame, explain, and point toward the device presentation.
2. **Centered & Symmetrical Architecture** — Core messaging commands the center of the viewport, creating a balanced, highly anchored visual rhythm.
3. **Soft Containment, Hard Focus** — Pale gray content bands and generous 24–32px corner radii create calm containment zones that contrast with the razor-sharp pixels of the product screens.
4. **Structural Typography** — Without noisy illustrations or gradients, the interaction between Manrope (display) and DM Sans (body) carries the aesthetic weight of the page.
5. **Calm Motion** — Animations should simulate breathing and gentle levitation, avoiding fast snaps or dramatic physics.

### Strict Rules

* **No Gradients or Blobs** — Backgrounds remain strictly solid. No mesh gradients, glowing orbs, or abstract vector illustrations.
* **No Dense Bento Layouts** — Information must be linear, scannable, and breathable. Avoid trapping content in crowded grid masonry.
* **Single Saturated Accent** — "Showcase Violet" is the exclusive pop of color, acting as a functional beacon for conversion.
* **Graphite over Black** — Typography relies on deep, cool graphite tones rather than absolute black to maintain the modern, airy aesthetic.

---

## Color Palette

### Monochromatic & Accent Scale

The palette is rooted in a pure white canvas interspersed with cool, pale gray (`slate`) bands. Text is executed in deep graphite tones. The interactive accent is a saturated, electrifying Violet.

```css
/* Backgrounds (Canvas & Containment) */
bg-white              /* Primary canvas (#ffffff) */
bg-slate-50           /* Secondary content bands, subtle alternating sections */
bg-slate-100          /* Solid hero stages, primary mockup backdrops, feature blocks */
bg-slate-200/50       /* Button hover states for secondary actions */

/* Borders (Low-Contrast & Subtle) */
border-slate-100      /* Extremely faint dividers */
border-slate-200      /* Default block borders and FAQ row separators */
border-slate-300      /* Hovered borders on interactive cards */

/* The Beacon: Showcase Violet (Accent) */
bg-violet-600         /* Primary CTA buttons, key checkmarks */
text-violet-600       /* Text links, active states, active FAQ triggers */
border-violet-600     /* Focused input outlines */
hover:bg-violet-500   /* Gentle brightening on primary hover */

/* Typography: Graphite Scale */
text-slate-900        /* Heavy hero headlines, section titles */
text-slate-700        /* Subheadings, primary feature titles */
text-slate-500        /* Body copy, supporting DM Sans text, FAQ answers */
text-slate-400        /* Muted footer links, micro-labels */
```

---

## Typography

A strict dual-typeface system. **Manrope** provides geometric, modern authority for display sizing, while **DM Sans** offers ultra-clean, legible support for reading.

### Font Families

```css
font-sans             /* Mapped to DM Sans (Default) */
font-display          /* Mapped to Manrope (Headings only) */
```

### Font Weights

```css
font-normal      /* DM Sans: Standard body paragraphs and FAQ descriptions */
font-medium      /* DM Sans: Buttons, input text, supporting subheaders */
font-semibold    /* Manrope: Section headers, feature titles */
font-extrabold   /* Manrope: Hero headlines, large impact metrics */
```

### Font Size Scale

```css
text-sm          /* Micro-copy, footer links, secondary tags (14px) */
text-base        /* Core body copy, feature descriptions (16px) */
text-lg          /* Large body text, hero supporting text (18px) */
text-xl          /* Feature block titles, FAQ questions (20px) */
text-3xl         /* Standard section headers (30px) */
text-4xl         /* Secondary Hero Headlines (36px) */
text-5xl         /* Primary Hero Headlines (48px+) */
```

### Hierarchy Examples

| Element | Font | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Manrope | 5xl | extrabold | slate-900 | tight |
| Hero Support | DM Sans | lg | normal | slate-500 | normal |
| Feature Title | Manrope | xl | semibold | slate-900 | normal |
| Block Body | DM Sans | base | normal | slate-500 | normal |
| Action Button | DM Sans | base | medium | white | normal |

---

## Animation System

### Core Philosophy: Gentle Elevation

Motion is used to introduce content softly and to make device mockups feel lightweight and premium.

### Sequential Fade-Ups

Sections and text blocks enter the viewport with a subtle upward drift.

```tsx
initial={{ opacity: 0, y: 16 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
```

### Mockup Lift (Hover/Scroll)

Device frames gently elevate toward the user to establish tactile prominence.

```tsx
/* CSS Hover Approach */
className="transition-transform duration-500 ease-out hover:-translate-y-2"

/* Framer Motion Scroll Approach */
style={{ y: useTransform(scrollYProgress, [0, 1], [0, -40]) }}
```

### Button Brightening

Primary actions do not shift in size; their background color simply brightens to invite a click.

```css
className="transition-colors duration-300 ease-in-out hover:bg-violet-500"
```

---

## Layout Architecture & Components

### 1. Minimal Top Nav

Transparent or solid white, completely devoid of heavy borders or drop shadows.

```tsx
<nav className="flex items-center justify-between px-8 py-6 bg-white/80 backdrop-blur-md border-b border-slate-100">
  <Logo className="text-slate-900" />
  <div className="flex gap-6 text-sm font-medium font-sans text-slate-500">
    <a href="#" className="hover:text-slate-900 transition-colors">Features</a>
    <a href="#" className="hover:text-slate-900 transition-colors">Specs</a>
  </div>
  <Button variant="primary">Get Started</Button>
</nav>
```

### 2. The Hero Stage

A centered messaging block followed by a direct CTA pair, resting above a large, solid image-backed container that houses the phone mockup.

```tsx
<section className="flex flex-col items-center pt-20 px-4 text-center bg-white">
  {/* Centered Messaging */}
  <h1 className="font-display text-4xl md:text-5xl font-extrabold text-slate-900 tracking-tight max-w-3xl">
    Flawless performance in the palm of your hand.
  </h1>
  <p className="font-sans text-lg text-slate-500 mt-6 max-w-2xl">
    Experience the next generation of our flagship application. Seamlessly synced, beautifully structured, and completely intuitive.
  </p>
  
  {/* Direct CTA Pair */}
  <div className="flex items-center gap-4 mt-8">
    <button className="bg-violet-600 text-white font-sans font-medium text-base px-6 py-3 rounded-full hover:bg-violet-500 transition-colors">
      Download Now
    </button>
    <button className="bg-white text-slate-900 border border-slate-200 font-sans font-medium text-base px-6 py-3 rounded-full hover:bg-slate-50 transition-colors">
      View Features
    </button>
  </div>

  {/* Solid Image-Backed Hero Stage */}
  <div className="mt-16 w-full max-w-5xl bg-slate-100 rounded-[32px] pt-16 px-8 flex justify-center overflow-hidden border border-slate-200/50">
    <img 
      src="/phone-mockup.png" 
      alt="App Interface" 
      className="w-[300px] translate-y-4 hover:-translate-y-2 transition-transform duration-700"
    />
  </div>
</section>
```

### 3. Alternating Feature Sections

Lower sections strictly alternate between text blocks and polished device mockups. Containment uses large corner radii.

```tsx
<section className="py-24 bg-slate-50 flex flex-col md:flex-row items-center gap-16 px-8 lg:px-24">
  {/* Copy Side */}
  <div className="flex-1 space-y-4">
    <h2 className="font-display text-3xl font-semibold text-slate-900">
      Syncs effortlessly across all your workspaces.
    </h2>
    <p className="font-sans text-base text-slate-500">
      Never lose track of your progress. Our infrastructure ensures that every edit is mirrored instantly across your entire device ecosystem.
    </p>
  </div>
  
  {/* Mockup Side */}
  <div className="flex-1 bg-white rounded-[24px] p-8 border border-slate-200 flex justify-center items-center shadow-sm">
    <img src="/feature-mockup-1.png" alt="Sync Feature" className="w-[250px]" />
  </div>
</section>
```

### 4. Concise Feature Grid

Avoids chaotic bento boxes. Uses a highly symmetric, evenly spaced 3-column or 2-column layout.

```tsx
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 py-16">
  <div className="bg-slate-50 rounded-[24px] p-8 border border-slate-100 text-center flex flex-col items-center">
    <Icon className="w-8 h-8 text-violet-600 mb-6" />
    <h3 className="font-display text-xl font-semibold text-slate-900 mb-2">Bank-Grade Security</h3>
    <p className="font-sans text-sm text-slate-500">End-to-end encryption keeps your data entirely private.</p>
  </div>
</div>
```

### 5. Clean FAQ Rows

Minimalist expandable rows. No boxes around individual questions—just low-contrast bottom borders.

```tsx
<div className="border-b border-slate-200 py-6">
  <button className="w-full flex justify-between items-center text-left group">
    <span className="font-display text-lg font-medium text-slate-900 group-hover:text-violet-600 transition-colors">
      How does the offline mode work?
    </span>
    <ChevronDownIcon className="text-slate-400 group-hover:text-violet-600 transition-colors" />
  </button>
  <div className="font-sans text-slate-500 text-base mt-4 hidden">
    {/* Expanded content */}
  </div>
</div>
```

---

## Component Catalog

### Buttons & Inputs

```tsx
// Primary CTA (Pill-shaped)
"bg-violet-600 text-white font-sans font-medium text-base rounded-full px-6 py-3 hover:bg-violet-500 transition-colors"

// Secondary CTA (Pill-shaped)
"bg-white text-slate-900 border border-slate-200 font-sans font-medium text-base rounded-full px-6 py-3 hover:bg-slate-50 transition-colors"

// Standard Input Field
"w-full bg-slate-50 border border-slate-200 text-slate-900 font-sans text-base rounded-xl px-4 py-3 placeholder:text-slate-400 focus:outline-none focus:border-violet-600 focus:ring-1 focus:ring-violet-600 transition-all"
```

### Containers

```tsx
// Hero Mockup Stage
"bg-slate-100 rounded-[32px] pt-16 px-8 border border-slate-200/50 overflow-hidden"

// Alternating Feature Card
"bg-white rounded-[24px] p-8 border border-slate-200 shadow-sm"
```

---

## Quality Checklist

* [ ] Does the hero section feature a text-4xl/5xl Manrope headline and DM Sans supporting copy?
* [ ] Is the hero mockup resting inside a large, solid-color (slate-100) stage with 32px rounded corners?
* [ ] Have all complex background gradients, mesh patterns, and blobs been completely removed?
* [ ] Are the content bands utilizing cool gray (`slate-50` / `slate-100`) rather than warm tones?
* [ ] Is "Showcase Violet" the absolute only saturated color on the page?
* [ ] Do lower sections perfectly alternate between clean text blocks and high-fidelity device frames?
* [ ] Are animations restricted to gentle fade-ups and subtle upward mockup levitations?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Stark, flat backgrounds (white and cool pale grays).
* Generous border radii (24px to 32px) for major structural sections.
* High-contrast graphite (`slate-900`) typography for headers.
* Symmetrical, centered hero messaging.
* Tactile, direct CTA pairs (Primary Violet alongside outlined Secondary).

### ✗ Not Allowed

* Drop shadows exceeding a subtle `shadow-sm` on structural containers.
* Noisy vector illustrations or 3D character art.
* Irregular bento grids with mismatched block sizes.
* Absolute black (`#000000`) for text or backgrounds.
* Harsh, fast-spring animations.