Friendly Indie App Column

/friendlyIndieAppColumn
A design system inspired by premium iOS apps—warm, inviting, and distinctly mobile-first. It’s centered, ultra-rounded, strictly single-column, and limited to soft neutrals with micro-color for a personal, professional maker showcase.
0 likes
0 bookmarks
Jun 18, 2026
Design System Content
# Friendly Indie App Column Design System

A design language for approachable, premium portfolios and mobile-native maker showcases.

---

## Philosophy

> "Warmth welcomes; structure performs."

This system creates interfaces that feel like a highly curated, premium iOS ecosystem. It bridges the gap between a personal maker portfolio and a top-tier app store. The aesthetic is friendly but strictly professional, relying on generous radii, soft contact shadows, and an unapologetically mobile-first centered column to guide the user's focus.

### Core Beliefs

1. **The Mobile Column is Sacred** — The entire experience is contained within a centered, narrow max-width container (e.g., `max-w-2xl`). Full-width expansion dilutes the focused, indie-maker intimacy.
2. **Tactile & Inviting** — Elements should feel like physical app icons or premium soft-touch hardware. Fully rounded buttons and soft, diffused shadows create a welcoming environment.
3. **Contrast Dictates Hierarchy** — Graphite (charcoal) creates absolute focus against the porcelain and pearl backgrounds. 
4. **Micro-Color Over Macro-Color** — Large areas of the screen remain strictly neutral. Color is treated as a highly precious resource, used only for tiny status dots, avatar rings, or micro category labels.
5. **Two-Tiered Typography** — The tension between expressive, bold hero headings and highly functional, compact UI text creates a premium rhythm.

### Strict Rules

* **No Square Corners** — Everything from buttons to bento cards must feature generous border radii (squircles and pills). 
* **Charcoal over Bright Accents for CTAs** — Primary actions are always rich, dark graphite. Bright colors are strictly for indicators, never large buttons.
* **No Hard UI Borders** — Depth is achieved through soft iOS-like contact shadows and subtle background shifts (Porcelain to Pearl), not harsh 1px gray lines.
* **Strict Single Column** — Even on desktop, content must not spread wide. It stacks logically and beautifully within its constrained center channel.

---

## Color Palette

### The Neutral Foundation

The palette mimics premium matte paper and soft-touch plastics, scaling from pure Porcelain to deep Graphite. 

```css
/* Backgrounds (Lightest to Darkest) */
bg-white              /* Porcelain White: Primary card and canvas backgrounds (#ffffff) */
bg-stone-50           /* Pearl: App column background, soft hover states (#fafaf9) */
bg-stone-100          /* Soft Stone: Input backgrounds, inactive category chips (#f5f5f4) */
bg-stone-200          /* Mist Gray: Subtle dividers, disabled states, skeletons (#e7e5e4) */

/* The Charcoal Anchor */
bg-stone-900          /* Graphite: Primary CTAs, maker avatar rings (#1c1917) */
hover:bg-stone-800    /* Graphite Hover: Slightly lifted CTA state (#292524) */

/* Text Hierarchy */
text-stone-900        /* Graphite: Hero headings, bold confident text */
text-stone-600        /* Body text, compact descriptions, testimonial quotes */
text-stone-400        /* Mist Gray: Micro metrics, category chip text, metadata */

```

### Micro-Color Accents

Colors are injected in minuscule amounts to give the UI a pulse without overwhelming the premium light aesthetic.

```css
/* Micro Indicators (Dots, Rings, Plaques) */
bg-emerald-500        /* Online status dots, 'Live' indicators */
bg-amber-400          /* 'In Progress' tiny tags, star ratings */
bg-indigo-500         /* App-icon plaque gradients, premium category chips */
ring-indigo-500/20    /* Subtle avatar glow or active focus rings */
text-indigo-600       /* Single colored text allowed: tiny text-link inside a card */

```

---

## Typography

A strict duality: Highly expressive, bold hero headings (Geist, Manrope, or Helvetica Neue) paired with incredibly legible, compact UI details (Inter or Roboto).

### Font Families

```css
font-sans-hero        /* Geist, Manrope, or Helvetica Neue */
font-sans-ui          /* Inter or Roboto */

```

### Font Weights

```css
font-bold        /* Hero headings, primary app titles - MANDATORY for top-level focus */
font-semibold    /* Category chips, outcome metrics, CTA labels */
font-medium      /* Compact descriptions, UI details, testimonial author names */
font-normal      /* Standard paragraph text, secondary metadata */
/* font-light is strictly forbidden — friendly indie aesthetics require robust, punchy weights */

```

### Font Size Scale

```css
text-[10px]      /* App version numbers, tiny status labels */
text-[11px]      /* Category chips, micro labels */
text-xs          /* Short outcome metrics, testimonial roles (12px) */
text-sm          /* Compact descriptions, UI details (14px) */
text-base        /* Standard project card titles, secondary headings (16px) */
text-lg          /* App-icon plaque initials, card emphasis (18px) */
text-2xl         /* Sub-headlines, bento row headers */
text-3xl-5xl     /* Short confident hero headline */

```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Hero | 4xl | bold | stone-900 | tight |
| Project Title | Hero | base | bold | stone-900 | normal |
| Description | UI | sm | medium | stone-600 | normal |
| CTAs | UI | sm | semibold | white | wide |
| Category Chip | UI | [11px] | semibold | stone-600 | wide |

