Midnight Citrus

/midnightCitrus
A dark, mobile-first iOS-inspired system using centered layouts, layered glassy depth, and precise citrus gradients for premium, focused web experiences.
0 likes
0 bookmarks
Jun 16, 2026
Design System Content
# Midnight Citrus iOS Stack

A design language for dark, mobile-first interfaces defined by centered composition, deep atmospheric materials, and hyper-localized gradient accents.

---

## Philosophy

> "Darkness provides the stage; glass provides the structure; color provides the pulse."

This system creates interfaces that feel like a premium iOS native application ported flawlessly to the web. It is built on absolute centerline symmetry, deep layered dark modes, and extreme restraint. Instead of flooding the screen with color, an electric "Citrus" gradient is deployed with laser precision—glowing faintly from behind phone mockups, tracing the rim of a button, or lighting up a single word.

### Core Beliefs

1. **Mobile-First Centerline** — The eye never has to wander. From the hero down to the footer, elements stack vertically in a perfect, unbroken center column.
2. **Atmospheric Depth over Flatness** — Backgrounds are not just black; they are a deep, layered atmospheric mix of ink, graphite, and charcoal, separated by frosted glass and sub-pixel borders.
3. **The Citrus Pulse** — Color is a privilege. A strict light-blue, lime, and soft-yellow radial gradient is the only injection of vibrancy, used exclusively to signal high-value interaction or product magic.
4. **Framer-Level Spacing** — Rhythm is mathematical and generous. Sections are separated by massive vertical gaps, preventing visual collision and elevating the perceived value of each module.
5. **Warm Typography** — To counteract the coldness of deep space, typography leans into a warm off-white, making long-form reading highly legible and inviting.

### Strict Rules

* **Absolute Centering** — Left-aligned or masonry grid layouts are forbidden in the primary flow. If it can be centered and stacked, it must be.
* **Maximum Border Radii** — Sharp corners are eliminated. Buttons are fully pill-shaped (1000px radius), and cards use generous, Apple-esque rounding (24px to 32px).
* **Restrained Gradients** — The Citrus gradient may never be used as a full background. It exists *only* inside CTA highlights, small text spans, status dots, or as a diffused radial glow behind a product mockup.
* **Glass Over Solid** — Floating elements (navbars, sticky headers, overlays) must use backdrop blurring rather than opaque solid hex codes.

---

## Color Palette

### Atmospheric Dark Scale

The foundation is built on deep, light-absorbing darks. Backgrounds transition from absolute ink black to blue-charcoal to create subtle elevation.

```css
/* Backgrounds (Darkest to Lightest) */
bg-black              /* Primary void, main body background (#000000) */
bg-zinc-950           /* Deep graphite, secondary layout regions (#09090b) */
bg-slate-950          /* Blue-charcoal, elevated floating cards (#020617) */
bg-white/5            /* Transparent glass panels, default card surfaces */
bg-white/10           /* Hover state for interactive glass panels */
bg-white/15           /* Pressed/Active state for glass panels */

/* Borders */
border-white/5        /* Low-contrast borders for structural layout */
border-white/10       /* Default card and panel boundaries */
border-white/20       /* Active boundaries, focused form inputs */

/* The Pulse: Citrus Gradient (Light-Blue, Lime, Soft-Yellow) */
from-sky-400 via-lime-400 to-yellow-200 /* The master gradient definition */
text-transparent bg-clip-text bg-gradient-to-r /* Text highlight variant */
bg-gradient-to-br     /* Solid micro-accents (status dots, active toggles) */

/* Text Hierarchy (Warm Off-White Focus) */
text-stone-50         /* Primary text, hero headlines, warm off-white (#fafaf9) */
text-stone-300        /* Secondary copy, short descriptions, active tabs */
text-stone-400        /* Muted metadata, FAQ content, placeholder text */
text-stone-600        /* Disabled states, subtle localized borders */

```

### Destructive Actions

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

```

---

## Typography

Typography heavily relies on **Inter** or **Helvetica Neue**. The approach borrows from iOS design paradigms: highly legible, beautifully tracked, and perfectly anti-aliased.

### Font Weights

```css
font-medium      /* Default body copy, giving slight presence against dark backgrounds */
font-semibold    /* Headings, CTA labels, feature card titles */
font-bold        /* Reserved strictly for text-gradient spans inside hero headlines */

```

### Font Size Scale

```css
text-[11px]      /* Tiny status dots, ultra-compact metadata */
text-xs          /* App badge labels, footer links (12px) */
text-sm          /* Standard card copy, accordion content (14px) */
text-base        /* Short descriptions beneath headlines, primary CTAs (16px) */
text-lg          /* Feature module subheadings (18px) */
text-2xl         /* Section headers, compact module titles */
text-4xl         /* Primary hero headlines, major metric callouts (fluid up to 5xl max) */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* Standard for text-4xl headings, iOS signature look */
tracking-normal  /* All body copy and descriptions */
tracking-widest  /* Used for tiny overline text above section headers */
/* Uppercase is heavily restricted to overlines and micro-badges only */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 4xl | semibold | stone-50 | tight | none |
| Hero Description | base | medium | stone-300 | normal | none |
| Feature Title | 2xl | semibold | stone-50 | tight | none |
| CTA Button | base | semibold | stone-50 | normal | none |
| Overline Tag | xs | semibold | stone-400 | widest | uppercase |

---

## Animation System

### Core Philosophy: The Spring-Loaded Polish

Every movement should feel driven by fluid physics. Elements don't linearly snap; they glide and settle with mass and friction, perfectly mimicking native iOS interactions.

### Page Transitions (The Depth Reveal)

