Chalk Founder Bento Spine

/chalkFounderBentoSpine
A disciplined, monochromatic design system for narrative-first projects, built around a centralized vertical spine of bento modules—emphasizing tactile depth, premium typography, and highly structured, mobile-native storytelling layouts.
1 likes
0 bookmarks
Jun 18, 2026
Design System Content
# Chalk Founder Bento Spine

A design language for polished, narrative-driven project storytelling through a centralized structural column.

---

## Philosophy

> "Restraint scales beautifully; structure tells the story."

This system creates interfaces that feel like a highly curated digital portfolio or an elite founder's deck—grounded, tactile, and structurally disciplined. It relies on a single, continuous vertical "spine" of perfectly fitted bento cards that reads seamlessly from mobile to desktop. Instead of shouting with color, it commands attention through immaculate proportion, subtle depth, and premium typographic choices.

### Core Beliefs

1. **The Spine is Sacred** — The layout is uncompromisingly centralized. A single, mobile-native vertical column of varying bento modules dictates the flow, surrounded by confident emptiness on larger breakpoints.
2. **Monochromatic Authority** — Trust is built through restraint. We reject generic bright accent colors in favor of stark, near-black interactive elements against soft, chalky backgrounds.
3. **Framer-Level Discipline** — Margins, gaps, and padding are meticulously mathematically related. Spaces between bento modules are intentional and tight, creating a unified architectural block.
4. **Textural Depth** — Interfaces use subtle material properties—frosted glass, pearlescent highlights, and microscopic drop shadows—rather than heavy graphic elements.
5. **Heroic Substance** — Typography commands the page through confident weights (semibold) and tight integration, anchoring the soft interface with structural graphite text.

### Strict Rules

* **No Generic Bright Accents** — Primary actions and focal points use pure Near-Black. Blue, green, or purple "call to action" buttons are strictly forbidden.
* **Mobile-Native Everywhere** — The composition must remain a unified vertical stack (the spine) on desktop, scaling its internal bento grids rather than fragmenting into scattered multi-column layouts.
* **Capsule CTAs Only** — Interactive buttons must utilize fully rounded, pill-shaped geometry (`rounded-full`) to contrast against the structural geometry of the bento cards.
* **No Ultralight Hero Text** — Unlike traditional luxury brands, founder storytelling requires presence. Hero typography must be confident and semibold.
* **Contained Storytelling** — Every piece of proof, from quotes to metrics, must live inside a bounded, fine-bordered bento container. 

---

## Color Palette

### The Chalk & Graphite Scale

The palette is incredibly restrained, utilizing warm, tactile whites and stones for the canvas, stepping into deep graphites and absolute near-black for high-contrast elements.

```css
/* Backgrounds & Canvas (Lightest to Darkest) */
bg-chalk-white        /* Main page canvas (#ffffff) */
bg-pearl              /* Premium highlights, inner card shines (#fcfcfc) */
bg-mist-gray          /* Default bento module backgrounds (#f5f5f5) */
bg-stone-50           /* Deep nested container zones, secondary modules (#f0f0f0) */
bg-stone-100          /* Hover states for interactive bento modules */
bg-stone-200          /* Solid structural tags, skeleton loaders */

/* Borders & Dividers */
border-pearl          /* Inner shine rings for glassy chips */
border-mist-gray      /* Standard ultra-fine bento boundaries */
border-stone-200      /* Hover state borders, input rings */
border-graphite-300   /* Dark mode transitions, muted structural lines */

/* Typography (Graphite Scale) */
text-graphite-950     /* Primary hero headlines, deep metric numbers (#111111) */
text-graphite-800     /* Core introductory text, prominent module titles */
text-graphite-600     /* Supporting bento copy, quote snippets */
text-graphite-500     /* Launch status labels, small stack descriptors */
text-graphite-400     /* Disabled text, placeholder inputs, subtle timestamps */

/* Interactive Core (No Bright Colors) */
bg-near-black         /* Primary Capsule CTAs, active pagination dots (#0a0a0a) */
text-chalk-white      /* Text inside primary CTAs and inverted badges */
border-near-black     /* Focus states, critical selections */
bg-graphite-900       /* Hover state for primary CTAs */

```

---

## Typography

