opencd/RECON.md

RECON.md — OpenCD Research Report

Agent: Face (Templeton Peck) — Recon & Procurement
Mission: Research Open Props, CD physical specs, ASW patterns, trentuna.com aesthetic, CD packaging references
Date: 2026-05-25
Context: Parent task [t_2c57546a] — DESIGN.md architecture plan calls for this recon before implementation

---

Q1: Open Props v2 Token Audit

Source verified: open-props.style + github.com/argyleink/open-props (main branch source files)

Import Paths (Current)

Method	Code
CDN (CSS)	@import "https://unpkg.com/open-props";
CDN (HTML link)	<link rel="stylesheet" href="https://unpkg.com/open-props"/>
npm	npm install open-props then @import "open-props/style";
PostCSS JIT	postcss-jit-props plugin — only ships used props
Design Tokens	JSON at https://unpkg.com/open-props/open-props.tokens.json

Recommendation: Use @import "https://unpkg.com/open-props" for the CDN path (already in DESIGN.md). For npm builds, use @import "open-props/style".

Token Values Verified from Source

Sizes (props.sizes.js)

Token	Value	Used For
--size-1	.25rem	Micro spacing
--size-2	.5rem	Tight spacing
--size-3	1rem	Base spacing
--size-4	1.25rem	(gap between OP sizes)
--size-5	1.5rem	Regular spacing
--size-7	2rem	Large spacing
--size-9	4rem	Section spacing
--size-12	10rem	Sidebar widths
--size-fluid-1	clamp(.5rem, 1vw, 1rem)	Responsive padding
--size-fluid-2	clamp(1rem, 2vw, 1.5rem)	Responsive padding
--size-fluid-3	clamp(1.5rem, 3vw, 2rem)	Responsive padding

Font Sizes (props.fonts.js)

Token	Value
--font-size-00	.5rem
--font-size-0	.75rem
--font-size-1	1rem
--font-size-2	1.1rem
--font-size-3	1.25rem
--font-size-4	1.5rem
--font-size-5	2rem
--font-size-6	2.5rem
--font-size-7	3rem
--font-size-8	3.5rem
--font-size-fluid-0	clamp(.75rem, 2vw, 1rem)
--font-size-fluid-1	clamp(1rem, 4vw, 1.5rem)
--font-size-fluid-2	clamp(1.5rem, 6vw, 2.5rem)
--font-size-fluid-3	clamp(2rem, 9vw, 3.5rem)

Font Stacks (props.fonts.js)

Token	Stack
--font-system-ui	system-ui, sans-serif
--font-neo-grotesque	Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif
--font-monospace-code	Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, monospace
--font-serif	ui-serif, serif
--font-sans	var(--font-system-ui)
--font-mono	var(--font-monospace-code)

Important for OpenCD: --font-sans resolves to system-ui, sans-serif — a readable sans. For the CD spine label font, consider --font-neo-grotesque (Inter/Roboto) for a cleaner look.

Borders (props.borders.js)

Token	Value
--border-size-1	1px
--border-size-2	2px
--radius-1	2px
--radius-2	5px
--radius-3	1rem
--radius-round	1e5px

Shadows (props.shadows.js)

Token	Description
--shadow-1	Subtle: 0 1px 2px -1px
--shadow-2	Medium: 3px + 7px layers
--shadow-3	Raised: composite multi-layer
--shadow-4	Modal: 5-layer deep shadow

Colors (19 scales × 13 shades each)

All verified: --gray-0 through --gray-15, --red-0 through --red-12, --blue-0 through --blue-12, --green-0 through --green-12, --yellow-0 through --yellow-12, plus stone, pink, purple, violet, indigo, cyan, teal, lime, orange, choco, brown, sand, camo, jungle.

Critical Findings for the README → DESIGN.md Mapping Table

README Claim	Actual Open Props Status	Action Needed
--surface-1 through --surface-4	NOT in Open Props. These are ASW custom tokens. Open Props provides --color-1 through --color-16 (palette-hue driven oklch scale) and individual gray shades.	Use ASW-style semantic aliases or define --cd-surface-* directly
--grid-...	NOT in Open Props. No grid-related tokens exist.	Must be custom — use repeating-linear-gradient following trentuna.com's pattern
--red-6 / --red-7	Confirmed. --red-6 and --red-7 exist in the red scale.	Good to use as-is
--shadow-2 / --shadow-3	Confirmed. Exact values verified above.	Good to use
--font-size-fluid-1 through --font-size-fluid-3	Confirmed. Values verified.	Good
--size-fluid-1 through --size-fluid-3	Confirmed. Values verified.	Good
--font-sans	var(--font-system-ui) = system-ui, sans-serif	Consider --font-neo-grotesque for better label aesthetics
--font-serif	ui-serif, serif	Good for leaflet body

