Pearl App Chronicle Column

/pearlAppChronicleColumn
A premium, mobile-first design system for narrative-driven portfolios—bold, avatar-led, single-column storytelling, tactile widgets, and ultra-restrained color use, modeled after high-end iOS editorial experiences.
0 likes
0 bookmarks
Jun 18, 2026
Design System Content
# Pearl App Chronicle Column Design System

A design language for premium, mobile-first, narrative-driven portfolio interfaces.

---

## Philosophy

> "Content is the chronicle; the interface is merely the glass it sits behind."

This system creates interfaces that feel like a curated, high-end iOS editorial experience. It relies on a strictly mobile-first centered column, driving the user's eye down a singular path of bold typography, avatar-led introductions, and densely rich, widget-like project cards. The design trades sprawling grids for deep, focused, one-by-one storytelling.

### Core Beliefs

1. **The Centered Monolith** — A single-column layout forces focus. One project card per row creates an unhurried, exhibition-style pacing.
2. **Avatar-Led Identity** — The human element anchors the page. The hero section is built around a pristine, high-fidelity avatar rather than massive abstract graphics.
3. **Typography as Architecture** — Deep structural contrast is achieved by pairing bold, geometric hero headings with highly compact, utilitarian sans-serif descriptions.
4. **Tactile Encapsulation** — Elements should feel like physical, premium iOS widgets. Forms are fully rounded, borders are delicate, and shadows are impossibly soft.
5. **Color Discipline** — The canvas is warm and neutral. Accent colors are banned from structural UI and buttons, existing only intrinsically in app icons or as microscopic status dots.

### Strict Rules

* **Strictly Single Column** — Project cards never sit side-by-side. The narrative must flow sequentially.
* **No Colorful Buttons** — Call-to-actions are exclusively fully-rounded graphite capsules with subtle inner highlights.
* **Micro-Accents Only** — System accents are restricted to tiny status dots (e.g., a green "live" dot) or natural colors within product screenshots and app icons.
* **Framer-Level Spacing** — Massive, generous vertical padding between sections and project cards is mandatory.
* **Rounded Everything** — Sharp corners are forbidden. All interactive elements, cards, and image bounds utilize deep, organic border radii.

---

## Color Palette

### The Editorial Scale

The palette is rooted in a warm, physical paper aesthetic (ivory and pearl) contrasting against sharp, high-density graphite for typography and primary actions.

```css
/* Backgrounds (Canvas to Components) */
bg-ivory-50           /* Main viewport background (#FAFAFA or warm ivory) */
bg-pearl-white        /* Project cards, inner widgets (#FFFFFF) */
bg-chalk-100          /* Hover states, subtle secondary pill backgrounds */
bg-chalk-200          /* Divider lines, inactive borders, skeleton loaders */

/* Borders & Shadows */
border-chalk-200/60   /* Delicate, barely-there card borders */
shadow-soft-widget    /* Soft, diffused iOS-style shadow (0 8px 30px rgba(0,0,0,0.04)) */
shadow-inner-glow     /* Micro-highlight for graphite pills (inset 0 1px 0 rgba(255,255,255,0.15)) */

/* Typography & Core UI */
text-graphite-900     /* Primary hero text, high-contrast bold headers (#1A1A1A) */
bg-graphite-900       /* Primary call-to-action capsule background */
text-graphite-800     /* Subtitles, primary widget text */
text-slate-500        /* Muted descriptive body copy, timestamps, metadata (#64748B) */
text-slate-400        /* System placeholders, tertiary stack labels */

/* The Micro-Accents (Used sparingly as 6px-8px dots) */
bg-emerald-500        /* "Live" or "Online" status dots only */
bg-amber-500          /* "In Progress" status dots only */

```

---

## Typography

A dual-typeface system designed for extreme contrast. Bold, geometric sans-serifs define the structure, while compact, highly legible sans-serifs handle the dense metadata.

### Font Families

* **Display/Headings:** `font-manrope`, `font-geist`, or `font-plus-jakarta`
* **Body/Metadata:** `font-inter` or `font-dm-sans`

### Font Weights

