日本語

Use doc-ui

Add the stylesheet, choose a layout, and start with a complete HTML document.

1. Load the stylesheet

Add this link to your document’s <head>. The full release version keeps published and archived documents fixed.

HTML
<link rel="stylesheet"
      href="https://k-kinzal.github.io/document-design/v1.2.1/document-design.css">

2. Choose a palette

32 palettes, each with a light and dark pair. Four paper colors and eight accents keep the same type, spacing, and meaning.

Paper is neutral; Linen is warm; Mist is cool; Sage has a quiet green cast. Blue, Cyan, Teal, Indigo, Violet, Plum, Citron, and Slate set the accent. Paper / Blue is the original default.

Each palette coordinates accent, category and state colors. Their intensity changes together; their meaning stays the same. Red marks missing or unresolved information. Every palette meets 4.5:1 text contrast on all five surfaces and on its own tints.

Use your selection

Selected palette: Paper / Blue

Load the base stylesheet and then one palette stylesheet. The palette follows the reader’s light or dark preference. Your document needs no JavaScript to use it.

HTML
<link rel="stylesheet"
      href="https://k-kinzal.github.io/document-design/v1.2.1/document-design.css">
<link rel="stylesheet"
      href="https://k-kinzal.github.io/document-design/v1.2.1/palettes/paper-blue.css">
Download selected palette ↓Compare all 32 palettes ↓

For offline use, save both stylesheets beside your HTML and use relative paths. Each card also has a direct CSS download that works without JavaScript.

Compare the pairs

The same 978 findings from the WordPress SQL catalog appear in every card. Choose a card to try its palette across this site, then copy the stylesheet links above. The header selector keeps your choice as you browse.

Paper / Blue

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Paper / Cyan

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Paper / Teal

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Paper / Indigo

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Paper / Violet

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Paper / Plum

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Paper / Citron

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Paper / Slate

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Linen / Blue

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Linen / Cyan

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Linen / Teal

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Linen / Indigo

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Linen / Violet

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Linen / Plum

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Linen / Citron

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Linen / Slate

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Mist / Blue

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Mist / Cyan

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Mist / Teal

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Mist / Indigo

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Mist / Violet

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Mist / Plum

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Mist / Citron

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Mist / Slate

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Sage / Blue

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Sage / Cyan

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Sage / Teal

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Sage / Indigo

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Sage / Violet

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Sage / Plum

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Sage / Citron

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓

Sage / Slate

Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Download CSS ↓
Copy selected stylesheet ↑

3. Choose a reading mode

To find something: .doc

API references, catalogs, and search results. A dense layout that stays easy to scan.

Build a document →

To understand something: .sheet

Reports, research, and reviews. A layout that puts the conclusion and its evidence in view.

Build a report →

4. Make a complete page

Save this as report.html and open it in your browser.

HTML
<!doctype html>
<html lang="en" data-dd-paper="a4">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Link the sources. Keep the gap visible.</title>
  <link rel="stylesheet"
        href="https://k-kinzal.github.io/document-design/v1.2.1/document-design.css">
  <link rel="stylesheet"
        href="https://k-kinzal.github.io/document-design/v1.2.1/palettes/paper-blue.css">
</head>
<body>
  <article class="sheet">
    <p class="eyebrow">BISON-PARSER / SOURCE COVERAGE</p>
    <h1>Link the sources. Keep the gap visible.</h1>
    <p class="stand">Coverage rose from 68.97% to 96.67%. The introduction remains unresolved.</p>
    <div class="hero">
      <div class="was">
        <span class="cap">BEFORE</span>
        <span class="fig">68.97</span>
        <span class="unit">% source coverage · 20 of 29 units</span>
      </div>
      <div class="now">
        <span class="cap">AFTER</span>
        <span class="fig">96.67</span>
        <span class="unit">% source coverage · 29 of 30 units</span>
      </div>
    </div>
    <section class="sec">
      <h2 class="label">01 / EVIDENCE</h2>
      <div class="field">
        <p class="lead">The implementation was present; the links were missing.</p>
        <div class="compare">
          <div class="was">
            <h3 class="cap">BEFORE</h3>
            <p class="note">Nine of 29 source units had no interpretation.</p>
          </div>
          <div class="now">
            <h3 class="cap">AFTER</h3>
            <p class="note">29 of 30 source units have an interpretation. The introduction stays open.</p>
          </div>
        </div>
        <p class="caveat">Source coverage does not establish that every behavior is tested. The unresolved introduction is part of the result.</p>
      </div>
    </section>
    <section class="sec">
      <h2 class="label">02 / RECORD</h2>
      <div class="field">
        <p class="lead">Keep the counts behind the percentages.</p>
        <div class="table-wrap">
          <table>
            <caption>bison-parser source coverage</caption>
            <thead><tr><th scope="col">Snapshot</th><th scope="col">Interpreted units</th><th scope="col">Total units</th></tr></thead>
            <tbody>
              <tr><th scope="row">Before</th><td>20</td><td>29</td></tr>
              <tr><th scope="row">After</th><td>29</td><td>30</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>
  </article>
