Soft Graphite Maker Showcase

/softGraphiteMakerShowcase
A single-column portfolio system blending iOS-inspired softness, graphite contrast, and warm minimalism to craft focused, editorial storytelling with rich metadata and tactile, continuous curve UI elements.
0 likes
0 bookmarks
Jun 18, 2026
Design System Content
# Soft Graphite Maker Showcase

A refined, one-column portfolio language built on calm contrast, iOS-style softness, and warm architectural minimalism.

---

## Philosophy

> "Clarity through softness; narrative through restraint."

This system creates a hyper-focused, intimate reading experience akin to a beautifully curated editorial gallery. It rejects the chaos of multi-column layouts and loud accent colors in favor of a centered, single-column storytelling format. The aesthetic relies on the warmth of the canvas, the tactile softness of iOS-inspired components, and the structural integrity of graphite typography. 

### Core Beliefs

1. **One Project Per Row** — Narrative focus is paramount. By enforcing a single-column layout even on massive desktop displays, we force the user to engage with one piece of work at a time.
2. **Graphite Over Pitch Black** — Pure black creates harsh, sterile interfaces. Calm, deep graphite combined with warm off-whites produces a luxurious, approachable environment.
3. **iOS-Style Softness** — Everything feels touchable. Deep border-radii, continuous curves (squircles), and smooth, highly-diffused shadows define spatial relationships.
4. **The Power of the Monolith** — Without generic accent colors (no blue/purple/green CTA buttons), hierarchy is established purely through scale, contrast, and layout proximity. 
5. **Rich Metadata** — Context is everything. Tiny status pills, proof chips, and launch notes breathe life into the aesthetic, transforming simple images into documented case studies.

### Strict Rules

* **No Generic Accents** — Interactive elements use shifts in graphite and gray values. No blue links, no green success states.
* **No Multi-Column Grids** — The main layout remains strictly narrow and centered, even on ultrawide monitors.
* **No Sharp Corners** — Every container, button, and image frame must utilize generous, smooth border radii.
* **No Pure Black or Pure White** — Canvases are always a warm off-white; deepest text is a soft graphite.

---

## Color Palette

### The Warm Grayscale Scale

The palette eliminates traditional hues, relying on a sophisticated spectrum of warm stones and cool graphites. Contrast is achieved through value, not color.

```css
/* Backgrounds (Warm & Soft) */
bg-stone-50           /* Warm off-white canvas (#FAFAF9) */
bg-stone-100/80       /* Pale mist-gray cards, bento modules (#F5F5F4) */
bg-stone-200/50       /* Secondary containers, nested screenshot frames */
bg-stone-200          /* Hover states for secondary actions, subtle chips */
bg-stone-800          /* Primary CTA backgrounds, inverted badges (#292524) */
bg-white/70           /* Slim frosted nav background (requires backdrop-blur) */

/* Borders & Dividers */
border-stone-200/50   /* Delicate dividers, nested frame borders */
border-stone-200      /* Default card boundaries, button rings */
border-stone-300      /* Hover boundaries, focused elements */
border-white/20       /* Inner highlights for glass/frosted elements */

/* Text Hierarchy (Graphite & Slate) */
text-stone-800        /* Graphite headings, hero typography, primary CTAs */
text-stone-500        /* Soft slate body text, secondary descriptions */
text-stone-400        /* Launch notes, subtle captions, timestamps */
text-stone-50         /* Inverted text for primary graphite buttons */

```

### Destructive Actions (Deletions/Errors)

```css
/* Subtle warmth shift for destructive actions rather than harsh red */
hover:bg-rose-50/50
hover:text-rose-900
hover:border-rose-200

```

---

## Typography

Hero typography embraces confidence through weight, using geometric-yet-friendly sans-serifs (Plus Jakarta Sans or Manrope). This is anchored by ultra-readable, neutral neo-grotesques (Inter or DM Sans) for complex metadata.

### Font Families

```css
font-display   /* Plus Jakarta Sans or Manrope — Headings, hero intros, numbers */
font-sans      /* Inter or DM Sans — Body, metadata, launch notes, captions */

```

### Font Weights

```css
font-normal      /* Soft slate body text, general captions */
font-medium      /* Inter: Metadata, buttons, launch notes, proof chips */
font-semibold    /* Plus Jakarta: Subheadings, bento module titles */
font-bold        /* Plus Jakarta: Hero typography, massive project titles */

```

### Font Size Scale

```css
text-[10px]      /* Tiny status pills, micro-timestamps */
text-xs          /* Launch notes, proof chip text, secondary metadata (12px) */
text-sm          /* Body text inside bento cards, standard UI actions (14px) */
text-base        /* Primary soft slate body text, avatar intro copy (16px) */
text-xl          /* Standard project headings, section titles (20px) */
text-2xl         /* Prominent bento callouts */
text-4xl-5xl     /* Avatar-led hero intro headings, primary narrative text */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* Confident bold headings, large project titles */
tracking-normal  /* Readable body text, descriptive paragraphs */
tracking-wide    /* Tiny status pills, metadata categories */

capitalize       /* Proof chips, UI actions */
uppercase        /* Tiny status pills only */

```

### Hierarchy Examples

