Carbon Capsule

/carbonCapsule
A design system for sleek, mobile-first dark UIs that emulate premium iOS app polish through oversized capsule geometry, tactile depth, and restrained matte carbon surfaces. Fast, focused, and storytelling-driven, never sprawling or flat.
0 likes
0 bookmarks
Jun 16, 2026
Design System Content
# Carbon Capsule App Minimalism

A design language for sleek, mobile-first dark interfaces with native-app polish.

---

## Philosophy

> "Design for the hand, even on the desktop. Depth is felt through constraint."

This system brings the tactile intimacy and high polish of a premium iOS application to the open web. Interfaces are vertically driven, anchored centrally, and rely on carbon-black surfaces paired with massive, oversized corner radii. It rejects sprawling, complex web grids in favor of a guided, hyper-focused, storytelling scroll.

### Core Beliefs

1. **Mobile-First Anchoring** — The viewport is tightly constrained. Even on an ultrawide monitor, the layout remains narrow and centered, creating a focused, vertical storytelling rhythm.
2. **Capsule Geometry** — Sharp edges do not exist here. Everything from buttons to feature cards uses maximum border-radii (`rounded-full` or `rounded-3xl`) to mimic physical hardware and native app containers.
3. **Tactile Depth over Flatness** — Dark mode shouldn't feel like a flat void. Surfaces are lifted using subtle inner highlights (top borders), soft ambient shadows, and frosted glassmorphism.
4. **App-Like Pacing** — Sections alternate gracefully. Centered hero text immediately grounds into a primary phone mockup, followed by alternating device showcases and clean, concise feature stacks.
5. **Restrained Atmosphere** — No loud, neon gradients. Visual interest comes from the interplay of matte carbon surfaces against high-clarity frosted overlays.

### Strict Rules

* **Narrow Viewports Only** — Maximum content width should rarely exceed `max-w-2xl` for copy and `max-w-4xl` for structural device showcases.
* **No Sharp Corners** — Every interactive element and card must be heavily rounded.
* **No Web-Native Complex Grids** — Avoid masonry or chaotic bento boxes. Content flows vertically in a single or dual column.
* **No Flat CTAs** — Primary buttons must have a subtle top-inner highlight to simulate physical volume.

---

## Color Palette

### Carbon, Charcoal & Frost Scale

The palette abandons harsh pure blacks for deep, rich carbons (`zinc` scale), layering up to soft charcoal surfaces. Light is introduced through semi-transparent whites (frost) rather than opaque colors.

```css
/* Backgrounds (Darkest to Lightest) */
bg-[#09090B]          /* Base canvas, deep carbon black */
bg-[#18181B]          /* Default app cards, secondary panels (Charcoal) */
bg-[#27272A]          /* Elevated feature cards, hover states */
bg-[#3F3F46]          /* Fully rounded CTAs, pressed states */
bg-white/5            /* Frosted labels, subtle glass overlays */
bg-white/10           /* Hover states on frosted elements */

/* Borders & Inner Highlights (The Tactile Edge) */
border-white/5        /* Base structural borders for cards */
border-white/10       /* Subtle top-inner highlight for CTAs and premium cards */
border-white/20       /* Active focus rings, selected capsule borders */
border-[#27272A]      /* Opaque structural dividers (FAQs) */

/* Text Hierarchy */
text-white            /* Bold hero headings, primary active values */
text-zinc-300         /* Standard readable body copy */
text-zinc-400         /* Compact gray body copy, secondary descriptions */
text-zinc-500         /* Muted metadata, minimal icon chips, placeholders */
text-zinc-600         /* Disabled states, inactive UI elements */

```

### Destructive Actions

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

---

## Typography

Typography relies on ultra-modern, utilitarian sans-serifs—specifically **Inter, Helvetica Neue, or Geist**. The scale is compact for reading, but punches hard at the top with bold, clean hero headings.

### Font Weights

```css
font-bold        /* Hero headings, primary section anchors - MANDATORY for top-level */
font-medium      /* Feature card titles, CTA labels, frosted chip text */
font-normal      /* Compact gray body copy, FAQ answers */
/* font-light is strictly forbidden — native apps require solid, legible strokes */
```

### Font Size Scale

```css
text-[11px]      /* Minimal icon chip labels, metadata */
text-xs          /* Form hints, secondary card tags (12px) */
text-sm          /* Compact body copy, FAQ text, standard descriptions (14px) */
text-base        /* CTA labels, standard feature headers (16px) */
text-lg          /* Device showcase titles, active accordion headers (18px) */
text-xl          /* Secondary section leads (20px) */
text-2xl         /* Standard section dividers */
text-4xl         /* Bold hero headings - Standardized anchor size */
```

### Letter Spacing & Transforms