</body>
</html>

The downloadable example includes the selected palette and all its styles, so it opens offline as a single HTML file.

Download the example ↓Open the example ↗

Set the document language

Declare lang="en" for English or lang="ja" for Japanese on the HTML element. The language selects Japanese phrase-aware heading breaks and figure captions. Body text keeps its natural spacing; headings and short labels use proportional metrics.

Use the language link in the header to compare the same page in English and Japanese. Try Prose for reading text and Report for the larger type scale.

Keep an offline copy

Save the stylesheet next to your HTML file, then use a relative path.

HTML
<link rel="stylesheet" href="./document-design.css">

Keep the files together to open the document over file://. The stylesheet does not depend on web fonts or image services.

Add the interactions you need

Search, sorting, copy controls, and theme switching are optional. Load the classic script, then add the documented data attributes to each component.

HTML
<script src="https://k-kinzal.github.io/document-design/v1.2.1/document-design.js" defer></script>

For offline use, save the script and reference it with a relative path.

Add data-dd-enhance hidden to a control that should appear only after the script has initialized. Keep the underlying content readable without JavaScript.

Theme the document

The default follows the reader’s system color scheme. To fix a theme, set data-dd-theme="light" or "dark" on the HTML element. Override --dd- custom properties to change the design tokens.

CSS
:root {
  --dd-accent: var(--dd-teal);
  --dd-accent-tint: var(--dd-teal-tint);
  --dd-link: var(--dd-teal);
}

Identity hues: blue, violet, amber, teal, pink, indigo, slate. State hues: ok, warn, danger. See Chip for the difference.

Preserve meaning in every format

  • Use semantic headings, visible input labels, and descriptive link names.
  • Pair color with text, symbols, or borders.
  • Print styles hide navigation and controls, expand truncated rows, and reveal inactive tab panels.
  • Supported browsers expand closed details with CSS; the optional script also opens them before printing.
  • Check print preview before distributing a generated report.

Print a long report to PDF

A report that will be read as a PDF names its paper size on the root element. The stylesheet then sets the sheet size and margins and numbers every page, and no print CSS of your own is needed.

HTML
  • data-dd-paper takes a4 or letter. Leave it out to print at the size the reader chooses.
  • data-dd-print-urls chooses where link addresses are printed: after each link in the text by default, only in the sources list with sources, or nowhere with none.
  • Headings, section labels, timeline entries, and sources stay with what follows them. Tables and code blocks break where they must.
  • Print from the browser with “Save as PDF”, or generate the file with a headless browser. Keep background graphics off; the stylesheet redraws chips and bars as outlines.

The complete example below is a profile report with a chronology across several pages, sixty-two sources, and long Japanese titles. It uses only the stylesheet above.

Open the profile ↗Download the HTML ↓

Browser support & versions

Designed for current Chrome, Edge, Firefox, and Safari. The CSS uses light-dark(), color-mix(), cascade layers, container queries, and subgrid.

Full versions such as /v1.0.0/ and 40-character commit paths are immutable. /v1.0/ and /v1/ follow compatible releases; /latest/ follows main. This site follows the latest stable release. Breaking changes belong in a new major version.

This stylesheet owns its document. When embedding it into an existing application, use a separate document or check the effect of its base styles on your surrounding UI.

Explore 45 components →Source code ↗