No. 07 · Commerce & marketplaces · Rate it
Datasheet
Engineering catalog — parametric filters, mono part numbers, LED stock dots and seven-segment readouts
A dense, trustworthy storefront language for technical products: white paper with blueprint grids and schematic traces, graphite ink with one signal red, condensed industrial headings with red index numbers, spec chips in monospace, LED-style stock indicators, price-break tables, a faceted parametric table with compare, and seven-segment instrument readouts. The B2B panel adds BOM upload and matching, order progress and low-stock watchlists.
Best for
- Electronic, industrial and lab-supply stores
- B2B catalogs with thousands of SKUs and specs
- Procurement, inventory and BOM tools
- Spare parts, hardware and tooling shops
Not ideal for
- Fashion and lifestyle shops
- Low-SKU brand storytelling sites
- Consumer apps that need warmth
Signature moves
- Blueprint grid and schematic traces with one red 'hot' path
- Section bars: red mono index, condensed title, 2px ink rule
- Monospace part numbers and spec chips (10kΩ · 0603 · ±1%)
- LED dots for stock: green in stock, amber low, gray out
- Parametric table with facets, price breaks, quantity steppers and compare
- Seven-segment readouts with ghost segments for key numbers
Try it with another brand color
Opens the demo with only --brand changed. The style should still read as Datasheet.
Install this skill
/plugin marketplace add tastefolio/tastefolio.github.io
/plugin install datasheet@tastefolionpx skills add tastefolio/tastefolio.github.io --skill datasheetcurl -L https://tastefolio.github.io/downloads/datasheet.zip -o datasheet.zip
unzip datasheet.zip -d .claude/skills/Copy the folder anywhere your agent can read it, then reference it from AGENTS.md / rules:
"Follow skills/datasheet/SKILL.md for every UI change."Files
Rate this style
Like it? Give it a 👍 below; you sign in with GitHub. The gallery’s Top rated order counts these votes and refreshes every hour. Comments and questions are welcome too.