Default HTML, but calmer
Beignet is a classless stylesheet inspired by Safari Reader Mode — built for content first.
· Jump to forms · Jump to details · Jump to semantic extras
This page is intentionally plain. It exists to test a minimal classless CSS file: spacing, typography, links, tables, code, media, and form controls — without components or utility classes.
If anything feels “styled,” it’s probably too much. The goal is the opposite: gentle defaults that let the content read like an article.
Typography & rhythm
Reader-like layouts are mostly about line length, font choice, and vertical rhythm. Paragraphs should feel evenly spaced and headings should introduce sections without shouting.
“The best interface is the one you stop noticing.”
Inline code such as color-mix(), :has(), and
:focus-visible should remain understated — readable, but not
visually loud.
Abbreviations should get a subtle hint: CSS, HTML.
Highlights should be quiet, too: this is a marked phrase in the middle of a sentence.
Lists
Unordered and ordered lists should stay simple and airy:
- Comfortable line height
- Understated headings
- Hairline rules and borders
- Native-first form controls
- Start close to browser defaults
- Fix the sharp edges
- Avoid adding “a theme”
Code
A code block should feel like paper with a faint outline — not like a UI panel.
/* beignet: a reader-ish baseline */
:root {
--measure: 68ch;
--line: color-mix(in oklab, CanvasText 8%, transparent);
}
article { max-width: var(--measure); margin-inline: auto; }Tables
Tables should feel editorial: mostly horizontal separators, minimal chrome, subtle striping, and horizontal scrolling on mobile when needed.
| Element | Goal | Notes |
|---|---|---|
| <p> | Long-form reading | Generous line-height, comfortable spacing |
| <h1>–<h3> | Editorial hierarchy | Weight + spacing over size |
| <pre> / <code> | Readable snippets | Quiet borders, no heavy background |
| <form> | Native-first UX | Transparent controls, calm focus ring |
Details
The <details> and <summary> elements are great
for docs and FAQs — no JavaScript required.
What is beignet.css?
A tiny, classless stylesheet that improves default HTML without introducing a “theme.” It’s designed to feel like Safari Reader Mode.
What are the non-goals?
- No components
- No utility classes
- No color system
- No layout grids
Open by default (for testing)
This details is rendered with the open attribute so you can
verify spacing and rhythm inside expanded content.
Semantic extras
A few small elements matter a lot in documentation. For example, keyboard shortcuts like ⌘ + K or Ctrl + P should read clearly.
Footnote-style references often use superscripts1 and subscripts like H2O.
“Design is the elimination of the unnecessary.” — an editor
Sometimes you want to cite a date in body copy, not just the header: .
Contact: Editorial Team1 Infinite Loop, Cupertino, CA
United States
Media
Figures should have subtle rounding and calm captions.
Forms
Forms are where most “minimal” frameworks accidentally become stylized. This demo keeps controls native, transparent, and readable.
Odds & ends
A few inline elements: strong, emphasis, and a link brings nostalgia: back to the top.