Midnight Grid Native Capsule

/midnightGridNativeCapsule
A dark, mobile-first design system with strict center alignment, native OS-inspired depth, and refined glows for high-conversion landing environments anchored by a single pristine phone mockup.
0 likes
0 bookmarks
Jun 17, 2026
Design System Content
# Midnight Grid Native Capsule

A design language for dark, reusable app-launch aesthetics built around a centered mobile-first rhythm and polished native UI depth.

---

## Philosophy

> "Focus is forged in the dark; structure is revealed by the glow."

This system creates highly polished, conversion-optimized landing environments that feel like native software. Anchored in absolute symmetry, the aesthetic relies on an ink-black canvas, subtle grid alignments, and a singular pristine phone mockup to showcase the product. Depth is achieved not through flat layers, but through meticulous native characteristics: frosted glass, inner highlights, and fine structural borders.

### Core Beliefs

1. **Centered Mobile-First Rhythm** — The eye is continuously drawn down a strict central axis. Layouts remain narrow, mimicking the vertical scroll of the device they are promoting.
2. **Illumination over Coloration** — Colors are not painted; they are cast. A single restrained radial glow (blue or violet) is permitted, illuminating only the hero center and the device stage.
3. **Polished Native Depth** — Surfaces must feel tactile. We use soft inner borders, frosted glass backdrops, and graphite module fills to emulate high-end OS-level components.
4. **Framer-Level Spacing Discipline** — Gaps, paddings, and margins follow a rigorous mathematical scale. Every element exists in perfect proportional harmony, yielding a calm, uncrowded interface.
5. **The Perfect Stage** — A single, pristine phone mockup is the anchor of the page, placed directly beneath the hero copy to ground the abstract software in physical reality.

### Strict Rules

* **Narrow Viewports Only** — Text blocks and feature grids must never stretch wide. Contain the maximum width tightly to maintain the centered, mobile-inspired column.
* **No Scattered Glows** — Radial lighting is strictly reserved for the hero stage. Lower sections rely entirely on border reflections and glass materials for hierarchy.
* **No Sharp Corners** — Every container, button, and image must utilize smooth, generous border radii (e.g., pill shapes for actions, rounded rectangles for cards).
* **Warm Typography Only** — True pure white (`#FFFFFF`) is forbidden for text; it causes halation against dark backgrounds. Typography strictly uses warm off-white for ultimate legibility.
* **Centered Alignment First** — Left or right alignment is exclusively reserved for micro-content inside feature cards. The macro layout is always rigidly centered.

---

## Color Palette

### Dark Canvas & Illumination Scale

The palette uses deep ink blacks and blue-charcoals for the void, elevating UI elements with graphite and frosted glass. The text sits comfortably in a warm off-white, while a blue/violet glow acts as a localized light source.

```css
/* Backgrounds (Darkest to Lightest) */
bg-black               /* The absolute void, edge-to-edge canvas (#000000) */
bg-slate-950           /* Deep blue-charcoal base for structural layers (#020617) */
bg-neutral-900         /* Graphite solid fills for primary cards (#171717) */
bg-white/5             /* Frosted glass base, subtle elevation (#ffffff0d) */
bg-white/10            /* Hover state for interactive graphite modules */

/* Borders & Highlights */
border-white/5         /* Barely-there fine borders for glass cards */
border-white/10        /* Structural boundaries, module separators */
border-white/20        /* Active highlights, focused boundaries */
ring-white/10          /* Soft inner highlights for buttons and pills */

/* The Illumination: Restrained Glow */
bg-blue-600/20         /* Soft radial center hero glow (#2563eb) */
bg-violet-600/20       /* Alternative deep violet stage lighting (#7c3aed) */
text-blue-400          /* Subtle text accents, interactive text hooks */
shadow-blue-900/50     /* Deep cast ambient light behind the phone stage */

/* Text Hierarchy (Warm Off-White Scale) */
text-[#F5F5F0]         /* Primary text, hero headings, warm off-white */
text-[#E5E5E0]         /* Secondary headings, dominant body copy */
text-neutral-400       /* Compact copy, paragraph descriptions */
text-neutral-500       /* Muted metadata, calm FAQ rows, timestamps */
text-neutral-600       /* Inactive tabs, placeholder text, deep UI hints */

```

### Destructive Actions

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

```

---

## Typography

Typography prioritizes extreme legibility and a modern software aesthetic. Allowed families are strictly geometric and neo-grotesque: **Inter, Helvetica Neue, Geist, or Plus Jakarta Sans**. 

### Font Weights

```css
font-normal      /* Compact feature copy, calm FAQ rows */
font-medium      /* Primary body copy, avatar chips, standard UI labels */
font-semibold    /* Hero headings, primary CTA pills, prominent data */
/* font-light is forbidden — thin text degrades against dark backgrounds */
/* font-bold is forbidden — creates clunky, unrefined blobs in dark mode */

```

### Font Size Scale

```css
text-[11px]      /* Micro system metadata, subtle avatar chip labels */
text-xs          /* Fine print, compact UI grid hints (12px) */
text-sm          /* Dense module descriptions, secondary card text (14px) */
text-base        /* Standard compact copy, paragraph flow (16px) */
text-lg          /* Subheadings, FAQ row titles (18px) */
text-xl          /* Feature module headers, section titles */
text-4xl         /* Hero headings — MANDATORY size, never exceedingly massive */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* text-4xl hero headings to bind words tightly */
tracking-normal  /* All body copy and compact descriptions */
tracking-wide    /* Navigational overlines, tiny status chips */