```css
font-bold        /* Hero headlines, project card titles, primary data hooks */
font-semibold    /* Capsule CTA text, category chips, author names */
font-medium      /* Compact descriptions, testimonial snippets, standard metadata */
font-normal      /* Long-form launch notes only */

```

### Font Size Scale

```css
text-[10px]      /* Tiny stack labels, micro category chips */
text-[11px]      /* Short metrics, app version numbers, timestamps */
text-xs          /* Testimonial snippets, launch note dates (12px) */
text-sm          /* Compact descriptions, metadata blocks (14px) */
text-base        /* Standard project summary text (16px) */
text-lg          /* Card subtitles, feature highlights (18px) */
text-2xl         /* Standard project card titles */
text-4xl-5xl     /* Avatar-led hero heading */

```

### Hierarchy Examples

| Element | Family | Size | Weight | Color |
| --- | --- | --- | --- | --- |
| Hero Heading | Manrope | 5xl | bold | graphite-900 |
| Card Title | Manrope | 2xl | bold | graphite-900 |
| Description | Inter | sm | medium | slate-500 |
| Stack Label | Inter | [10px] | semibold | slate-500 |
| Capsule CTA | Inter | sm | semibold | pearl-white |

---

## Animation System

### Core Philosophy: iOS Spring Physics

No linear fades or slow floats. Everything feels connected to a physical user touch, utilizing high-tension spring animations.

### Scroll Reveal (The Chronicle Flow)

Project cards slide up into the column sequentially with a subtle scale-up, mimicking physical cards being dealt onto a table.

```tsx
initial={{ opacity: 0, y: 40, scale: 0.98 }}
whileInView={{ opacity: 1, y: 0, scale: 1 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ type: "spring", stiffness: 260, damping: 20 }}

```

### Micro-Interactions (The Capsule Press)

Buttons and cards do not change color on hover; they physically depress.

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

```

---

## UI Components

### The Graphite Capsule (CTA)

Colorful generic buttons are strictly forbidden. All CTAs are fully rounded, graphite-colored pills with a microscopic top inner-highlight to give them a premium, machined feel.

```tsx
<button className="flex items-center justify-center gap-2 px-6 py-3 rounded-full bg-graphite-900 text-pearl-white text-sm font-semibold shadow-[inset_0_1px_0_rgba(255,255,255,0.15),0_4px_12px_rgba(0,0,0,0.1)] hover:opacity-90 active:scale-95 transition-all">
  View App Store
</button>

```

### The Premium iOS Widget (Project Card)

One per row. Generous inner padding, delicate borders, nested rounded screenshots, and dense but organized metadata zones.

```tsx
<article className="w-full max-w-2xl mx-auto bg-pearl-white rounded-[2rem] p-6 sm:p-8 border border-chalk-200/60 shadow-[0_8px_30px_rgba(0,0,0,0.04)] mb-16">
  {/* Content goes here */}
</article>

```

### The Micro-Badge Stack Label

Compact, muted pills used to denote tech stacks, categories, or metrics without drawing eye share away from the hero typography.

```tsx
<span className="px-2.5 py-1 rounded-full bg-chalk-100 border border-chalk-200 text-slate-500 text-[10px] font-semibold tracking-wide uppercase">
  SwiftUI
</span>

```

---

## Component Catalog

### Hero Avatar Section

The entry point. Perfectly centered, leading with a high-res, deeply rounded avatar.

```tsx
<div className="flex flex-col items-center text-center space-y-6 py-20 w-full max-w-xl mx-auto">
  <div className="w-24 h-24 rounded-full p-1 border border-chalk-200 bg-pearl-white shadow-sm">
    <img src="/avatar.jpg" className="w-full h-full rounded-full object-cover" />
  </div>
  <h1 className="font-manrope text-5xl font-bold text-graphite-900 tracking-tight leading-tight">
    Designing premium interfaces.
  </h1>
  <p className="font-inter text-base font-medium text-slate-500 max-w-sm">
    Product Designer & Developer based in San Francisco.
  </p>
  <div className="pt-4 flex items-center gap-2 text-sm text-slate-500 font-medium">
    <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
    Accepting new clients
  </div>
