Ivory Carbon Device Showcase

/ivoryCarbonDeviceShowcase
A sophisticated, dark-themed design system focused on product showcase. It uses high-contrast palettes, glass effects, precise grids, and strict typography for immersive, distraction-free device presentations.
0 likes
0 bookmarks
Jul 10, 2026
Design System Content
# Ivory Carbon Device Showcase

A cleaner, more product-focused dark aesthetic built for fast, world-class presentation and precise device framing.

---

## Philosophy

> "The interface is the gallery; the product is the art."

This system creates hyper-focused, presentation-grade environments that rely on minimal ornament and meticulous Framer-level spacing. It eschews bright, distracting accents in favor of a restrained, high-contrast dark palette. The architecture is built around device mockups and pure product representation, utilizing glass materials, faint inner borders, and sweeping full-bleed photography.

### Core Beliefs

1. **Framer-Level Precision** — Spacing is mathematical and symmetrical. Margins and paddings are strictly enforced to create an unshakeable grid.
2. **Restrained Focus** — We do not use bright accent colors. Prominence is achieved through high-contrast luminosity, specifically using a distinctive dark-ivory treatment against carbon black.
3. **Depth through Glass & Light** — Heavy shadows are replaced by faint inner strokes, soft frosted blurs, and glass-like paneling to create subtle layering.
4. **Cinematic Hero Framing** — The top of the funnel is always immersive: full-bleed photographic backdrops, centered iconography, and perfectly constrained typography.

### Strict Rules

* **No Bright Accents** — Blue, green, red, or purple accents are completely forbidden in the core UI.
* **Controlled Scale** — Typography must adhere strictly to the defined pixel scale. No improvising font sizes.
* **Fully Rounded Interactive Elements** — All primary action buttons must be fully rounded (pill-shaped). No sharp corners on CTAs.
* **Consistent Cropping** — Device mockups and screenshots must share identical border radii, cropping ratios, and alignment grids.
* **No Opaque Overlays** — Navigation and floating elements must utilize frosted glass (`backdrop-blur`) to integrate with the environment.

---

## Color Palette

### The Carbon & Ivory Scale

The palette is incredibly restrained. The foundational layers are built from carbon black and deep graphite, elevated by smoke gray surfaces. Text and high-visibility components utilize pale cement and ivory white. The primary call-to-action uses a signature dark-ivory.

```css
/* Core Backgrounds (Darkest to Lightest) */
bg-carbon-950         /* Absolute background canvas (#0a0a0a) */
bg-graphite-900       /* Secondary containers, footer base (#121212) */
bg-smoke-800          /* Elevated cards, charcoal buttons (#1c1c1c) */
bg-smoke-700/50       /* Interactive hover states on dark surfaces */

/* Feature Panels (The Alternating Light Touch) */
bg-ivory-50           /* Soft near-white panels for alternating feature sections */
bg-ivory-100          /* Secondary highlights within near-white panels */

/* Structure & Borders */
border-white/5        /* Faint inner strokes for glass cards */
border-white/10       /* Low-contrast dividers and structural lines */
border-graphite-800   /* Dark structural dividers in footer */

/* The Primary Accent: Dark-Ivory */
bg-dark-ivory         /* Distinctive CTA treatment (#d4d0c8) */
text-dark-ivory       /* Active text highlights, minimalist icons */
border-dark-ivory     /* Focused interactive states */

/* Text Hierarchy */
text-ivory-white      /* Hero headlines, primary feature headings (#fbfbfb) */
text-cement-300       /* Supporting copy, paragraph text (#a3a3a3) */
text-cement-500       /* Navigation links, metadata, disabled text (#737373) */
text-carbon-950       /* Text strictly used ON near-white feature panels or Ivory CTAs */

```

### Destructive Actions

```css
hover:bg-graphite-900
hover:text-cement-300
/* Destructive actions simply fade/recede rather than turning red */

```

---

## Typography

Typography is exclusively Helvetica Now, Inter, or Manrope. The scale is rigidly controlled to ensure world-class presentation without bloated or chaotic sizing.

### Font Weights

```css
font-medium      /* Primary structural weight for headings and navigation */
font-normal      /* Supporting copy and concise paragraphs */
font-semibold    /* Strictly for small device metadata or CTA buttons */
/* font-black / font-thin are forbidden to maintain a unified product feel */

```

### Strict Font Size Scale

```css
text-[13px]      /* Navigation links, footer links (13-14px range) */
text-[14px]      /* Micro-copy, secondary button labels */
text-[18px]      /* Concise paragraph text */
text-[20px]      /* Supporting copy for feature headings */
text-[34px]      /* Secondary feature headings */
text-[38px]      /* Primary feature headings */
text-[42px]      /* Compact hero headline (mobile/tablet) */
text-[48px]      /* Centered hero headline (desktop maximum) */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* Exclusively for 34px - 48px headings */
tracking-normal  /* Supporting copy, buttons, and paragraphs */
tracking-wide    /* Minimal utility for sub-navigation */

```

### Hierarchy Examples

