Friendly App Object Gallery Design System

/friendlyAppObjectGalleryDesignSystem
A serene, single-column design system that presents digital work as tactile, gallery-like objects with soft geometry, warm minimal palettes, confident typography, and deliberate pastel accents.
0 likes
0 bookmarks
Jun 18, 2026
Design System Content
# Friendly App Object Gallery Design System

A design language for clean, world-class portfolio interfaces where digital projects become tangible artifacts.

---

## Philosophy

> "A digital workspace should feel as curated and calm as a physical design studio."

This system treats digital projects not as flat web links, but as physical, friendly app objects sitting gracefully on a gallery pedestal. The environment is entirely calm and distraction-free, relying on warm ivory tones, soft lighting, and oversized tactile geometry. Everything centers on a singular, horizontally focused column to give each project maximum undivided attention.

### Core Beliefs

1. **The Gallery is Calm** — Ivory backgrounds and pale gray structural elements create a warm, gallery-like neutrality that lets the work shine.
2. **Tactile & Friendly Geometry** — Sharp edges do not exist here. Oversized rounded rectangles and squircles invite interaction and feel safe, much like modern iOS interfaces.
3. **Hyper-Focused Centering** — A strict single-column layout across all breakpoints forces narrative focus. Sidebars and multi-column grids create noise; the center creates presence.
4. **Confident Graphite Typography** — Text acts as the anchor. It eschews pure black for a softer, yet highly legible graphite, deployed with confident weight for headers and ultra-compact utility for data.
5. **Pastels as Whispers** — Color is severely restricted. Tiny pastel details are used surgically—only to indicate state, categorize gently, or frame an avatar.

### Strict Rules

* **Strictly Single-Column** — Every layout element must be horizontally centered. Multi-column masonry or side-by-side bento grids are forbidden.
* **Oversized Radii Only** — Cards and shelves must use massive border radii (`24px` to `32px`). No rigid or sharp corners.
* **Graphite Over Black** — Typography must never hit `#000000`. Use deep graphite grays to maintain the soft gallery aesthetic.
* **Pastel Micro-Details Only** — Saturated or primary colors are banned. Use delicate pastels exclusively for tiny chips, avatar rings, or status dots.
* **Soft iOS Shadows** — Depth is created via diffused, multi-layered soft shadows and delicate hairline borders, never harsh drops.

---

## Color Palette

### The Studio Scale (Backgrounds & Structural Grays)

The environment relies on a soothing ivory canvas with pale gray shelves acting as project containers.

```css
/* Canvas & Containers */
bg-ivory              /* Main studio background (#FAF9F6) */
bg-gray-50/80         /* Pale gray rounded shelves (#F9FAFB) */
bg-white              /* Elevated app object containers (#FFFFFF) */
bg-gray-100           /* Hover states for interactive shelves */
bg-gray-200/50        /* Subtle structural dividers and disabled states */

/* Delicate Borders */
border-black/5        /* Default hairline border for app objects */
border-black/10       /* Hovered border state for interactive cards */
border-gray-200       /* Structural shelf boundaries */

/* Typography (The Graphite Scale) */
text-slate-900        /* Confident headers, primary titles (#0F172A) */
text-slate-700        /* Secondary copy, testimonial bubbles (#334155) */
text-slate-500        /* Compact captions, launch badge labels (#64748B) */
text-slate-400        /* Tiny metrics, subtle timestamps (#94A3B8) */

```

### The Pastel Accents (Micro-Details Only)

Color is strictly limited to these pale, soft hues. They are never to be used for large backgrounds or typography.

```css
/* Category Chips & Status Dots */
bg-emerald-100        /* "Live" or "Launched" status dots */
bg-blue-100           /* Technology category chips (e.g., "React") */
bg-rose-100           /* Design category chips (e.g., "UX/UI") */
bg-amber-100          /* "In Progress" or draft indicators */

/* Avatar Rings */
ring-purple-200       /* Profile picture/avatar border rings */
ring-indigo-100       /* Secondary contributor avatar rings */

/* Status Dot Colors (Inside the pastel chip) */
bg-emerald-400        /* The actual 6px status dot for 'live' */
bg-amber-400          /* The actual 6px status dot for 'draft' */

```

---

## Typography

Typography pairs a confident, slightly geometric sans-serif (Manrope or Geist) for structural headings with a highly legible, compact sans-serif (Roboto or Inter) for data and captions.

### Font Families & Weights

```css
/* Headings: Geist or Manrope */
font-semibold      /* MANDATORY for all project titles, app names, section headers */
font-medium        /* Subtitles and high-level summaries */

/* Captions & Body: Inter or Roboto */
font-normal        /* Default body copy, testimonial content */
font-medium        /* Interactive button labels, category chips */

/* Note: 'font-light' and 'font-black' are excluded to maintain friendly mid-tones. */

```

### Font Size Scale