uppercase        /* Micro overlines, system tags only */
normal-case      /* Standard capitalization for all main headings and CTAs */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Heading | 4xl | semibold | text-[#F5F5F0] | tight | none |
| Hero Subcopy | base | normal | text-neutral-400 | normal | none |
| CTA Pill | sm | medium | text-[#F5F5F0] | normal | none |
| Feature Title | xl | medium | text-[#E5E5E0] | tight | none |
| Overline Tag | xs | medium | text-neutral-500 | wide | uppercase |

---

## Animation System

### Core Philosophy: Native Fluidity

Animations should mimic the 120Hz refresh rate of modern flagship devices—fluid springs, zero stiff easing, and a sense of physical weight and mass.

### Page Transitions (The Stage Reveal)

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

```

### Micro-Interactions (The Press Depth)

Buttons and cards do not lift toward the user on hover; they press inward, simulating physical glass and native iOS/Android tap states.

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

```

---

## UI Components

### Hero Grid Backdrop

A subtle, nearly invisible grid sitting behind the hero section, fading out radially before it reaches the edges of the narrow column.

```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%)]" />

```

### Radial Center Stage Illumination

The single allowed light source, anchored behind the hero heading and the top half of the pristine phone mockup.

```tsx
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[500px] bg-blue-600/15 blur-[120px] rounded-full pointer-events-none" />

```

### Soft Inner Highlight (Native Depth)

Used on CTA pills and premium glass cards to simulate a light source hitting the top physical edge of a glass component.

```tsx
className="shadow-[inset_0px_1px_0px_0px_rgba(255,255,255,0.1)]"

```

---

## Component Catalog

### Buttons (Fully Rounded Pills)

Always fully rounded. Never square. Never heavy drop shadows.

```tsx
// Primary CTA Pill (Graphite with Inner Highlight)
"bg-neutral-800 text-[#F5F5F0] font-medium text-sm rounded-full px-6 py-3 shadow-[inset_0px_1px_0px_0px_rgba(255,255,255,0.1),0_0_20px_rgba(0,0,0,0.5)] hover:bg-neutral-700 transition-colors"

// Secondary Avatar Chip / Ghost Pill
"bg-white/5 border border-white/5 text-[#E5E5E0] font-medium text-sm rounded-full px-4 py-2 hover:bg-white/10 transition-colors flex items-center gap-2"

```

### Cards & Feature Modules

Frosted glass layers over dark blue-charcoal or graphite bases, kept in a narrow, compact feature grid.

```tsx
// Standard Frosted Glass Feature Module
"bg-white/[0.02] backdrop-blur-md border border-white/5 rounded-3xl p-6 flex flex-col items-center text-center hover:bg-white/[0.04] transition-colors"

// Premium Highlight Card (Slightly elevated inner border)
"bg-gradient-to-b from-neutral-900 to-black border border-white/10 rounded-3xl p-8 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]"

```

### Inputs & FAQ Rows

```tsx
// Calm Email Capture Input
"w-full max-w-sm px-5 py-3 rounded-full bg-black/50 border border-white/10 text-[#F5F5F0] placeholder-neutral-500 focus:outline-none focus:border-white/20 focus:ring-1 focus:ring-blue-500/50 shadow-inner transition-all"

// Calm FAQ Row
"w-full border-b border-white/5 py-4 flex justify-between items-center text-left hover:bg-white/[0.02] transition-colors px-4 rounded-xl"

```

### The Pristine Phone Stage

```tsx
// Phone Mockup Container (Anchored perfectly center)
<div className="relative mx-auto mt-12 w-[300px] h-[600px] rounded-[3rem] border-[6px] border-neutral-900 shadow-[0_20px_50px_rgba(0,0,0,0.8)] overflow-hidden ring-1 ring-white/10">
  <img src="/app-ui.jpg" alt="App Interface" className="w-full h-full object-cover" />
</div>

```

---

## Quality Checklist

* [ ] Is the macro layout strictly centered within a narrow vertical column?
* [ ] Is the hero heading locked exactly around `text-4xl` (`font-semibold`, `tracking-tight`)?
* [ ] Is the main text color a warm off-white (`#F5F5F0`) instead of pure, harsh white?
* [ ] Are all main action buttons fully rounded pills (`rounded-full`) with a soft inner top highlight?
* [ ] Is the radial glow restrained strictly to the central hero space and phone stage?
* [ ] Are all feature modules and cards utilizing frosted glass (`bg-white/5`, `backdrop-blur`) and fine hairline borders?
* [ ] Is there exactly one perfect, pristine phone mockup anchoring the center stage?

---

## Allowed vs Not Allowed

### ✓ Allowed

* True dark canvases (`bg-black` or deep blue-charcoal).
* Warm off-white typography for soft, premium contrast.
* Generous border radii on all structural elements (`rounded-3xl` cards, `rounded-full` pills).
* Avatar chips and compact horizontal tag arrays.
* Precise, mathematical spacing grids (Framer-level spacing discipline).
* Deep native inner-shadows and subtle top border highlights to emulate physical materials.

### ✗ Not Allowed

* Edge-to-edge wide text lines or sprawling horizontal layout arrays.
* Pure `#FFFFFF` typography.
* Sharp, square 0px border-radius components.
* Bright, opaque flat background colors on cards.
* Scattered neon accents, multiple glowing Orbs, or heavy color washes outside the hero center.
* Multiple scattered, floating isometric device mockups (keep it to ONE pristine frontal or slight-tilt mockup).