Soft Graphite Project Bento Flow

/softGraphiteProjectBentoFlow
A modular, mobile-first design system combining consumer-grade polish with startup clarity. Features soft curves, deep graphite tones, restrained blue-gray accents, and fully rounded components for approachable, focused, and accessible interfaces.
0 likes
0 bookmarks
Jun 18, 2026
Design System Content
# Soft Graphite Project Bento Flow

A clean, reusable design language combining startup portfolio clarity with friendly consumer polish.

---

## Philosophy

> "Structure creates clarity; softness invites interaction."

This system creates interfaces that feel like a highly polished consumer app or a premium startup portfolio—approachable, perfectly legible, and structurally confined. The design relies on satisfying curves, subtle depths, and a highly constrained color palette to achieve a friendly yet utterly professional aesthetic. 

### Core Beliefs

1. **Mobile-First Modularity** — The interface is built on stacked bento cards within centered containers. Wide, sprawling split layouts are rejected in favor of focused, vertical rhythms across all breakpoints.
2. **Soft Dimensionality** — Depth is achieved through subtle iOS-style shadows, frosted microchips, and soft borders, moving away from harsh, flat brutalism while avoiding heavy skeuomorphism.
3. **Graphite Weight** — Pure black is replaced by deep graphite to reduce eye strain, creating a softer contrast against chalk white and pearl canvases.
4. **Restrained Accents** — Color is a functional tool, not a decorative one. A restrained blue-gray is used exclusively to indicate active states, keeping the baseline aesthetic calm and monochromatic.
5. **Consumer Polish** — Elements like avatar proof rows, large corner radii, and fully rounded call-to-action buttons bridge the gap between enterprise utility and consumer joy.

### Strict Rules

* **No Wide Split Layouts** — Content must live in centered containers and bento stacks, even on ultra-wide desktop breakpoints.
* **No Sharp Corners on Structural Elements** — All feature modules, cards, and primary buttons must utilize large, friendly corner radii.
* **Micro-Accents Only** — The blue-gray accent is strictly reserved for active states, toggles, and selection indicators. It is never used for large background fills.
* **Dual Typography Exclusivity** — Manrope or Geist for headings; Roboto or Inter for body text. No deviations.
* **No Harsh Drop Shadows** — Shadows must mimic soft, diffuse iOS ambient lighting.

---

## Color Palette

### Base, Graphite & Blue-Gray Scale

The palette is rooted in Chalk White and Pearl, climbing through soft grays into a rich, deep Graphite for text. The sole interactive accent is a muted, sophisticated Blue-Gray.

```css
/* Backgrounds (Chalk, Pearl, Soft Gray) */
bg-white              /* Chalk White: Main canvas background (#ffffff) */
bg-slate-50           /* Pearl: Secondary bento cards, input fields (#f8fafc) */
bg-slate-100          /* Soft Gray: Inactive states, subtle borders (#f1f5f9) */
bg-slate-200/50       /* Hover states for interactive bento modules */
bg-slate-800          /* Graphite: Primary CTA backgrounds (#1e293b) */

/* Soft Borders */
border-slate-100      /* Ultra-soft internal dividers */
border-slate-200      /* Default bento card borders, avatar rings */
border-slate-300      /* Hovered borders, disabled inputs */

/* The Micro-Accent: Restrained Blue-Gray */
text-slate-500        /* Active icons, subtle interactive hooks (#64748b) */
bg-slate-500          /* Active toggle dots, active slider tracks */
ring-slate-500/20     /* Soft focus rings for accessibility */
bg-slate-500/10       /* Active state muted backdrops (frosted tabs) */

/* Text Hierarchy (Graphite Scale) */
text-slate-900        /* Deep Graphite: Hero headings, massive data metrics */
text-slate-800        /* Graphite: Standard body text, feature titles */
text-slate-600        /* Soft Graphite: Supporting copy, launch notes */
text-slate-500        /* Blue-Gray: Small UI labels, inactive tab text */
text-slate-400        /* Placeholder text, subtle timestamps */

```

### Destructive Actions

```css
hover:bg-rose-50/50
text-rose-600
border-rose-200

```

---

## Typography

A strict dual-family system. Headings use structural but friendly geometric sans-serifs (Manrope or Geist) to anchor the portfolio aesthetic. Supporting UI text utilizes workhorse sans-serifs (Inter or Roboto) for flawless legibility.

### Font Weights

```css
font-normal      /* Inter/Roboto: Standard supporting copy, small UI labels */
font-medium      /* Inter/Roboto: Fully rounded CTA buttons, active tabs */
font-semibold    /* Manrope/Geist: Bento card feature titles, launch note headers */
font-bold        /* Manrope/Geist: Oversized hero headings, primary metrics */

```

### Font Size Scale

```css
text-[11px]      /* Frosted microchip labels, avatar row "+5" counters */
text-xs          /* App screenshot captions, supporting UI tags (12px) */
text-sm          /* Standard readable body copy, UI input text (14px) */
text-base        /* Launch notes, testimonials, CTA text (16px) */
text-lg          /* Bento card feature titles (18px) */
text-2xl         /* Sub-section headings, metric highlights */
text-4xl         /* Standard page headers */
text-5xl-7xl     /* Oversized but controlled hero headings */

```

### Letter Spacing & Transforms