```css
text-[10px]      /* Tiny metrics, status dot labels, subtle timestamps */
text-[11px]      /* Launch badge text, tiny app version numbers */
text-xs          /* Compact captions, category chips, avatar subtitles (12px) */
text-sm          /* Testimonial bubbles, secondary object descriptions (14px) */
text-base        /* Standard paragraph copy, button text (16px) */
text-lg          /* App object subheadings, section dividers (18px) */
text-2xl         /* Confident project titles inside shelves (24px) */
text-4xl         /* Single-column gallery hero introductions (36px) */

```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Gallery Hero | Manrope/Geist | 4xl | semibold | slate-900 | tight |
| App Object Title | Manrope/Geist | 2xl | semibold | slate-900 | normal |
| Testimonial Text | Inter/Roboto | sm | normal | slate-700 | normal |
| Category Chip | Inter/Roboto | xs | medium | slate-700 | normal |
| Tiny Metrics | Inter/Roboto | [10px] | medium | slate-400 | wide |

---

## Animation System

### Core Philosophy: The iOS Spring

Movements should feel physical, bouncy, and friendly—replicating the opening of an app on a modern mobile OS. No harsh linear fades.

### App Object Reveal

```tsx
initial={{ opacity: 0, scale: 0.96, y: 20 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
transition={{ type: "spring", bounce: 0.3, duration: 0.7 }}

```

### Tactile Hover Lift

Cards shouldn't just change color; they should gently press upward towards the user, expanding their soft shadow.

```tsx
whileHover={{ y: -4, scale: 1.01 }}
transition={{ type: "spring", stiffness: 400, damping: 25 }}

```

---

## UI Components

### Soft iOS-Style Shadows

Depth is critical for separating the friendly app objects from the pale gray shelves and ivory canvas.

```css
/* The Object Shadow: Diffused, wide, soft */
box-shadow: 0 10px 40px -10px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.02);

/* The Inner Shelf Shadow: Creates the 'carved out' gallery pedestal feel */
box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.02);

```

### Oversized Radii Patterns

```css
rounded-[32px]     /* Primary project cards, pale gray shelves */
rounded-[24px]     /* Inner screenshots, large app icons */
rounded-2xl        /* Testimonial bubbles, medium UI elements */
rounded-full       /* Category chips, status badges, avatar rings */

```

---

## Component Catalog

### Project Shelves & App Cards

The central nervous system of the layout. A massive, single-column container holding an elevated, tactile app card.

```tsx
// The Pale Gray Shelf (Background Container)
"w-full max-w-3xl mx-auto bg-gray-50/80 rounded-[32px] p-4 md:p-8 flex flex-col items-center border border-gray-200/50 shadow-inner"

// The App Object Card (Inside the Shelf)
"w-full bg-white rounded-[24px] p-6 border border-black/5 shadow-[0_10px_40px_-10px_rgba(0,0,0,0.06)] flex flex-col items-center text-center transition-transform hover:-translate-y-1"

```

### App Icons & Media

```tsx
// Friendly App Icon Squircles
"w-20 h-20 bg-white rounded-[24px] border border-black/5 shadow-sm flex items-center justify-center overflow-hidden"

// Project Screenshots
"w-full rounded-[20px] border border-black/5 shadow-sm overflow-hidden mt-6"

```

### Chips & Badges

Pastels are deployed here to inject subtle warmth without breaking the gallery calmness.

```tsx
// Pastel Category Chip
"px-3 py-1.5 rounded-full bg-blue-100 text-blue-800 text-xs font-medium font-inter border border-blue-200/50"

// Launch Badge with Status Dot
"inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-white border border-black/5 shadow-sm text-[11px] font-medium text-slate-500"
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />

```

### Testimonial Bubbles & Metrics

```tsx
// Testimonial Bubble
"bg-gray-50 rounded-2xl rounded-tl-none p-4 text-sm text-slate-700 font-normal border border-gray-100 shadow-sm inline-block max-w-[85%]"

// Tiny Metrics Block
"flex flex-col items-center gap-0.5 p-3 rounded-2xl bg-white border border-black/5 shadow-sm min-w-[80px]"
<span className="text-lg font-semibold font-geist text-slate-900">4.9</span>
<span className="text-[10px] uppercase tracking-wide text-slate-400">Rating</span>

```

---

## Quality Checklist

* [ ] Is the entire layout contained strictly within a horizontally centered, single column?
* [ ] Is the main background a warm Ivory, avoiding stark `#FFFFFF` or dark gray?
* [ ] Are all headings using Geist or Manrope with a confident `semibold` weight?
* [ ] Do all main containers and app cards feature oversized radii (`rounded-[24px]` to `rounded-[32px]`)?
* [ ] Are colors entirely restricted to graphite text and tiny pastel micro-details?
* [ ] Did you use ultra-soft, low-opacity iOS-style drop shadows instead of harsh, dark shadows?
* [ ] Are the tiny data metrics appropriately styled with compact typography (Inter/Roboto) and graphite/slate tones?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Strict single-column layout centered on the screen.
* Ivory backgrounds with pale gray structural containers.
* Oversized rounded rectangles and squircle shapes.
* Soft, highly diffused drop shadows (`rgba(0,0,0,0.06)`).
* Delicate pastel backgrounds limited to tiny chips or avatar rings.
* Semibold geometric headings paired with compact utility captions.

### ✗ Not Allowed

* Multi-column grids, sidebars, or masonry layouts.
* Dark themes, deep black backgrounds, or high-contrast inverse sections.
* Sharp corners (`rounded-none` or `rounded-sm`) on major UI elements.
* Saturated, bright, or primary colors applied to backgrounds, text, or large elements.
* Heavy, muddy, or opaque drop shadows.
* Thin or ultra-light font weights for primary project headings.