Pearl Maker Card Column

/pearlMakerCardColumn
A monochromatic, single-column design system for personal portfolios, focusing on pristine layouts, tactile iOS-like components, and hero-centric vertical storytelling with strict color and compositional restraint.
Jun 18, 2026
Design System Content
# Pearl Maker Card Column

A design language for pristine, highly focused, and hyper-polished personal portfolio interfaces.

---

## Philosophy

> "Restraint creates elegance; the column creates focus."

This system is designed to act as an immaculate digital pedestal. It strips away lateral noise, confining the user’s gaze to a singular, perfectly weighted vertical axis. Inspired by elite iOS interfaces and top-tier Framer prototypes, it relies heavily on generous proportions, flawless spacing, and the total absence of saturated color. The content—specifically the avatar and the project imagery—is the sole source of vibrancy.

### Core Beliefs

1. **The Centered Monolith** — A narrow, centralized column commands attention. Wide layouts dissipate focus; constraints amplify it.
2. **Avatar as the Anchor** — The human element initiates the experience. An oversized, impeccably masked avatar establishes instant identity and gravity.
3. **Pacing via Padding** — Space is our primary design tool. Generous, Framer-level padding around and inside cards communicates luxury and calm.
4. **Graphite and Ivory** — The absence of saturated generic accent colors (no blue buttons, no green toggles) forces the UI into a timeless, editorial elegance.
5. **Tactile iOS Softness** — Panels are oversized with continuous, ultra-smooth border radii (`squircle` aesthetics) and soft contact shadows that suggest physical layering.

### Strict Rules

* **Single Column Strictly Enforced** — Only one polished project card per row. No grid galleries, no masonry layouts.
* **No Saturated UI Accents** — Interactive elements, buttons, and text rely entirely on a Graphite-to-Mist grayscale curve. 
* **Capsule CTAs Only** — All primary buttons must be fully rounded (`rounded-full`) capsules. No square corners for interactions.
* **Inner Highlights Required** — Dark components must feature a subtle, razor-thin inner white highlight to mimic physical materials.

---

## Color Palette

### Monochromatic Monolith

The palette is intentionally devoid of chroma. It utilizes warm, organic off-whites to prevent clinical sterility, stepping down into pale mist grays for structure, and anchoring text with deep, rich graphite.

```css
/* Backgrounds (Canvas & Containers) */
bg-pearl-white        /* Main canvas backdrop (#ffffff or #fdfcfb) */
bg-warm-ivory         /* Secondary container fill, subtle contrast (#f8f7f5) */
bg-mist-100           /* Hover states for interactive zones (#f3f4f6) */
bg-mist-200           /* Inactive elements, placeholder zones (#e5e7eb) */

/* Structural & Borders */
border-mist-100       /* Ultra-delicate card panel borders */
border-mist-200       /* Divider lines, input boundaries */
border-mist-300       /* Hover-state borders, subtle outlines */

/* CTAs & Interactive (The Accent is Dark) */
bg-graphite-900       /* Primary Capsule CTAs, active states (#18181b) */
bg-graphite-800       /* CTA Hover states (#27272a) */
border-graphite-900   /* Focused input boundaries, active rings */

/* Text Hierarchy */
text-graphite-900     /* Primary hero headings, avatar names, bold assertions */
text-graphite-800     /* Medium-weight project titles, secondary headers */
text-slate-500        /* Muted slate body copy, short descriptions (#64748b) */
text-slate-400        /* Metadata, timestamps, subtle UI hints */

/* Surface Effects */
shadow-contact        /* Soft, spread-out shadow mimicking ambient light occlusion */
shadow-inner-glow     /* Subtle 1px white top-inner border on Graphite buttons */
```

---

## Typography

Typography acts as the structural beams of the interface. We contrast the confident, geometric presence of Geist or Manrope in the headers with the legible, objective clarity of DM Sans or Inter in the supporting copy.

### Font Families

```css
font-display    /* Geist or Manrope — Hero headings, Project Titles */
font-sans       /* Inter or DM Sans — Body copy, button text, metadata */
```

### Font Weights

```css
font-normal      /* Standard slate body paragraphs */
font-medium      /* Project titles, capsule button text, metadata labels */
font-semibold    /* Hero text-4xl/5xl to ensure commanding presence */
/* font-bold is rarely used to maintain editorial lightness */
```

### Font Size Scale

```css
text-xs          /* Super subtle tags, year markers (12px) */
text-sm          /* Body copy, short project descriptions, CTA text (14px) */
text-base        /* Prominent body text, secondary titles (16px) */
text-lg          /* Standard project card titles (18px) */
text-xl          /* Section introductions (20px) */
text-4xl         /* Sub-hero headings (36px) */
text-5xl         /* Confident avatar-led Hero heading (48px) */
```

### Letter Spacing

```css
tracking-tight   /* Hero headings (Geist/Manrope require tight tracking at scale) */
tracking-normal  /* All DM Sans/Inter body copy for legibility */
```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Heading | Geist/Manrope | 5xl | semibold | graphite-900 | tight |
| Project Title | Geist/Manrope | lg | medium | graphite-800 | normal |
| Body / Desc | Inter/DM Sans | sm | normal | slate-500 | normal |
| Capsule CTA | Inter/DM Sans | sm | medium | pearl-white | normal |

