Mist Gradient Project Spine

/mistGradientProjectSpine
A modern, atmospheric design system for mobile-inspired portfolios, featuring a single-column spine, soft misty gradients, ultra-tactile project cards, bold center typography, and a singular screenshot-driven narrative.
0 likes
0 bookmarks
Jun 18, 2026
Design System Content
# Mist Gradient Project Spine Design System

A design language for atmospheric, mobile-inspired portfolio interfaces.

---

## Philosophy

> "Warmth in the mist; clarity in the frame."

This system creates a distinctly modern, minimalist indie portfolio experience. It rejects the hyper-dense, multi-column layouts of corporate dashboards in favor of a singular, mobile-app-scaled spine. The aesthetic relies on soft, atmospheric warmth anchoring a sequence of massive, highly-tactile project cards. It feels personal, curated, and intentionally constrained.

### Core Beliefs

1. **The Canvas Breathes** — A pearl or porcelain base enveloped by faint misty washes provides a warm, organic backdrop that never overpowers the work.
2. **Singular Focus** — The layout behaves like a beautifully crafted mobile app scaled gracefully to desktop. Everything aligns to a central spine; one thought, or one project, per row.
3. **Screenshot as Interface** — Project cards are virtually devoid of metadata. The visual artifact (screenshot/cover) commands the hierarchy, acting as the primary narrative device.
4. **Organic Geometry** — Harsh edges are strictly forbidden. Extreme corner radii (28–36px) and soft inner highlights create containers that feel touchable and lush.
5. **High-Contrast Anchors** — While the backgrounds are soft and misty, typography and primary actions utilize a dense, grounded graphite to create perfect visual anchors.

### Strict Rules

* **Single Column Only** — Project cards must stack vertically (one per row), regardless of the viewport width. 
* **Zero Extraneous Metadata** — Cards must not be cluttered with tags, dates, or long descriptions. Let the image speak.
* **Massive Corner Radii** — All primary containers must use 28px to 36px border radii.
* **Bold Centerpiece Typography** — Headings are heavily weighted and strictly center-aligned.
* **Inner Highlights over Drop Shadows** — Depth is created via bright, soft inner top-strokes rather than heavy exterior drop shadows.

---

## Color Palette

### The Canvas & The Mist

The background transitions from a tactile warm porcelain into faint, atmospheric gradient washes. These pastel overlays must remain incredibly subtle—just enough to inject warmth without muddying the canvas.

```css
/* Core Canvas */
bg-porcelain          /* Main warm-white canvas base (#FDFCFB) */
bg-pearl              /* Secondary soft layer for cards (#F9F8F6) */

/* The Mist (Atmospheric Washes) */
bg-mist-sky           /* Faint airy blue wash (#F0F4F8 / 30% opacity) */
bg-mist-lilac         /* Subtle violet warmth (#F4F0F8 / 30% opacity) */
bg-mist-mint          /* Pale organic green (#F0F8F4 / 30% opacity) */
bg-mist-lemon         /* Extremely soft dawn yellow (#F8F7F0 / 30% opacity) */

/* The Anchors (Text & Actions) */
bg-graphite           /* Primary CTAs, dense contrast blocks (#222222) */
text-graphite         /* Primary headings, heavy typography (#222222) */
text-graphite/80      /* Standard compact body copy */
text-graphite/50      /* Micro-elements, the rare piece of metadata */

/* Structural Borders & Highlights */
border-black/5        /* Ultra-faint exterior defining lines */
ring-white/80         /* Inner highlights for tactile card edges */
bg-white/40           /* Glassy button backgrounds, subtle hovering */

```

### Interactive States

```css
hover:bg-graphite/90      /* Dark CTA hover state */
hover:bg-white/60         /* Secondary / Card hover lift */
hover:shadow-xl           /* Deep ambient shadow on project interaction */
```

---

## Typography

Typography plays a dual role: expressive, bold, center-aligned headings paired with ultra-compact, highly legible body copy.

### Font Families

*   **Primary Display:** Geist, Plus Jakarta Sans, or General Sans.
*   **Secondary/Body:** Inter or Roboto.

### Font Weights

```css
font-regular     /* Compact body copy, subtle details */
font-medium      /* Buttons, CTAs, interactive navigational labels */
font-bold        /* Hero titles, primary project headings — MANDATORY for display */
/* font-light is forbidden — we rely on bold, confident strokes */

```

### Font Size Scale

```css
text-xs          /* Extremely rare metadata (12px) */
text-sm          /* Body copy, compact descriptions (14px) */
text-base        /* Standard CTA buttons, intro paragraphs (16px) */
text-xl          /* Sub-headings, distinct callouts (20px) */
text-2xl         /* Standard project card titles (24px) */
text-4xl         /* Secondary page headers (36px) */
text-5xl-7xl     /* Centered Hero typography, massive impact */

```

### Letter Spacing & Transforms

```css
tracking-tighter /* For Geist/General Sans massive hero text */
tracking-normal  /* All body copy and standard UI */
tracking-wide    /* Navigational elements */

/* Uppercase is generally avoided to maintain an organic, indie aesthetic */

```

### Hierarchy Examples

| Element | Font Family | Size | Weight | Color | Alignment |
| --- | --- | --- | --- | --- | --- |
| Hero Name | Geist | 6xl | bold | graphite | center |
| Hero Subtitle | Inter | base | regular | graphite/80 | center |
| CTA Button | Inter | base | medium | white | center |
| Project Title | Plus Jakarta | 2xl | bold | graphite | left/center |
| Body Copy | Roboto | sm | regular | graphite/80 | left/center |