| Element | Size Range | Weight | Color | Tracking | Alignment |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 42–48px | medium | ivory-white | tight | center |
| Feature Heading | 34–38px | medium | ivory-white / carbon-950 | tight | left/center |
| Supporting Copy | 18–20px | normal | cement-300 | normal | center/left |
| Navigation | 13–14px | medium | cement-500 | normal | inline |
| Footer CTA | 34-38px | medium | ivory-white | tight | center |

---

## Animation System

### Core Philosophy: Snappy & Spatial

Animations should mimic high-end presentation software (like Framer or Keynote). Elements snap into place with precision; nothing floats aimlessly or feels sluggish.

### Glass Card Reveal (Scroll Triggered)

Mockups and symmetrical grids scale up slightly while their frosted properties materialize.

```tsx
initial={{ opacity: 0, scale: 0.98, filter: 'blur(4px)' }}
whileInView={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}
transition={{ type: 'spring', damping: 24, stiffness: 200 }}

```

### Navigation Hover (Subtle Snap)

```tsx
whileHover={{ color: '#fbfbfb' }}
transition={{ duration: 0.15, ease: 'easeOut' }}

```

---

## UI Components

### Slim Frosted Navigation

Sits seamlessly atop the full-bleed photographic backdrop. 

```tsx
<nav className="fixed top-0 w-full h-14 bg-carbon-950/40 backdrop-blur-md border-b border-white/5 flex items-center justify-between px-6 z-50">
  {/* Centered Icon logic goes here */}
</nav>

```

### Faint Inner Stroke (Glass Cards)

Used for symmetrical grid device mockups to define edges without dropping shadows into the carbon background.

```tsx
className="relative bg-graphite-900/50 backdrop-blur-sm rounded-2xl overflow-hidden shadow-[inset_0_1px_0_0_rgba(255,255,255,0.05),inset_0_0_0_1px_rgba(255,255,255,0.02)]"

```

### Device Mockup Container

Ensures consistent screenshot cropping and perfectly rounded imagery within the presentation.

```tsx
<div className="p-2 bg-smoke-800 rounded-[2rem] border border-white/5 shadow-2xl">
  <img src={screenshot} className="w-full h-auto rounded-[1.75rem] overflow-hidden" />
</div>

```

---

## Component Catalog

### Buttons

Buttons avoid harsh corners entirely, utilizing fully rounded, pill-shaped geometry.

```tsx
// The Dark-Ivory CTA
"bg-dark-ivory text-carbon-950 font-semibold text-[14px] rounded-full px-6 py-3 hover:opacity-90 transition-opacity"

// Fully Rounded Charcoal Button (Secondary)
"bg-smoke-800 text-ivory-white font-medium text-[14px] rounded-full px-6 py-3 border border-white/5 hover:bg-smoke-700 transition-colors"

```

### Hero Section Elements

```tsx
// Full-Bleed Backdrop Wrapper
"relative w-full min-h-[90vh] bg-carbon-950 flex flex-col items-center justify-center overflow-hidden"

// Photographic Overlay Mask
"absolute inset-0 bg-[url('/hero-bg.jpg')] bg-cover bg-center opacity-40 mix-blend-luminosity mask-image:linear-gradient(to_bottom,black,transparent)"

// Centered Hero Content Block
"relative z-10 flex flex-col items-center text-center max-w-2xl px-6"

```

### Feature Sections (Alternating)

Transitions from carbon black to soft near-white panels to create rhythm in the presentation.

```tsx
// Dark Feature Section
"w-full py-24 bg-carbon-950 text-ivory-white flex flex-col items-center"

// Soft Near-White Panel Section
"w-full py-24 bg-ivory-50 text-carbon-950 rounded-t-[3rem] shadow-[0_-8px_30px_rgba(0,0,0,0.12)]"

```

### Elegant Icon Rows

Minimalist, symmetrical alignment for feature sets.

```tsx
<div className="flex items-center justify-center gap-12 py-8 border-y border-white/10">
  {/* Icons use text-cement-500 and transition to text-ivory-white on hover */}
</div>

```

---

## Quality Checklist

* [ ] Is the hero headline strictly between 42px and 48px, centered above a concise paragraph?
* [ ] Do all primary buttons feature a fully rounded (pill) border radius?
* [ ] Is the main CTA rendered in the restrained `dark-ivory` tone rather than a bright accent color?
* [ ] Are all drop shadows replaced with `shadow-inset` faint white borders for glass cards?
* [ ] Do alternating feature sections utilize the `near-white` panels for stark, elegant contrast?
* [ ] Is the navigation bar slim (e.g., 56px height) with a frosted glass background?
* [ ] Are device mockups presented in a perfectly symmetrical grid with consistent corner radii?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-contrast monochrome palettes (carbon black to ivory white).
* Faint inner strokes (`border-white/5`) to separate overlapping dark elements.
* Symmetrical grids and perfectly centered hero compositions.
* Soft near-white background panels to break up long scrolling dark sections.
* Slim, frosted (`backdrop-blur`) navigation bars and glass cards.

### ✗ Not Allowed

* Bright primary or secondary accent colors (no blue, red, green, etc.).
* Square or slightly-rounded buttons (must be fully rounded/pill-shaped).
* Typographic scales outside the strict 13px - 48px defined ranges.
* Left-aligned hero sections (hero must be perfectly centered).
* Muddy drop shadows on dark backgrounds.