A dual-family approach that pairs high-presence, geometric/grotesque headers with highly functional, compact supporting text. 

### Font Families

```css
/* Hero & Display (Choose One for the project) */
font-manrope      /* Or Geist, Helvetica, Roboto - Confident, structural */

/* Supporting Copy & Interface */
font-dm-sans      /* Or Inter - Compact, highly legible at small sizes */
```

### Font Weights

```css
font-normal      /* Compact supporting copy, quote snippets, stack labels */
font-medium      /* Interface tabs, glassy chip text, input labels */
font-semibold    /* Hero headlines (MANDATORY), project titles, metric numbers */
/* font-light and font-black are excluded to maintain uniform architectural density */
```

### Font Size & Line Height Scale

```css
text-[10px] leading-none    /* Small stack labels, project badges */
text-xs leading-tight       /* Launch status, timestamp metadata (12px) */
text-sm leading-snug        /* Quote snippets, metric subtitles (14px) */
text-base leading-relaxed   /* Concise intro paragraphs beneath the hero (16px) */
text-lg leading-snug        /* Module titles, proof row highlights (18px) */
text-2xl leading-tight      /* Internal bento module hero metrics */
text-4xl leading-tight      /* Centered project headlines */
text-5xl leading-tight      /* Page-level Hero typography */
```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Centered Headline | Manrope | 5xl | semibold | graphite-950 | tight |
| Concise Intro | DM Sans | base | normal | graphite-600 | normal |
| Bento Metric | Manrope | 2xl | semibold | graphite-950 | tight |
| Quote Snippet | DM Sans | sm | normal | graphite-800 | normal |
| Stack Label | DM Sans | [10px] | medium | graphite-500 | wide |

---

## Animation System

### Core Philosophy: The Physical Stack

Animations should mimic beautifully weighted physical cards sliding perfectly into a custom-machined box. Everything is grounded, physical, and smooth.

### The Spine Reveal (Framer-Inspired Stagger)

As the user scrolls down the centralized spine, bento modules slide into place with a subtle vertical offset and tight spring physics.

```tsx
initial={{ opacity: 0, y: 16, scale: 0.98 }}
whileInView={{ opacity: 1, y: 0, scale: 1 }}
viewport={{ once: true, margin: "-40px" }}
transition={{ type: "spring", stiffness: 260, damping: 24, mass: 0.8 }}
```

### Interactive Hover (Subtle Material Shift)

Cards do not leap off the page. They catch the light slightly, utilizing a subtle shadow bloom and micro-border shift.

```tsx
whileHover={{ y: -2 }}
transition={{ duration: 0.2, ease: "easeOut" }}
// Paired with CSS: hover:shadow-sm hover:border-stone-200
```

---

## UI Components

### The Spine Layout Structure

The core layout architecture. Everything sits inside this central column, maintaining mobile-native reading flow on all devices.

```tsx
<main className="w-full min-h-screen bg-chalk-white flex flex-col items-center pt-24 pb-32">
  {/* Slim Frosted Nav */}
  <nav className="fixed top-4 z-50 w-[calc(100%-2rem)] max-w-2xl mx-auto h-12 rounded-full bg-chalk-white/70 backdrop-blur-md border border-mist-gray flex items-center px-4" />

  {/* Header Section */}
  <header className="max-w-xl mx-auto text-center flex flex-col items-center gap-4 px-6 mb-12">
    <h1 className="font-manrope text-4xl font-semibold text-graphite-950 tracking-tight">Centered Headline</h1>
    <p className="font-dm-sans text-base text-graphite-600 leading-relaxed">Concise intro explaining the project.</p>
    <div className="flex gap-3 mt-4">
      {/* CTA Pair */}
    </div>
  </header>

  {/* The Harmonious Bento Spine */}
  <section className="w-full max-w-3xl mx-auto px-4 flex flex-col gap-4">
    {/* Grid modules go here */}
  </section>
</main>
```

### Glassy Chips

Used for launch statuses, categories, or subtle tagging.

```tsx
<div className="inline-flex items-center px-2.5 py-1 rounded-md bg-chalk-white/40 backdrop-blur-sm border border-pearl shadow-[0_1px_2px_rgba(0,0,0,0.02)]">
  <span className="font-dm-sans text-[10px] font-medium text-graphite-600 tracking-wide uppercase">
    Launch Status
  </span>
</div>
```

