Unbloated

Monospace grayscale CSS library for engineers

Components

Typography

Headings, paragraphs, lists, links, quotations, and code use semantic HTML. The font stack ends in monospace; no font is downloaded. Body text uses a line height of 1.6, and headings use 1.2.

The page title uses h1. Use h2 for sections and h3 through h6 for nested subsections, without skipping levels. Heading sizes follow the library’s design tokens: 2rem, 1.5rem, 1.3rem, 1.17rem, 1.1rem, and 1rem from h1 to h6. The preview shows the remaining five levels with the library’s styles.

A Section Heading

A Subsection Heading

A Level Four Heading

A Level Five Heading
A Level Six Heading

A paragraph with strong text, emphasis, and an underlined link.

Supporting text uses the muted grayscale color.

  • One shared palette.
  • System monospace fonts.

Keep the content readable.

Use unbloat.css and press Tab to inspect focus.

npm run build
<h1>A Page Title</h1>
<h2>A Section Heading</h2>
<h3>A Subsection Heading</h3>
<h4>A Level Four Heading</h4>
<h5>A Level Five Heading</h5>
<h6>A Level Six Heading</h6>
<p>A paragraph with <strong>strong text</strong> and <em>emphasis</em>.</p>
<blockquote><p>Keep the content readable.</p></blockquote>
<p>Use <code>unbloat.css</code> and press <kbd>Tab</kbd>.</p>
<pre><code>npm run build</code></pre>

Links remain underlined. Hover increases the underline thickness to 2px. Keyboard focus uses a 2px outline with a 3px offset, shared with other focusable elements. Avoid removing that outline in an adapter.

<a href="../controls/">Inspect Form Controls</a>

Lists and Quotations

Use ul for unordered items, ol for steps, and dl for terms and definitions. Blockquotes have a 3px leading border. Inline code has a muted surface; preformatted blocks have padding, a border, and horizontal scrolling.

Customize Type

Set --unbloat-font-family in your adapter to use another monospace font. Use a licensed, self-hosted font if you need a specific family:

:root {
  --unbloat-font-family: "My Mono", monospace;
}

The font, line-height, and heading token groups control type sizes and line spacing. Other groups are color, space, border, shadow, and focus. Names follow --unbloat-<group>-<name>, for example --unbloat-space-3 and --unbloat-color-surface.

To keep the library’s appearance, use monospace fonts, grayscale colors, and --unbloat-border-radius: 0. Check text, background, and focus contrast after changing these values.