```css
tracking-tight   /* text-4xl Hero headings (brings boldness together) */
tracking-normal  /* All body copy and UI elements */
tracking-wide    /* Only for ultra-small metadata text-[11px] */

/* Uppercase is used exceedingly sparingly, mostly native sentence-case is preferred for approachability. */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- |
| Hero Heading | 4xl | bold | white | tight |
| Feature Title | base | medium | white | normal |
| Compact Body | sm | normal | zinc-400 | normal |
| Capsule CTA | base | medium | white | normal |
| Icon Chip | [11px] | medium | zinc-400 | wide |

---

## Animation System

### Core Philosophy: Native iOS Fluidity

Animations emulate the physics of premium mobile operating systems: spatial, spring-based, and heavily reliant on scaling rather than simple fading.

### Vertical Storytelling Reveal

Elements slide up smoothly as the user scrolls down the narrow container, simulating an app view pushing onto the stack.

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

### Tactile Button Press

All buttons and interactive cards must physically depress when clicked, mirroring native touch targets.

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

---

## UI Components

### The Phone Anchor (Layout Pattern)

The signature layout requirement. A single, high-fidelity phone mockup sits directly beneath the centered hero copy, acting as the foundation for the vertical scroll.

```tsx
<section className="flex flex-col items-center max-w-2xl mx-auto pt-24 text-center">
  <h1 className="text-4xl font-bold text-white tracking-tight mb-4">
    Native power. Open web.
  </h1>
  <p className="text-sm text-zinc-400 mb-8 max-w-md">
    Experience the fluidity of a premium iOS application natively in your browser.
  </p>
  <button className="...">Get Started</button>
  
  {/* The Anchor Mockup */}
  <div className="mt-16 w-full max-w-[320px] rounded-[48px] border-[6px] border-zinc-900 shadow-2xl shadow-black/80 overflow-hidden relative">
     <img src="/app-ui.jpg" className="w-full h-auto" />
     <div className="absolute top-0 inset-x-0 h-6 bg-gradient-to-b from-black/40 to-transparent" />
  </div>
</section>
```

### Inner Highlight Modifier

Applied to cards and buttons to give them a premium, 3D native-app volume.

```tsx
className="shadow-[inset_0_1px_0_rgba(255,255,255,0.1)] shadow-black/20"
```

### Frosted Label

Used for section tagging or small data points instead of solid colored badges.

```tsx
className="backdrop-blur-md bg-white/5 border border-white/10 text-zinc-300"
```

---

## Component Catalog

### Cards

Oversized corner radii, carbon-surface background, soft ambient shadow, and a subtle inner top-highlight.

```tsx
// Premium Feature Card (iOS Style)
"bg-[#18181B] rounded-[32px] p-8 shadow-2xl shadow-black/40 border border-white/5 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] flex flex-col items-center text-center"

// Concise Feature Item (List format)
"bg-transparent hover:bg-white/5 rounded-2xl p-4 transition-colors duration-200 flex items-center gap-4"
```

### Buttons

Fully rounded (capsule), charcoal surfaces, tactile highlights. No sharp corners.

```tsx
// Primary CTA (Charcoal Capsule)
"bg-[#27272A] text-white font-medium text-base rounded-full px-8 py-3.5 shadow-[inset_0_1px_0_rgba(255,255,255,0.1)] hover:bg-[#3F3F46] transition-colors flex items-center justify-center gap-2"

// Minimal Icon Chip
"bg-white/5 hover:bg-white/10 text-zinc-400 hover:text-white rounded-full px-3 py-1.5 text-[11px] font-medium backdrop-blur-md border border-white/5 transition-all"
```

### Clean FAQ Accordion

Minimalist, unboxed, separated by clean transparent/opaque borders.

```tsx
// FAQ Container
"w-full max-w-xl mx-auto divide-y divide-white/5"

// FAQ Item / Button
"w-full py-5 flex justify-between items-center text-left text-sm font-medium text-zinc-300 hover:text-white transition-colors"

// FAQ Body (Compact Gray Copy)
"pb-5 text-sm text-zinc-500 font-normal leading-relaxed"
```

### Alternating Device Showcases

Layout containers for middle-page storytelling.

```tsx
// Left-Aligned Text, Right-Aligned Device Cutout
<div className="flex flex-col md:flex-row items-center gap-12 max-w-4xl mx-auto py-24">
  <div className="flex-1 space-y-4 text-center md:text-left">
    <h3 className="text-xl font-bold text-white">Seamless Sync</h3>
    <p className="text-sm text-zinc-400">Everything updates in real-time, exactly where you expect it.</p>
  </div>
  <div className="flex-1 flex justify-center md:justify-end">
    {/* Half-mockup sliding in from right */}
    <div className="w-64 h-80 bg-[#18181B] rounded-l-[40px] border-l border-t border-white/10 shadow-2xl overflow-hidden translate-x-4">...</div>
  </div>
</div>
```

---

## Quality Checklist

* [ ] Is the primary layout strictly a narrow, centered container (max-w-2xl to 4xl)?
* [ ] Is the main hero heading exactly `text-4xl` and `font-bold`?
* [ ] Does a standalone phone mockup anchor the layout immediately beneath the hero text?
* [ ] Are all buttons and CTA elements fully pill-shaped (`rounded-full`)?
* [ ] Do interactive elements feature a subtle inner highlight (`shadow-[inset_0_1px_0_white/10]`)?
* [ ] Is the body copy compact (`text-sm`), gray (`text-zinc-400`), and formatted with `font-normal`?
* [ ] Are all labels and chips using frosted glass styling (`bg-white/5` + `backdrop-blur`) instead of solid colors?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Deep carbon backgrounds (`#09090B`) paired with slightly lighter charcoal cards.
* Oversized capsule geometry and heavily rounded corners (`rounded-[32px]`).
* Soft, dark, ambient drop shadows paired with crisp inner highlights to create physical depth.
* Centered text alignment for primary narrative sections.
* Inter, Helvetica Neue, or Geist as the sole typefaces.

### ✗ Not Allowed

* Edge-to-edge multi-column bento grids that break the vertical mobile-first storytelling.
* Sharp corners (`rounded-sm` or `rounded-none`) on any UI component.
* Loud, neon, or opaque gradients in backgrounds, text, or buttons.
* Pure `#000000` pitch black applied to elevated cards (breaks the depth illusion).
* Large, sprawling body text (keep body copy compact).