Graphite Halo App Classic

/graphiteHaloAppClassic
A dark, product-focused design system featuring single-column layouts, luminous halo accents, glassmorphic capsules, and mobile-first precision to deliver a mature, high-converting, and cinematic user experience.
0 likes
0 bookmarks
Jun 17, 2026
Design System Content
# Graphite Halo App Classic Design System

A design language for high-converting, product-centered dark interfaces characterized by maturity, narrow focus, and luminous anchoring.

---

## Philosophy

> "The interface is the theater; the product is the light."

This system rejects the sprawling, chaotic nature of modern dashboard aesthetics. Instead, it relies on a highly controlled, linear, mobile-first narrative that forces absolute focus on the product. By utilizing deep graphite tones, centered narrow containers, and a single luminous halo, the design achieves a classic, high-end conversion aesthetic that feels both mature and cinematic.

### Core Beliefs

1. **Linear Focus Over Lateral Complexity** — A strictly single-column, narrow, centered flow prevents cognitive overload. Sprawling "bento box" grids are forbidden. 
2. **The Luminous Anchor** — The hero phone mockup is the undeniable center of gravity, elevated by a singular, radiant halo of color against an otherwise monochromatic matte canvas.
3. **Stacked Glass** — Depth is achieved through vertically stacked, semi-transparent capsules (glassmorphism) layered over deep smoked graphite, never through heavy opaque blocks.
4. **Pearl and Shadow** — High contrast is achieved through "pearl" typography glowing against a matte black foundation, establishing a premium, nocturnal aesthetic.
5. **Mobile-First Infallibility** — The desktop experience is simply a beautifully framed mobile experience. Content remains tightly constrained to the center of the viewport.

### Strict Rules

* **No Sprawling Bentos** — Grid layouts are strictly limited to compact, internal feature cards within a single vertical column.
* **One True Anchor** — The hero section must feature exactly one centrally placed phone mockup directly below the primary headline and CTA pair.
* **Narrow Containers Only** — Maximum structural width for copy and primary capsules is locked (`max-w-2xl`), leaving vast negative space on desktop viewports.
* **Inter or Helvetica Only** — Typography must remain neo-grotesque and strictly neutral.
* **Single Halo Color** — Choose one jewel tone (Cobalt, Indigo, or Amethyst). This is the only color allowed in the entire system.

---

## Color Palette

### The Graphite & Pearl Scale

The foundation is built on deep, light-absorbing darks, stepping up to translucent glass layers, and culminating in crisp, pearl-white typography.

```css
/* Backgrounds (Darkest to Lightest) */
bg-black              /* The infinite matte canvas (#000000) */
bg-zinc-950           /* Smoked graphite, secondary structural backgrounds */
bg-zinc-900           /* Slate gray, opaque container base */
bg-white/5            /* Default glass capsule layer */
bg-white/10           /* Hover state for glass capsules */
bg-white/15           /* Active or pressed glass state */

/* Soft Borders */
border-white/5        /* Barely-there structural dividers */
border-white/10       /* Default soft capsule boundaries */
border-white/20       /* Hover states, focused input borders */

/* The Halo (Accent: Cobalt, Indigo, or Amethyst) */
/* *Using Indigo as the standard representation* */
bg-indigo-500         /* Primary rounded CTA, active toggle states */
text-indigo-400       /* Text links, tiny active system labels */
border-indigo-500     /* Active input rings */
bg-indigo-500/20      /* The luminous radial blur behind the hero phone */
shadow-indigo-500/30  /* Subtle drop-glow for primary actions */

/* Pearl Typography Hierarchy */
text-zinc-50          /* Pearl white: Hero text-4xl, primary headings */
text-zinc-300         /* Standard body copy, concise descriptions */
text-zinc-400         /* Slate text: Secondary captions, FAQ inactive states */
text-zinc-600         /* Muted metadata, placeholder text */
```

### Destructive Actions (Deletions Only)

```css
bg-red-900/30
text-red-400
border-red-500/20
```

---

## Typography

Strictly neutral, neo-grotesque (Inter or Helvetica). The typographic scale is highly compressed—avoiding massive display fonts in favor of a measured, mature `text-4xl` maximum to keep the hero compact.

### Font Weights

```css
font-normal      /* Standard body copy, concise descriptions */
font-medium      /* Buttons, navigation links, FAQ triggers */
font-semibold    /* Hero headlines (text-4xl), capsule titles, tiny system labels */
/* font-light and font-black are excluded to maintain mature solidity */
```

### Font Size Scale

```css
text-[10px]      /* Tiny system labels, overline tags */
text-xs          /* Metadata, footer links, small capsule details (12px) */
text-sm          /* Concise feature descriptions, secondary buttons (14px) */
text-base        /* Core body text, accordion FAQ titles, primary CTA (16px) */
text-lg          /* Subheadings, emphasis intro text (18px) */
text-xl          /* Glass capsule headers (20px) */
text-2xl         /* Section transition titles */
text-4xl         /* Mandatory Hero Headline size — compact, centered, semibold */
```

### Letter Spacing & Transforms

