Graphite Capsule

/graphiteCapsule
A minimal, premium, mobile-first design system for focused indie portfolios, featuring single-column layouts, capsule card motifs, disciplined monochromatic palettes, and tactile, conversion-oriented user experiences.
0 likes
0 bookmarks
Jun 18, 2026
Design System Content
# Graphite Capsule Project Index

A minimal, premium, conversion-ready design language for reusable indie portfolios.

---

## Philosophy

> "Constraint breeds elegance; linearity drives conversion."

This system creates highly focused, mobile-first portfolio interfaces that feel like a curated digital exhibition. It embraces the warmth of premium print materials and the fluid, tactile physics of top-tier prototyping tools. The aesthetic relies on ultra-refined constraints: strict single-column layouts, rounded capsule motifs, and a highly disciplined, monochromatic palette to ensure the work itself remains the absolute center of attention.

### Core Beliefs

1. **Omnipresent Mobile-First** — The interface operates strictly as a narrow, centered container on all screen sizes. No split grids, no sprawling desktop layouts. Focus remains completely linear.
2. **The Capsule Format** — Projects are encased in stacked, heavily rounded "capsule" cards. Everything belongs inside these unified, self-contained vessels.
3. **Monochromatic Premium** — Color is inherently distracting. Trust and conversion are built through warm white surfaces, mist-gray panels, and high-contrast graphite typography.
4. **Bold Centered Gravity** — Hero sections demand attention through stark, bold, center-aligned typography rather than imagery or colorful backgrounds.
5. **Framer-Level Tactility** — Spacing is mathematically flawless. Elements utilize soft borders, subtle, diffused shadows, and fluid spring animations to feel physically touchable.

### Strict Rules

* **No Multi-Column Grids** — Desktop views must not split into masonry or grid layouts. The single-column stack is sacred.
* **No Colorful Generic CTAs** — Buttons and calls-to-action must rely on high-contrast graphite and mist-gray. "Click Here" blue or "Success" green are strictly forbidden.
* **Rounded Dominance** — Sharp corners are eliminated. Screenshots, containers, and chips must feature pronounced border radii (capsule aesthetic).
* **Strict Font Pairing** — Bold, geometric sans-serifs for headings; compact, utilitarian sans-serifs for metadata. Never mix beyond this dual-system.

---

## Color Palette

### The Warm Monochrome Scale

The palette eschews sterile digital whites in favor of warm, tactile surfaces. The depth is created through mist-grays and soft slate, anchoring into a dense, non-pure graphite for high-legibility contrast.

```css
/* Surfaces (Backgrounds & Panels) */
bg-warm-white         /* Core background canvas (#FAFAFA or #FCFCFB) */
bg-mist-gray-50       /* Internal capsule panels, secondary backgrounds (#F3F4F6) */
bg-mist-gray-100      /* Hover states for interactive panels (#E5E7EB) */
bg-mist-gray-200      /* Structural pills, subtle active states (#D1D5DB) */

/* Boundaries (Borders & Shadows) */
border-mist-gray-100  /* Ultra-soft internal dividers */
border-mist-gray-200  /* Capsule card outer boundaries */
border-graphite-900/5 /* Ghost borders for pristine Framer-like definition */
shadow-capsule        /* Highly diffused, low-opacity drop shadow (0 8px 30px rgba(0,0,0,0.04)) */

/* Call to Action (High Contrast Monochrome) */
bg-graphite-900       /* Primary conversion buttons, inverted components (#18181B) */
bg-graphite-800       /* Primary button hover state (#27272A) */
text-warm-white       /* Text inside primary conversion elements */

/* Text Hierarchy */
text-graphite-900     /* Primary headings, bold hero text, core metrics */
text-graphite-700     /* Body copy, project descriptions */
text-slate-500        /* Soft supporting text, tags, launch dates (#64748B) */
text-slate-400        /* Disabled states, placeholder text, structural icons */
```

---

## Typography

Typography acts as the primary architectural element. Headings are massive, bold, and strictly center-aligned. Metadata is hyper-compact and purely functional.

### Font Families

```css
font-display    /* Manrope, Geist, Helvetica, or Roboto (Headings & Hero) */
font-sans       /* Inter or Roboto (Descriptions, Metadata, Tags, Metrics) */
```

### Font Weights

```css
font-normal     /* Standard project descriptions, subtle secondary notes */
font-medium     /* Metadata chips, category pills, buttons, testimonial names */
font-bold       /* Mandatory for Hero typography, project titles, primary metrics */
/* font-light is forbidden — this aesthetic relies on confident, heavy anchors */
```

### Font Size Scale & Alignment

```css
text-xs          /* Testimonial meta, launch dates, tight category pills (12px) */
text-sm          /* Concise project descriptions, button labels (14px) */
text-base        /* Standard readable text, secondary headers (16px) */
text-lg          /* Card titles, concise metrics labels (18px) */
text-2xl         /* Sub-section breaks, stacked card group titles (24px) */
text-4xl-6xl     /* Bold hero typography - MUST BE text-center */

text-center      /* Mandatory alignment for all Hero and section-title text */
text-left        /* Permitted only inside internal project capsule formatting */
```

### Hierarchy Examples

