Carbon Lime Glass Editorial Design System

/carbonLimeGlassEditorialDesignSystem
A dark, glassmorphic editorial design system featuring narrow vertical stacks, luminous blue-green-yellow accents, and elegant, restrained storytelling for premium digital landing experiences.
0 likes
0 bookmarks
Jun 16, 2026
Design System Content
# Carbon Lime Glass Editorial Design System

A design language for refined, dark-themed editorial landing interfaces where clean product storytelling meets subtle luminous freshness.

---

## Philosophy

> "Form emerges from shadow; restraint reveals elegance."

This system creates landing experiences that feel like flipping through a high-end, digitally-native magazine at midnight. It relies on a hyper-controlled dark palette of carbon and graphite, illuminated only by a whispered, iridescent blue-green-yellow glow. The architecture is intimately narrow, forcing the eye down a perfectly curated vertical stack. 

### Core Beliefs

1. **The Vertical Editorial Stack** — Wide grids dilute focus. Layouts are strictly center-aligned and compact, guiding the user through a linear narrative of oversized glass panels and alternating modules.
2. **Luminous Restraint** — The signature blue-green-yellow gradient is a scalpel, never a sledgehammer. It exists solely to suggest light—a rim glow, a transparent text highlight, or a soft aura breathing behind a device mockup. 
3. **Immaculate Framing** — Content is housed within oversized, heavily rounded glassmorphic panels separated by razor-fine dividers. 
4. **Muted Contrast** — True white is harsh; we use a spectrum of muted pearl and graphite to create comfortable, premium dark mode legibility.
5. **The Singular Hero** — The hero section is unapologetically compact: a frosted navbar, crisp 4xl heading, tightly grouped CTA pair, and exactly one immaculate device mockup.

### Strict Rules

* **No Wide Grids** — Content containers must remain narrow and focused (e.g., max 800px - 1000px).
* **No Gradient Blobs** — Soft ambient backgrounds are limited strictly to the immediate space behind the hero device mockup.
* **No Primary Background Colors** — Backgrounds are exclusively carbon black or smoked charcoal.
* **No Sharp Corners on Major Panels** — Oversized structural elements must utilize deep, smooth corner radii.
* **No Loud Iconography** — Icons must be wire-thin, monochromatic, or softly lit by the system's gradient.

---

## Color Palette

### Monochromatic Dark Scale

The foundation is built on deep, absorbing darks, stepping up to sleek graphites and finishing in soft pearl typography.

```css
/* Backgrounds (Darkest to Lightest) */
bg-carbon-950         /* Main canvas background (#050505) */
bg-carbon-900         /* Secondary panels, deep editorial layers (#0a0a0a) */
bg-charcoal-800/80    /* Oversized glass panels, primary containers (#161616) */
bg-charcoal-800/50    /* Frosted navbar base, subtle background shifts */
bg-graphite-700/60    /* Hover states for interactive glass cards (#242424) */
bg-graphite-700/40    /* Quiet proof chips, FAQ row backgrounds */
bg-graphite-600       /* Solid UI boundaries, pill backdrops */

/* Borders */
border-white/5        /* Razor-fine dividers, structural lines */
border-white/10       /* Default glass panel rims, elegant FAQ rows */
border-white/20       /* Hover states, focused structural boundaries */
border-white/30       /* Active highlights, prominent toggles */

/* Text Hierarchy (Muted Pearl Scale) */
text-pearl-100        /* Hero 4xl headings, active data points (#f4f4f5) */
text-pearl-200        /* Primary body, concise storytelling (#e4e4e7) */
text-pearl-400        /* Secondary text, elegant subheadings (#a1a1aa) */
text-pearl-500        /* Uppercase labels, inactive tabs, fine print (#71717a) */
text-pearl-600        /* Placeholder text, subtle system hints (#52525b) */

```

### The Luminous Accent (Blue-Green-Yellow Gradient)

Used with absolute extreme prejudice. It represents a source of light within the dark UI.

