No preview available
Soft Limestone Mobile Gallery

/softLimestoneMobileGallery
A warm, premium mobile UI system inspired by modern art galleries, featuring organic neutrals, soft geometry, rich photography, airy overlays, and a centered, calming hierarchy for curated content and CTAs.
0 likes
0 bookmarks
Jul 10, 2026
Design System Content
# Soft Limestone Mobile Gallery Design System

A design language for warm, premium, and highly curated product interfaces.

---

## Philosophy

> "Warmth invites interaction; structural softness creates calm."

This system creates interfaces that feel like a high-end modern art gallery bathed in natural light. The design is heavily anchored in rich, contextual photography and calm, centered hierarchies. It avoids the harshness of pure black and white, opting instead for organic warmth, soft boundaries, and beautifully rounded forms that feel tactile and inviting. 

### Core Beliefs

1. **The Hero is the Context** — Full-viewport photography grounds the user in the real world. Lifestyle, workspace, or product-context images act as the emotional canvas of the interface.
2. **Centered Calm** — Core narratives, icons, and hero typography are perfectly centered to create a sense of balance, symmetry, and breathability.
3. **Warm Neutrality** — The palette avoids cold grays and harsh blacks, utilizing organic earthy neutrals like limestone, taupe, and espresso to create an expensive but approachable feel.
4. **Soft Geometry** — Fully rounded interactions (pill shapes) and softly rounded content blocks reduce cognitive friction and emulate organic physical objects.
5. **Glass and Atmosphere** — Depth is achieved through pale, frosted glass and subtle ivory overlays rather than heavy drop shadows, maintaining an airy, light-filled aesthetic.

### Strict Rules

* **No Sharp Corners on CTAs** — Primary interactive elements must always be fully rounded (pill-shaped).
* **No Cold Hex Values** — Pure black (`#000000`) and pure white (`#FFFFFF`) are softened; cool grays are strictly forbidden. 
* **No Heavy Box Shadows** — Depth is created using frosted backgrounds (backdrop-blur) and soft, low-contrast borders.
* **Photography Requires Atmosphere** — No raw images behind text. Every full-viewport photograph must utilize the system's subtle ivory overlay to guarantee immaculate typographic legibility.

---

## Color Palette

### Warm Architectural Scale

The palette transitions from a soft limestone canvas through taupe mid-tones, anchoring finally on deep, rich espresso for maximum contrast. 

```css
/* Canvas & Atmosphere */
bg-limestone          /* Main canvas background (#FDFCFB) */
bg-ivory-overlay/60   /* Photographic overlay for legibility (#F9F8F6) */

/* Structural Backgrounds */
bg-pale-ash           /* Secondary panels, soft blocks (#F5F4F1) */
bg-pale-ash/70        /* Translucent glass cards for device mockups */
bg-cloud-gray         /* Form backgrounds, hover states (#EBE9E4) */
bg-cloud-gray/50      /* Inactive tabs, secondary structural pills */

/* Borders & Dividers */
border-cloud-gray     /* Standard soft borders, dividers */
border-soft-taupe/30  /* Subtle highlights on glass cards */

/* Typography & Iconography */
text-soft-taupe       /* Icons, disabled states, muted hints (#A8A29E) */
text-warm-charcoal    /* Supporting copy, FAQs, metadata (#57534E) */
text-espresso         /* Hero headlines, primary text, deep contrast (#1C1917) */

/* Action & Interaction */
bg-espresso           /* Primary call-to-action pill buttons */
text-limestone        /* Text resting on top of espresso CTAs */
bg-warm-charcoal/10   /* Subtle hover state for secondary actions */

```

---

## Typography

The system utilizes **Manrope** (or **Geist**) to deliver geometric clarity combined with approachability. The scale is intentionally tight and curated, avoiding extreme jumps in sizing in favor of a smooth, readable flow.

### Font Weights

```css
font-regular     /* Supporting copy, FAQs, navigation */
font-medium      /* Pill buttons, section subheaders, active tabs */
font-semibold    /* Hero headlines, section headings, core data points */
/* font-bold and font-black are excluded to maintain the calm aesthetic */

```

### Strict Size Scale

