Friendly App Museum Column Design System

/friendlyAppMuseumColumnDesignSystem
A warm, gallery-inspired mobile-first design system that elevates digital products like curated museum artifacts with vertically stacked layouts, gentle colors, and approachable premium details.
0 likes
0 bookmarks
Jun 18, 2026
Design System Content
# Friendly App Museum Column Design System

A curated, warm, and gallery-like design language for premium B2C mobile-first exhibits.

---

## Philosophy

> "Every product is an artifact; the interface is its pedestal."

This system creates interfaces that emulate a modern, sunlit art gallery. Rather than an overwhelming dashboard, the screen acts as a curated museum column. It feels warm, highly approachable, yet undeniably premium. We replace harsh lines and stark contrasts with soft curves, porcelain canvases, and gentle focal points. Everything is designed to be viewed linearly, honoring a strict mobile-first pedigree even on the largest desktop displays.

### Core Beliefs

1. **The Mobile-First Pedestal** — The layout remains stubbornly narrow and centered regardless of viewport width. We do not use split grids; we stack content on elegant, focused plinths.
2. **Warm Illumination over Stark White** — Backgrounds leverage natural, earthy undertones—porcelain and pale stone—preventing the clinical coldness of pure white interfaces.
3. **Artifact Framing** — Screenshots and imagery are never raw; they are housed within dedicated 'frames' and oversized rounded cards to elevate their perceived value.
4. **Focused Outcomes** — Exhibits do not overwhelm with data. Each project or product highlights exactly *one* focused outcome metric to anchor its story.
5. **Approachable Premium** — High-end doesn't mean intimidating. Fully rounded geometries, subtle avatar bubbles, and tactile glass elements create a friendly B2C finish.

### Strict Rules

* **No Split Grids** — Multi-column layouts dilute focus. All primary content must flow vertically down a single, centered column.
* **Muted Accents Only** — Bright, saturated colors are banned. The sole accent is a muted blue-gray, reserved exclusively for badges, active states, and micro-indicators.
* **Fully Rounded CTAs** — Primary call-to-action buttons must always utilize maximum border-radius (pill-shaped) and sit in high-contrast dark graphite.
* **Semibold Heroes Only** — Display headlines must exude confidence through structure, relying on semibold weights of premium geometric sans-serifs.

---

## Color Palette

### The Gallery Scale

The palette replaces stark tech hues with the organic warmth of a physical museum space. Backgrounds step through soft whites and stones, while text is anchored by a soft, approachable graphite. 

```css
/* Canvas Backgrounds (Lightest to Darkest) */
bg-chalk-white        /* Main page canvas, warm and inviting (#FDFDFC) */
bg-porcelain          /* Primary card containers, exhibit plinths (#F7F6F3) */
bg-pale-stone/30      /* Subtle nested zones, screenshot frame borders (#EBEAE6) */
bg-pale-stone/60      /* Hover states for interactive gallery items */
bg-pale-stone         /* Delicate dividers, structural borders, empty tracks */

/* Borders & Separators */
border-pale-stone/50  /* Ultra-delicate divider lines */
border-pale-stone     /* Default structural borders for plaques and cards */
border-graphite/10    /* Subtle contrast borders for glass labels */

/* The Curator's Accent: Muted Blue-Gray */
text-blue-gray-600    /* Active navigational states, metric highlights (#64748B) */
bg-blue-gray-100      /* Proof chips, subtle notification backgrounds */
border-blue-gray-200  /* Active bounds, badge perimeters */
bg-blue-gray-50/50    /* Super subtle background for launch notes */

/* Text Hierarchy (Warm Monochromatic) */
text-graphite-900     /* Hero headlines, primary outcome metrics (#27272A) */
text-graphite-800     /* Standard body copy, UI labels (#3F3F46) */
text-graphite-500     /* Launch notes, descriptive captions (#71717A) */
text-graphite-400     /* Tiny uppercase labels, timestamps (#A1A1AA) */
text-pale-stone       /* Disabled states, subtle background typography */

```

