Friendly Maker Avatar Bento

/friendlyMakerAvatarBento
A warm, mobile-native design system for personal B2C portfolios—emphasizing human connection, single-column flow, soft textures, and playful micro-accents. Delivers polished, welcoming interfaces fueled by storytelling and tactile springy animations.
0 likes
0 bookmarks
Jun 18, 2026
Design System Content
# Friendly Maker Avatar Bento Design System

A design language for warm, personal, and native-polished B2C portfolios.

---

## Philosophy

> "Craft is personal; interfaces should feel like a warm introduction."

This system creates interfaces that feel like a highly polished native mobile app translated to the web. It prioritizes human connection, storytelling, and approachability. The design feels like stepping into a modern maker's tidy, welcoming workshop—relying on generous curves, soft tactile depth, and a hyper-focused linear flow.

### Core Beliefs

1. **The Maker is the Anchor** — Human presence grounds the experience. Floating avatars and personal micro-touches bring warmth to the digital space.
2. **Focus through Constriction** — A vertically centered, single-column layout forces concise storytelling. No wide, sprawling desktop grids; everything feels intimate and mobile-native.
3. **Softness equals Approachability** — Oversized border radii and incredibly soft iOS-style shadows remove the friction and sterility of traditional corporate tech interfaces.
4. **Restraint in Color** — The canvas is driven by pearl, chalk, and graphite. Pastels are treated as precious, used exclusively for micro-status indicators and avatar highlights.
5. **Bold, Friendly Typographic Rhythm** — Big, bold, rounded headings grab attention with a smile, while crisp, unopinionated body text ensures effortless reading.

### Strict Rules

* **Single-Column Only** — Content must flow centrally. Multi-column desktop splits that dilute focus are strictly forbidden. Oversized bento tiles stack or nest tightly.
* **Fully Rounded Primary Actions** — All main Call-To-Action buttons must be perfect pills (fully rounded) and utilize the Graphite core color.
* **No Large Washes of Bright Color** — Pastels are restricted to tiny surface areas: "launched" chips, status dots, and avatar border rings. 
* **Native-Level Polish** — Shadows must be diffuse and multi-layered (iOS style), never harsh or strictly directional.

---

## Color Palette

### Base & Surface Scale

The canvas relies on highly refined, low-contrast neutrals. Pearl white anchors the background, supported by chalky grays and soft blue-grays for depth. The highest contrast comes from Graphite.

```css
/* Backgrounds & Surfaces */
bg-pearl-white        /* Main application background (#FCFCFC) */
bg-chalk-gray         /* Standard bento tile background (#F5F5F5) */
bg-bluegray-50        /* Hover states, subtle secondary tiles (#EEF2F6) */
bg-bluegray-100       /* Pressed states, deeper container zones */
bg-white              /* Foreground proof cards and floating elements */

/* Borders & Dividers */
border-chalk-200      /* Subtle bento outlines */
border-bluegray-200   /* Avatar rings and interactive element boundaries */

/* Core Interface & Text (Graphite Scale) */
bg-graphite           /* Primary Call-to-Action buttons (#2A2A2C) */
text-graphite-900     /* Primary text, hero headings, bento titles (#1C1C1E) */
text-graphite-600     /* Secondary text, body copy (#636366) */
text-graphite-400     /* Muted timestamps, subtle descriptive text (#AEAEB2) */

```

### Pastel Micro-Accents (Restricted Use)

Used *only* for badges, status dots, avatar rings, and tiny micro-chips.

```css
bg-mint-100 text-mint-800       /* "Launched" chips, success states, online dots */
bg-peach-100 text-peach-800     /* "Building" chips, work-in-progress tags */
bg-lavender-100 text-lavender-800 /* "Featured" badges, premium highlights */
bg-lemon-100 text-lemon-800     /* Subtle attention markers, new updates */

```

---

## Typography

The typographic system creates a friendly but highly legible B2C vibe. Headings are bold, round, and expressive (Manrope/Plus Jakarta Sans), while the body text remains exceptionally crisp and neutral (Inter/Roboto).

### Font Families & Weights

```css
font-heading     /* Manrope or Plus Jakarta Sans — used for all H1-H4 and titles */
font-sans        /* Inter or Roboto — used for all body text, paragraphs, data */

font-extrabold   /* Hero headings, primary bento numbers - MANDATORY for impact */
font-bold        /* Standard section titles, active states */
font-medium      /* Buttons, tiny chips, proof card labels */
font-normal      /* Default reading copy */

```

### Font Size Scale

```css
text-[11px]      /* Micro-chips ("launched", "building"), status dots */
text-xs          /* Timeframes, small UI labels (12px) */
text-sm          /* Body copy in secondary bento boxes, proof cards (14px) */
text-base        /* Standard primary body text (16px) */
text-lg          /* Subtitles, descriptive lead-ins (18px) */
text-2xl         /* Bento tile headers, section titles (24px) */
text-4xl         /* Secondary page headers (36px) */
text-5xl-7xl     /* Oversized friendly hero greetings */

```

### Letter Spacing & Transforms

```css
tracking-tighter /* Oversized hero headings to emphasize chunkiness */
tracking-tight   /* Standard headings and bento titles */
tracking-normal  /* All body copy */

lowercase        /* Playful stylistic choice for subtle UI tags (optional) */
/* Note: Avoid harsh ALL-CAPS; prioritize friendly sentence-case or lowercase */

```

### Hierarchy Examples

