Cedar Night Glass Launch

/cedarNightGlassLaunch
A design system for immersive, dark-themed landing pages combining full-bleed nature imagery with frosted glass UIs, rounded elements, and oat-cream accents to create a calm, premium conversion experience.
0 likes
0 bookmarks
Jul 10, 2026
Design System Content
# Cedar Night Glass Launch Design System

A design language for polished, immersive, dark-themed landing pages that bridge digital interfaces with organic landscapes.

---

## Philosophy

> "Digital interfaces should not compete with nature; they should be framed by it."

This system creates a serene, premium landing page experience. It balances the vast, organic depth of full-viewport nature photography with the crisp, frosted precision of modern glass interfaces. The aesthetic is inherently dark, utilizing deep woodsy blacks and soft charcoals to create a calm, low-friction conversion hierarchy where oat-cream calls-to-action gently invite rather than aggressively demand.

### Core Beliefs

1. **Organic Immersion** — The environment sets the tone. Full-bleed nature imagery (forests, lakes, coastlines) grounds the digital product in physical reality.
2. **Calm Conversion** — Calls to action use warm, organic tones (oat-cream) and soft, fully rounded geometry to reduce psychological friction.
3. **Diffused Depth** — We rely on frosted glass panels and subtle dark overlays to create legibility over rich photography, avoiding opaque blocks that sever the visual environment.
4. **Typographic Softness** — Manrope provides geometric but approachable curves for primary reading, while Inter/DM Sans deliver razor-sharp precision for tiny technical labels and navigation.
5. **Quiet Terminals** — Footers and concluding sections retreat into deep charcoal, allowing the user to rest and reflect before making a final decision.

### Strict Rules

* **Fully Rounded Interactive Elements** — All buttons must utilize pill-shaped, fully rounded corners.
* **Dual-Type Hierarchy** — Manrope is exclusively for display and body. DM Sans or Inter is exclusively for UI, navigation, and supporting labels. 
* **Restrained Overlays** — Hero images must utilize a subtle, uniform dark wash. Vignettes or heavy localized gradients are forbidden.
* **Frosted, Not Flat** — Containers housing device mockups must utilize glassmorphism (background blur) rather than solid opaque colors to maintain environmental connection.
* **No Pure White or Pure Black** — Whites are porcelain; blacks are cedar. Absolute #000000 and #FFFFFF flatten the design and are not permitted.

---

## Color Palette

### The Forest & Glass Scale

The palette evokes a twilight landscape. It builds from a deep, warm cedar black up to frosted charcoals, highlighted by crisp porcelain text and an inviting, warm oat-cream accent.

```css
/* Backgrounds (Darkest to Lightest) */
bg-cedar-950          /* Core foundational background, deep woodsy black (#0f1110) */
bg-charcoal-900       /* Quiet footer backgrounds, alternate section bases (#161817) */
bg-charcoal-800       /* Pale-gray/charcoal feature panels, spacious FAQ cards (#1e211f) */
bg-charcoal-900/60    /* Frosted glass bases for device mockup containers */
bg-charcoal-800/40    /* Soft reusable section dividers and subtle hovering states */

/* Borders */
border-charcoal-700   /* Default soft borders for feature blocks and screenshots */
border-charcoal-600   /* Hover states on pale-gray panels */
border-smoke-500/20   /* Micro-borders for frosted glass cards */

/* The Organic Accent: Oat-Cream */
bg-oat-300            /* Primary call-to-action buttons (#f3eadd) */
text-oat-900          /* Text inside primary oat-cream CTAs */
bg-oat-200            /* Hover states for primary CTAs */
text-oat-300          /* Subtle text highlights or active navigation states */

/* Text Hierarchy */
text-porcelain-50     /* Primary hero headlines, active active icons (#f8f9f8) */
text-porcelain-100    /* Section headings, primary body copy */
text-smoke-300        /* Paragraph text, spacious FAQ answers (#a3a6a4) */
text-smoke-400        /* Navigation links, supporting labels, feature descriptions */
text-smoke-600        /* Muted metadata, footer links, quiet UI hints */

/* Overlays */
bg-cedar-950/40       /* Subtle dark overlay for full-bleed hero imagery */
```

