No preview available
Blue Halo Native Capsule Stack

/blueHaloNativeCapsuleStack
A dark-mode design system blending iOS-inspired softness, restrained blue luminosity, and horizontally-centered capsule-based hierarchy for premium, tactile web app-launch experiences.
0 likes
0 bookmarks
Jun 17, 2026
Design System Content
# Blue Halo Native Capsule Stack

A sleek, dark-themed design language combining native iOS softness, restrained luminosity, and a structured, reusable app-launch hierarchy.

---

## Philosophy

> "Luminosity defines form; softness invites interaction."

This system creates interfaces that feel like a premium iOS application transported to the web. It relies on near-black surfaces, softly rounded geometries, and horizontal centering to build a calm, anchored app-launch experience. The design should feel tactile and intimate, utilizing faint grid fields and subtle rim-lights rather than aggressive gradients or harsh borders.

### Core Beliefs

1. **Hierarchy through centering and anchoring** — Layouts remain strictly horizontally centered across all breakpoints. The structure relies on stacked capsule sections that draw the eye downward to a singular anchor: the phone mockup.
2. **Native iOS Softness** — Sharp edges are forbidden. Everything from buttons to minimal bento cards uses continuous curves (squircles) and soft glass properties.
3. **Luminous Depth** — Depth is not achieved through heavy drop shadows, but through subtle, restrained blue rim-lights and low-contrast borders against smoked charcoal modules.
4. **Reusable Launch Structure** — The system is designed to seamlessly scale app-launch pages. It relies on elegant feature rows, compact social-proof chips, and calm FAQ accordions to build trust systematically.
5. **Restrained Illumination** — "Blue Halo" refers to the faint, almost internal glow of active elements. Colors should feel emitted from screens, not painted on.

### Strict Rules

* **No Unconstrained Widths** — Content must be horizontally centered within a defined maximum width. Wide desktop views simply reveal more canvas, not wider components.
* **No Pure Black** — Canvas backgrounds are near-black; modules are smoked charcoal. Pure `#000000` flattens the hierarchy and kills depth.
* **No Harsh Neon Colors** — The primary accent is a restrained, luminous blue. It must glow softly, never scream.
* **No Sharp Corners** — Every container, input, and button must utilize native iOS-style rounding (capsules or `rounded-2xl` / `rounded-3xl`).

---

## Color Palette

### Dark Monochromatic & Luminous Scale

The palette starts at a near-black canvas and layers upward into smoked charcoal modules, defined only by ultra-low-contrast borders. The typography rests at a calm pearl-white, supported by an internally lit, restrained blue accent.

```css
/* Backgrounds (Darkest to Lightest) */
bg-[#050507]          /* Main canvas background (Near-Black) */
bg-slate-900/50       /* Sub-canvas layers, faint grid field bases */
bg-slate-800/40       /* Default smoked charcoal modules, bento cards */
bg-slate-800/80       /* Hover states for interactive modules */
bg-slate-700/60       /* Active states, pressed interactions */
bg-white/5            /* Soft glass labels, compact social-proof chips */

/* Borders & Rim-Lights */
border-white/5        /* Ultra-low-contrast grid lines, default container boundaries */
border-white/10       /* Interactive card borders, calm FAQ accordion dividers */
border-white/20       /* Hovered boundaries, elevated states */
shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)] /* The subtle rim-light for CTAs */

/* The Blue Halo (Restrained Blue Luminosity) */
text-blue-400         /* Primary interactive focus, text links, active states */
bg-blue-500/10        /* Soft blue halos, feature row icon backgrounds */
border-blue-500/30    /* Focused input rings, active capsules */
shadow-[0_0_24px_rgba(59,130,246,0.15)] /* Restrained blue glow for priority modules */

/* Text Hierarchy (Pearl-White Scale) */
text-slate-50         /* Pearl-white primary text, text-4xl hero headlines */
text-slate-300        /* Secondary text, short supporting paragraphs */
text-slate-400        /* Calm FAQ body text, elegant feature row descriptions */
text-slate-500        /* Muted metadata, compact chip supporting text */
text-slate-600        /* Disabled states, placeholder text */

```

### Destructive Actions (Deletions Only)

```css
bg-red-500/10
text-red-400
border-red-500/20

```

---

## Typography

Typography strictly relies on Inter or Helvetica to replicate pure native system fonts. The hierarchy is highly structured, avoiding overly thin weights in favor of highly legible, medium-to-semibold scaling that feels at home on a mobile device.

### Font Weights

```css
font-normal      /* Supporting paragraphs, FAQ accordions, feature descriptions */
font-medium      /* UI text, capsule buttons, soft glass labels */
font-semibold    /* Hero headlines, minimal bento titles, social-proof metrics */
/* font-light and font-black are avoided to maintain native iOS balance */

```

### Font Size Scale

```css
text-xs          /* Compact social proof subtext, micro-labels (12px) */
text-sm          /* Soft glass labels, UI prompts, standard inputs (14px) */
text-base        /* Feature row body copy, FAQ answers (16px) */
text-lg          /* Bento card headers, FAQ questions (18px) */
text-xl          /* Elegant feature row titles (20px) */
text-2xl         /* Section introductory headers */
text-4xl         /* Mandatory Hero Headline size, strictly centered */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* text-4xl Hero headlines, large metrics */
tracking-normal  /* All body copy, paragraphs, and UI actions */
tracking-wide    /* Section identifiers, tiny glass labels */

uppercase        /* Restricted to very small metadata or section kickers */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 4xl | semibold | slate-50 | tight | none |
| Supporting Para | base | normal | slate-300 | normal | none |
| Feature Title | xl | semibold | slate-50 | normal | none |
| CTA Button | sm | medium | slate-50 | normal | none |
| Glass Label | xs | medium | slate-400 | wide | uppercase |

---

## Animation System

### Core Philosophy: Native Physics

Animations should feel directly ripped from a modern smartphone—relying on mass, spring, and subtle scaling. Nothing flies in across the screen; elements smoothly scale and fade from their resting positions.

### Modal & Page Reveals (Scale-Fade)

```tsx
initial={{ opacity: 0, scale: 0.96 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ type: "spring", damping: 24, stiffness: 200 }}