```css
/* Gradient Definitions */
bg-gradient-luminous  /* bg-gradient-to-tr from-sky-400 via-emerald-300 to-lime-200 */

/* Specific Applications */
text-transparent bg-clip-text bg-gradient-luminous  /* Crisp, targeted text highlights */
ring-1 ring-emerald-300/30                          /* CTA rim lighting */
shadow-[0_0_30px_rgba(52,211,153,0.15)]             /* Background aura behind device mockup */
text-emerald-300 drop-shadow-[0_0_8px_rgba(52,211,153,0.4)] /* Small icon glow */

```

### Destructive Actions (Deletions Only)

```css
hover:bg-rose-500/10
hover:text-rose-300
hover:border-rose-500/30

```

---

## Typography

Typography relies on Inter or Helvetica Neue for crisp, undeniable modernist legibility. The aesthetic is heavily driven by contrast in tracking and casing—pairing tight 4xl headers with ultra-tracked uppercase labels.

### Font Weights

```css
font-light       /* Minimalistic body copy blocks */
font-normal      /* Core UI text, feature card descriptions */
font-medium      /* 4xl Hero headings - crisp, commanding, not overly heavy */
font-semibold    /* Rounded CTA text, compact feature titles */
font-bold        /* FORBIDDEN in this system. Use font-medium and contrast instead. */

```

### Font Size Scale

```css
text-[10px]      /* Quiet proof chips, timestamp metadata */
text-xs          /* Uppercase editorial labels, compact feature footnotes (12px) */
text-sm          /* Standard FAQ text, elegant form inputs (14px) */
text-base        /* Standard descriptive paragraphs, concise storytelling (16px) */
text-lg          /* Alternating phone module subheadings (18px) */
text-xl          /* Standard section headers within the editorial stack */
text-2xl         /* Highlighted pull-quotes, numeric stats */
text-4xl         /* Hero headings ONLY (max size for the system) */

```

### Letter Spacing & Transforms

```css
tracking-tighter /* 4xl Hero headings (creates density) */
tracking-tight   /* Standard section headers */
tracking-normal  /* Main concise storytelling copy */
tracking-wide    /* Navigational elements within the frosted navbar */
tracking-widest  /* Uppercase editorial labels, fine dividers text */

uppercase        /* Uppercase labels, small technical callouts, section tags */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Heading | 4xl | medium | pearl-100 | tighter | none |
| Editorial Labels | xs | normal | pearl-500 | widest | uppercase |
| Storytelling Text| base | light | pearl-200 | normal | none |
| Rounded CTAs | sm | semibold| pearl-100 | normal | none |
| Quiet Proof Chips| [10px]| normal | pearl-400 | wide | uppercase |

---

## Animation System

### Core Philosophy: The Cinematic Reveal

Elements fade up from the shadows smoothly. Hover states feel like passing a subtle light source over dark glass.

### Page Transitions (Upward Materialization)

```tsx
initial={{ opacity: 0, y: 20, filter: 'brightness(0.5)' }}
animate={{ opacity: 1, y: 0, filter: 'brightness(1)' }}
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}

```

### Micro-Interactions (The Luminous Rim Hover)

When interacting with a glass panel or CTA, the border softly illuminates, mimicking a rim-light catching the edge of a physical object.

```tsx
whileHover={{ 
  boxShadow: "inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 0 15px 0 rgba(52, 211, 153, 0.15)",
  borderColor: "rgba(255,255,255,0.2)"
}}
transition={{ duration: 0.2, ease: "easeOut" }}

```

---

## UI Components

### Frosted Navbar

Sits compactly at the top of the stack. Ultra-blurred, tightly padded, heavily rounded.

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

```

### Device Background Aura

The single allowed use of a large gradient. Placed directly behind the pristine phone mockup, heavily blurred and low opacity.

```tsx
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[300px] h-[500px] bg-gradient-luminous rounded-full opacity-15 blur-[80px] -z-10" />

```

