Friendly Founder iOS Stack Design System

/friendlyFounderIosStackDesignSystem
A warm, tactile design system for indie iOS-style portfolios, focusing on human-centric cues, mobile-native polish, and highly credible, approachable interfaces with strict color, shape, and layout rules.
0 likes
0 bookmarks
Jun 18, 2026
Design System Content
# Friendly Founder iOS Stack Design System

A design language for approachable, highly credible, and beautifully shipped indie portfolio interfaces.

---

## Philosophy

> "Warmth invites them in; polish earns their trust."

This system creates interfaces that feel like a native iOS experience crafted by a passionate maker. It bridges the gap between B2C approachability and professional credibility. The aesthetic relies on warm, tactile materials, soft boundaries, and human-centric cues, replacing the cold corporate software look with the inviting presence of a solo founder or small indie team. 

### Core Beliefs

1. **The Canvas is a Home, not a Lab** — Warm ivory backgrounds and mist-gray modules feel like an inviting physical space rather than a sterile operating room.
2. **Mobile-Native First** — Everything feels like it belongs on a phone screen. High touch targets, bouncy spring physics, and rounded squircles dominate the layout.
3. **Structured Centered Stacks** — Information flows linearly down a centered vertical axis: intro → product cards → proof chips → feature bentos → FAQs. 
4. **Human Presence over Branding** — Credibility is established through avatars, presence dots, and social proof, rather than massive corporate logos.
5. **Tactile Restraint** — CTAs feel like premium physical hardware buttons—dark, curved, and subtly highlighted—never loud, colorful, or generic.

### Strict Rules

* **No Harsh Whites or Pure Blacks** — The canvas must always be a warm ivory/stone, and text should be a deep graphite. 
* **No Colorful Primary CTAs** — Primary action buttons must be fully rounded near-black capsules with refined rim highlights.
* **No Sharp Corners** — Everything from bento boxes to app icons must use generous corner radii (squircles) matching iOS standards.
* **Strict Vertical Centering** — Pages flow down a single, easily scrollable central column to mirror the mobile reading experience.
* **No Heavy Multi-color Themes** — Let the polished screenshot frames and app icons provide the color; the surrounding UI must remain neutral.

---

## Color Palette

### The Warm & Graphite Scale

The palette replaces stark clinical grays with warm stones, mist-grays, and deep graphite tones. Color is almost entirely extracted from the UI structural elements, leaving room for app icons and screenshots to shine.

```css
/* Backgrounds (Canvas to Module) */
bg-stone-50           /* The main ivory/warm white canvas (#fafaf9) */
bg-zinc-100/80        /* Default mist-gray modules and bento blocks */
bg-zinc-100/40        /* Subtle secondary backgrounds for nested elements */
bg-zinc-200/60        /* Hover states for interactive mist-gray cards */
bg-white/60           /* Glass badge backgrounds with backdrop blur */

/* Borders & Highlights */
border-zinc-200/50    /* Ultra-subtle inner borders for cards */
border-zinc-300       /* Focused inputs and active boundaries */
ring-white/15         /* Refined rim highlights for dark capsules */

/* Primary Actions */
bg-zinc-900           /* Near-black primary capsule CTAs (#18181b) */
bg-zinc-800           /* Hover state for primary capsules */
bg-zinc-100           /* Secondary pill backgrounds */

/* Text Hierarchy */
text-zinc-800         /* Graphite primary typography, hero headers, active data */
text-zinc-700         /* Standard body copy */
text-slate-500        /* Muted slate supporting text, metadata, descriptions */
text-slate-400        /* Disabled states, subtle placeholders */
text-white            /* Inverse text for dark capsules and tooltips */

/* The Human Accents (Tiny Cues) */
bg-emerald-500        /* Tiny presence dots ("online/shipping") */
bg-blue-500           /* Subtle notification badges on avatar bubbles */
```

---

## Typography

Typography feels deeply rooted in mobile operating systems. It is legible, punchy, and confident. Heavy weights in the hero section establish credibility, while clean, highly readable body copy ensures approachability.

### Primary Families
**Helvetica, Geist, Manrope, or Roboto**

### Font Weights

```css
font-normal      /* General body text, supporting descriptions */
font-medium      /* UI labels, proof chips, standard buttons, FAQ titles */
font-semibold    /* Hero typography, bento block titles, app names */
font-bold        /* Alternate hero emphasis, high-impact metrics */
```

### Font Size Scale

```css
text-[11px]      /* Tiny timestamp metadata, presence labels */
text-xs          /* Form hints, glass badge text (12px) */
text-sm          /* Body text, proof chips, supporting bento text (14px) */
text-base        /* Large body text, CTA capsule labels (16px) */
text-lg          /* App card titles, section introductions (18px) */
text-xl          /* Sub-headings, active FAQ items */
text-2xl         /* Standard section dividers */
text-4xl         /* Hero typography (MANDATORY for main introduction) */
```

### Letter Spacing & Transforms