---

## Animation System

### Core Philosophy: The App Feel

Motion should mimic a high-end iOS application. Smooth spring physics, fluid scaling, and soft atmospheric reveals.

### Page Load (The Mist Reveal)

Elements fade in slowly while gently scaling up from a slightly smaller state, bringing the mist gradients to life.

```tsx
initial={{ opacity: 0, scale: 0.97, filter: 'blur(4px)' }}
animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}

```

### Card Interaction (The Fluid Push)

Hovering a massive project card feels physical, slightly depressing into the canvas before springing back, while the inner highlight catches the light.

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

```

---

## UI Components

### The Centered Hero

The absolute top of the spine. Everything revolves around a central vertical axis. 

```tsx
<div className="flex flex-col items-center text-center max-w-2xl mx-auto pt-24 pb-16">
  <img src="/avatar.jpg" className="w-20 h-20 rounded-full shadow-sm mb-6" />
  <h1 className="text-5xl font-bold text-graphite tracking-tighter mb-4 font-display">
    Designer & Developer
  </h1>
  <p className="text-base text-graphite/80 font-body max-w-md mb-8">
    Building digital products with atmospheric warmth and mobile precision.
  </p>
  <div className="flex items-center gap-4">
    {/* CTAs injected here */}
  </div>
</div>

```

### The Mist Background Layer

A fixed background component that provides the faint sky/lilac/mint wash without interfering with scrollable content.

```tsx
<div className="fixed inset-0 pointer-events-none -z-10 bg-porcelain">
  <div className="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-mist-lilac rounded-full blur-[120px] opacity-60" />
  <div className="absolute bottom-[-10%] right-[-10%] w-[60%] h-[60%] bg-mist-sky rounded-full blur-[140px] opacity-50" />
</div>

```

### The Inner Highlight Frame

A reusable utility class to apply the mandatory soft top-edge shine to all primary containers, mimicking light hitting a curved glass edge.

```tsx
className="shadow-[inset_0_1px_1px_rgba(255,255,255,0.8),_0_8px_24px_rgba(0,0,0,0.04)]"

```

---

## Component Catalog

### Project Cards

Massive, single-column blocks. High border radius, heavily weighted towards the image/screenshot.

```tsx
// The Project Card Envelope
"w-full max-w-3xl mx-auto bg-pearl rounded-[32px] p-4 sm:p-6 border border-black/[0.03] shadow-[inset_0_1px_1px_rgba(255,255,255,0.8),_0_12px_32px_rgba(0,0,0,0.03)] transition-transform overflow-hidden relative"

// The Screenshot Container (Inside the Card)
"w-full aspect-[4/3] sm:aspect-video rounded-[24px] bg-neutral-100 overflow-hidden mb-4"

// Minimal Metadata (Inside the Card)
<div className="px-2 pb-2">
  <h3 className="text-2xl font-bold text-graphite font-display">Project Name</h3>
  {/* No tags, no dates, no categories. */}
</div>

```

### Buttons (The Dual Graphite CTAs)

Pill-shaped, perfectly rounded buttons. Usually paired in twos at the hero section.

```tsx
// Primary Graphite CTA
"flex items-center justify-center px-6 py-3 rounded-full bg-graphite text-white font-body font-medium text-base hover:bg-neutral-800 transition-colors"

// Secondary Frosted CTA
"flex items-center justify-center px-6 py-3 rounded-full bg-white/40 text-graphite font-body font-medium text-base border border-white/60 shadow-sm backdrop-blur-md hover:bg-white/60 transition-colors"

```

### The Spine Wrapper

The entire application content runs down this single, constrained channel.

```tsx
"flex flex-col gap-10 w-full max-w-3xl mx-auto px-4 pb-24"

```

---

## Quality Checklist

* [ ] Is the hero section perfectly center-aligned with an avatar and exactly two rounded CTAs?
* [ ] Are the heading fonts (Geist/Plus Jakarta/General Sans) set to `font-bold`?
* [ ] Do the project cards stack strictly one per row, mimicking a scaled-up mobile feed?
* [ ] Do all project cards and large containers use generous 28px–36px border radii?
* [ ] Are the mist gradients (sky, lilac, mint, or lemon) kept to an extremely low, atmospheric opacity?
* [ ] Did you strip out unnecessary tags, dates, and badges from the project cards to maintain a screenshot-first hierarchy?
* [ ] Do cards employ soft inner highlights (`ring-white` or inset shadows) rather than harsh gray borders?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Faint pastel gradient meshes behind a porcelain or pearl canvas.
* Massive, sweeping border radii (`rounded-[32px]`).
* Thick, bold typography for headers, strictly center-aligned or centered-within-cards.
* Generous interior padding inside cards before the screenshot begins.
* Singular, vertical-feed layout structures.

### ✗ Not Allowed

* Multi-column grids for project cards (no bento boxes, no masonry).
* Sharp corners or sub-20px radii on primary structural elements.
* Heavy, dark drop shadows spreading far beyond the card bounds.
* Dense metadata arrays (tags, author names, read times, tech stacks) on the top-level cards.
* Harsh, solid-color backgrounds that break the misty, atmospheric illusion.