### Fine Dividers

Razor-thin lines used to break up the vertical stack, often accompanied by an uppercase label perfectly centered.

```tsx
<div className="flex items-center w-full max-w-3xl my-16">
  <div className="flex-1 h-[1px] bg-white/5" />
  <span className="px-4 text-xs tracking-widest uppercase text-pearl-500">Architecture</span>
  <div className="flex-1 h-[1px] bg-white/5" />
</div>

```

---

## Component Catalog

### Oversized Glass Panels (Cards)

Massive corner radii, dark frosted backgrounds, meant to stretch across the narrow central column.

```tsx
// Primary Editorial Panel
"w-full max-w-3xl bg-charcoal-800/60 backdrop-blur-sm border border-white/5 rounded-[32px] p-10 flex flex-col items-center text-center transition-colors hover:border-white/10"

// Compact Feature Card (Inside a grid of 2)
"bg-graphite-700/30 border border-white/5 rounded-2xl p-6 hover:bg-graphite-700/50 transition-all duration-300"

```

### Buttons (Rounded CTA Pair)

Always clustered tightly in the center of the hero. Heavily rounded.

```tsx
// Primary CTA (Luminous Rim Light)
"relative bg-charcoal-900 text-pearl-100 font-semibold text-sm rounded-full px-6 py-3 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] ring-1 ring-emerald-300/30 hover:ring-emerald-300/60 hover:shadow-[0_0_15px_rgba(52,211,153,0.2)] transition-all"

// Secondary CTA (Quiet Glass)
"bg-white/5 border border-white/10 text-pearl-200 font-semibold text-sm rounded-full px-6 py-3 hover:bg-white/10 transition-all"

```

### Quiet Proof Chips

Micro-components used below buttons or headers to establish trust without shouting.

```tsx
// Social/Proof Chip
"inline-flex items-center gap-2 px-3 py-1 rounded-full bg-graphite-700/40 border border-white/5 text-[10px] uppercase tracking-wide text-pearl-400"

```

### Elegant FAQ Rows

Minimalist, expandable rows that sit flush against each other, separated only by a 1px line.

```tsx
// FAQ Row Wrapper
"w-full border-b border-white/5 py-5 flex justify-between items-center group cursor-pointer hover:bg-white/[0.02] px-4 -mx-4 rounded-xl transition-colors"

// FAQ Question Text
"text-sm font-normal text-pearl-200 group-hover:text-pearl-100 transition-colors"

```

---

## Quality Checklist

* [ ] Is the primary hero heading exactly `text-4xl`, `font-medium`, and centered?
* [ ] Does the page read strictly as a narrow, vertically stacked editorial column?
* [ ] Is the blue-green-yellow gradient restricted entirely to rim-lights, text clips, small icon glows, or the singular device aura?
* [ ] Are all structural containers (glass panels) utilizing large radii (`rounded-2xl` to `rounded-[32px]`)?
* [ ] Did you use muted pearls (`text-neutral-200` equivalents) instead of stark pure whites for body copy?
* [ ] Is there exactly one immaculate phone mockup positioned directly below the hero CTA pair?
* [ ] Are fine dividers (`bg-white/5`) used to delineate vertical sections?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Deep carbon and charcoal backgrounds.
* Glassmorphism on navigation and major layout panels.
* A single, soft, heavily blurred background aura behind the primary device mockup.
* Wire-thin monochromatic or subtly glowing icons.
* Razor-fine hairline borders to establish depth and structure.
* Muted, low-contrast text for secondary elements.

### ✗ Not Allowed

* Wide, sprawling horizontal layouts or dense desktop multi-column grids.
* Pure white (`#ffffff`) as a background color, or large blocks of pure white text.
* Saturated, opaque background gradients (no "blob" backgrounds floating around the text).
* Sharp corners (`rounded-none` or `rounded-sm`) on large structural cards.
* Large drop shadows (depth is achieved via borders and subtle frosted backgrounds).