New/Notable Open Props Tokens Since README Was Written

• Easings: --ease-elastic-*, --ease-spring-1..5, --ease-bounce-1..5, Robert Penner equations (--ease-circ-*, --ease-cubic-*)
• Animations (21): --animation-fade-in/out, --animation-slide-*, --animation-shake-*, --animation-spin, --animation-ping, --animation-blink, --animation-float, --animation-bounce, --animation-pulse
• Aspect ratios: --ratio-square, --ratio-landscape, --ratio-golden, --ratio-widescreen
• Font line heights: --font-lineheight-00 (.95) through --font-lineheight-5 (2)
• Letter spacing: --font-letterspacing-0 (-.05em) through --font-letterspacing-7 (1em)
• Design Tokens export: JSON, Figma, Style Dictionary formats available via unpkg

---

Q2: CD Jewel Case Physical Dimensions

Standard Dimensions (ISO 15727)

Component	Metric	Imperial	Notes
Jewel case (external)	142 × 125 × 10 mm	5.59" × 4.92" × 0.39"	±0.5mm tolerance
Front insert (visible)	120 × 120 mm	4.724" × 4.724"	With 3mm bleed: 126 × 126 mm canvas
Back insert (tray paper)	151 × 118 mm	5.94" × 4.65"	Includes folded spines on both sides (~15mm each)
CD disc	Ø 120 mm	Ø 4.724"	Standard CD diameter
CD center hole	Ø 15 mm	Ø 0.59"	Spindle hole
CD disc thickness	1.2 mm	0.047"
Spine width (single)	~7 mm	~0.28"	For a single CD jewel case
Jewel case open width	284 mm	11.18"	Two facing panels + spine gap

Web Scaling Analysis

The README uses 2× scale (142mm → 280px, 125mm → 245px). At 96 DPI standard web resolution:

• 1mm ≈ 3.78px
• So 142mm × 3.78 ≈ 537px would be exact 1:1 scale
• 2× of 142mm = 284px, which is a 0.53× scale at 96 DPI
• The rationale: 280×245px is a compact, usable web component size that preserves the aspect ratio

Recommendation: The 2× multiplier is fine for the default scale, but implement --cd-scale as a multiplier variable (default: 1 for 2× web scale). This lets users adjust without recalculating every dimension.

Formula:

--cd-scale: 1; /* 1 = 2× of physical mm → px */
--cd-jewel-width: calc(142px * var(--cd-scale));
--cd-jewel-height: calc(125px * var(--cd-scale));
--cd-disc-diameter: calc(120px * var(--cd-scale));
--cd-leaflet-size: calc(120px * var(--cd-scale));
--cd-spine-width: calc(7px * var(--cd-scale));

Region Variations

Standard	Body	Notes
ISO 15727:1998	Global	Original jewel case standard
IEC 60908	Global	CD-DA (Red Book) physical spec
Regional	None significant	Jewel case dimensions are globally standardized — CDs fit worldwide

No significant regional variations. The 142×125×10mm form factor is universal.

Tray Paper & Leaflet Physical Layout

The back tray paper (151×118mm) folds into three panels:

• Left spine: ~7mm (visible from front/back)
• Center: 120×118mm (back insert surface)
• Right spine: ~7mm + 7mm fold at edge

The leaflet/booklet is usually:

• Single sheet: 240×120mm folded in half → two 120×120mm pages
• Multi-page: 480×120mm folded into 4 panels of 120×120mm each
• Stapled booklet: 120×120mm pages bound at center fold

---

Q3: ASW Design Patterns (~/releases/asw/)

Architecture Overview

ASW (Agentic Semantic Web) is a zero-class CSS framework built on Open Props. Source verified at ~/releases/asw/src/.

Layer order (11 layers):

#	File	Purpose
00	00-reset.css	Box-sizing, margin reset
01	01-tokens.css	Semantic aliases on Open Props (~300 tokens)
02	02-typography.css	Heading, body, code, table, link styles
03	03-landmarks.css	body > nav, article, section, footer, hgroup, dt/dd
04	04-forms.css	Input, button, select, textarea, validation states
05	05-components.css	Tables, progress, meter, accordion, dialog
06	06-navigation.css	Sub-navigation, sidebar, pagination
07	07-data-attrs.css	Agentic data-* extensions (~15 attributes)
08	08-utilities.css	Container, grid helpers
09	09-charts.css	Chart CSS (Charts.css integration)
10	10-chroma.css	Hugo syntax highlighting theme
11	11-layout.css	Responsive grid layout system
12	12-landing.css	Landing page specific

Key Semantic HTML Patterns

Navigation:

<body>
  <nav>
    <strong>Brand</strong>
    <ul>
      <li><a href="/" aria-current="page">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>

Articles with container queries:

<article>
  <header>
    <h3>Title</h3>
  </header>
  <p>Content adapts to parent width via container queries.</p>
</article>

Data-Attribute Vocabulary (for OpenCD consideration)

Attribute	Purpose
data-role	Command-box, timeline, status-card, diff, log-entry
data-wikilink	Wiki-style internal links [[Note Name]]
data-task	Task list states: todo / done / blocked
data-status	Status indicators: awake / sleeping / blocked
data-callout	Callout boxes: note / warning / error / tip
data-session	Session metadata display
data-tag	Tag display with # prefix
data-tooltip	CSS-only tooltips (no JS)
data-subnav	Sub-navigation with / separators
data-diff	Diff viewer with +/- lines
data-redacted	Privacy redaction (bar / reveal / label variants)
data-theme	Light/dark theme toggle
data-nav-links	Nav link container for Flexbox push-right
data-nav-toggle	Mobile hamburger toggle

Token System (ASW → Open Props Mapping)

ASW's token layer (01-tokens.css) uses Open Props as a foundation and adds:

• Surface tokens: --surface, --surface-1, --surface-2, --surface-3, --surface-card, --surface-hover — all oklch() with --palette-hue tinting
• Text tokens: --text, --text-2, --text-3, --text-dim
• Accent tokens: --accent, --accent-hover, --on-accent, --accent-subtle
• Fixed-hue accents: --accent-blue (250°), --accent-red (25°), --accent-orange (80°)
• State colors: --ok (green 145°), --warn (amber 80°), --error (red 25°), --info (blue 250°)
• Gap fills: --space-3 (0.75rem), --space-5a (1.25rem) — values missing from Open Props
• Text scale gap: --text-sm (0.875rem) — missing from Open Props (--font-size-0 is 0.75rem, --font-size-1 is 1rem)
• Radius gap: --radius-md (4px) — between OP --radius-1 (2px) and --radius-2 (5px)
• Layout widths: --width-sm (510px) through --width-2xl (1450px)
• Content widths: --width-prose (65ch), --width-report (72ch)
• Fonts: --font-heading = var(--font-neo-grotesque), --font-ui = var(--font-neo-grotesque)

Key insight for OpenCD: The ASW approach of using Open Props for the backbone + semantic aliases for the project-specific tokens is exactly the right pattern. OpenCD should define --cd-* tokens as semantic aliases on top of Open Props, with fallback values.

---

Q4: CD Packaging Design References

Parental Advisory Label (Source for Human Advisory Badge)

Verified from: Wikimedia Commons SVG + Wikipedia

Specification	Value
Aspect ratio	523×327px ≈ 1.6:1
Typography	Impact / Arial Black (heavy sans-serif, tightly tracked)
Layout	3 rows: "PARENTAL ADVISORY" / "EXPLICIT CONTENT" (on black), white text, all-caps
Designer	Deborah Norcross (Warner Bros) — 1990
Current text	"PARENTAL ADVISORY: EXPLICIT CONTENT" (since 1996)
Construction	Two black bars (top 40%, bottom 40%), white text centered

Human Advisory Badge (Local Implementation)

Files at: ~/releases/human-advisory/ and ~/releases/parental-advisory/

The existing .human-advisory implementation uses:

• Container: 300px × var(--ha-size) wide, border: 3px solid #000, background: #000
• Font: Impact, 'Arial Black', 'Helvetica Neue', sans-serif
• Three rows: "HUMAN" (white on black), "ADVISORY" (black on white), "EXPLICIT AI CODE" (white on black)
• Scalable via --ha-size CSS custom property

For OpenCD's .human-advisory module: The DESIGN.md already specifies --cd-advisory-red from --red-6, which is the correct approach. Consider supporting both:

• Classic PA-style: black/white bars
• OpenCD variant: red/black with white text

Visible Grid Aesthetic — Key References

1. trentuna.com paper-card grid:

.paper-card {
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0 31px,
    oklch(40% .02 55/.025) 31px 32px
  ), var(--grain);
}

Uses 31px spacing between horizontal lines, 1px rule. Very subtle.

2. CD tray paper (physical):

• Typical grid: fine dots or thin parallel lines at ~1mm spacing (≈4px at web scale with grid repeat)
• Texture: matte-finish paper, slight grain
• Color: silver/gray or clear translucent

3. Recommended grid for OpenCD:

/* Default: fine horizontal lines (tray paper aesthetic) */
--cd-grid-color: var(--gray-3);
--cd-grid-size: 8px; /* line interval */
background-image: repeating-linear-gradient(
  0deg,
  transparent 0 calc(var(--cd-grid-size) * 1 - 1px),
  var(--cd-grid-color) calc(var(--cd-grid-size) * 1 - 1px) var(--cd-grid-size)
);

5 Distinctive CD Packaging Examples (for Visual Direction)