---

## Typography

Typography establishes the "approachable premium" feel. We pair a structural, semibold hero typeface (Manrope or Geist) with an ultra-crisp, utilitarian body font (Roboto, Inter, or DM Sans) for ultimate legibility.

### Font Families

```css
font-display     /* Manrope or Geist — Used exclusively for Headers & Metrics */
font-sans        /* Inter, DM Sans, or Roboto — Used for Body, UI Labels, Notes */
```

### Font Weights

```css
font-normal      /* Body copy, glass labels, launch note descriptions */
font-medium      /* UI labels, fully rounded CTAs, avatar names */
font-semibold    /* Hero headlines, one-focused-outcome metrics, app-icon titles */
/* Light and Black weights are omitted to maintain the approachable mid-tone feel */
```

### Font Size Scale

```css
text-[10px]      /* Tiny uppercase labels, app-icon plaque metadata */
text-[11px]      /* Proof chips, launch notes, secondary artifact tags */
text-xs          /* UI labels, glass label overlays, delicate list items (12px) */
text-sm          /* Standard body copy, friendly descriptions (14px) */
text-base        /* CTA button text, primary UI inputs (16px) */
text-xl          /* Sub-exhibit titles, large list headers (20px) */
text-3xl         /* Standard exhibit titles (30px) */
text-4xl-5xl     /* Hero headlines, focused outcome metric numbers (36px-48px) */
```

### Letter Spacing & Transforms

```css
tracking-tight   /* Hero headlines, massive metric figures */
tracking-normal  /* Body copy, standard UI components */
tracking-widest  /* Tiny uppercase labels, proof chips */

uppercase        /* Tiny labels, proof chips, platform tags */
```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Exhibit Hero | Display | 4xl | semibold | graphite-900 | tight |
| Outcome Metric | Display | 5xl | semibold | graphite-900 | tight |
| Body Copy | Sans | sm | normal | graphite-800 | normal |
| CTA Button | Sans | base | medium | chalk-white | normal |
| Proof Chips | Sans | [11px] | medium | blue-gray-600| widest (upper)|

---

## Animation System

### Core Philosophy: The Gentle Placement

Elements do not snap aggressively. They slide into view like a curator placing a new artifact on a velvet plinth—soft, deliberate, and physically grounded.

### Stacked Plinth Reveal (Bottom-Up)

```tsx
initial={{ opacity: 0, y: 24, scale: 0.98 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
```

### Hover States (The Tactile Lift)

Cards and interactive plaques gently float and cast a softer, warmer ambient shadow rather than a harsh drop shadow.

```tsx
whileHover={{ y: -2, scale: 1.01 }}
transition={{ type: "spring", stiffness: 400, damping: 25 }}
// Accompanied by: shadow-[0_8px_30px_rgb(0,0,0,0.04)]
```

---

## UI Components

### The Exhibit Plinth (Oversized Card)

The foundational block of the system. Massive corner radii, no harsh outlines.

```tsx
<div className="w-full max-w-2xl mx-auto bg-porcelain rounded-[32px] p-8 md:p-12 border border-pale-stone/30 relative overflow-hidden">
  {/* Artifact Content */}
</div>
```

### Screenshot Frames

Screenshots are treated like framed art. They sit inside structural containers with gentle padding, ensuring the image itself never awkwardly bleeds into the canvas.

```tsx
<div className="w-full rounded-2xl bg-chalk-white p-2 border border-pale-stone shadow-sm">
  <img className="rounded-xl w-full h-auto object-cover" />
</div>
```

### App-Icon Plaques

Small, tactile badges identifying the product exhibit.

```tsx
<div className="flex items-center gap-4 p-3 bg-chalk-white rounded-2xl border border-pale-stone/60 shadow-sm w-fit">
  <div className="w-12 h-12 rounded-[14px] bg-pale-stone flex items-center justify-center">
    {/* Icon */}
  </div>
  <div className="flex flex-col">
    <span className="text-sm font-semibold text-graphite-900">App Name</span>
    <span className="text-[10px] uppercase tracking-widest text-graphite-400">Utility</span>
  </div>
</div>
```

