No preview available
Graphite Cobalt Bento Classic

/graphiteCobaltBentoClassic
A premium dark UI system with centered layouts, luminous cobalt accents, tactile depth, and strict typographic hierarchy. Designed for fast, world-class launches that echo engineered hardware and adapt beautifully across devices.
0 likes
0 bookmarks
Jun 17, 2026
Design System Content
# Graphite Cobalt Bento Classic

A reusable dark-theme direction designed for fast, world-class launches with crisp hierarchy and restrained visual depth.

---

## Philosophy

> "Depth is felt, not forced. Brilliance emerges from the absolute dark."

This system creates interfaces that feel like modern, premium hardware—engineered, deeply structural, and glowing with quiet power. The design moves away from sprawling desktop interfaces, favoring tight, horizontally centered containers and stacked narratives that translate flawlessly across devices. It relies on polished Framer-level spacing, pure typographic hierarchy, and carefully restrained lighting.

### Core Beliefs

1. **Centric Focus** — We avoid sprawling edge-to-edge desktop layouts. The story is stacked, horizontally centered, and strictly guided.
2. **Restrained Visual Depth** — Flatness is dead, but heavy skeuomorphism is messy. We use micro-bevels, inner sheens, and soft shadows to make elements feel tactile and premium.
3. **The Luminous Anchor** — A single luminous cobalt radial gradient anchors the hero, providing a light source that justifies the shadows and glass reflections throughout the page.
4. **Warmth in the Dark** — Pure white is harsh against near-black graphite. We exclusively use warm ivory for primary headings to reduce eye strain and elevate the premium aesthetic.
5. **Architectural Grids** — Minimal rounded bento grids house features. Structure is visible but delicate, relying on fine slate borders and charcoal glass.

### Strict Rules

* **No Sprawling Layouts** — Content must live in tightly constrained, horizontally centered columns (e.g., max-width `max-w-3xl` for narrative text).
* **No Pure Flat CTAs** — Primary buttons must possess a subtle inner sheen or top-bevel to invite physical interaction.
* **No Pure White Text** — Headings are Warm Ivory; body copy is Calm Gray. Pure `#FFFFFF` is forbidden.
* **No Emojis** — Visual punctuation is handled exclusively via subtle icon chips and glass labels.
* **The Device is the Hero** — The hero section must conclude with a beautifully integrated phone mockup resting directly below the typography.

---

## Color Palette

### Graphite, Slate & Cobalt Scale

The foundation is built on near-black graphite, layering up through translucent charcoal glass. Borders are razor-thin slate. Headings glow in warm ivory, while the cobalt accent punches through the dark.

```css
/* Backgrounds (Darkest to Lightest) */
bg-graphite-950       /* Main canvas foundation, near-black (#09090B) */
bg-graphite-900       /* Secondary backdrop layers (#121215) */
bg-charcoal-800/60    /* Default charcoal glass modules, bento cards */
bg-charcoal-700/80    /* Elevated glass surfaces, hover states */
bg-slate-800/50       /* Subtle icon chips, input backgrounds */

/* Borders & Dividers */
border-slate-800/50   /* Ultra-fine card boundaries, minimal bento grid lines */
border-slate-700/80   /* Hover states, focused boundaries */
border-white/10       /* Top-edge highlights for glass bevel effects */

/* The Anchor: Luminous Cobalt (Accent) */
bg-cobalt-500         /* Luminous radial gradients behind the device (#3B82F6) */
bg-cobalt-600         /* Primary CTAs, active states (#2563EB) */
text-cobalt-400       /* Text highlights, active glass labels */
border-cobalt-500/50  /* Focused input rings, active bento highlights */

/* Text Hierarchy */
text-ivory-50         /* Primary headings, text-4xl hero titles (#FAFAF9) */
text-ivory-100        /* Secondary headings, bento card titles (#F5F5F4) */
text-gray-400         /* Calm gray body text, stacked narrative copy (#9CA3AF) */
text-gray-500         /* Muted system text, subtle glass labels (#6B7280) */

```

### Destructive Actions (Deletions Only)

```css
hover:bg-red-950/50
hover:text-red-400
hover:border-red-900/50
```

---

## Typography

The system relies strictly on **Inter** or **Helvetica** to provide a neutral, Swiss-style container for the content. Alignment is predominantly centered in the hero and top-level sections.

### Font Weights

```css
font-normal      /* Hero headings, body copy — relies on sizing for hierarchy */
font-medium      /* Bento card titles, primary CTAs, icon chips */
font-semibold    /* Glass labels, micro-metadata */
/* font-light and font-black are excluded to maintain a crisp, stable mid-range */

```

### Font Size Scale