```

### Micro-Interactions (The Tactile Press)

Interacting with buttons, bento cards, and accordions causes a physical "push" inward, combined with a subtle increase in the rim-light intensity.

```tsx
whileHover={{ scale: 0.99, filter: 'brightness(1.1)' }}
whileTap={{ scale: 0.97, filter: 'brightness(0.9)' }}

```

---

## UI Components

### Faint Grid Field

Used exclusively in the Hero section to establish spatial scale without overwhelming the typography.

```tsx
<div 
  className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff05_1px,transparent_1px),linear-gradient(to_bottom,#ffffff05_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]"
/>

```

### Phone Mockup Anchor

The structural foundation of the app-launch hierarchy. Always positioned directly below the CTA pair, rigidly horizontally centered.

```tsx
<div className="relative mx-auto mt-16 max-w-[320px] rounded-[3rem] border-[6px] border-slate-800 bg-[#050507] shadow-2xl overflow-hidden ring-1 ring-white/10">
  {/* App content container */}
</div>

```

### Soft Glass Labels

Used for category tags, small alerts, and social proof chips floating over the grid or modules.

```tsx
<div className="inline-flex items-center gap-2 rounded-full bg-white/5 px-3 py-1 text-xs font-medium text-slate-300 backdrop-blur-md border border-white/5">
  {icon}
  {label}
</div>

```

---

## Component Catalog

### Buttons & CTAs

Rounded dark CTA pairs utilizing inner rim-lights to define their boundaries against the near-black canvas.

```tsx
// Primary Dark CTA Pair (Rounded, subtle rim-light)
"bg-slate-800 text-slate-50 font-medium text-sm rounded-full px-6 py-3 shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)] hover:bg-slate-700 transition-all flex items-center justify-center"

// Secondary Muted CTA (Ghosted/Glass)
"bg-white/5 text-slate-300 font-medium text-sm rounded-full px-6 py-3 border border-white/5 hover:bg-white/10 transition-all backdrop-blur-md"

```

### Minimal Bento Cards & Modules

Smoked charcoal surfaces with generous border radii to maintain iOS softness.

```tsx
// Standard Bento Module
"bg-slate-800/40 border border-white/5 rounded-3xl p-6 hover:border-white/10 transition-colors"

// Luminous Highlight Module
"bg-slate-800/40 border border-blue-500/20 rounded-3xl p-6 shadow-[0_0_32px_rgba(59,130,246,0.05)] relative overflow-hidden"

```

### Elegant Feature Rows

Horizontally centered, alternating stacks of functionality used lower in the page hierarchy.

```tsx
<div className="flex flex-col items-center text-center max-w-2xl mx-auto py-12 gap-4">
  <div className="h-12 w-12 rounded-2xl bg-blue-500/10 text-blue-400 flex items-center justify-center border border-blue-500/20 shadow-inner" />
  <h3 className="text-xl font-semibold text-slate-50">Intelligent Caching</h3>
  <p className="text-base font-normal text-slate-400">Data resolves instantly without compromising native payload constraints.</p>
</div>

```

### Calm FAQ Accordions

Clean, horizontally ruled lists that gently expand.

```tsx
// Accordion Container
"border-b border-white/5 py-4 w-full max-w-2xl mx-auto"

// Question (Trigger)
"flex justify-between items-center w-full text-lg font-normal text-slate-300 hover:text-slate-50 transition-colors"

// Answer (Expanded)
"pt-2 text-base text-slate-500 font-normal leading-relaxed"

```

### Compact Social-Proof Chips

Small clusters of avatars or rating stars used right beneath the CTA or near the hero headline to establish instant trust.

```tsx
<div className="flex items-center gap-3 bg-white/5 rounded-full pl-2 pr-4 py-1.5 border border-white/5 backdrop-blur-sm">
  <AvatarGroup className="h-6 w-6" />
  <span className="text-xs font-semibold text-slate-300">Trusted by 10,000+ teams</span>
</div>

```

---

## Quality Checklist

* [ ] Is the entire layout strictly horizontally centered on all screen sizes?
* [ ] Does the Hero section use exactly a `text-4xl` Inter or Helvetica headline?
* [ ] Are all buttons and bento cards using native iOS softness (`rounded-3xl` or `rounded-full`)?
* [ ] Is there exactly one phone mockup anchoring the bottom of the hero hierarchy?
* [ ] Did you use an inner shadow (`shadow-[inset...]`) for button rim-lights instead of standard drop shadows?
* [ ] Are all surfaces near-black or smoked charcoal rather than `#000000`?
* [ ] Is the faint grid field properly masked so it fades out before hitting content blocks?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Near-black canvases (`#050507`) and smoked charcoal layers.
* Strictly horizontally centered layouts, limiting max-width to create focus.
* Restrained blue halos acting as the sole pop of color.
* Tactile, soft UI treatments including frosted glass (`backdrop-blur`) and rim-lights.
* App-launch anchors (compact social proof, single phone mockups, calm accordions).

### ✗ Not Allowed

* Left-aligned asymmetrical desktop layouts.
* Sharp square corners (`rounded-none` or `rounded-sm`) on major UI components.
* Bright, highly saturated secondary accent colors.
* Heavy outer drop-shadows on dark elements.
* Pure flat black (`#000000`) that removes the perception of physical depth.