| Element | Font Family | Size | Weight | Color | Alignment |
| --- | --- | --- | --- | --- | --- |
| Hero Statement | Display | 5xl | bold | graphite-900 | center |
| Project Title | Display | lg | bold | graphite-900 | left |
| Description | Sans | sm | normal | graphite-700 | left |
| Metric Value | Sans | base | bold | graphite-900 | center |
| Category Pill | Sans | xs | medium | slate-500 | center |
| CTA Button | Sans | sm | medium | warm-white | center |

---

## Animation System

### Core Philosophy: Tactile Fluidity

Animations should mimic premium native app interactions. Elements don't just fade; they scale and slide with highly-tuned spring physics. 

### Card Expansion & Hover (Spring Physics)

```tsx
// Framer Motion spring configuration for tactile, premium hover states
whileHover={{ scale: 1.01, y: -2 }}
transition={{ type: "spring", stiffness: 400, damping: 30, mass: 0.8 }}
```

### Scroll Reveal (Upward Drift)

Items in the single-column stack reveal themselves individually with a subtle upward drift to reinforce the linear reading flow.

```tsx
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-40px" }}
transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
```

---

## UI Components

### Strict Container (Mobile-First Lock)

The foundation of the entire system. Desktop displays do not stretch the layout; they merely provide a wider canvas for the central column.

```tsx
<main className="w-full max-w-lg mx-auto px-4 py-24 flex flex-col gap-12">
  {/* Content strictly flows down this narrow, centered chute */}
</main>
```

### The Capsule Screenshot

Screenshots within project cards must never have sharp edges. They are inset and aggressively rounded.

```tsx
className="w-full aspect-[4/3] rounded-2xl bg-mist-gray-50 border border-mist-gray-100 overflow-hidden shadow-inner"
```

### Testimonial Chips

Small, highly rounded inset components that sit within the main project capsule to provide instant social proof without breaking the flow.

```tsx
className="flex items-start gap-3 p-4 rounded-2xl bg-warm-white border border-mist-gray-100 shadow-sm"
```

---

## Component Catalog

### Stacked Project Capsule

The hero component of the system. A completely self-contained presentation unit.

```tsx
// The Outer Capsule Container
"flex flex-col gap-5 p-5 bg-warm-white border border-mist-gray-200 rounded-[2rem] shadow-capsule transition-all"

// Internal layout features a rounded screenshot, followed by a metadata row, then description.
```

### Metadata & Category Pills

Soft, pill-shaped tags used for launch dates, categories, and technologies.

```tsx
// Standard Category Pill
"inline-flex items-center px-3 py-1 rounded-full bg-mist-gray-50 border border-mist-gray-200 text-slate-500 text-xs font-medium"

// Launch Date Badge
"inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-warm-white border border-mist-gray-100 text-graphite-900 text-xs font-bold shadow-sm"
```

### Buttons

Non-colorful, highly legible, conversion-focused interactive elements.

```tsx
// Primary Conversion CTA (Graphite)
"w-full flex justify-center items-center px-6 py-3.5 rounded-full bg-graphite-900 text-warm-white font-medium text-sm hover:bg-graphite-800 transition-colors shadow-md"

// Secondary Action / Link (Mist Gray)
"w-full flex justify-center items-center px-6 py-3.5 rounded-full bg-mist-gray-50 text-graphite-900 border border-mist-gray-200 font-medium text-sm hover:bg-mist-gray-100 transition-colors"
```

### Concise Metrics Array

A perfectly spaced, horizontal row of tight metric values, stripped of visual noise.

```tsx
<div className="grid grid-cols-3 gap-2 p-4 rounded-2xl bg-mist-gray-50 border border-mist-gray-100">
  <div className="flex flex-col items-center justify-center text-center">
    <span className="text-lg font-bold text-graphite-900">12k+</span>
    <span className="text-xs font-medium text-slate-500">Users</span>
  </div>
  {/* Additional metrics */}
</div>
```

---

## Quality Checklist

* [ ] Is the entire layout restricted to a narrow, centered container (`max-w-lg` or `max-w-xl`) even on large desktop monitors?
* [ ] Is the Hero typography heavily weighted (`font-bold`) and strictly center-aligned?
* [ ] Have all colorful generic buttons (blue, green, red) been replaced with graphite or mist-gray equivalents?
* [ ] Do all project cards feature aggressive border radiuses (`rounded-[2rem]` or similar) to maintain the capsule aesthetic?
* [ ] Are the internal screenshots properly padded and rounded so they don't bleed into the edges of the parent capsule?
* [ ] Is the typography strictly partitioned (e.g., Manrope/Geist for bold headings, Inter/Roboto for compact metadata)?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Warm white backgrounds paired with high-contrast graphite typography.
* Pronounced, aggressive border radiuses on cards, buttons, and images.
* Strict single-column scrolling structures.
* Ultra-diffused, barely visible drop shadows (`shadow-capsule`).
* Subtle spring-based micro-interactions for hover states.

### ✗ Not Allowed

* Multi-column grid layouts or masonry masonry grids on desktop.
* Bright accent colors for primary CTAs (e.g., blue buttons).
* Sharp corners (`rounded-none` or `rounded-sm`) on major structural elements.
* Left-aligned text in the primary hero introduction.
* Light or thin font weights for primary display headings.