1. Aphex Twin — Selected Ambient Works 85-92 (R&S): Minimal jewel case, black on white, solid sans-serif typography. The CD itself has a subtle reflective design.
2. Boards of Canada — Music Has The Right To Children (Warp/Wax): Dark jewel case with visible disc through transparent front, minimal tracklist layout on back.
3. Radiohead — Kid A (Parlophone): Special edition with clear plastic case, hidden booklet art, minimalist typography.
4. Depeche Mode — Violator (Mute): Iconic red rose on black. Simple, bold, high contrast.
5. The Postal Service — Give Up (Sub Pop): Transparent jewel case, dual-layer art (front insert + back tray paper visible through clear case).

---

Q5: trentuna.com Design Aesthetic

Url: https://trentuna.com — Live catalog page
Stylesheet verified: Custom Tailwind CSS v4 build, warm vintage aesthetic

Typefaces

Role	Font	Stack
Display / Headings	Fraunces	"Fraunces", "EB Garamond", Georgia, serif
Body	EB Garamond	"EB Garamond", "Iowan Old Style", Georgia, serif
Monospace	JetBrains Mono	"JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace

Color Palette (Oklch)

Token	Value	Purpose
--paper	oklch(95.5% .018 85)	Warm cream background
--paper-deep	oklch(92% .025 80)	Slightly darker paper
--ink	oklch(18% .015 50)	Dark warm text
--ink-soft	oklch(36% .018 55)	Secondary text
--ink-faint	oklch(55% .02 60)	Subtle text
--rule	oklch(32% .02 55)	Border/rule color
--accent	oklch(55% .18 32)	Warm red accent
--stamp	oklch(45% .16 28)	Darker stamp color

Grid Approach

trentuna.com uses a visible paper-lined grid — the structure IS the decoration:

• repeating-linear-gradient(0deg, transparent 0 31px, rule-color 31px 32px) for horizontal notebook lines
• radial-gradient grain texture (8 layers, varying dot sizes from 7px to 31px)
• radial-gradient vignette effect

This directly inspires OpenCD's CD tray paper grid.

Content Structure (from live page)

trentuna / catalog
TNT-000 · MMXXV
"IMPRINT FOR OPEN AI SYSTEMS"
"We release software, notes, traces, and unfinished but useful machinery."
[Human Advisory — Explicit AI Code badge]

Key Lessons for OpenCD

1. Warm paper tones work for backgrounds — consider --cd-tray-bg with slight warm tint
2. Serif body + sans navigation is a readable combination
3. Visible grid-as-decoration creates tactile feel with minimal CSS
4. Monospace for metadata (catalog numbers, labels, timestamps)
5. Bold accent color for interactive elements (the red accent against warm paper)
6. Grain texture adds depth without images

---

Cross-Reference: DIRECT.md Mapping Corrections

What's Right

• Most Open Props token mappings are correct
• CD physical dimensions are accurate (ISO 15727)
• The 2× scale is a reasonable default

What Needs Corrections

1. --surface-1 through --surface-4 are NOT Open Props out-of-the-box. They need to be defined as custom variables. The DESIGN.md already does this correctly (--cd-tray-bg: var(--surface-1)) but assumes --surface-1 exists from Open Props. Define them explicitly in _variables.css.

2. --grid-* tokens don't exist in Open Props. The --grid-1/--grid-2 references in DESIGN.md need to be custom --cd-grid-color / --cd-grid-color-alt definitions using gray-3/gray-2 shades from Open Props.

3. ASW's --space-3 (0.75rem) and --text-sm (0.875rem) fill gaps in Open Props that OpenCD should also define if needed.

4. Font selection: The DESIGN.md uses var(--font-sans) for CD spine labels. Consider var(--font-neo-grotesque) which has a cleaner, more label-appropriate appearance (Inter/Roboto).

---

Intelligence Summary

Area	Confidence	Risk	Notes
Open Props tokens	✅ Verified	Low	All source-confirmed
CD dimensions	✅ Verified (ISO)	Low	Global standard, no region variance
ASW patterns	✅ Local source	Low	Full source access at ~/releases/asw/
Human Advisory	✅ Local source	Low	Working implementation exists
trentuna.com	✅ Live site + stylesheet	Low	Tailwind v4 custom build, warm paper aesthetic
Surface/Grid tokens	⚠️ Correction needed	Medium	DESIGN.md assumes OP has surface/grid tokens
CD scale factor	⚠️ Recommendation	Low	Implement --cd-scale; keep 2× as default=1

Bottom line: Green light for implementation. Surface and grid tokens need custom definitions (noted above), everything else maps correctly. The ASW token pattern (oklch with palette-hue) is a proven approach that OpenCD should adopt for its CD tray paper colors.

---

"I've never left a room without what I came for. Sometimes I leave with more."
— Lieutenant Templeton Peck