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."

7.2 KiB Raw Blame History Unescape Escape