| Element | Font | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Greeting | Heading | 6xl | extrabold | graphite-900 | tighter |
| Bento Title | Heading | 2xl | bold | graphite-900 | tight |
| Main Body | Sans | base | normal | graphite-600 | normal |
| Primary CTA | Sans | base | medium | pearl-white | normal |
| Status Chip | Sans | [11px] | medium | pastel-800 | normal |

---

## Animation System

### Core Philosophy: Native Spring & Playfulness

Animations mimic the physical, satisfying physics of modern iOS apps. Elements scale and bounce gently; nothing fades in a slow, dramatic, corporate way.

### Page Transitions (Upward Spring)

```tsx
initial={{ opacity: 0, y: 30, scale: 0.96 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
transition={{ type: "spring", damping: 25, stiffness: 300 }}

```

### Micro-Interactions (The Tactile Press)

Interacting with oversized bento tiles or fully rounded buttons triggers a satisfying, native-feeling compression.

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

```

---

## UI Components

### Floating Maker Avatars

Anchors the personal feel of the portfolio. Usually positioned at the top of the single-column layout or overlapping bento boundaries.

```tsx
<div className="relative inline-block">
  <img 
    src="/avatar.png" 
    className="w-20 h-20 rounded-full border-4 border-pearl-white shadow-ios-soft"
  />
  <span className="absolute bottom-1 right-1 w-4 h-4 bg-mint-400 border-2 border-pearl-white rounded-full animate-bounce-slow" />
</div>

```

### Status Micro-Chips

Tiny, rounded indicators adding context without clutter.

```tsx
<div className="inline-flex items-center px-2.5 py-1 rounded-full bg-peach-100 text-peach-800 text-[11px] font-medium font-sans">
  <span className="w-1.5 h-1.5 rounded-full bg-peach-400 mr-1.5" />
  building
</div>

```

### Notification-Style Proof Cards

Small, floating cards that overlay main elements to show social proof or quick stats, resembling mobile push notifications.

```tsx
<div className="flex items-center gap-3 p-3 bg-white/90 backdrop-blur-md rounded-2xl shadow-ios-floating border border-chalk-200">
  <div className="w-10 h-10 rounded-full bg-lavender-100 flex items-center justify-center text-lavender-600">
    <IconStar size={18} />
  </div>
  <div className="flex flex-col">
    <span className="font-heading font-bold text-graphite-900 text-sm">Featured</span>
    <span className="font-sans text-graphite-400 text-xs">Product Hunt #1</span>
  </div>
</div>

```

---

## Component Catalog

### Oversized Bento Tiles

Large corner radii, soft backgrounds, stacked linearly.

```tsx
// Primary Bento Container
"flex flex-col p-8 bg-chalk-gray rounded-[32px] border border-chalk-200 shadow-ios-subtle transition-transform duration-300 hover:scale-[1.01]"

// Interactive Sub-Tile
"flex items-center p-5 bg-white rounded-3xl shadow-sm hover:shadow-ios-soft transition-all cursor-pointer"

```

### Buttons

Always fully rounded. Main actions use Graphite.

```tsx
// Primary CTA (Graphite Pill)
"w-full sm:w-auto px-8 py-4 bg-graphite text-pearl-white font-sans font-medium text-base rounded-full shadow-ios-soft hover:bg-graphite-900 transition-colors active:scale-95"

// Secondary Soft Button
"px-6 py-3 bg-bluegray-50 text-graphite-900 font-sans font-medium text-sm rounded-full hover:bg-bluegray-100 transition-colors"

```

### Soft Inputs

Friendly, un-intimidating input fields.

```tsx
// Newsletter / Contact Input
"w-full px-6 py-4 bg-chalk-gray border-2 border-transparent focus:border-bluegray-200 focus:bg-white rounded-full text-graphite-900 placeholder-graphite-400 font-sans transition-all outline-none"

```

### Soft iOS Shadows

Shadows are constructed using multiple layers of low-opacity black to simulate real-world ambient occlusion rather than harsh light sources.

```css
shadow-ios-subtle   /* box-shadow: 0 4px 20px rgba(0,0,0,0.03) */
shadow-ios-soft     /* box-shadow: 0 8px 30px rgba(0,0,0,0.06), 0 2px 10px rgba(0,0,0,0.02) */
shadow-ios-floating /* box-shadow: 0 16px 40px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.03) */

```

---

## Quality Checklist

* [ ] Is the entire layout restricted to a single-column, vertically centered flow (e.g., `max-w-2xl mx-auto`)?
* [ ] Do all primary buttons utilize `rounded-full` (pill shape) and the core `bg-graphite` color?
* [ ] Are the headings utilizing a bold/extrabold rounded font (Manrope/Plus Jakarta Sans)?
* [ ] Have you completely avoided sharp corners? (Bento tiles should be at least `rounded-[32px]`).
* [ ] Are pastels restricted strictly to tiny elements like `px-2 py-1` chips or avatar rings?
* [ ] Do interactive elements utilize native-feeling scale/spring animations on press?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Pearl white backgrounds and chalk gray oversized bento containers.
* Massive, chunky heading typography to inject personality.
* Floating proof cards overlapping larger bento boundaries.
* Playful micro-chips denoting current status ("building", "launched").
* Soft, diffuse multi-layered shadows that feel like native mobile apps.

### ✗ Not Allowed

* Wide, multi-column desktop-first grids that break the linear storytelling.
* Square or slightly-rounded buttons (e.g., `rounded-md` is strictly forbidden for main CTAs).
* Bright primary colors (like vivid blue or harsh red) painted across large UI areas.
* Sharp dividing lines or rigid table structures.
* Flat, corporate fade-in animations without spring physics.