No preview available
Graphite Grid App Centerline

/graphiteGridAppCenterline
A premium, dark, mobile-first design system centered on a conversion spine. It combines tactile depth, subtle grids, and warm ivory type to deliver elegant, high-conversion UIs without bright accents.
0 likes
0 bookmarks
Jun 17, 2026
Design System Content
# Graphite Grid App Centerline

A design language for premium, dark-themed, mobile-first interfaces focused on a perfectly centered conversion spine.

---

## Philosophy

> "Focus is achieved not through force, but through the flawless alignment of subtle details."

This system creates native-app warmth within a highly technical environment. It relies on absolute centerline gravity, driving the user’s eye straight down a pristine, narrow column. Instead of relying on loud colors to drive action, it utilizes tactile depth—rim-lights, inner sheens, and delicate bevels—against a pitch-dark graphite canvas to create a sophisticated, high-conversion atmosphere. 

### Core Beliefs

1. **Centerline Gravity** — The interface is built on a rigid central spine. Elements stack linearly and beautifully down the middle, respecting mobile-first constraints even on expansive desktop displays.
2. **Tactile Restraint** — Actions invite touch through physical dimension (soft inner sheen, micro-bevels, rim-lights) rather than screaming for attention with saturated accent colors.
3. **Subtle Technicality** — Faint architectural gridlines map the hero space, grounding the interface in technical precision without overwhelming the content.
4. **Framer-Level Spacing** — Margins and paddings are meticulously calculated. Lower sections remain narrow with stacked stories, utilizing compact vertical rhythms and generous internal breathing room.
5. **Polished Warmth** — Pure white is avoided in typography. We use warm ivory against deep graphite to reduce eye strain and inject premium, editorial elegance.

### Strict Rules

* **No Bright Accent Colors** — Primary actions must never rely on vibrant blues, greens, or reds. Distinction is created through light interaction (glow, sheen, border highlight).
* **Strictly Centered** — Avoid split columns or asymmetrical layouts in the primary flow. The visual weight must always sit exactly in the middle.
* **Rounded Interactivity** — Primary CTAs are always fully rounded (`rounded-full`) pill shapes to contrast with the rigid technical grid behind them.
* **No Flat Containers** — Panels and cards must possess an absolute minimum 1px subtle top-border highlight to establish spatial layering against the graphite void.
* **Constrained Widths** — The primary content area should never expand into massive widescreen formats; it must retain a narrow, mobile-like aspect ratio.

---

## Color Palette

### Monochromatic & Material Scale

The palette transitions from a near-black graphite canvas up to soft charcoal panels, with warm ivory headings acting as the primary source of illumination.

```css
/* Backgrounds (Darkest to Lightest) */
bg-[#0c0c0c]          /* Main graphite canvas background (Near-Black) */
bg-[#141414]          /* Deep base for pristine phone mockups */
bg-[#1a1a1a]          /* Soft charcoal panels, lower section cards */
bg-[#222222]          /* Elevated surfaces, hover states, frosted labels */
bg-[#2a2a2a]/80       /* Accordion headers, avatar chips */

/* Grids & Structural Boundaries */
border-white/[0.02]   /* Faint grid lines (hero only) */
border-white/[0.06]   /* Subtle card borders, dividers */
border-white/[0.12]   /* Hover outlines, focused structural elements */

/* Sheens & Rim-Lights (Replaces Accent Colors) */
shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]    /* Top rim-light for CTAs */
shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]   /* Top rim-light for cards */
bg-gradient-to-b from-white/[0.08] to-transparent /* Soft inner sheen for pills */

/* Typography Scale */
text-[#fcfbf9]        /* Warm ivory — Hero headings, primary conversions */
text-[#e6e4e0]        /* Soft ivory — Section headings, feature titles */
text-[#949699]        /* Muted slate — Body copy, descriptive text */
text-[#6b6d70]        /* Deep slate — Muted metadata, FAQ collapsed states */
text-[#47484b]        /* Ghost text — System hints, placeholders */

```

### Destructive Actions

```css
/* Restrained, desaturated warning states */
hover:bg-[#2a1616]
hover:text-[#e57373]
hover:border-[#e57373]/20
```

---

## Typography

The system relies exclusively on **Inter** or **Helvetica** to maintain a neutral, pristine form factor. Scale and warmth (Ivory) dictate hierarchy rather than heavy stylistic shifts.

### Font Weights

```css
font-normal      /* Hero copy, standard body text, FAQ content */
font-medium      /* Feature titles, CTA pills, frosted labels */
font-semibold    /* Compact icon cards, accordion active states */
/* Black or Ultra-Bold weights are forbidden to maintain the subtle aesthetic */
```

### Font Size Scale

```css
text-[11px]      /* Frosted tags, tiny avatar chip roles */
text-xs          /* Compact icon card metadata (12px) */
text-sm          /* Body copy, refined FAQ text, lower section stories (14px) */
text-base        /* Stacked feature titles, standard CTA pills (16px) */
text-lg          /* Subheadings beneath hero (18px) */
text-xl          /* Section breaks down the centerline */
text-4xl         /* Hero typography strictly centered (36px) */
```

### Letter Spacing & Transforms