### Destructive Actions (Muted)

```css
hover:bg-red-900/30
hover:text-red-300
hover:border-red-800/50
```

---

## Typography

The system contrasts the open, approachable geometry of **Manrope** against the mechanical precision of **DM Sans / Inter**. 

### Font Families

```css
font-manrope     /* Primary system: Hero headlines, section titles, paragraphs */
font-inter       /* Supporting system: Nav, small tags, micro-labels (or DM Sans) */
```

### Font Weights

```css
font-normal      /* 18px paragraphs, 13-14px nav, quiet text */
font-medium      /* Supporting labels, secondary buttons, active nav */
font-semibold    /* Hero headlines (42-48px), section headings (34-38px), primary CTAs */
```

### Exact Size Scale

```css
text-[13px]      /* Compact navigation links, micro-labels (Inter/DM Sans) */
text-[14px]      /* Active nav, small feature metadata (Inter/DM Sans) */
text-[16px]      /* Secondary UI text, standard button labels (Inter/DM Sans) */
text-[18px]      /* Core paragraph text, feature block descriptions (Manrope) */
text-[34px] md:text-[38px] /* Section headings, feature titles (Manrope) */
text-[42px] md:text-[48px] /* Hero headlines, primary landing page focus (Manrope) */
```

### Hierarchy Examples

| Element | Size | Font Family | Weight | Color |
| --- | --- | --- | --- | --- |
| Hero Headline | 42-48px | Manrope | semibold | porcelain-50 |
| Section Heading | 34-38px | Manrope | semibold | porcelain-100 |
| Paragraph Body | 18px | Manrope | normal | smoke-300 |
| Nav / Labels | 13-14px | Inter/DM Sans | normal | smoke-400 |
| Primary CTA | 16px | Inter/DM Sans | semibold | oat-900 |

---

## Animation System

### Core Philosophy: The Gentle Swell

Animations mirror elements in nature—fog rolling in, water settling. Movements are slow, deliberate, and utilize opacity and blur rather than aggressive spatial transforms.

### Hero Reveal (Overlay to Content)

```tsx
initial={{ opacity: 0, filter: 'blur(12px)', scale: 0.98 }}
animate={{ opacity: 1, filter: 'blur(0px)', scale: 1 }}
transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }}
```

### Frosted Card Hover (Luminance Shift)

Instead of moving elements, hovering deepens the backdrop blur and slightly brightens the border.

```tsx
whileHover={{ 
    backgroundColor: "rgba(30, 33, 31, 0.6)", 
    backdropFilter: "blur(16px)" 
}}
transition={{ duration: 0.4 }}
```

---

## UI Components

### Full-Viewport Nature Hero

The foundational anchor of the landing page. Must feature a centered app icon, a tightly constrained typography block, and a fully rounded CTA over a deep environmental image.

```tsx
<header className="relative w-full h-screen flex flex-col items-center justify-center">
  {/* Nature Background */}
  <img src="/lake-forest.jpg" className="absolute inset-0 object-cover w-full h-full" />
  
  {/* Subtle Dark Overlay */}
  <div className="absolute inset-0 bg-cedar-950/40 z-10" />
  
  {/* Compact Content */}
  <div className="relative z-20 flex flex-col items-center max-w-2xl text-center space-y-6">
    <AppIcon className="w-16 h-16 rounded-2xl shadow-2xl mb-4" />
    <h1 className="font-manrope font-semibold text-[42px] md:text-[48px] text-porcelain-50 leading-tight">
      Headline Goes Here
    </h1>
    <p className="font-manrope font-normal text-[18px] text-porcelain-100/90 max-w-md">
      Compact copy goes here.
    </p>
    <Button variant="primary">Get Started</Button>
  </div>
</header>
```

### Frosted Mockup Row

A centered row of device mockups embedded within glass containers to display the product without breaking the environmental aesthetic.

