System
This is a wireframe system, not a design system. Styles are intentionally generic.
wireframe.css is linked at the top of every page in this project. It loads automatically: nothing to import or configure. This is a visual reference of everything in it.
Page-specific layout goes in each page's own <style> block. Nothing page-specific needs to modify wireframe.css.
Color
The palette your wireframes use: text, surfaces, borders, icons, and accents.
View → FoundationsType
The full set of headings, body text, and supporting text styles.
View → FoundationsSpacing
The standard sizes used for gaps and padding. One scale used everywhere keeps wireframes consistent.
View → FoundationsIcons
Icons work anywhere with one line of HTML. Browse the common set and see how to drop them in.
View → ElementsButtons
Five button styles for different levels of emphasis. Hover, focus, and click states all work. Try them.
View → ElementsForms
Text fields, dropdowns, checkboxes, radios, toggles, and sliders, plus the focus state every form needs.
View → ElementsPlaceholders
Blocks that stand in for images, video, avatars, and other media until real content arrives.
View → CompositionAtoms
Small reusable pieces like single rows, single stats, and single labels, that combine to build larger patterns.
View → CompositionDoc Head
The standard header that opens every wireframe page: title, status badges, and meta info.
View →