---

## Animation System

### Core Philosophy: The iOS Spring

Movements should feel physical, bouncy, and highly responsive. Elements should react to touch/hover by playfully sinking into the background before snapping back.

### Page Transitions (Upward Spring)

```tsx
initial={{ opacity: 0, y: 20, scale: 0.98 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
transition={{ type: 'spring', damping: 24, stiffness: 200 }}

```

### Micro-Interactions (The Button Press)

All fully rounded CTAs and app-icon plaques use a satisfying scale-down effect on press.

```tsx
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.95 }}
transition={{ type: "spring", stiffness: 400, damping: 25 }}

```

---

## UI Components

### The Centered Column Container

The structural backbone of the entire aesthetic.

```tsx
<main className="w-full min-h-screen bg-stone-50 flex justify-center px-4 py-12">
  <div className="w-full max-w-2xl flex flex-col gap-8">
    {/* Hero and Bento content goes here */}
  </div>
</main>

```

### Soft iOS Contact Shadows

Instead of harsh borders, project cards and plaques use diffuse, layered shadows to float gently above the Pearl background.

```css
/* Custom utility class to be added to tailwind.config.js */
shadow-ios: "0 4px 24px -6px rgba(0, 0, 0, 0.04), 0 8px 32px -4px rgba(0, 0, 0, 0.03)"
shadow-ios-sm: "0 2px 12px -2px rgba(0, 0, 0, 0.05)"

```

### The Maker Avatar

A premium, welcoming focal point located at the very top of the hero.

```tsx
<div className="relative inline-block">
  <img src="/avatar.jpg" className="w-16 h-16 rounded-full ring-2 ring-stone-900 ring-offset-2 ring-offset-stone-50" />
  <span className="absolute bottom-0 right-0 w-4 h-4 bg-emerald-500 border-2 border-stone-50 rounded-full" /> {/* Micro status dot */}
</div>

```

---

## Component Catalog

### Bento Project Cards

Generous, heavily rounded containers for app screenshots and metrics.

```tsx
// Primary Bento Container
"bg-white rounded-[32px] p-6 shadow-ios flex flex-col gap-4"

// Rounded Screenshot Wrapper
"w-full aspect-video rounded-[20px] bg-stone-100 overflow-hidden shadow-inner"

```

### Buttons

Strictly pill-shaped. No square corners.

```tsx
// Primary Charcoal CTA
"bg-stone-900 text-white font-sans-ui font-semibold text-sm rounded-full px-6 py-3 hover:bg-stone-800 shadow-ios-sm transition-all"

// Secondary Muted CTA
"bg-stone-100 text-stone-900 font-sans-ui font-semibold text-sm rounded-full px-6 py-3 hover:bg-stone-200 transition-all"

```

### App-Icon Plaques

Mimics an iOS app icon on the homescreen.

```tsx
// App Icon Plaque
"w-14 h-14 rounded-[16px] bg-gradient-to-tr from-stone-100 to-white shadow-ios-sm flex items-center justify-center text-xl font-sans-hero font-bold text-stone-900"

```

### Micro Labels & Category Chips

Tiny, perfectly pill-shaped metadata elements.

```tsx
// Standard Category Chip
"px-2.5 py-1 text-[11px] font-sans-ui font-semibold rounded-full bg-stone-100 text-stone-600"

// Micro-Color Label
"px-2.5 py-1 text-[11px] font-sans-ui font-semibold rounded-full bg-indigo-50 text-indigo-600 flex items-center gap-1.5"

```

### Testimonial Snippets

Soft, compact quotes nested within the bento rows.

```tsx
<div className="bg-stone-50 rounded-[20px] p-4 flex flex-col gap-2">
  <p className="text-sm font-sans-ui text-stone-600 italic">"..."</p>
  <div className="flex items-center gap-2">
    <div className="w-5 h-5 rounded-full bg-stone-200" />
    <span className="text-xs font-sans-ui font-medium text-stone-900">User Name</span>
  </div>
</div>

```

---

## Quality Checklist

* [ ] Is the entire layout constrained to a centered mobile-native column (`max-w-2xl`)?
* [ ] Are the hero headings bold and using the designated Hero font (Geist/Manrope/Helvetica Neue)?
* [ ] Are all primary buttons set to Graphite (`bg-stone-900`) and fully rounded (`rounded-full`)?
* [ ] Did you avoid using 1px gray borders on bento cards, relying instead on `shadow-ios`?
* [ ] Is UI text (descriptions, chips) explicitly using the UI font (Inter/Roboto)?
* [ ] Are bright colors strictly limited to tiny status dots, avatar rings, or micro labels?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Ultra-generous border radii (`rounded-[24px]` to `rounded-full`).
* Stacking elements vertically with ample `gap-6` or `gap-8` spacing.
* Tiny pops of Emerald, Amber, or Indigo for functional status indicators.
* Bouncy, spring-based micro-interactions.
* Centering the text in the hero section.

### ✗ Not Allowed

* Expanding bento grids to span the full width of a desktop monitor.
* Using sharp corners (`rounded-none` or `rounded-sm`) on cards or buttons.
* Applying primary, saturated colors (blue, green, red) to large CTA buttons.
* Using thin, elegant serif or light-weight fonts for any text.
* Adding heavy, dark drop shadows (shadows must remain incredibly soft and diffuse).