Porcelain Gradient Project Spine

/porcelainGradientProjectSpine
A soothing, single-column design system for personal portfolios, blending premium mobile focus, soft geometry, pastel gradients, and tactile polish for an elegant indie-maker desktop experience.
0 likes
0 bookmarks
Jun 18, 2026
Design System Content
# Porcelain Gradient Project Spine

A design language for soft, world-class personal portfolios and indie-maker interfaces.

---

## Philosophy

> "Focus is a solitary column; atmosphere is everything that surrounds it."

This system scales the intimacy and focused layout of a premium mobile experience into an elegant desktop presence. The aesthetic blends classic indie-maker minimalism with deeply refined, tactile elements. It relies on extremely soft geometry, contained atmospheric gradients, and absolute central alignment to create a calming, gallery-like space for personal work.

### Core Beliefs

1. **The Centered Spine** — Content flows down a single, unyielding central column. The composition centers around the creator (avatar) and cascades directly downward, refusing complex multi-column grids.
2. **Soft Geometry** — Sharp edges are completely eradicated. Every interactive boundary and container uses extreme, organic radii (28–36px) to emulate physical, polished objects.
3. **Atmosphere as Polish, Not Content** — Color exists as a subtle, soft-focus gradient backplate that lives strictly *behind* the main content spine, providing warmth and mood without competing with the work.
4. **Graphite Over Black** — Pure black text feels too digital and harsh. Deep, warm graphite provides the necessary contrast while maintaining the interface's overarching softness.
5. **Inner Light** — Cards and containers don't just sit on a background; they catch the light. Soft inner highlights and whisper-thin borders define depth over heavy drop shadows.

### Strict Rules

* **Single-Column Dominance** — The primary layout must never break into complex sidebars or masonry grids. Projects stack linearly.
* **Capsule CTAs Only** — Buttons must be fully rounded (pill-shaped). No slightly-rounded or square buttons.
* **No Screaming Colors** — Primary interface elements remain monochromatic (porcelains, pearls, mist grays). Colors (lavender, sky, ivory) are reserved exclusively for the atmospheric background gradient.
* **Typography Pairing is Law** — Hero elements must use the designated confident semibold sans-serifs; supporting elements must drop back to the calm supporting sans-serif.

---

## Color Palette

### The Porcelain Scale & Graphite

The primary palette is incredibly soft, ranging from a warm gallery white to a deep, organic graphite for text. 

```css
/* Backgrounds (Lightest to Darkest) */
bg-porcelain          /* Main card and content backgrounds (#fdfcfc) */
bg-pearl              /* Secondary soft containers, hover states (#f6f5f4) */
bg-mist-gray          /* Image placeholders, tertiary subtle backdrops (#ecebec) */

/* Borders & Highlights */
border-mist-gray/50   /* Ultra-fine card boundaries */
border-pearl          /* Input outlines, capsule borders */
ring-white/80         /* Inner highlights for soft 3D lighting (inset) */

/* Interactive */
bg-near-black         /* Primary CTA capsule fills (#18181b) */
bg-near-black/90      /* Primary CTA hover states (#27272a) */
bg-porcelain/50       /* Glassy hover states for secondary buttons */

/* Text Hierarchy */
text-graphite-900     /* Headings, primary titles (#2c2c2e) */
text-graphite-600     /* Body copy, project descriptions (#5c5c60) */
text-graphite-400     /* Metadata, inactive links, subtle timestamps (#8e8e93) */
text-white            /* Text inside primary near-black CTAs */
```

### The Atmospheric Gradient (Background Only)

These colors are blended as large, blurred background nodes behind the main project spine.

```css
from-warm-ivory       /* Soft top-left ambient light (#fffcf2) */
via-pale-lavender     /* Center-right atmospheric wash (#f4f0ff) */
to-sky-wash           /* Bottom-left grounding tint (#f0f8ff) */
```

---

## Typography

Typography acts as the structural anchor. It relies on a sharp contrast between a confident, slightly geometric heading font and a highly legible, calm body font.

### Font Families

```css
/* Headings (Choose One for the Project) */
font-satoshi     /* Default: Modern, geometric, confident */
font-geist       /* Alternative: Crisp, highly engineered */
font-manrope     /* Alternative: Rounder, slightly more approachable */

/* Supporting Text (Choose One for the Project) */
font-dm-sans     /* Default: Warm, organic, highly readable */
font-inter       /* Alternative: Neutral, invisible, structured */
```

### Font Weights

```css
font-normal      /* Supporting text, short project descriptions */
font-medium      /* Capsule CTA text, secondary navigation, tags */
font-semibold    /* Hero headings, card titles — THE definitive weight for prominence */
```

### Font Size Scale

```css
text-xs          /* Metadata, tags, tiny supporting labels (12px) */
text-sm          /* Project descriptions, secondary button text (14px) */
text-base        /* Standard body copy, primary button text (16px) */
text-xl          /* Card titles, secondary section headers (20px) */
text-2xl         /* Sub-hero text, name/identity marks (24px) */
text-4xl-5xl     /* Hero copy (Compact, confident sizing) */
```