```css
text-[11px]      /* Subtle glass labels, micro-metadata */
text-xs          /* Icon chips, secondary card hints (12px) */
text-sm          /* Body copy in bento grid, standard actions (14px) */
text-base        /* Stacked narrative body text, primary inputs (16px) */
text-lg          /* Subheadings beneath the hero (18px) */
text-xl          /* Bento card titles */
text-4xl         /* Hero headings — Centered, warm ivory (36px) */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* Hero heading (text-4xl) to lock the typography together */
tracking-normal  /* Calm gray body text */
tracking-wide    /* Glass labels, small uppercase headers */

uppercase        /* Glass labels, subtle system pills */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Title | 4xl | normal | ivory-50 | tight | none |
| Bento Title | xl | medium | ivory-100 | normal | none |
| Narrative Body| base | normal | gray-400 | normal | none |
| Glass Label | [11px]| semibold | gray-500 | wide | uppercase |

---

## Animation System

### Core Philosophy: Framer-Level Polish

Motion should feel like hardware UI—snappy, deeply responsive, and physics-based. Nothing linear; everything uses polished spring animations.

### Page Transitions (The Deep Fade)

Elements gently float up from the graphite void, catching the cobalt light as they settle.

```tsx
initial={{ opacity: 0, y: 15, scale: 0.98 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
transition={{ type: "spring", stiffness: 100, damping: 20, mass: 0.8 }}

```

### The Luminous Pulse

The cobalt radial gradient behind the hero device mockups breathes very slowly, creating a living backdrop.

```tsx
animate={{ opacity: [0.4, 0.6, 0.4], scale: [0.95, 1.05, 0.95] }}
transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}

```

---

## UI Components

### The Hero Backdrop & Device Mockup

The hero section must utilize a cool grid backdrop with a centered cobalt radial gradient, culminating in a phone mockup placed directly below the `text-4xl` typography.

```tsx
{/* Background Grid & Luminous Cobalt */}
<div className="absolute inset-0 bg-[url('/grid-pattern.svg')] opacity-20" />
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-cobalt-600/30 rounded-full blur-[120px]" />

{/* Device Placement */}
<div className="relative mt-12 mx-auto w-full max-w-[320px] shadow-2xl shadow-black/50">
  <img src="/phone-mockup.png" alt="Product Interface" className="w-full h-auto" />
</div>
```

### Inner Sheen CTA

Dark buttons must have visual depth. We achieve this with a precise inner box-shadow (top bevel) and a soft drop shadow.

```tsx
className="bg-graphite-900 text-ivory-50 text-sm font-medium px-5 py-2.5 rounded-full border border-slate-800 shadow-[inset_0_1px_1px_rgba(255,255,255,0.1),_0_4px_12px_rgba(0,0,0,0.5)] hover:bg-slate-800 transition-colors"
```

### Minimal Rounded Bento Grid

Containers for features should be stacked or placed in a tight bento arrangement, utilizing charcoal glass.

```tsx
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 max-w-4xl mx-auto"

{/* Bento Module */}
<div className="relative bg-charcoal-800/60 backdrop-blur-md rounded-2xl border border-slate-800/50 p-6 shadow-lg shadow-black/20 overflow-hidden">
  {/* Content */}
</div>
```

---

## Component Catalog

### Buttons & Chips

```tsx
// Primary Luminous CTA
"bg-cobalt-600 text-white text-sm font-medium px-6 py-3 rounded-full shadow-[inset_0_1px_1px_rgba(255,255,255,0.25),_0_8px_20px_rgba(37,99,235,0.2)] hover:bg-cobalt-500 transition-all"

// Subtle Icon Chip
"flex items-center gap-2 bg-slate-800/40 text-ivory-100 text-xs font-medium px-3 py-1.5 rounded-lg border border-slate-700/50"

// Glass Label (Pre-header or Metadata)
"inline-block bg-white/5 backdrop-blur-sm text-gray-400 text-[11px] font-semibold uppercase tracking-wide px-2.5 py-1 rounded-md border border-white/5"
```

### Containers & Sections

```tsx
// Horizontally Centered Narrative Container
"flex flex-col items-center text-center max-w-2xl mx-auto px-6"

// Stacked Feature Row
"flex flex-col md:flex-row items-center gap-12 max-w-4xl mx-auto py-16"
```

### Inputs

```tsx
// Charcoal Glass Input
"w-full bg-graphite-950/50 backdrop-blur-md border border-slate-800 rounded-xl px-4 py-3 text-ivory-50 placeholder-gray-600 focus:outline-none focus:border-cobalt-500/50 focus:ring-1 focus:ring-cobalt-500/50 transition-all shadow-[inset_0_2px_4px_rgba(0,0,0,0.2)]"
```

---

## Quality Checklist

* [ ] Is the hero typography centered, utilizing Inter or Helvetica at `text-4xl`?
* [ ] Does the hero background feature a cool grid pattern and exactly *one* luminous cobalt radial gradient?
* [ ] Is a phone mockup placed directly below the hero text, anchoring the layout?
* [ ] Do all primary buttons and CTAs feature an inner sheen or bevel rather than sitting completely flat?
* [ ] Are all headings rendered in warm ivory (`text-ivory-50`) rather than pure white?
* [ ] Are sprawling edge-to-edge desktop layouts avoided in favor of horizontally centered max-width containers?
* [ ] Is the bento grid constructed with charcoal glass, fine slate borders, and generous Framer-level spacing?
* [ ] Have emojis been entirely replaced by subtle icon chips and crisp glass labels?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Near-black graphite foundation layers and charcoal glass modules.
* Centered text alignments for heroes and stacked feature narratives.
* Soft, deep drop shadows paired with crisp 1px top-inner-sheens on dark CTAs.
* Luminous cobalt radial blur behind the primary device mockup.
* Impeccable, roomy Framer-level padding around horizontally centered containers.

### ✗ Not Allowed

* Sprawling, full-width desktop UI grids that lack a focused center anchor.
* Pure white text (`#FFFFFF`), which flares harshly against black backgrounds.
* Completely flat dark buttons with no bevel, sheen, or tactile depth.
* Multiple accent colors scattered across the page; cobalt must be the single light source.
* Emojis, heavy opaque gradients, or jagged, unrounded container edges.