Graphite iOS Glow Column

/graphiteIosGlowColumn
A sleek, dark-themed iOS-inspired design system for B2C products, featuring a focused central column, matte graphite backgrounds, warm off-whites, and radiant glow accents for immersive, premium web experiences.
0 likes
0 bookmarks
Jun 17, 2026
Design System Content
# Graphite iOS Glow Column Design System

A design language for sleek, dark-themed B2C interfaces that preserve the intimacy of mobile experiences on any canvas.

---

## Philosophy

> "Infinite canvas, singular focus."

This system creates a hyper-focused, vertically stacked journey that feels like a premium iOS application beautifully scaled for desktop. By heavily constraining layout widths and utilizing deep matte backgrounds, the design forces the user's attention down a central column of glass, light, and pristine product imagery.

### Core Beliefs

1. **The Mobile Column is Sacred** — Desktop layouts must never sprawl. Content exists in a beautifully proportioned central column, utilizing the vast dark desktop space to frame the experience rather than fill it.
2. **Atmosphere over Container** — Depth is created through charcoal glass and centralized light (the glow), not harsh borders or elevated drop shadows. 
3. **Warm Light in a Cold Room** — True white is harsh; warm off-white typography provides an inviting B2C contrast against the austere matte graphite environments.
4. **The Grid & The Glow** — Visual interest at the top of the funnel relies on an ultra-faint technical grid grounded by a concentrated, pulsating radial burst of cobalt or lavender.
5. **Rhythm through Alternation** — Lower sections maintain momentum through perfectly paced, alternating stacks of hardware (phone mockups) and concise interface (glass panels).

### Strict Rules

* **No Full-Width Content Sprawl** — Text lines must never span the full desktop width. Keep typography containers tight and centered.
* **No Hard White** — Pure `#FFFFFF` is forbidden for typography. Use warm off-whites.
* **No Sharp Corners** — Everything from CTA pills to glass panels and phone mockups must utilize smooth, iOS-style continuous curves (squirkles where possible).
* **Strict Center Alignment for Hero** — The top of the funnel must be perfectly symmetrical, drawing the eye straight down into the phone mockup.

---

## Color Palette

### Dark Matte & Glass Scale

The palette is built on deep, light-absorbing graphite and translucent charcoal layers, creating a sophisticated void for the content to live within.

```css
/* Backgrounds (Darkest to Lightest) */
bg-[#0A0A0A]          /* Absolute matte graphite base */
bg-[#121212]          /* Secondary sections, subtle contrast breaks */
bg-white/[0.02]       /* Base charcoal glass fill */
bg-white/[0.04]       /* Elevated charcoal glass, stacked cards */
bg-white/[0.08]       /* Hover states for glass panels */
bg-white/[0.12]       /* Active states, focused feature cards */

/* Borders (Low-Contrast) */
border-white/[0.04]   /* Ultra-subtle divider lines, grid lines */
border-white/[0.08]   /* Default glass panel borders */
border-white/[0.12]   /* Hover states, focused interactive boundaries */
border-white/[0.20]   /* Active borders, CTA rings */

/* The Core Light: Cobalt or Lavender (Accent & Glow) */
bg-indigo-500         /* Primary Cobalt CTA pills, active toggles */
text-indigo-400       /* Subtle text highlights, text links */
bg-violet-500         /* Alternative Lavender CTA pills */
text-violet-400       /* Alternative Lavender highlights */

/* Text Hierarchy (Warm Off-White to Muted Slate) */
text-[#F5F5F0]        /* Warm off-white: Hero titles, primary headings */
text-[#E8E8E3]        /* Warm off-white: Active states, highlighted stats */
text-slate-300        /* Muted slate: Standard body copy, subheadings */
text-slate-400        /* Muted slate: Feature descriptions, compact copy */
text-slate-500        /* Deep slate: Metadata, inactive FAQ states, placeholders */

```

---

## Typography

Typography relies strictly on Inter or Helvetica. The hierarchy is tight and controlled, peaking at text-4xl to maintain the scaled-mobile aesthetic even on desktop monitors.

### Font Weights

```css
font-normal      /* Core slate body copy, FAQ descriptions */
font-medium      /* Standard UI elements, buttons, feature card headers */
font-semibold    /* Hero text-4xl, primary section headers, active accordion titles */
/* font-light and font-black are generally avoided to maintain a punchy, legible mid-range */

```

### Font Size Scale

```css
text-[11px]      /* Tiny technical badges, floating UI hints */
text-xs          /* Compact feature tags, footer metadata (12px) */
text-sm          /* Standard slate copy, FAQ body, secondary UI (14px) */
text-base        /* Feature card titles, primary CTA pills (16px) */
text-lg          /* Concise subcopy below the hero, accordion titles (18px) */
text-xl          /* Small section headers inside alternating modules */
text-2xl         /* Standard section headers (centered) */
text-4xl         /* Hero headline (The absolute peak of the typographic scale) */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* Hero headline (text-4xl), large section headers */
tracking-normal  /* All body text, feature descriptions */
tracking-wide    /* Uppercase micro-labels, technical tags */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 4xl | semibold | text-[#F5F5F0] | tight | none |
| Hero Subcopy | lg | normal | text-slate-400 | normal | none |
| Panel Title | base | medium | text-[#E8E8E3] | normal | none |
| CTA Pills | base | medium | white | normal | none |
| Micro Tags | xs | medium | text-slate-500 | wide | uppercase |

---

## Animation System

### Core Philosophy: Fluid & Tactile

Elements don't bounce; they glide and illuminate. The interaction model should feel like pushing physical glass atop a high-refresh-rate screen.

### The Mobile Reveal (Scroll Up)

```tsx
initial={{ opacity: 0, y: 24, scale: 0.98 }}
whileInView={{ opacity: 1, y: 0, scale: 1 }}
viewport={{ once: true, margin: "-10%" }}
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}

