Measured design references
Design Library.
Good references become
precise decisions.
Capture references. Measure their visual systems. Build a focused brief before the first design decision.
Reference research you can inspect.
Design Library is a local research tool for designers and coding assistants. Choose an industry or mobile category and it brings together measured conventions, design rules and reference paths. You inspect the actual screenshots before turning the findings into a design.
- Input
- A web industry or mobile app category
- Output
- A focused brief, measured patterns and reference paths
- Runs as
- Local Node.js tools; browser capture uses Playwright
- Status
- Internal tooling in use. Development paused.
From a reference to a usable brief.
The library separates collecting evidence from making design decisions. It keeps the measurements available for inspection instead of asking an assistant to work from memory.
- Capture
- Save desktop, mobile and full-page website views. Mobile references use App Store screenshots and metadata.
- Captures remain local for private study. Store imagery is treated as marketing material, not proof of real app information density.
- Measure
- Extract computed font families, sizes, weights, line heights, letter spacing, colours, gradients, spacing and radii.
- Accent colours are tracked separately so a rare but important button colour is not lost in a frequency ranking.
- Compare
- Group references by industry or app category. Summarise recurring visual conventions alongside individual measurements.
- The output helps establish a type scale, layout structure and colour discipline. It does not copy another product’s identity.
- Audit
- Check for missing files, blocked pages and suspect captures before using them as evidence.
- Bad captures are excluded or quarantined. A screenshot that loaded is not automatically a useful reference.
- Brief
- Assemble the project’s design rules, category patterns, measurements and screenshot paths into one entry point.
- The brief ends with references to inspect. Looking at the screenshots remains a required human or assistant step.
Start with the kind of interface.
A brief can target one industry, combine neighbouring categories or use the mobile reference collection. These are the actual command shapes used by the local tool.
Website references
node brief.mjs dashboards
node brief.mjs hospitality travelMobile references and category discovery
node brief.mjs --mobile finance
node brief.mjs --listA little room to experiment.
Original specimen / TypographyMake room for a better idea.
Editorial: a serif voice, close spacing and a deliberate line break. Try changing the line length.
An interactive illustration of the properties the library measures. This is original sample content, not a captured client page.
Evidence first. Judgment still matters.
Measurements reveal what a reference uses. They do not establish why it works, whether it fits a new product or whether a capture is current. The library supports design judgment rather than automating it away.
An internal tool, currently in use.
The brief command works locally and is part of the HumanityZ design workflow. Development is paused. The reference screenshots, extracted source material and private corpus are not published here, and there is no public download.