</div>

```

### The Chronicle Project Card

A highly detailed widget showcasing a singular case study.

```tsx
<article className="w-full max-w-2xl mx-auto bg-pearl-white rounded-[2rem] p-8 border border-chalk-200/60 shadow-[0_8px_30px_rgba(0,0,0,0.04)] mb-24 flex flex-col gap-6">
  {/* Header: App Icon & Title */}
  <div className="flex items-center gap-4">
    <img src="/app-icon.png" className="w-14 h-14 rounded-xl shadow-sm" />
    <div>
      <h2 className="font-manrope text-2xl font-bold text-graphite-900">Opal Camera</h2>
      <p className="font-inter text-sm font-medium text-slate-500">Professional webcam utility</p>
    </div>
  </div>

  {/* Screenshot */}
  <div className="w-full bg-chalk-100 rounded-2xl overflow-hidden border border-chalk-200/50">
    <img src="/screenshot.png" className="w-full h-auto object-cover hover:scale-[1.02] transition-transform duration-500" />
  </div>

  {/* Launch Notes & Testimonial Snippet */}
  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 pt-2">
    <div>
      <h3 className="font-manrope text-sm font-bold text-graphite-900 mb-2">Launch Notes</h3>
      <p className="font-inter text-sm text-slate-500 leading-relaxed">
        Redesigned the core macOS menubar experience, focusing on one-click hardware adjustments and reducing memory footprint by 40%.
      </p>
    </div>
    <div className="bg-ivory-50 rounded-xl p-4 border border-chalk-200/60">
      <p className="font-inter text-xs font-medium text-graphite-800 italic mb-3">
        "The most tactile software update we've shipped."
      </p>
      <span className="font-inter text-[11px] font-semibold text-slate-400 uppercase tracking-wide">
        — Design Director, Opal
      </span>
    </div>
  </div>

  {/* Footer: Stack Labels & Action */}
  <div className="flex items-center justify-between pt-4 border-t border-chalk-200/60">
    <div className="flex flex-wrap gap-2">
      <span className="px-2.5 py-1 rounded-full bg-chalk-100 text-slate-500 text-[10px] font-semibold uppercase">macOS</span>
      <span className="px-2.5 py-1 rounded-full bg-chalk-100 text-slate-500 text-[10px] font-semibold uppercase">Framer</span>
    </div>
    <button className="px-5 py-2 rounded-full bg-graphite-900 text-pearl-white text-[13px] font-semibold shadow-inner-glow active:scale-95 transition-transform">
      Read Case Study
    </button>
  </div>
</article>

```

---

## Quality Checklist

* [ ] Is the layout strictly a single, centered column with maximum `max-w-2xl` width?
* [ ] Are all primary CTAs fully rounded graphite capsules?
* [ ] Do hero headings use a bold, structural typeface (Manrope/Geist) while body text uses a compact sans (Inter/DM Sans)?
* [ ] Are project cards loaded with rich metadata (stack labels, testimonials, metrics) organized into clean sub-zones?
* [ ] Is the spacing between project cards massive (e.g., `mb-24` or `mb-32`)?
* [ ] Are there zero UI-driven accent colors except for natural app icons and microscopic 6px status dots?
* [ ] Do all borders and shadows feel delicate, diffused, and premium (iOS widget style)?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Pearl white, chalk grays, and warm ivory canvases.
* Deeply rounded corners on everything from buttons (`rounded-full`) to main cards (`rounded-[2rem]`).
* Extreme font weight contrast: `font-bold` headings paired with `font-medium` or `font-normal` micro-text.
* Soft, diffused drop shadows that span wide but retain extremely low opacity.
* Physical spring physics for all interactions (scale down on press).

### ✗ Not Allowed

* Multi-column grids or side-by-side bento boxes for primary projects.
* Generic blue, green, or purple primary action buttons.
* Hard square corners (`rounded-none` or `rounded-sm`) on cards or buttons.
* Heavy, dark, high-opacity drop shadows.
* Full-width edge-to-edge content that breaks the mobile-first center column flow.