doc-uiv1.2.1

CSS FOR DOCUMENTATION & REPORTS

Information,
made clear.

doc-ui brings typography, diagrams, tables, and code into one design system for information-heavy pages.

Keep a reference easy to scan. Give a report a clear reading order.

Explore components Get started

01 / READING ORDER

Scan a reference. Read a report.

A Documentation

  1. IndexFind a name
  2. EntryCompare its fields
  3. DetailInspect the source

B Report

  1. QuestionOrient the reader
  2. EvidenceConnect the facts
  3. MeaningExplain the result

Figure 1.Two reading paths, two scales. A reference keeps comparable details close together. A report gives an idea, its evidence, and its qualifications room to unfold.

The arrows show reading order. These are paths through information, not required page templates.

A Keep the detail close.

A reference is read across: names, types, values. Compact spacing and aligned rows let readers compare entries without losing their place.

Browse the component reference →

B Give the idea a sequence.

A report is read through: a point, the evidence, its meaning. A separate type and spacing scale brings the main idea forward and keeps notes beside what they explain.

Use the report layout →

The relationships are the design.

A heading sets the question. A diagram makes a relationship visible. Its caption explains what to take from it. The spacing between them is part of the explanation.

Type follows the reading task.

Names and values stay readable in a dense reference. Density comes from the gaps, not smaller letters. In a report, a larger scale separates the main idea from the supporting detail.

Meaning travels with the mark.

A always identifies the reference path; B identifies the report. The letters keep that relationship intact in monochrome. States and missing information have their own vocabulary, separate from category colors.

Figures & annotations →Labels & states →

03 / COMPONENTS

From a sentence to a whole document.

45 components and layouts share the same type, spacing, and color system. Each guide includes live examples, highlighted HTML, and usage notes.

The doc-ui library, grouped by the information it helps you present
To composeStart with
Layouts
Lists & data
Figures & graphs
Reading
Code & changes
Navigation
Status & feedback
See every component in use →

04 / START BUILDING

Choose a reading mode, then compose the parts your content needs.

Put your content on the page.

Load the stylesheet in your document’s head, then use the layout classes in your HTML or templates. This page uses .sheet; the component reference uses .doc.

Get started →Choose from 32 palettes →
HTML
<article class="sheet">
  <h1>A clear reading order.</h1>
  <p class="stand">The main idea comes first.</p>
  <section class="sec">
    <h2 class="label">THE EVIDENCE</h2>
    <div class="field">The detail follows.</div>
  </section>
</article>
Stylesheet URL
HTML
<link rel="stylesheet"
      href="https://k-kinzal.github.io/document-design/v1.2.1/document-design.css">
Can I change the visual style?

Override the --dd- tokens for type, spacing, and color. The stylesheet uses cascade layers, so your CSS can override component styles.

Light and dark themes share the same components. See theming instructions →

Which interactions are included?

The optional script adds search, sorting, filters, tabs, copy controls, and theme switching. The underlying document remains readable without it.

Search · Filters · Tabs

Where does doc-ui fit?

Use it for document and report pages where text, structured data, and code are the content. Its base styles are designed to own the document. When integrating with an existing application, use a separate document or check the effect of those styles on the surrounding UI.

The setup guide covers browser support, print output, and keeping an offline copy.