```css
tracking-tight   /* Hero headings, bold app titles */
tracking-normal  /* Default for body and UI elements */
tracking-wide    /* Subtle emphasis on small categorical tags */

capitalize       /* App names, standard project titles */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- |
| Intro Hero | 4xl | semibold | zinc-800 | tight |
| Bento Titles | lg | semibold | zinc-800 | tight |
| Main Body | sm | normal | zinc-700 | normal |
| Proof Chips | xs | medium | slate-500 | normal |
| Capsule CTA | base | medium | white | normal |

---

## Animation System

### Core Philosophy: iOS Spring & Snap

Interactions should feel deeply physical, mimicking the satisfying resistance, bounce, and blur of native mobile software.

### Page Assembly (The Staggered Stack)

```tsx
initial={{ opacity: 0, y: 15, scale: 0.98 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
transition={{ type: "spring", bounce: 0.3, duration: 0.6, staggerChildren: 0.1 }}
```

### Micro-Interactions (The Squish & Spring)

Buttons and cards compress slightly when pressed, releasing with a playful but controlled bounce.

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

---

## UI Components

### Avatar & Presence Bubbles

Used immediately in the intro stack to establish the "friendly founder" vibe. 

```tsx
<div className="relative inline-block">
  <img src="/founder.jpg" className="w-16 h-16 rounded-full border-2 border-stone-50 shadow-sm" />
  <div className="absolute bottom-0 right-0 w-4 h-4 bg-emerald-500 border-2 border-stone-50 rounded-full shadow-sm" />
</div>
```

### The Dark Capsule CTA

Replaces traditional square colored buttons. It relies on internal rim highlighting and drop shadows to feel like a premium hardware button.

```tsx
className="flex items-center justify-center bg-zinc-900 text-white font-medium text-base rounded-full px-6 py-3.5 shadow-[0_1px_2px_rgba(0,0,0,0.1),inset_0_1px_1px_rgba(255,255,255,0.15)] ring-1 ring-zinc-950/50 hover:bg-zinc-800 active:scale-95 transition-all"
```

### Polished Screenshot Frames

Product imagery is never raw. It is always framed within an iOS-style container with subtle reflections.

```tsx
className="rounded-3xl border-[6px] border-zinc-100 bg-white shadow-xl shadow-zinc-200/50 overflow-hidden ring-1 ring-zinc-200/50"
```

---

## Component Catalog

### Structure & Layout

```tsx
// The Centered Vertical Stack (Page Wrapper)
"max-w-2xl mx-auto flex flex-col items-center justify-start gap-8 px-4 py-16"
```

### Cards & Bentos

```tsx
// Feature Bento Block (Mist-Gray)
"bg-zinc-100/80 rounded-3xl p-6 border border-white/40 shadow-sm"

// App/Product Card (Horizontal Row)
"flex items-center gap-4 bg-white/60 backdrop-blur-md rounded-2xl p-4 border border-zinc-200/50 hover:bg-zinc-50/80 transition-colors"
```

### App Icons

```tsx
// Rounded Squircle App Icon
"w-14 h-14 rounded-2xl bg-white shadow-sm ring-1 ring-black/5 overflow-hidden flex-shrink-0"
```

### Proof Chips & Badges

```tsx
// Social Proof Chip (Loved by 1k+)
"flex items-center gap-2 px-3 py-1.5 bg-white/80 backdrop-blur-sm rounded-full text-xs font-medium text-slate-500 border border-zinc-200 shadow-sm"

// Glass Badge (Category/Tag)
"px-2.5 py-1 text-xs font-medium rounded-full bg-white/40 backdrop-blur-md text-zinc-700 border border-white/60"
```

### FAQs

```tsx
// FAQ Accordion Row
"w-full flex items-center justify-between py-4 border-b border-zinc-200/60 text-zinc-800 text-sm font-medium hover:text-zinc-500 transition-colors cursor-pointer"
```

---

## Quality Checklist

* [ ] Is the page layout a strict, centered vertical column (intro → products → chips → bentos → FAQ)?
* [ ] Does the hero typography use Geist, Manrope, Roboto, or Helvetica at exactly `text-4xl` with `semibold` or `bold` weight?
* [ ] Are all primary CTAs fully rounded (`rounded-full`) near-black capsules with an inner rim highlight?
* [ ] Is the background a warm ivory/stone rather than pure hospital white?
* [ ] Are there friendly human cues present (Bitmoji-style avatars, green presence dots, glass proof chips)?
* [ ] Do all containers, icons, and frames utilize generous, iOS-style corner radii (squircles)?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Warm, tactile backgrounds (ivory, stone, mist-gray).
* Generous border radii on everything—embrace the squircle.
* Stacking elements linearly down the center of the viewport.
* Bouncy, spring-based micro-interactions for tap states.
* Inner shadows and white rim borders on dark elements to simulate hardware.

### ✗ Not Allowed

* Generic colorful SaaS buttons (no bright blue/green rectangular CTAs).
* Multi-column grid layouts for primary reading flow (keep it a vertical mobile-like stack).
* Pure white (`#ffffff`) as a global page background.
* Sharp, 90-degree corners on images or cards.
* Thin or overly delicate headline typography (must be robust and punchy).