```tsx
initial={{ opacity: 0, scale: 0.96, y: 16 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
transition={{ type: "spring", bounce: 0, duration: 0.7 }}

```

### Mockup Glow Pulse

A slow, breathing radial gradient behind the pristine phone mockup that reacts to scroll velocity.

```tsx
animate={{ 
  opacity: [0.4, 0.6, 0.4],
  scale: [0.98, 1.02, 0.98] 
}}
transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}

```

---

## UI Components

### Slim Frosted Navbar

Sits detached at the very top of the screen. Absolute minimal links, highly blurred.

```tsx
<nav className="fixed top-4 left-1/2 -translate-x-1/2 rounded-full border border-white/10 bg-black/40 backdrop-blur-xl px-6 py-3 flex items-center justify-between z-50">
  {/* Nav Content */}
</nav>

```

### Fully Rounded Dark CTA

A pill-shaped button that absorbs light but features a high-fidelity interaction state, sometimes incorporating the Citrus gradient as a sub-pixel border.

```tsx
<button className="relative px-8 py-4 rounded-full bg-zinc-900 text-stone-50 font-semibold border border-white/10 hover:bg-zinc-800 transition-all duration-300 shadow-[0_0_0_1px_rgba(255,255,255,0.05)] overflow-hidden group">
  <span className="relative z-10">Get Started</span>
  <div className="absolute inset-0 opacity-0 group-hover:opacity-100 bg-gradient-to-br from-sky-400/20 via-lime-400/20 to-yellow-200/20 transition-opacity duration-500" />
</button>

```

### Glass Feature Panels

Used in the lower vertically-stacked sections. Highly rounded corners, low-contrast borders.

```tsx
<div className="flex flex-col items-center justify-center rounded-[32px] bg-slate-950/50 backdrop-blur-md border border-white/5 p-12 text-center w-full max-w-2xl mx-auto">
  {/* Panel Content */}
</div>

```

---

## Component Catalog

### Hero Stack

The definitive starting layout. Absolute centerline constraint.

```tsx
<header className="flex flex-col items-center text-center pt-32 pb-16 px-6">
  <h1 className="text-4xl font-semibold text-stone-50 tracking-tight font-inter">
    Unleash your <span className="text-transparent bg-clip-text bg-gradient-to-r from-sky-400 via-lime-400 to-yellow-200">creativity</span>
  </h1>
  <p className="mt-4 text-base text-stone-300 max-w-md">
    The ultimate tool for crafting pristine digital experiences.
  </p>
  <div className="mt-8">
    {/* Fully Rounded Dark CTA */}
  </div>
  <div className="mt-16 relative">
    {/* Mockup Glow */}
    <div className="absolute inset-0 bg-gradient-to-tr from-sky-400 via-lime-400 to-yellow-200 opacity-20 blur-[100px] rounded-full" />
    {/* Pristine Phone Mockup */}
    <img src="/phone-mockup.png" className="relative z-10 w-64 shadow-2xl" />
  </div>
</header>

```

### Alternating Phone-and-Copy Modules

Stacked vertically in lower sections, ensuring mobile-first translation.

```tsx
<section className="flex flex-col gap-24 py-24 max-w-md mx-auto">
  {/* Module A */}
  <div className="flex flex-col items-center text-center gap-8">
    <div className="w-full aspect-[9/16] rounded-[40px] bg-zinc-900 border border-white/10 flex items-center justify-center relative overflow-hidden">
        {/* Compact UI Preview */}
    </div>
    <div className="space-y-3">
      <h3 className="text-2xl font-semibold text-stone-50">Seamless Sync</h3>
      <p className="text-sm text-stone-400">Everything updates in real-time across all your devices.</p>
    </div>
  </div>
</section>

```

### Refined FAQ Accordions

Ultra-minimal. No heavy boxes, just elegant typography and razor-thin horizontal separators.

```tsx
<details className="group border-b border-white/5 py-6 w-full max-w-xl mx-auto">
  <summary className="flex justify-between items-center font-medium cursor-pointer list-none text-stone-50">
    How secure is the platform?
    <span className="transition group-open:rotate-45 text-stone-600">+</span>
  </summary>
  <p className="text-stone-400 text-sm mt-4 leading-relaxed">
    {/* Answer text */}
  </p>
</details>

```

---

## Quality Checklist

* [ ] Is the entire layout built around a strict centered composition (mobile-first stack)?
* [ ] Is the Citrus gradient (sky to lime to yellow) used *only* for highlights, text spans, or glowing effects behind mockups?
* [ ] Did you use warm off-white (`text-stone-50` / `#fafaf9`) instead of pure, harsh white for headlines?
* [ ] Are the hero headings set to Inter or Helvetica Neue at `text-4xl` with `tracking-tight`?
* [ ] Do all interactive containers have substantial rounding (pill-shaped buttons, heavily rounded cards)?
* [ ] Is the vertical rhythm "Framer-level"—meaning massive, distinct gaps (128px+) between stacked modules?
* [ ] Is the primary hero phone mockup positioned perfectly beneath the text stack, nested in its subtle glow?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Deep atmospheric background stacking (`bg-black` underlying `bg-zinc-950`).
* Massive vertical padding between centered modules.
* Thick backdrop blurs on navbars and sticky headers.
* Radial blurs (`blur-[100px]`) using the Citrus palette purely as a lighting effect.
* Low-contrast, 1px glass borders (`border-white/5`).

### ✗ Not Allowed

* Left-aligned desktop configurations (keep the center gravity).
* Using the Citrus gradient as a large, opaque background for sections or cards.
* Sharp, 90-degree corners on any cards, buttons, or inputs.
* Hard drop shadows on text or UI modules (use glows and borders for depth).
* Complex multi-column grid layouts that break the single-column reading rhythm.