| Element | Font | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Intro | Jakarta | 5xl | bold | stone-800 | tight |
| Project Title | Jakarta | xl | semibold | stone-800 | tight |
| Slate Body | Inter | base | normal | stone-500 | normal |
| CTA Button | Inter | sm | medium | stone-50 | normal |
| Status Pill | Inter | [10px] | medium | stone-500 | wide |

---

## Animation System

### Core Philosophy: The iOS Spring

Movements feel deeply physical, relying on fluid, high-damping spring physics rather than linear or standard ease-in-out curves. Elements gently settle into place.

### Page Transitions (Soft Fades & Slides)

```tsx
initial={{ opacity: 0, y: 12, scale: 0.98 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
transition={{ type: "spring", damping: 25, stiffness: 120 }}

```

### Micro-Interactions (Tactile Press)

Hover states on bento modules and buttons mimic physical depth, scaling down slightly when pressed.

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

```

---

## UI Components

### Slim Frosted Nav

A pill-shaped, floating navigation bar that sits at the top of the canvas, blurring the warm off-white background as it scrolls.

```tsx
<nav className="fixed top-6 left-1/2 -translate-x-1/2 px-6 py-3 rounded-full bg-white/70 backdrop-blur-md border border-stone-200/50 shadow-sm z-50">
  {/* Nav Links */}
</nav>

```

### Avatar-Led Intro

A perfectly circular, high-resolution avatar paired directly with a confident, bold hero statement.

```tsx
<div className="flex flex-col items-center text-center max-w-2xl mx-auto space-y-6">
  <img src="avatar.jpg" className="w-20 h-20 rounded-full shadow-md ring-1 ring-stone-200" />
  <h1 className="font-display font-bold text-4xl tracking-tight text-stone-800">
    Crafting quiet interfaces.
  </h1>
</div>

```

### Delicate Dividers

Used to separate the hero section from the scrolling project narrative, fading out at the edges.

```tsx
<div className="h-[1px] w-full max-w-md mx-auto bg-gradient-to-r from-transparent via-stone-200 to-transparent my-16" />

```

---

## Component Catalog

### Stacked Bento Modules (Pale Mist-Gray)

Cards utilize continuous curves and a soft inner structure to hold app icons and screenshot frames.

```tsx
// Primary Project Bento Card
"bg-stone-100/80 rounded-3xl p-8 border border-stone-200/50 shadow-[0_2px_10px_-4px_rgba(0,0,0,0.05)] hover:shadow-md transition-shadow duration-300"

// Nested Screenshot Frame (Inside Bento)
"bg-stone-200/50 rounded-2xl p-2 border border-stone-200 inset-shadow-sm flex items-center justify-center overflow-hidden"

```

### Rounded CTA Pair

Always presented together at the end of the narrative or in the hero. One primary, one secondary.

```tsx
// Primary CTA (Graphite)
"bg-stone-800 text-stone-50 font-sans font-medium text-sm rounded-full px-6 py-3 hover:bg-stone-900 active:scale-95 transition-all shadow-sm"

// Secondary CTA (Mist-Gray)
"bg-stone-100 text-stone-800 font-sans font-medium text-sm rounded-full px-6 py-3 hover:bg-stone-200 border border-stone-200 active:scale-95 transition-all"

```

### App Icons & Small Imagery

```tsx
// Squircle App Icon
"w-14 h-14 rounded-[18px] shadow-sm border border-stone-200/50 bg-white"

```

### Metadata Elements (Pills, Chips, Notes)

```tsx
// Tiny Status Pill
"inline-flex items-center px-2 py-1 rounded-full bg-white border border-stone-200 text-[10px] font-medium uppercase tracking-wide text-stone-500 shadow-sm"

// Proof Chip (Used for collaborators or roles)
"inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-stone-100 border border-stone-200/80 text-xs font-medium text-stone-600"

// Launch Note / Caption
"text-xs font-sans text-stone-400 flex items-center gap-1.5 before:content-[''] before:block before:w-1 before:h-1 before:rounded-full before:bg-stone-300"

```

---

## Quality Checklist

* [ ] Is the entire layout restricted to a single, narrow, centered column even on ultrawide desktop screens?
* [ ] Is the hero typography exclusively utilizing Plus Jakarta Sans or Manrope in a semibold or bold weight?
* [ ] Are there absolutely no bright or generic accent colors (e.g., no blue links or primary buttons)?
* [ ] Do all project container cards use `bg-stone-100/80` (pale mist-gray) with deep, continuous border radii?
* [ ] Have you paired rich metadata (launch notes, tiny status pills, proof chips) with every project module?
* [ ] Is the primary canvas background a warm off-white (`bg-stone-50`) rather than pure `#FFFFFF`?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-contrast graphite (`text-stone-800`) for emphasis.
* Squircle shapes and continuous curve border-radii for app icons and bento modules.
* Generous vertical spacing between single-column elements.
* Subtle, highly-diffused drop shadows simulating soft light.
* Rich layers of metadata using Inter or DM Sans.

### ✗ Not Allowed

* Multi-column masonry grids or side-by-side project modules on desktop.
* Any pure black (`#000000`) backgrounds or text.
* Any CTA or interactive element utilizing standard "action" colors (blue, green, purple).
* Sharp corners or square images.
* Light or thin font weights for primary headings.