Ash Cloud App Gallery

/ashCloudAppGallery
A refined design system inspired by modern galleries: off-white surfaces, modular structure, crisp typography, and soft geometry. Focuses on elevating product imagery as art through restrained UI and tactile, premium interactive elements.
0 likes
0 bookmarks
Jul 10, 2026
Design System Content
# Ash Cloud App Gallery

A design language for modern, gallery-inspired product experiences, centered on cool off-white surfaces and elegant structural rhythms.

---

## Philosophy

> "Products are artifacts; the interface is their gallery."

This system creates interfaces that feel like a contemporary, high-end exhibition space. The design breathes through cool, off-white surfaces and friendly, rounded geometry. By relying on a crisp but warm palette and dark, high-contrast interactive points, the system frames digital products as premium, tactile objects.

### Core Beliefs

1. **The Product is the Art** — Backgrounds and containers exist solely to elevate product imagery and mockups.
2. **Soft Geometry, Sharp Contrast** — Substantially rounded corners create an inviting aesthetic, while near-black CTAs provide sharp, unambiguous focal points.
3. **Restrained Navigation** — Headers and navigational elements are kept minimal and out of the way, maximizing the canvas for the hero and feature grids.
4. **Organic Depth** — Depth is achieved through faint glass borders, subtle shadows, and translucent layers over rich, solid photography rather than heavy synthetic gradients.
5. **Modular Rhythm** — Content flows in a predictable, equal-width cadence that mimics walking through a curated physical gallery.

### Strict Rules

* **No Synthetic Gradients** — Hero backgrounds rely exclusively on solid, high-quality photography covered by a translucent off-white layer. No CSS color gradients.
* **Dual Typography Only** — Manrope is strictly for headings; DM Sans is strictly for body paragraphs and functional text.
* **Near-Black for Action** — Primary calls-to-action must use the near-black color. Colors like bright blue or green are never used for primary buttons.
* **Photography Standards** — Hero imagery must be one of the following: bright workspace, calm nature, premium object detail, or soft lifestyle photography.
* **Equal-Width Staging** — Phone mockups and gallery cards must sit in equal-width structural columns to maintain the gallery rhythm.

---

## Color Palette

### The Gallery Scale

The palette feels crisp but warm enough for broad reuse, avoiding the sterile feeling of pure whites and absolute blacks. 

```css
/* Backgrounds & Surfaces (The Gallery Walls) */
bg-pearl-white        /* Purest canvas base (#FAFAFA) */
bg-ash-cloud          /* Primary hero overlay and main app background (#F4F5F6) */
bg-soft-stone         /* Secondary modular sections, large rounded gray areas (#EBECEF) */
bg-pale-gray-blue     /* Subtle UI backgrounds, inactive tags (#E2E6E9) */

/* Borders & Dividers */
border-white/40       /* Faint glass borders on top of mockups/cards */
border-pale-gray-blue /* Standard structural borders for grids */
border-soft-stone     /* Ultra-subtle dividers */

/* Typography & Icons (The Plaque) */
text-graphite         /* Supporting copy, secondary metadata (#5A5D64) */
text-smoked-charcoal  /* Standard body text, minor headings (#32353A) */
text-near-black       /* Primary headlines, text-4xl hero text (#141517) */

/* Interactive & CTAs (The Laser) */
bg-near-black         /* Primary call-to-action blocks, dark rounded buttons (#141517) */
hover:bg-smoked-charcoal /* Hover state for primary buttons */
text-white            /* Text inside primary CTAs */

```

### Destructive Actions

```css
hover:bg-red-50/50
hover:text-red-700
hover:border-red-100

```

---

## Typography

The system utilizes a strict dual-font approach. Manrope provides geometric, modern authority for headings, while DM Sans delivers warm, highly legible paragraphs.

### Font Families

```css
font-manrope     /* Exclusively for Headings and numerical stats */
font-dmsans      /* Exclusively for Paragraphs, buttons, and UI text */

```

### Font Size Scale & Application

```css
text-xs          /* UI labels, tiny metadata (12px) */
text-sm          /* Short supporting copy, input text (14px) */
text-base        /* Standard paragraph body (16px) */
text-lg          /* Large button text, intro paragraphs (18px) */
text-xl          /* Card titles, modular grid headers (20px) */
text-2xl         /* Section headers */
text-4xl         /* The mandatory size for the compact, centered Hero headline */

```

### Hierarchy Examples

| Element | Family | Size | Weight | Color |
| --- | --- | --- | --- | --- |
| Hero Headline | Manrope | 4xl | semibold | near-black |
| Section Title | Manrope | 2xl | medium | near-black |
| Card Title | Manrope | xl | medium | smoked-charcoal |
| Main Body | DM Sans | base | normal | graphite |
| Supporting Copy | DM Sans | sm | normal | graphite |
| Action Buttons | DM Sans | base | medium | white |

---

## Animation System

### Core Philosophy: The Soft Exhibit

