name: Gumroad Product Report Design System
description: Consulting-grade report publication style for AI execution kit PDFs, HTML guides, and product assets.
colors:
bg: "#ffffff"
bg-band: "#f6f6f6"
bg-subtle: "#fafafa"
bg-deep: "#0b0b0d"
rule: "#e0e0e0"
rule-soft: "#ededed"
ink: "#000000"
ink-mid: "#262626"
ink-soft: "#525252"
ink-faint: "#7a7a7a"
navy: "#0b5fd4"
navy-deep: "#0842a0"
navy-bg: "#e8f1fc"
ok: "#1a4f9c"
ok-bg: "#e9f0fa"
ok-line: "#b7cdea"
risk: "#a02729"
risk-bg: "#f7e7e7"
hold: "#a06000"
hold-bg: "#fbf0d8"
typography:
body: { fontFamily: "Archivo, Noto Sans JP, Hiragino Sans, Yu Gothic Medium, Meiryo, sans-serif", fontSize: 15.5px, fontWeight: 400, lineHeight: 1.7, letterSpacing: 0.005em }
mono: { fontFamily: "JetBrains Mono, monospace", fontSize: 14px, fontWeight: 400, lineHeight: 1.5, letterSpacing: 0 }
logo: { fontFamily: "Archivo, Noto Sans JP, sans-serif", fontSize: 18px, fontWeight: 800, lineHeight: 1.2, letterSpacing: 0.02em }
control: { fontFamily: "Archivo, Noto Sans JP, sans-serif", fontSize: 10px, fontWeight: 700, lineHeight: 1.2, letterSpacing: 0 }
spacing:
xs: 4px
sm: 8px
md: 16px
lg: 24px
xl: 32px
2xl: 48px
3xl: 72px
rounded:
none: 0px
sm: 2px
full: 9999px
components:
page: { maxWidth: 1440px, gutter: 56px, sectionGap: 68px }
toc: { width: 200px }
summaryCard: { width: 400px }
techCard: { minWidth: 340px }
topbar: { padding: "14px 56px", borderBottom: "1px solid {colors.rule}", background: "{colors.bg}" }
reportControls: { gap: 8px, fontSize: 10px, fontWeight: 700 }Overview
The Gumroad Codex workspace produces AI execution kits with report-like HTML, PDFs, ZIP templates, cover images, and launch assets. The report stylesheet is a consulting-grade publication system rather than an app shell.
The visual source is products/design/assets/report.css. It defines a canonical stylesheet for brand-neutral, dense reports with theme presets, tables, evidence registers, accordions, code excerpts, diagrams, architecture grids, and print behavior.
Colors
The default brand preset is blue. Page surfaces are white with subtle gray bands. Ink is black and gray. Brand tokens are navy, navy-deep, and navy-bg. Status uses ok, risk, and hold families.
Theme presets may override the brand and ok families only. Risk and hold remain constant across themes so report severity is stable.
Typography
Body text uses Archivo and Japanese fallback fonts. Mono uses JetBrains Mono. Typography is dense and institutional, with tabular numeric features enabled for evidence tables and metrics.
Layout
The report max width is 1440px with a 56px gutter. Sections use large vertical spacing, a fixed-width table of contents, and constrained readable text. Summary cards, technical cards, cite chips, and source reference labels have explicit width constraints.
Elevation & Depth
No box shadows. Use rules, bands, status fills, and dark inversions for footer and code. Depth should come from publication structure, not card shadows.
Shapes
The shape language is square. Use zero radius by default, 2px for timeline or small chips, and full radius only for dots or mini badges.
Components
Topbar is sticky with a rule and optional report controls. Reports include warning banners, hero, overview strip, filter bar, TOC, section heads, cards, key points, comparison charts, category grids, status badges, source pills, findings tables, evidence indexes, appendices, accordions, code excerpts, diagrams, and print controls.
Do's and Don'ts
Do keep generated products visually publication-grade and evidence-first.
Do use theme presets only through data-theme tokens.
Do preserve print behavior and report controls.
Don't add arbitrary hex colors outside token blocks.
Don't use rounded cards or shadows in this report system.