```css
tracking-tight   /* text-4xl headlines to bind words tightly */
tracking-normal  /* All body copy and UI elements */
tracking-widest  /* Tiny system labels */

uppercase        /* Strictly for text-[10px] system labels and tags */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 4xl | semibold | zinc-50 | tight | none |
| Hero Description | base | normal | zinc-300 | normal | none |
| System Label | [10px] | semibold | indigo-400 | widest | uppercase |
| Capsule Title | xl | semibold | zinc-50 | normal | none |
| FAQ Item | base | medium | zinc-300 | normal | none |

---

## Animation System

### Core Philosophy: Luminous Diffusion & Glide

Motion should feel like sliding physical glass over velvet, accompanied by the slow pulsing of light.

### The Halo Pulse

The radial gradient behind the hero phone mockup uses a slow, continuous opacity and scale pulse to simulate a breathing light source.

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

### Capsule Reveal (Slide & Fade)

Content inside the single-column scroll transitions vertically with a tight spring.

```tsx
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ type: "spring", damping: 25, stiffness: 200 }}
```

---

## UI Components

### The Luminous Hero Anchor

The core element of the system. A tightly stacked layout ensuring the phone mockup sits above the fold.

```tsx
<div className="flex flex-col items-center text-center max-w-2xl mx-auto pt-24 pb-12 relative">
  {/* The Halo */}
  <div className="absolute top-[60%] left-1/2 -translate-x-1/2 w-[300px] h-[300px] bg-indigo-500/30 blur-[100px] rounded-full pointer-events-none" />
  
  <h1 className="text-4xl font-semibold text-zinc-50 tracking-tight mb-4">Headline</h1>
  <p className="text-base text-zinc-300 mb-8 max-w-md">Concise description.</p>
  
  {/* Rounded CTA Pair */}
  <div className="flex items-center gap-4 mb-16">
    <button className="bg-indigo-500 text-zinc-50 px-6 py-3 rounded-full font-medium shadow-[0_0_15px_rgba(99,102,241,0.3)] hover:bg-indigo-400 transition-colors" />
    <button className="bg-white/5 border border-white/10 text-zinc-50 px-6 py-3 rounded-full font-medium hover:bg-white/10 transition-colors" />
  </div>

  {/* Phone Mockup Anchor */}
  <img src="/phone.png" className="w-[280px] z-10 relative drop-shadow-2xl" />
</div>
```

### Frosted Navbar

Compact, sticky, pill-shaped, and centered at the top of the viewport.

```tsx
"fixed top-4 left-1/2 -translate-x-1/2 w-[calc(100%-2rem)] max-w-2xl h-14 bg-zinc-950/80 backdrop-blur-md border border-white/10 rounded-full px-6 flex items-center justify-between z-50"
```

### Stacked Glass Capsules

Used for the body sections. Alternating device-and-copy panels contained entirely within the central column limit.

```tsx
"w-full bg-white/5 border border-white/10 rounded-3xl p-8 flex flex-col md:flex-row items-center gap-8 backdrop-blur-sm"
```

---

## Component Catalog

### Compact Feature Grid Cards

Contained *inside* a parent glass capsule. Highly minimal.

```tsx
"bg-white/5 border border-white/5 rounded-2xl p-5 hover:bg-white/10 transition-colors"
```

### Tiny System Labels

Used above section headers to establish technical precision.

```tsx
"text-[10px] font-semibold text-indigo-400 uppercase tracking-widest px-2 py-1 bg-indigo-500/10 rounded-full border border-indigo-500/20"
```

### Clean Accordion FAQs

Line-separated, no background boxes, pure typographic hierarchy.

```tsx
// FAQ Container
"divide-y divide-white/10 border-y border-white/10 w-full"

// FAQ Trigger
"w-full py-5 flex items-center justify-between text-left text-base font-medium text-zinc-50 hover:text-indigo-400 transition-colors"

// FAQ Body
"pb-5 text-sm text-zinc-400 leading-relaxed"
```

---

## Quality Checklist

* [ ] Is the main container strictly narrow (`max-w-2xl` or similar), forcing vast matte black space on the sides of desktop monitors?
* [ ] Is there exactly *one* halo color (Cobalt, Indigo, or Amethyst) radiating from behind the single hero phone mockup?
* [ ] Is the hero headline sized precisely at `text-4xl` and centered?
* [ ] Are the primary buttons fully rounded (`rounded-full`) and paired (one filled accent, one glass)?
* [ ] Is every piece of body content wrapped in soft-bordered (`border-white/10`) stacked glass capsules?
* [ ] Are system labels properly formatted as `text-[10px]` uppercase?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Deep matte black (`bg-black`) and smoked graphite backgrounds.
* High-intensity, saturated jewel tones for the single halo and primary CTA.
* Centered, single-column layouts that feel like a mobile app natively ported to desktop.
* Soft glassmorphism (`bg-white/5` with backdrop blur).
* Neatly stacked vertical sections.

### ✗ Not Allowed

* Asymmetrical or sprawling desktop grids ("bento boxes").
* Multiple device mockups scattered across the hero section (only one central anchor allowed).
* Huge, screen-filling typography larger than `4xl`.
* Hard white borders or high-opacity gray blocks.
* Multi-color gradient backgrounds (the matte black canvas must remain pure).