Animations should feel like physical objects being gently placed onto a soft mat. Movements are restrained, relying on smooth opacity transitions and ultra-subtle scaling.

### Translucent Image Reveal

Hero backgrounds and overlay layers fade in smoothly to prevent jarring loading states of high-res photography.

```tsx
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.8, ease: "easeOut" }}
```

### Card Staging (Hover)

Phone mockup cards lift ever so slightly with a softer shadow, inviting interaction without breaking the grid alignment.

```tsx
whileHover={{ y: -4, boxShadow: "0px 12px 24px -8px rgba(20, 21, 23, 0.08)" }}
transition={{ duration: 0.3, ease: "easeOut" }}
```

---

## UI Components

### Translucent Hero Canvas

The hallmark of the Ash Cloud system. A solid background photograph covered entirely by a translucent off-white veil.

```tsx
<div className="relative w-full h-[600px] flex items-center justify-center overflow-hidden">
  {/* Solid Image Background (No Gradients) */}
  <img src="/bright-workspace.jpg" className="absolute inset-0 w-full h-full object-cover" />
  
  {/* Translucent Off-White Layer */}
  <div className="absolute inset-0 bg-ash-cloud/85 backdrop-blur-sm" />
  
  {/* Compact Centered Content */}
  <div className="relative z-10 flex flex-col items-center text-center max-w-2xl px-6">
    <h1 className="font-manrope text-4xl font-semibold text-near-black mb-4">
      Headline goes here
    </h1>
    <p className="font-dmsans text-sm text-graphite mb-8 max-w-md">
      Short supporting copy goes here.
    </p>
    <button className="...">CTA</button>
  </div>
</div>
```

### Gallery Mockup Cards

Equal-width cards designed to stage phone mockups. They utilize faint glass borders and large border-radii.

```tsx
<div className="flex-1 rounded-[2rem] bg-soft-stone border border-white/40 shadow-[0_4px_20px_-4px_rgba(0,0,0,0.02)] overflow-hidden relative">
  {/* Faint internal glass highlight */}
  <div className="absolute inset-0 rounded-[2rem] ring-1 ring-inset ring-white/20 pointer-events-none" />
  
  {/* Phone Mockup Image */}
  <img src="/mockup.png" className="w-full h-auto mt-12 mx-auto" />
</div>
```

---

## Component Catalog

### Cards & Grid Sections

```tsx
// Modular Feature Grid Section (Large rounded gray section)
"w-full bg-soft-stone rounded-[2.5rem] p-12 md:p-20"

// Standard Feature Card (Inside the grid)
"bg-pearl-white rounded-3xl p-8 shadow-sm border border-pale-gray-blue/50"
```

### Buttons

Buttons heavily favor wide pill shapes (rounded-full) to complement the rounded geometry of the overarching system.

```tsx
// Primary CTA (Dark, Rounded, High-Contrast)
"bg-near-black text-white font-dmsans font-medium text-base rounded-full px-8 py-3.5 hover:bg-smoked-charcoal transition-colors"

// Secondary Outline CTA
"bg-transparent text-near-black font-dmsans font-medium text-base rounded-full px-8 py-3.5 border border-near-black hover:bg-near-black/5 transition-colors"
```

### Navigation

Navigation is explicitly restrained. No massive dropdowns or heavy sticky headers.

```tsx
// Restrained Nav Bar
"w-full flex items-center justify-between px-8 py-6 bg-transparent absolute top-0 z-50"

// Nav Links
"font-dmsans text-sm font-medium text-graphite hover:text-near-black transition-colors"
```

---

## Quality Checklist

* [ ] Is the Hero headline exactly `text-4xl` and centered?
* [ ] Does the Hero background use a solid photograph (workspace, nature, lifestyle, premium object) with absolutely zero CSS gradients?
* [ ] Is the translucent layer correctly applied over the Hero image using `bg-ash-cloud/85` or similar?
* [ ] Are all headings using **Manrope** and all paragraphs/UI text using **DM Sans**?
* [ ] Are the primary Call to Action blocks using the `near-black` high-contrast styling?
* [ ] Do all phone mockups sit within equal-width, highly rounded cards featuring faint glass borders?
* [ ] Is the navigation visually restrained and unobtrusive?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-quality, un-filtered photography (bright workspaces, calm nature, premium objects).
* Heavily rounded corners (`rounded-3xl`, `rounded-[2rem]`, `rounded-full`).
* Large, expansive sections of `soft-stone` and `ash-cloud` to separate modular content.
* Subtle, diffused shadows mimicking physical lighting.
* Translucent blur layers specifically for overlays.

### ✗ Not Allowed

* CSS gradients of any kind (no linear-gradients, radial-gradients, or mesh gradients).
* Primary buttons in bright colors (blue, red, green). CTAs must be high-contrast near-black.
* Sharp corners on cards, buttons, or feature blocks.
* Left-aligned, sprawling hero sections (Hero must be compact and centered).
* Complex, heavy, or multi-tiered navigation bars.