```

### Radial Glow Pulse

The centralized cobalt/lavender glow gently breathes behind the technical grid, keeping the dark UI alive.

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

```

---

## UI Components

### The Hero Radial Glow

A strictly centered, tightly constrained background blur that sits behind the text-4xl hero. It does not bleed to the edges of the desktop.

```tsx
<div className="absolute left-1/2 top-1/4 -translate-x-1/2 -translate-y-1/2 w-[400px] h-[400px] bg-indigo-500/20 rounded-full blur-[80px] pointer-events-none" />

```

### Faint Technical Grid

An overlay mask providing structure to the dark matte background, restricted to the hero section to frame the initial layout.

```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:40px_40px] [mask-image:radial-gradient(ellipse_60%_60%_at_50%_0%,#000_70%,transparent_100%)]" />

```

### Charcoal Glass Panels

The primary housing for all lower-section content.

```tsx
className="bg-white/[0.02] border border-white/[0.04] backdrop-blur-md rounded-2xl p-6"

```

---

## Component Catalog

### Buttons (Rounded CTA Pills)

Fully pill-shaped (full border-radius) to contrast the structured glass panels.

```tsx
// Primary Cobalt Pill
"bg-indigo-500 text-white font-medium text-base rounded-full px-8 py-3 hover:bg-indigo-400 transition-colors shadow-[0_0_20px_rgba(99,102,241,0.2)]"

// Glass Secondary Pill
"bg-white/[0.04] border border-white/[0.08] text-[#F5F5F0] font-medium text-base rounded-full px-8 py-3 hover:bg-white/[0.08] transition-all"

```

### Layout Modules

```tsx
// Alternating Phone-and-Copy Module Container
"flex flex-col md:flex-row items-center gap-12 w-full max-w-4xl mx-auto even:md:flex-row-reverse"

// Pristine Phone Mockup Wrapper
"relative w-[280px] h-[580px] rounded-[48px] border-4 border-[#1A1A1A] bg-black shadow-2xl overflow-hidden ring-1 ring-white/[0.1] z-10"

```

### Compact Feature Cards

Used in bento-style grids within the central column.

```tsx
<div className="flex flex-col gap-3 bg-white/[0.02] border border-white/[0.04] rounded-2xl p-5 hover:bg-white/[0.04] transition-colors">
  <div className="h-10 w-10 rounded-full bg-white/[0.04] flex items-center justify-center text-indigo-400" />
  <h4 className="text-base font-medium text-[#E8E8E3]">Feature Title</h4>
  <p className="text-sm text-slate-400 leading-relaxed">Muted slate descriptive copy explaining the feature concisely.</p>
</div>

```

### Refined FAQ Accordions

Simple, borderless horizontal stacks that rely on typography color changes for state.

```tsx
// Accordion Container
"w-full max-w-2xl mx-auto divide-y divide-white/[0.04]"

// Accordion Row (Active vs Inactive)
"flex items-center justify-between py-5 text-left w-full group"
"text-lg font-medium transition-colors text-slate-400 group-hover:text-[#E8E8E3]"

```

---

## Quality Checklist

* [ ] Is the hero typography set to Inter or Helvetica, peaking at strictly `text-4xl`?
* [ ] Does the entire layout feel like a beautifully scaled mobile app, maintaining a max-width central column (e.g., `max-w-4xl`)?
* [ ] Are all backgrounds built on matte graphite (`#0A0A0A` or similar) with translucent charcoal glass panels?
* [ ] Is the hero glow compact, perfectly centered, and utilizing either cobalt or lavender?
* [ ] Are all primary action buttons perfectly rounded pills?
* [ ] Is the primary text color a warm off-white rather than a harsh pure white?
* [ ] Are lower sections utilizing alternating phone-and-copy modules within the central column?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Warm off-white (`#F5F5F0`) for major headings and active elements.
* Squirkle / heavily rounded borders for hardware mockups and glass panels.
* A single, compact radial glow in the absolute center of the hero.
* Muted slate (`text-slate-400`) for all multi-line descriptions and subcopy.
* Vertically stacked, centered linear flows.

### ✗ Not Allowed

* Edge-to-edge desktop spanning for text or standard UI elements.
* Pure black backgrounds (`#000000`) for anything other than the inner screen of the phone mockup.
* Heavy, opaque colored borders or high-contrast lines.
* Typography larger than `text-4xl` (breaks the mobile-scale illusion).
* Boxy, sharp-cornered CTA buttons.