Limestone Studio App Gallery

/limestoneStudioAppGallery
Premium design system inspired by warm studio architecture—soft photography, frosted translucent layers, and structured, modular layouts create calm, inviting interfaces with tactile depth and elevated, high-end craftsmanship.
0 likes
0 bookmarks
Jul 10, 2026
Design System Content
# Limestone Studio App Gallery

A design system for premium, warm, architectural interfaces that feel like a high-end product studio.

---

## Philosophy

> "Structure brings clarity; warmth brings life."

This system creates interfaces that emulate a calm, physical product studio. It relies on a grounded, architectural foundation that is structured and highly reusable. Unlike clinical tech aesthetics, Limestone is inherently warm—using soft natural photography, frosted glass depth, and an earthy, restrained palette to build trust and exude premium craftsmanship.

### Core Beliefs

1. **Photographic Grounding** — Context is set through soft, natural imagery (landscapes, stone, quiet workspaces) overlaid with translucent ivory, ensuring the interface feels connected to the physical world.
2. **Warm Restraint** — Harsh whites and stark true blacks are banished. Contrast is achieved through warm graphites and smoked espressos against pearl and limestone surfaces.
3. **Modular Balance** — Layouts follow a strict, quiet rhythm. Pages are constructed from stacked, predictable pale-gray panels that alternate seamlessly.
4. **Tactile Boundaries** — Depth is not created with heavy shadows, but through faint inner strokes, frosted translucent cards, and subtle shifts in material density.

### Strict Rules

* **No Cool Grays or Pure Blacks** — All neutrals must carry a subtle warm undertone to maintain the studio atmosphere.
* **Rounded CTAs Only** — Primary actions must be dark umber-charcoal with fully rounded (pill) radiuses to contrast the structural grid.
* **Centered Conversion Hero** — The hero section must strictly feature a centered conversion stack floating over the ivory-washed photographic background.
* **Grid Discipline** — Device previews must sit in evenly spaced grids with absolute alignment.

---

## Color Palette

### The Earth & Architecture Scale

The palette abandons standard tech blues and grays, transitioning from Pearl White through natural stone tones, anchoring in a deep Umber-Charcoal for action.

```css
/* Base Canvas & Backgrounds */
bg-pearl-white        /* Main page canvas, clean but soft (#faf9f8) */
bg-limestone          /* Secondary sections, subtle contrast blocks (#f4f3f0) */
bg-concrete-pale      /* Structured modular panels (#ebeae6) */
bg-fog-warm           /* Hover states, quiet component backgrounds (#e1dfdb) */

/* Translucent & Material Layers */
bg-ivory-overlay      /* Hero photographic overlay (rgba(252, 251, 248, 0.85)) */
bg-frosted-panel      /* Device preview cards (rgba(250, 249, 246, 0.6) + backdrop blur) */

/* Borders & Dividers */
border-concrete-pale  /* Standard card boundaries */
border-fog-warm       /* Input borders, structural dividers */
border-inner-faint    /* Box-shadow inset 0 0 0 1px rgba(255,255,255,0.4) for frosted cards */

/* Typography & Iconography */
text-graphite         /* Primary hero text, main headings (#33312e) */
text-espresso-smoked  /* Secondary text, body copy, quiet labels (#595550) */
text-fog-dark         /* Placeholder text, disabled states, minor metadata (#8c8781) */

/* Actions & Focus */
bg-umber-charcoal     /* Primary CTAs, active states, filled icons (#2b2927) */
text-umber-charcoal   /* High-contrast text links */
bg-umber-hover        /* CTA hover state (#1f1d1c) */

```

---

## Typography

Typography acts as the precise, architectural blueprint layered over the warm canvas. The system strictly utilizes **Helvetica Now**, **Geist**, or **Inter Tight**.

### Font Weights

```css
font-regular     /* Main body copy, navigation links, quiet accordion content */
font-medium      /* Feature headings, interactive labels, device preview titles */
font-semibold    /* Rounded CTAs, tight metadata, centered conversion buttons */
/* Lighter weights are avoided to maintain structural typographic density */

```

### Font Size Scale (Strict Sizing)

```css
text-nav         /* Navigation elements, utility links: 13–14px */
text-caption     /* Restrained icon tile labels, metadata: 15px */
text-body        /* Standard body copy, concise left-side copy: 18px */
text-subfeature  /* Quiet accordion module titles: 24px */
text-feature     /* Modular panel feature headings: 34–40px */
text-hero        /* Centered conversion hero headline: 42–50px */

```

### Letter Spacing & Line Height