```css
text-[13px]      /* Micro-navigation, footer links, small pill labels (13-14px range) */
text-[14px]      /* Primary navigation items, localized tags */
text-[17px]      /* Core supporting copy, standard body text (17-19px range) */
text-[19px]      /* Large supporting paragraphs in the hero section */
text-[32px]      /* Standard section headings, feature highlights (32-38px range) */
text-[38px]      /* Major page dividers, secondary hero titles */
text-[40px]      /* Standard hero headline (40-48px range) */
text-[48px]      /* Maximum size for primary centered hero headlines */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Alignment |
| --- | --- | --- | --- | --- |
| Hero Headline | 40–48px | semibold | text-espresso | text-center |
| Section Heading | 32–38px | semibold | text-espresso | text-left/center |
| Supporting Copy | 17–19px | regular | text-warm-charcoal | text-center/left |
| Navigation | 13–14px | regular | text-espresso | text-center |
| CTA Button | 14px | medium | text-limestone | text-center |

---

## Animation System

### Core Philosophy: The Gentle Breathe

Transitions should feel like a slow intake of breath—smooth, eased, and utterly unhurried. 

### Photographic Hero Reveal

Images scale down microscopically while fading in, giving a sense of settling into the viewport.

```tsx
initial={{ opacity: 0, scale: 1.05 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 1.2, ease: [0.22, 1, 0.36, 1] }}
```

### Pale Glass Card Stagger

Device mockups in the centered grid appear with a soft vertical drift.

```tsx
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, staggerChildren: 0.15, ease: "easeOut" }}
```

---

## UI Components

### Ivory Photographic Overlay

Applied universally to full-viewport hero images to ensure the 40-48px espresso typography remains crisp and legible regardless of the background image's complexity.

```tsx
<div className="absolute inset-0 bg-ivory-overlay/60 backdrop-blur-[2px] mix-blend-multiply pointer-events-none" />
```

### Slim Frosted Navigation

A floating, translucent bar resting at the top of the viewport. Centered iconography keeps the layout perfectly symmetrical.

```tsx
<nav className="fixed top-4 left-1/2 -translate-x-1/2 w-[90%] max-w-5xl h-14 rounded-full bg-limestone/70 backdrop-blur-md border border-limestone/40 shadow-[0_4px_24px_rgba(28,25,23,0.02)] flex items-center justify-between px-6 z-50">
  {/* Navigation Links (13-14px) */}
  {/* Centered Brand Icon */}
  {/* Pill Button CTA */}
</nav>
```

### Device Mockup Glass Cards

Containers for the centered grid below the hero. Requires generous top spacing before the grid begins.

```tsx
// Surrounding Container Spacing
<section className="mt-32 max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
  {/* Glass Card */}
  <div className="bg-pale-ash/60 backdrop-blur-sm border border-cloud-gray rounded-[24px] p-8 flex flex-col items-center">
    <DeviceMockup />
  </div>
</section>
```

---

## Component Catalog

### Buttons (Fully Rounded CTAs)

All interactive buttons utilize a deep espresso tone and a pill shape to maintain the soft aesthetic.

```tsx
// Primary CTA Pill
"bg-espresso text-limestone text-[14px] font-medium rounded-full px-7 py-3.5 hover:bg-espresso/90 transition-colors duration-300"

// Secondary Pill
"bg-pale-ash text-espresso text-[14px] font-medium rounded-full px-7 py-3.5 hover:bg-cloud-gray transition-colors duration-300"
```

### Feature Sections (Image-Right / Text-Left)

Structured for calm reading. Soft borders on images rather than harsh device frames.

```tsx
<div className="flex flex-col md:flex-row items-center gap-16 py-24">
  <div className="flex-1 text-left space-y-4">
    <h3 className="text-[32px] md:text-[38px] font-semibold text-espresso">Seamless integration.</h3>
    <p className="text-[17px] md:text-[19px] text-warm-charcoal font-regular leading-relaxed">
      Supporting copy goes here.
    </p>
    {/* Icon Rows */}
    <div className="flex gap-4 pt-4 text-soft-taupe">
       <Icon name="activity" className="w-6 h-6" />
       <Icon name="layers" className="w-6 h-6" />
    </div>
  </div>
  <div className="flex-1 rounded-[32px] overflow-hidden border border-cloud-gray bg-pale-ash p-2">
    <img src="/feature-context.jpg" className="rounded-[24px] object-cover w-full h-full" />
  </div>
</div>
```

### Spacious FAQs

Generous padding and subtle borders separate questions. No heavy accordion bounding boxes.

```tsx
<div className="border-b border-cloud-gray py-8 group cursor-pointer">
  <h4 className="text-[19px] text-espresso font-medium group-hover:text-warm-charcoal transition-colors">
    Question text
  </h4>
  {/* Expandable answer in 17px warm-charcoal */}
</div>
```

---

## Quality Checklist

* [ ] Does the hero section feature a full-viewport photograph (lifestyle/workspace/context)?
* [ ] Is the ivory overlay applied to the hero image to ensure the text pops?
* [ ] Is the primary hero layout (headline, paragraph, icon, button) perfectly centered?
* [ ] Are all headings using the strict 40–48px or 32–38px sizing?
* [ ] Are all CTA buttons fully rounded (pill-shaped)?
* [ ] Is there generous vertical spacing (`mt-32` or similar) between the hero and the device mockup grid?
* [ ] Have you entirely avoided pure black (`#000`), using `text-espresso` instead?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-quality, warm photographic backgrounds with lifestyle or context focus.
* Slim, floating frosted navigation bars with symmetrically centered icons.
* Generous, expansive padding inside and around all sections.
* Deep espresso for text and primary interactive pills.
* Pill-shaped tags, buttons, and status indicators.

### ✗ Not Allowed

* Square buttons or sharp-cornered (`rounded-sm`) interactive elements.
* Flat, solid-color hero sections (must utilize contextual photography).
* Pure white (`#FFF`) backgrounds (use limestone white or pale ash).
* Left-aligned hero content (hero must adhere to centered hierarchy).
* Heavy, dark drop-shadows on device mockups or cards.