```css
tracking-tight   /* text-4xl hero headings for cohesive blocks */
tracking-normal  /* All body copy and UI elements */
tracking-wide    /* Only used on text-[11px] internal system labels */

/* Transforms are rarely used; rely on sentence case for warmth */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- |
| Centered Hero | 4xl | medium | warm ivory | tight |
| CTA Pill | base | medium | ivory | normal |
| Slate Body | sm | normal | muted slate | normal |
| Feature Title | base | semibold | soft ivory | normal |
| Avatar Chip | xs | medium | muted slate | normal |

---

## Animation System

### Core Philosophy: Framer-Level Fluidity

Motion feels natively integrated into the OS—spring-based, physically grounded, and highly responsive to interaction, avoiding linear fades.

### Page Assembly (The Centerline Drop)

Elements enter by sliding slightly up the central spine, snapping into focus.

```tsx
initial={{ opacity: 0, y: 15, filter: 'blur(4px)' }}
animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
transition={{ type: "spring", bounce: 0, duration: 0.8, delayChildren: 0.1 }}
```

### Tactile Press (Button Interactions)

CTAs physically compress upon click, reflecting the native app warmth.

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

---

## UI Components

### The Hero Grid Canvas

Restricted strictly to the top of the viewport. It establishes technical precision before fading into the solid graphite lower spine.

```tsx
<div className="absolute inset-0 bg-[#0c0c0c] bg-[linear-gradient(to_right,rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:32px_32px] [mask-image:linear-gradient(to_bottom,black_20%,transparent_80%)]" />
```

### The Phone Mockup Wrapper

Sits directly beneath the Hero CTA. Pristine, borderless, elevated only by a perfectly calibrated ambient shadow.

```tsx
<div className="relative mx-auto max-w-[280px] rounded-[3rem] border-[6px] border-[#1a1a1a] bg-black shadow-[0_32px_64px_rgba(0,0,0,0.6)] overflow-hidden">
  {/* App Content */}
</div>
```

---

## Component Catalog

### Buttons & Pills

No flat colors. Every pill has a rim-light, a soft gradient inner sheen, and fully rounded corners.

```tsx
// Primary Conversion CTA (Graphite Pill)
"relative rounded-full bg-[#1a1a1a] px-6 py-3 text-base font-medium text-[#fcfbf9] shadow-[inset_0_1px_0_rgba(255,255,255,0.1),0_8px_16px_rgba(0,0,0,0.4)] border border-white/[0.05] before:absolute before:inset-0 before:rounded-full before:bg-gradient-to-b before:from-white/[0.08] before:to-transparent hover:before:opacity-70 transition-all"

// Frosted Secondary Label
"rounded-full bg-white/[0.04] px-4 py-1.5 text-xs font-medium text-[#949699] backdrop-blur-md border border-white/[0.04] hover:bg-white/[0.08] transition-colors"
```

### Soft Charcoal Panels & Feature Stories

Stacked linearly. Narrow container widths. Beautiful top-edge bevels.

```tsx
// Compact Icon Card
"flex items-center gap-4 rounded-2xl bg-[#141414] p-4 border border-white/[0.04] shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"

// Feature Story Block
"w-full max-w-md mx-auto rounded-3xl bg-[#141414] p-8 text-center border border-white/[0.02] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]"
```

### Avatar Chips & Accordions

```tsx
// Avatar Chip
"inline-flex items-center gap-2 rounded-full bg-[#1a1a1a] pr-4 pl-1 py-1 border border-white/[0.05] shadow-[inset_0_1px_0_rgba(255,255,255,0.02)]"

// Refined FAQ Accordion (Inactive)
"w-full max-w-md mx-auto border-b border-white/[0.06] py-4 flex justify-between items-center text-[#e6e4e0] text-sm"

// Refined FAQ Accordion Text
"mt-2 text-[#949699] text-sm leading-relaxed"
```

### Layout Constraints (The Centered Spine)

```tsx
// Master Container Wrapper
"flex flex-col items-center justify-start w-full min-h-screen bg-[#0c0c0c]"

// Lower Section Constraints
"w-full max-w-sm mx-auto flex flex-col gap-6 items-center"
```

---

## Quality Checklist

* [ ] Is the primary container strictly centered, avoiding wide multi-column splits?
* [ ] Does the hero text utilize Inter/Helvetica at exactly `text-4xl` with `tracking-tight`?
* [ ] Are all buttons shaped as `rounded-full` pills rather than square-edged blocks?
* [ ] Did you implement `shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]` to define button depth instead of using a solid hex background?
* [ ] Is the background grid constrained exclusively to the upper hero area?
* [ ] Are headings warm ivory (`text-[#fcfbf9]`) rather than harsh pure white (`#ffffff`)?
* [ ] Does the phone mockup sit directly below the centered hero CTA?
* [ ] Have all brightly colored accent buttons been replaced with graphite sheens and bevels?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Absolute centerline alignments for content layout.
* Subtle structural inset shadows (top edge highlights).
* Pitch-dark graphite backgrounds.
* Muted slate (`#949699`) for all secondary body copy.
* Framer Motion spring transitions for interaction states.
* Pristine, borderless phone mockups with heavy underlying drop shadows to separate from the background.

### ✗ Not Allowed

* Left-aligned hero sections or sprawling asymmetrical grids.
* Bright brand colors for conversion buttons (e.g., electric blue, neon green).
* Complete reliance on pure black (`#000000`) or pure white (`#FFFFFF`) for text.
* Sharp, unrounded square buttons.
* Full-page background patterns (grids must be contained/masked to the top).
* Large blocks of heavy, bold text (keep it elegant and medium-weight).