```css
tracking-tight   /* Feature and Hero headings (-0.02em) */
tracking-normal  /* Body copy, accordions (0em) */
leading-snug     /* Headings (1.1 - 1.2) */
leading-relaxed  /* Body copy for high legibility (1.6) */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Alignment |
| --- | --- | --- | --- | --- |
| Hero Headline | 42-50px | Medium | graphite | Centered |
| Feature Heading | 34-40px | Medium | graphite | Left-aligned |
| Body Copy | 18px | Regular | espresso-smoked | Left-aligned |
| Main Navigation | 13-14px | Regular | espresso-smoked | Horizontal |
| Primary CTA | 16px | Semibold | pearl-white | Centered |

---

## Layout & Composition

### Modular Lower Sections

Beneath the hero, the interface breaks down into highly reusable, alternating modular blocks.

1.  **The Panel:** A full-width or contained `bg-concrete-pale` block.
2.  **The Split:** Left-side concise copy (`text-feature` heading + `text-body` paragraph), paired with right-side imagery or rounded screenshots.
3.  **The Flow:** Ample vertical padding (120px to 160px) between distinct structural panels.

### The Hero Concept

The top of every primary page must immerse the user in the studio environment.

```tsx
<div className="relative min-h-[90vh] flex items-center justify-center overflow-hidden">
  {/* Full-height photographic backdrop */}
  <img src="/quiet-workspace.jpg" className="absolute inset-0 object-cover w-full h-full" />
  
  {/* Translucent ivory overlay */}
  <div className="absolute inset-0 bg-[#fcfbf8]/85 backdrop-blur-sm" />
  
  {/* Centered Conversion Stack */}
  <div className="relative z-10 flex flex-col items-center text-center max-w-2xl px-6">
    <h1 className="text-[42px] md:text-[50px] text-graphite tracking-tight font-medium mb-6">
      Studio Grade Architecture
    </h1>
    <p className="text-[18px] text-espresso-smoked leading-relaxed mb-10">
      A calm, structured, and highly reusable foundation for your next product.
    </p>
    <button className="bg-umber-charcoal text-pearl-white px-8 py-4 rounded-full font-semibold transition-transform hover:scale-[1.02]">
      Explore the Gallery
    </button>
  </div>
</div>
```

---

## Component Catalog

### Device Previews & Grid

Positioned beneath the hero in a clean, evenly spaced grid. Built using frosted glass mechanics rather than solid backgrounds.

```tsx
// Frosted Device Card with Faint Inner Stroke
"relative p-6 rounded-2xl bg-[#faf9f6]/60 backdrop-blur-md shadow-sm ring-1 ring-inset ring-white/50 border border-concrete-pale transition-all hover:bg-[#faf9f6]/80"

```

### Buttons & CTAs

No sharp corners for interactions. All primary interactive elements are fully rounded to juxtapose the architectural grid.

```tsx
// Primary Conversion Button
"bg-umber-charcoal text-pearl-white text-base font-semibold px-8 py-4 rounded-full shadow-sm hover:bg-umber-hover transition-colors"

// Secondary / Quiet Action
"bg-transparent text-graphite border border-fog-warm text-sm font-medium px-6 py-3 rounded-full hover:bg-fog-warm/50 transition-colors"
```

### Quiet Accordion Modules

Used for FAQs, technical specs, or deep-dives. No heavy borders or background boxes.

```tsx
// Accordion Row
"border-b border-concrete-pale py-6 group cursor-pointer"

// Accordion Title
"text-[24px] text-graphite font-regular flex justify-between items-center group-hover:text-umber-charcoal transition-colors"

// Accordion Content
"text-[18px] text-espresso-smoked leading-relaxed pt-4 pr-12 hidden md:block"
```

### Restrained Icon Tiles

Used for feature matrices or amenity lists. Icons are unembellished, monochromatic, and housed in soft squares.

```tsx
// Icon Tile Container
"w-14 h-14 rounded-xl bg-fog-warm flex items-center justify-center text-umber-charcoal mb-4"

// Icon Tile Text Structure
<div className="flex flex-col gap-2">
  <div className="w-14 h-14 rounded-xl bg-fog-warm flex items-center justify-center text-umber-charcoal" />
  <h4 className="text-caption font-medium text-graphite">Modular Grids</h4>
</div>
```

### Screenshots & Media

Images placed in the lower modular sections must adhere to strict border radii to match the physical studio aesthetic.

```tsx
// Standard Media Container
"rounded-[24px] overflow-hidden border border-fog-warm shadow-sm bg-pearl-white"
```

---

## Animation System

### Core Philosophy: The Settling Object

Animations should feel like physical objects being gently placed on a wooden table. No rapid snapping or elastic bouncing.

### Section Unveiling

```tsx
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }} /* Custom fluid easing */
```

---

## Quality Checklist

* [ ] Is the primary typeface set to **Helvetica Now**, **Geist**, or **Inter Tight**?
* [ ] Are the heading sizes strictly locked to the 42–50px (hero) and 34–40px (feature) parameters?
* [ ] Is the navigation text exactly 13–14px?
* [ ] Does the body copy sit at an easily readable 18px?
* [ ] Is the hero background a softly lit photograph with a translucent ivory overlay?
* [ ] Are all primary call-to-action buttons styled as rounded pills in dark umber-charcoal?
* [ ] Are the modular sections structured strictly with left-aligned concise copy and right-aligned imagery?
* [ ] Do device preview cards utilize the frosted backdrop-blur and faint inner white stroke?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Warm tonal layers (limestone, pearl, concrete, warm fog).
* Soft, natural-light photography with translucent overlays.
* High-contrast umber-charcoal for buttons and primary icons.
* Generous, balanced vertical padding between alternating panel blocks.
* Clean, borderless accordions separated only by hairline dividers.

### ✗ Not Allowed

* Pure, stark whites (`#FFFFFF`) or pure blacks (`#000000`).
* Cool grays, tech blues, or neon accent colors.
* Heavy drop shadows (rely on inner strokes and surface color shifts).
* Square corners on primary call-to-action buttons.
* Center-aligned copy in the lower modular sections (left-alignment only).
* Vector illustrations (use physical product screenshots and natural photography).