@obvi/blueprint

The CSS design system behind Obvious blueprints.

This package is built for and used by Obvious. It is published so Obvious-generated documents resolve their stylesheet, not as a general-purpose framework — outside of an Obvious blueprint there is little reason to reach for it.

The idea

A blueprint is a technical document that should look like one: monochrome ink on paper, drafting-blue reserved for illustrations, and structure that carries its own meaning.

• Semantic HTML is the API. Headings, paragraphs, lists, tables, figures, and landmarks render as a finished document with no classes to memorize. You write meaning; the design arrives for free.
• Classless-first, not class-only. Components exist only for the few patterns native HTML cannot express, and each is a composition of real semantic elements rather than a replacement for them.
• Interactive blocks read as working surfaces. Live components (choices, pre-flights, source, mockups, galleries) sit on a faint dot-grid mat, so a reader can tell an interactive surface from settled prose at a glance — a texture distinct from the diagonal hatch that marks held or rejected regions.
• Zero-specificity by contract. Everything ships in cascade layers wrapped in :where(), so the library never fights your own CSS. Your styles always win, with no !important and no parent-scoping.
• Runtime-complete package. The default stylesheet includes the chrome that blueprint.js injects, the published browser entry bundles Choice components, and runtime icons are inline SVG, so installed or host-inlined documents do not depend on sibling modules or repository-only assets.

The result is one portable stylesheet, no build step, that turns plain semantic markup into a polished blueprint.

Learn more

Blueprints are created and rendered through Obvious. To see what they are and how to use them, go to obvious.ai.

License

MIT. See LICENSE and THIRD_PARTY_NOTICES.md.