OpenCD

A lightweight HTML/CSS framework built on Open Props
Physical CD jewel case dimensions · Leaflet-style page navigation · Visible grid aesthetic · Trentuna-inspired design

OpenCD turns your website into a digital CD jewel case and booklet. Every dimension is derived from physical CD packaging — the disc diameter, jewel case footprint, leaflet square. Built for catalogs, artist projects, zines, indie digital releases, and anyone who misses tangible-feeling web experiences.

┌─────────────────────────────┐
│        ╔═════════════╗      │
│        ║   ○ OpenCD  ║      │
│        ║   ────────  ║      │
│        ║   ◉ ◉ ◉ ◉  ║      │
│        ╚═════════════╝      │
│  ─── TRACKLIST ───────────  │
│  01. jewel-case.html        │
│  02. back-tray.html         │
│  03. leaflet-booklet.html   │
└─────────────────────────────┘

---

Philosophy

OpenCD respects physical media constraints in the digital world. Every dimension, ratio, and detail is intentional:

• CD jewel case as document wrapper (real ratio: 142×125 mm → scaled 280×245 px)
• Leaflet booklet as page content (real: 120×120 mm → 240 px)
• Visible grid like CD tray paper — the structure is the decoration
• Spine as navigation — top bar that reads like a CD spine label
• Human Advisory badge — borrowed from Parental Advisory, repurposed for content warnings

Made with love for beautiful, honest, tangible-feel web experiences.
License: MIT
Built with: Open Props v2+

---

Quick Start

<link rel="stylesheet" href="https://unpkg.com/opencd@latest/opencd.css">

<main class="cd-jewel-case">
  <nav class="cd-spine">
    <span class="spine-label">OPENCD · TRENTUNA RELEASE</span>
    <span class="spine-track">01 · jewel-case</span>
  </nav>

  <section class="leaflet-content">
    <h1>Your Content Here</h1>
    <p>This is the inner booklet area with visible CD tray grid.</p>
  </section>

  <aside class="human-advisory">
    <span class="advisory-label">HUMAN MADE</span>
    <span class="advisory-text">designed with physical care</span>
  </aside>
</main>

---

Semantic HTML Structure

OpenCD follows the same semantic-HTML approach as the ASW system (~/releases/asw/). The framework is a skin on top of semantic markup — you can wrap any well-structured HTML in OpenCD classes and it becomes a CD jewel case:

<!-- Pure semantic structure -->
<article class="cd-jewel-case">
  <header class="cd-spine" role="navigation">
    <h2 class="spine-label">OPENCD · ALBUM TITLE</h2>
  </header>

  <main class="leaflet-content">
    <article><!-- your content --></article>
  </main>

  <footer class="back-tray">
    <section class="tray-credits">
      <!-- credits / tracklist -->
    </section>
  </footer>
</article>

---

CD / Jewel Case Specifications

Component	Real Size	Scaled (2×)	Open Props Variable
CD Disc	Ø 120 mm	240 px	--cd-disc-diameter
Jewel Case (front)	142 × 125 mm	280 × 245 px	--cd-jewel-width/height
CD Leaflet / Booklet	120 × 120 mm	240 px	--cd-leaflet-size
Jewel Case (open width)	284 × 125 mm	560 × 245 px	--cd-jewel-open-width
CD Tray paper	~150 × 118 mm	flexible	—
Spine width	~7 mm	14 px	--cd-spine-width

Open Props Variables (add to :root)

:root {
  --cd-jewel-width: 280px;
  --cd-jewel-height: 245px;
  --cd-aspect-jewel: 280 / 245;
  --cd-disc-diameter: 240px;
  --cd-leaflet-size: 240px;
  --cd-spine-width: 14px;
  --cd-tray-width: 260px;
}

Use these tokens anywhere. The framework is pure Open Props variables — no hardcoded magic numbers.

---

Design System

OpenCD maps Open Props design tokens to CD packaging concepts:

Open Props Token	OpenCD Mapping	Purpose
--size-fluid-1 through --size-fluid-3	Jewel case padding	Responsive breathing room
--font-size-fluid-1 through --font-size-fluid-3	Leaflet typography	Title, body, tracklist
--font-sans	--cd-font-label	Spine labels, metadata
--font-serif	--cd-font-body	Leaflet body text
--red-6 / --red-7	--cd-advisory-red	Human Advisory badge
--surface-1 through --surface-4	CD tray paper shades	Layered backgrounds
--shadow-2 / --shadow-3	Jewel case shadow	3D depth on jewel case
--grid-...	Leaflet grid lines	Visible CD tray grid

---

Components

Class	Description
.cd-jewel-case	Main jewel case container
.cd-spine	Top navigation bar (CD spine)
.leaflet-content	Inner booklet area with visible grid
.leaflet-page	Individual leaflet page (flippable)
.back-tray	Back card with vertical spines
.tray-credits	Credits / tracklist section
.human-advisory	Parental Advisory style badge
.disc-art	CD disc face area
.cd-grid	Visible tray paper grid overlay

---

Templates

The framework ships with three core HTML page templates:

Template	Description
jewel-case.html	Front-facing jewel case with disc art
leaflet.html	Multi-page booklet (← → nav)
back-tray.html	Back tray with spines and tracklist

Each template is a complete, standalone HTML file that demonstrates the component in context.

---

Browser & Device Support

OpenCD uses CSS custom properties (Open Props) and modern layout (grid, flexbox).

• Chrome / Edge / Firefox / Safari — latest 2 versions ✅
• Mobile (iOS Safari, Android Chrome) — fully responsive ✅
• Print — jewel case aspect ratio preserves physical dimensions ✅
• IE11 — ❌ (Open Props requires modern CSS)

---

Trentuna Catalog

Part of the Trentuna release catalog (~/releases/).
Framework design follows the release aesthetic: visible grid, honest structure, no over-engineered abstraction.

---

Credits

• Open Props — design tokens by Adam Argyle
• ASW — semantic HTML pattern source (~/releases/asw/)
• Trentuna — imprint & design direction (~/trentuna-hq/)

---

"If you have a problem, if no one else can help, and if you can find them, maybe you can hire… the A-Team."