---

## Animation System

### Core Philosophy: Framer-Level Fluidity

Motion should feel deeply rooted in physics. Elements don't just fade; they glide and settle with mass and momentum. 

### Page Mount (The Vertical Cascade)

Elements load sequentially down the central column with a soft spring configuration.

```tsx
initial={{ opacity: 0, y: 24 }}
animate={{ opacity: 1, y: 0 }}
transition={{ 
  type: "spring", 
  stiffness: 260, 
  damping: 24, 
  staggerChildren: 0.1 
}}
```

### Card Interaction (The Press & Lift)

Project cards mimic physical objects. Hovering pushes the shadow deeper and slightly lifts the card. Tapping gently depresses it.

```tsx
whileHover={{ y: -2, scale: 1.005 }}
whileTap={{ scale: 0.98 }}
transition={{ type: "spring", stiffness: 400, damping: 30 }}
```

---

## UI Components

### Column Container

The structural absolute of the aesthetic. All content must live within this constrained space.

```tsx
<div className="w-full max-w-2xl mx-auto px-6 py-24 flex flex-col gap-16">
  {/* Avatar Hero */}
  {/* Project Feed */}
</div>
```

### Avatar Hero Layout

```tsx
<header className="flex flex-col items-center text-center gap-6">
  <div className="w-24 h-24 rounded-full overflow-hidden shadow-contact ring-1 ring-mist-200">
    <img src="avatar.jpg" className="w-full h-full object-cover" />
  </div>
  <h1 className="font-display text-4xl md:text-5xl font-semibold text-graphite-900 tracking-tight leading-tight">
    Designer & Maker.
  </h1>
  <p className="font-sans text-slate-500 text-base max-w-md">
    Crafting digital interfaces and polished prototypes.
  </p>
</header>
```

---

## Component Catalog

### Project Cards (iOS-Like Panels)

Oversized corner radii, immense internal padding, delicate borders, and perfect image-to-text ratios. One card takes up the entire column width.

```tsx
// The Card Container
"bg-pearl-white border border-mist-100 rounded-[32px] p-2 hover:shadow-contact transition-all duration-300 ease-out flex flex-col group"

// The Image Asset Container (Inside Card)
"w-full aspect-[4/3] rounded-[24px] overflow-hidden bg-warm-ivory mb-4"

// The Image inside Asset Container
"w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]"

// The Content Block
"px-4 pb-4 pt-2 flex flex-col gap-1"

// Title & Description
<h3 className="font-display text-lg font-medium text-graphite-800">Project Title</h3>
<p className="font-sans text-sm text-slate-500 line-clamp-2">Concise supporting copy detailing the scope of the design work.</p>
```

### Capsule CTAs

Fully rounded, graphite buttons featuring a subtle inner white reflection on the top edge to create a premium, tactile button feel.

```tsx
// Primary Capsule Button
"relative inline-flex items-center justify-center px-6 py-3 text-sm font-medium text-white bg-graphite-900 rounded-full shadow-[inset_0_1px_1px_rgba(255,255,255,0.2),0_4px_12px_rgba(0,0,0,0.05)] hover:bg-graphite-800 hover:shadow-[inset_0_1px_1px_rgba(255,255,255,0.25),0_6px_16px_rgba(0,0,0,0.08)] transition-all duration-200"

// Secondary Capsule Button
"inline-flex items-center justify-center px-6 py-3 text-sm font-medium text-graphite-900 bg-pearl-white border border-mist-200 rounded-full hover:bg-mist-100 transition-all duration-200"
```

### Soft Contact Shadows

Standard drop shadows look digital and cheap. Contact shadows simulate an object resting incredibly close to the canvas.

```css
/* Tailwind Configuration for shadow-contact */
box-shadow: 0 2px 8px -2px rgba(24, 24, 27, 0.04), 0 8px 32px -4px rgba(24, 24, 27, 0.06);
```

---

## Quality Checklist

* [ ] Is the entire layout strictly constrained to a single narrow central column (e.g., `max-w-2xl`)?
* [ ] Is there exactly one project card per horizontal row?
* [ ] Are all CTAs perfectly pill-shaped (`rounded-full`)?
* [ ] Do the dark buttons include the microscopic `shadow-inset` top highlight?
* [ ] Did you rigorously exclude all generic accent colors (blue, purple, green)?
* [ ] Are you using Geist/Manrope specifically for large display text and Inter/DM Sans for small text?
* [ ] Do the project cards have massive border radii (e.g., `32px` outer, `24px` inner image)?
* [ ] Is the avatar perfectly circular, centered, and acting as the page's visual anchor?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Ultra-narrow layout width (`max-w-2xl` or `max-w-3xl` max).
* Generous, oversized spacing between vertical elements (`gap-16` or `gap-24`).
* Heavy contrast between Graphite text and Pearl/Ivory backgrounds.
* Large, expansive single-image project features.
* Continuous, squircle-like corner radii.

### ✗ Not Allowed

* Multi-column grid layouts for project cards.
* Colorful hover states or interactive accent colors.
* Sharp or slightly rounded (e.g., `rounded-md`) primary buttons—must be capsules.
* Harsh, dark drop shadows that extend far from the element.
* Left-aligned hero sections (hero must remain centered to reinforce the monolithic column).
Preview