```css
tracking-tighter /* Oversized hero headings (Geist/Manrope specific) */
tracking-tight   /* Feature titles, metric numbers */
tracking-normal  /* All Roboto/Inter body copy for legibility */

capitalize       /* Feature names, primary navigation */
/* Uppercase is strictly limited to 11px microchip labels */

```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Heading | Geist/Manrope | 6xl | bold | slate-900 | tighter |
| Feature Title | Geist/Manrope | lg | semibold | slate-800 | tight |
| Supporting Copy| Inter/Roboto | sm | normal | slate-600 | normal |
| CTA Button | Inter/Roboto | base | medium | white | normal |
| Microchip Tag | Inter/Roboto | [11px] | medium | slate-500 | normal |

---

## Animation System

### Core Philosophy: Friendly Elasticity

Animations mimic modern consumer OS interfaces—springy, responsive, and tactile. Elements don't just appear; they slide and scale gently into place.

### Bento Stack Reveal (Mobile-First Stagger)

```tsx
initial={{ opacity: 0, y: 20, scale: 0.98 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
transition={{ 
  type: "spring", 
  damping: 24, 
  stiffness: 200, 
  staggerChildren: 0.08 
}}

```

### Tactile Button Press

Fully rounded buttons physically compress when tapped, validating user input immediately.

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

```

---

## UI Components

### Avatar Proof Rows

A crucial element for adding consumer polish and social proof. Overlapping rings with a soft border.

```tsx
<div className="flex -space-x-2 overflow-hidden">
  <img className="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="avatar-1.jpg" />
  <img className="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="avatar-2.jpg" />
  <div className="flex h-8 w-8 items-center justify-center rounded-full bg-slate-50 ring-2 ring-white text-[11px] text-slate-500 font-medium">
    +8
  </div>
</div>

```

### iOS Subtle Shadows

Shadows must never look muddy. They are highly diffused, simulating light cast from directly above in a bright room.

```tsx
// Reusable shadow class for Bento Cards
"shadow-[0_8px_30px_rgb(0,0,0,0.04)]"

```

### Frosted Microchips

Used for small tags, launch note versions, or categories. They sit on top of pearl or chalk backgrounds.

```tsx
"inline-flex items-center rounded-md bg-white/60 backdrop-blur-md px-2 py-1 text-[11px] font-medium text-slate-600 ring-1 ring-inset ring-slate-200/50"

```

---

## Component Catalog

### Bento Feature Cards

Large rounded rectangles designed to stack cleanly. They often contain app screenshots or metrics.

```tsx
// Primary Feature Bento
"flex flex-col bg-white rounded-[24px] border border-slate-200 shadow-[0_8px_30px_rgb(0,0,0,0.04)] overflow-hidden"

// Secondary Metric Bento (Pearl background, no shadow)
"flex flex-col bg-slate-50 rounded-[24px] border border-slate-100 p-6"

```

### Buttons

```tsx
// Primary CTA (Fully rounded, Deep Graphite)
"bg-slate-800 text-white font-medium text-base rounded-full px-6 py-3 hover:bg-slate-900 transition-transform active:scale-95"

// Secondary Action (Soft Gray)
"bg-slate-100 text-slate-800 font-medium text-base rounded-full px-6 py-3 hover:bg-slate-200 transition-transform"

```

### Inputs & Forms

```tsx
// Standard Consumer Input
"w-full px-5 py-3 rounded-2xl bg-slate-50 border border-slate-200 text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-500/20 focus:border-slate-500 transition-all"

```

### Data Visualization & Metrics

Designed for clarity. Metrics sit cleanly inside bento boxes without heavy charts.

```tsx
// Oversized Metric Display inside a Bento
<div className="space-y-1">
  <span className="text-[11px] font-medium text-slate-500 uppercase tracking-wide">Monthly Active</span>
  <div className="text-5xl font-bold text-slate-900 tracking-tighter">124.5K</div>
  <div className="inline-flex items-center text-xs font-medium text-slate-500">
    <svg className="w-3 h-3 mr-1" /> +12% this week
  </div>
</div>

```

---

## Quality Checklist

* [ ] Is the layout entirely composed of stacked bento cards within centered containers (no wide split layouts)?
* [ ] Are the hero headings utilizing Manrope or Geist, with body copy strictly in Inter or Roboto?
* [ ] Do all primary buttons and inputs use full rounding (`rounded-full` or `rounded-2xl`)?
* [ ] Are bento cards using the soft `rounded-[24px]` corner radius with the approved ultra-subtle 4% opacity shadow?
* [ ] Is the blue-gray accent (`slate-500`) used *only* for active states, micro-interactions, or small UI icons?
* [ ] Did you include avatar proof rows or frosted microchips to enhance the consumer polish?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Chalk white and pearl backgrounds for bento modules.
* Deep graphite (`text-slate-900`) for high-contrast, eye-strain-friendly headings.
* Soft, diffuse iOS-style shadows (`shadow-[0_8px_30px_rgb(0,0,0,0.04)]`).
* Stacked, mobile-first centered column layouts on all screen sizes.
* Playful, spring-based scaling animations for buttons and bento cards.

### ✗ Not Allowed

* Wide, full-bleed split 50/50 desktop layouts.
* Sharp square corners (`rounded-none` or `rounded-sm`) on major architectural containers.
* Using blue-gray as a large background fill color (e.g., no solid blue-gray banners).
* Pure black (`#000000`) text or backgrounds.
* Harsh, dark drop shadows or heavy skeuomorphic bevels.