### Glass Labels & Avatar Bubbles

Used to overlay context over screenshot frames without blocking the "art" or adding friendly social proof.

```tsx
// Glass Label
"absolute bottom-4 left-4 backdrop-blur-md bg-chalk-white/70 border border-chalk-white/50 text-xs font-medium text-graphite-800 px-3 py-1.5 rounded-full"

// Subtle Avatar Bubbles (Overlapping)
<div className="flex -space-x-2">
  <img className="w-8 h-8 rounded-full border-2 border-porcelain" src="avatar1.jpg" />
  <img className="w-8 h-8 rounded-full border-2 border-porcelain" src="avatar2.jpg" />
</div>
```

---

## Component Catalog

### Buttons & CTAs

Primary actions are high-contrast, fully rounded, and deeply grounded.

```tsx
// Primary CTA (Fully Rounded Dark)
"w-full sm:w-auto bg-graphite-900 text-chalk-white font-medium text-base rounded-full px-8 py-3.5 hover:bg-graphite-800 active:scale-95 transition-all shadow-sm"

// Secondary Action (Glass/Ghost)
"w-full sm:w-auto bg-transparent border border-pale-stone text-graphite-800 font-medium text-base rounded-full px-8 py-3.5 hover:bg-pale-stone/30 transition-colors"
```

### Labels, Notes & Chips

```tsx
// Proof Chip (Single Metric/Validation)
"inline-flex items-center gap-1.5 px-2.5 py-1 text-[11px] font-medium uppercase tracking-widest rounded-full bg-blue-gray-100/50 text-blue-gray-600"

// Tiny Uppercase Label
"text-[10px] font-semibold uppercase tracking-widest text-graphite-400"

// Launch Note Panel
"mt-4 p-4 rounded-2xl bg-chalk-white border border-pale-stone/50 text-sm text-graphite-500 leading-relaxed"
```

### The Single Focused Outcome Metric

Every exhibit needs a hero data point.

```tsx
<div className="flex flex-col items-center justify-center py-6">
  <span className="text-5xl font-display font-semibold tracking-tight text-graphite-900">4.9x</span>
  <span className="mt-2 text-xs text-graphite-500 uppercase tracking-widest">Retention Multiplier</span>
</div>
```

---

## Quality Checklist

* [ ] Is the layout confined to a narrow, center-aligned column, even on massive widescreen monitors?
* [ ] Are all hero typography elements utilizing `font-semibold` in the designated display typeface?
* [ ] Do all project showcases feature exactly *one* focused outcome metric?
* [ ] Are primary CTAs styled as fully rounded (pill-shaped) soft graphite buttons?
* [ ] Have you framed all screenshots within an outer rounded container rather than leaving them raw?
* [ ] Are the only non-monochromatic accents strictly the muted blue-gray used for active states or proof chips?
* [ ] Is the page completely free of multi-column split grids?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Constraining the maximum width to `max-w-2xl` or `max-w-3xl` globally to maintain the museum column feel.
* Layering subtle avatar bubbles to create approachable, friendly context.
* Using glass effect labels (`backdrop-blur`) floating lightly over screenshot frames.
* Nesting oversized rounded elements inside other oversized rounded elements.
* Generous vertical spacing (`gap-12` or `gap-16` minimum between stacked plinths).

### ✗ Not Allowed

* Expanding layouts to utilize the full width of desktop screens.
* Sharp corners (`rounded-none` or `rounded-sm`) on cards, buttons, or imagery.
* Drop shadows with dark opacity (keep shadows ambient, warm, and exceptionally light).
* Multi-colored metric charts; stick to the single focused outcome metric rule.
* Pure `#000000` text or pure `#FFFFFF` backgrounds (always rely on graphite, porcelain, and chalk white to maintain warmth).