---

## Component Catalog

### Bento Modules

Highly structured boxes with fine borders and microscopic shadows. Note the "Framer-level" spacing discipline (`p-6` or `p-8` universally).

```tsx
// Standard Bento Module (e.g., Quote or Metric)
"relative overflow-hidden bg-mist-gray rounded-3xl border border-stone-200/50 p-6 shadow-[0_2px_8px_rgba(0,0,0,0.02)] transition-all hover:shadow-[0_4px_16px_rgba(0,0,0,0.04)]"

// Image/Screenshot Bento Module
"relative overflow-hidden bg-stone-50 rounded-3xl border border-mist-gray p-2"
// Image wrapper inside:
"w-full h-full rounded-2xl overflow-hidden border border-black/5"
```

### Capsule CTAs

Primary and secondary buttons are strictly pill-shaped (`rounded-full`) to contrast with the bento box geometry.

```tsx
// Primary Capsule CTA (Near-Black)
"inline-flex items-center justify-center h-10 px-6 rounded-full bg-near-black text-chalk-white font-dm-sans text-sm font-medium transition-transform hover:scale-[1.02] active:scale-[0.98]"

// Secondary Capsule CTA (Soft Stone)
"inline-flex items-center justify-center h-10 px-6 rounded-full bg-mist-gray text-graphite-950 border border-stone-200 font-dm-sans text-sm font-medium hover:bg-stone-50 transition-colors"
```

### Internal Bento Elements

```tsx
// Metric Row Layout
"flex items-baseline gap-2 mb-4"
// Metric Value
"font-manrope text-3xl font-semibold text-graphite-950 tracking-tight"
// Metric Subtitle
"font-dm-sans text-sm text-graphite-500"

// Quote Snippet
"font-dm-sans text-base text-graphite-800 leading-relaxed italic border-l-2 border-stone-300 pl-4 my-2"

// Small Stack Labels (Tech stack, tools, etc.)
"px-2 py-1 bg-chalk-white border border-mist-gray rounded text-[10px] font-medium text-graphite-500"
```

### Proof Row

A horizontally scrolling or neatly wrapped row of trusted logos or high-level proof points, situated just above the bento stack.

```tsx
"w-full max-w-2xl mx-auto flex items-center justify-center flex-wrap gap-8 py-8 border-y border-mist-gray/50 mb-12 opacity-60 grayscale"
```

---

## Quality Checklist

* [ ] Is the primary layout a strict, centralized column (the spine) that naturally mimics a mobile layout even on large desktop screens?
* [ ] Are the primary buttons rendered in pure Near-Black and perfectly rounded (Capsule CTA)?
* [ ] Did you rigorously exclude all generic bright accent colors (no blue, green, or red alerts/buttons)?
* [ ] Are the hero headlines set in a confident `font-semibold` using Manrope, Geist, Helvetica, or Roboto?
* [ ] Do the bento modules feature fine borders (`border-stone-200/50`) and only microscopic, ultra-soft drop shadows (`0.02` opacity)?
* [ ] Are the internal bento paddings disciplined, relying strictly on standardized mathematical spacing (`p-6` or `p-8`)?
* [ ] Is the navigation a slim, frosted, pill-shaped element floating at the top of the spine?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Monochromatic exploration (chalk white, mist gray, deep graphite).
* Frosted glass effects (`backdrop-blur`) on navigation and small overlay chips.
* Semibold typography for all prominent headings.
* Pill-shaped (Capsule) buttons and rounded bento corners (`rounded-3xl` for outer cards, `rounded-2xl` for inner images).
* Subtle hover elevations with tight spring animations.
* Centralized, linear storytelling layouts.

### ✗ Not Allowed

* Bright primary accent colors (no "brand blues" or "success greens").
* Multi-column desktop masonry layouts that dilute the focus of the single centralized spine.
* Ultralight or thin headline typography.
* Sharp, unrounded corners on main structural containers.
* Heavy, muddy drop shadows or dark mode configurations masquerading as light mode.
* Unbounded elements (everything fits securely inside a bento module or the centralized header space).