### Hierarchy Examples

| Element | Font Family | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Heading | Satoshi | 5xl | semibold | graphite-900 | tight |
| Card Title | Satoshi | xl | semibold | graphite-900 | normal |
| Body/Desc | DM Sans | sm | normal | graphite-600 | normal |
| Primary CTA | Satoshi | base | medium | white | normal |
| Tag/Meta | DM Sans | xs | medium | graphite-400 | wide |

---

## Animation System

### Core Philosophy: Fluid and Tactile

Interactions should feel like pressing a smooth, polished stone. Elements don't flash; they smoothly scale and gently shift in lighting.

### Page Load (The Soft Drop)

The spine slides up gently while the background gradient fades in behind it.

```tsx
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
```

### Button & Card Tactility (Spring Scale)

Hover and tap states rely on slight scaling rather than heavy shadow shifts.

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

---

## UI Components

### The Atmospheric Backplate

This fixed background layer provides the signature polish. It sits behind everything, using enormous blur values to blend the ivory, lavender, and sky tones.

```tsx
<div className="fixed inset-0 -z-10 bg-porcelain">
  <div className="absolute top-[-10%] left-[-10%] w-[50vw] h-[50vw] rounded-full bg-warm-ivory blur-[120px] opacity-60" />
  <div className="absolute top-[20%] right-[-10%] w-[40vw] h-[40vw] rounded-full bg-pale-lavender blur-[140px] opacity-50" />
  <div className="absolute bottom-[-10%] left-[10%] w-[60vw] h-[60vw] rounded-full bg-sky-wash blur-[130px] opacity-40" />
</div>
```

### Hero Avatar

The absolute center of the composition at the top of the spine.

```tsx
<div className="w-24 h-24 rounded-full p-1 bg-white border border-mist-gray/50 shadow-sm mx-auto mb-6">
  <img src="avatar.jpg" className="w-full h-full rounded-full object-cover" />
</div>
```

### Inner Highlight Surface

Used on all cards to give them a premium, physical appearance.

```tsx
className="bg-porcelain/80 backdrop-blur-md rounded-[32px] border border-mist-gray/40 shadow-[inset_0_1px_1px_rgba(255,255,255,0.9),0_2px_8px_rgba(0,0,0,0.02)]"
```

---

## Component Catalog

### Spine Cards (Projects)

Huge radii. Contains strictly a large rounded image at the top, followed by a title and a brief description.

```tsx
// Project Card Container
"flex flex-col p-2 bg-white rounded-[32px] border border-mist-gray shadow-[inset_0_1px_1px_rgba(255,255,255,1),0_4px_12px_rgba(0,0,0,0.03)] transition-transform hover:scale-[0.99]"

// Project Card Inner Image
"w-full aspect-video rounded-[24px] object-cover bg-mist-gray"

// Project Card Text Block
"px-6 py-5"
```

### Capsule CTAs

Always placed side-by-side (max two) directly under the compact hero copy. Fully rounded.

```tsx
// Primary CTA (Near-Black)
"flex items-center justify-center px-6 py-3 rounded-full bg-near-black text-white font-satoshi font-medium text-base hover:bg-near-black/90 transition-colors"

// Secondary CTA (Ghost/Glass)
"flex items-center justify-center px-6 py-3 rounded-full bg-white/50 backdrop-blur-sm text-graphite-900 font-satoshi font-medium text-base border border-mist-gray/50 hover:bg-white transition-colors shadow-[inset_0_1px_1px_rgba(255,255,255,0.8)]"
```

### Metadata Pills

Tiny, subtle capsules for tags or dates.

```tsx
"inline-flex items-center px-3 py-1 rounded-full bg-pearl border border-mist-gray/30 text-graphite-400 text-xs font-medium"
```

---

## Quality Checklist

* [ ] Is the entire layout constrained to a single, centrally aligned vertical spine?
* [ ] Do all project cards and main containers use a border radius between 28px and 36px?
* [ ] Are all buttons strictly pill-shaped (`rounded-full`)?
* [ ] Did you use `text-graphite-900` instead of `#000000` for primary headings?
* [ ] Is the gradient atmosphere confined *only* to the background behind the main content?
* [ ] Are inner white borders/highlights (`inset shadow`) present on cards to give them physical volume?
* [ ] Are hero headings strictly `font-semibold` in Satoshi, Geist, or Manrope?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Ultra-rounded corners on all containers (28px–36px).
* Completely centered hero compositions (Avatar → Copy → Capsule CTAs).
* Whisper-thin translucent borders (`border-mist-gray/40`).
* Soft pastel gradient blobs in the background.
* Dark, muted graphite text.

### ✗ Not Allowed

* Square or slightly rounded buttons (e.g., 4px or 8px radii are strictly forbidden).
* Multi-column grid layouts for projects (keep it to a single vertical spine).
* Pure black backgrounds or pure black text.
* Heavy, dark drop shadows outside of cards.
* Bright, saturated primary colors in the foreground UI components.