```tsx
<div className="flex justify-center gap-6 w-full max-w-5xl mx-auto z-30 -mt-24">
  <div className="bg-charcoal-900/60 backdrop-blur-md border border-smoke-500/20 rounded-3xl p-4 shadow-2xl">
    <DeviceMockup />
  </div>
</div>
```

### Soft Reusable Sections (Feature Blocks)

Image-right, text-left blocks utilizing pale-gray/charcoal panels and rounded screenshots.

```tsx
<section className="flex flex-col md:flex-row items-center gap-16 py-24 bg-cedar-950">
  <div className="flex-1 space-y-4">
    <h2 className="font-manrope font-semibold text-[34px] md:text-[38px] text-porcelain-100">
      Feature Title
    </h2>
    <p className="font-manrope text-[18px] text-smoke-300">
      Feature description text.
    </p>
  </div>
  <div className="flex-1 bg-charcoal-800 rounded-3xl p-2 border border-charcoal-700">
    <img src="/screenshot.png" className="rounded-[20px] w-full" />
  </div>
</section>
```

---

## Component Catalog

### Buttons

Always fully rounded.

```tsx
// Primary Conversion (Oat-Cream)
"bg-oat-300 text-oat-900 font-inter font-semibold text-[16px] rounded-full px-8 py-3.5 hover:bg-oat-200 transition-colors"

// Secondary Action (Glass/Ghost)
"bg-transparent text-porcelain-100 border border-charcoal-600 font-inter font-medium text-[16px] rounded-full px-8 py-3.5 hover:bg-charcoal-800 transition-colors"
```

### Navigation & Icons

Clean, spacious, unboxed.

```tsx
// Navigation Links
"font-inter text-[13px] md:text-[14px] text-smoke-400 hover:text-porcelain-100 transition-colors"

// Clean Icon Row Container
"flex items-center gap-8 text-smoke-500"
```

### Spacious FAQs

```tsx
// FAQ Accordion Card
"bg-charcoal-800/40 border border-charcoal-700/50 rounded-2xl p-6 transition-colors hover:bg-charcoal-800"

// FAQ Question
"font-manrope font-medium text-[18px] text-porcelain-100"
```

### Quiet Dark Footer CTA

```tsx
<footer className="w-full bg-charcoal-900 py-32 flex flex-col items-center text-center">
  <h2 className="font-manrope font-semibold text-[34px] md:text-[38px] text-porcelain-100 mb-8">
    Ready to begin?
  </h2>
  <Button variant="primary">Download Now</Button>
</footer>
```

---

## Quality Checklist

* [ ] Is the hero image a full-bleed nature photograph (forest, lake, hillside, coastal)?
* [ ] Is there a uniform `bg-cedar-950/40` subtle dark overlay on the hero?
* [ ] Is the app icon perfectly centered above the hero headline?
* [ ] Are the hero headline exactly 42-48px and section headings exactly 34-38px?
* [ ] Are all buttons strictly `rounded-full` (pill-shaped)?
* [ ] Do device mockups sit inside frosted (`backdrop-blur`) cards?
* [ ] Is the primary CTA color an oat-cream shade, avoiding hyper-saturated primary colors?
* [ ] Does the footer resolve into a quiet, dark charcoal space?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-resolution, moody nature photography.
* Frosted glass containers (`backdrop-blur-md` or `lg`).
* Soft, pale-gray/charcoal panels for alternating sections.
* Fully rounded buttons and rounded corners on all screenshots (`rounded-[20px]` or higher).
* Clean, unboxed icon rows.

### ✗ Not Allowed

* Solid opaque black (`#000000`) or white (`#FFFFFF`) backgrounds.
* Sharp corners (`rounded-none` or `rounded-sm`) on UI elements or screenshots.
* Vibrant, artificial accent colors (no neon blue, bright green, or electric purple).
* Heavy, opaque drop shadows (use soft, widespread shadows or borders to define depth).
* Complex, multi-column sprawling text blocks (keep copy compact).