TechnicalCollectible prompt
Technical blueprint design system for data-dense sites
Blueprint navy, mono labels, dimension lines and dense tables for technical and data-heavy products.
Lovablev0Cursor
Curated by Nvoka
TechnicalTechnical blueprint design system for data-dense sites
Act as a senior brand designer. Restyle the existing site for {{business_name}}, a {{business_type}}, as a complete technical blueprint, data-dense design system. Keep every page, route, component and line of content; change only the visual layer, through shared tokens in the current styling system. Read the existing styles first and tell me what you'll replace. Our brand colors are {{brand_colors}}: map them onto the roles below where they fit, and if they fight the style, keep one as the accent and use the pack's neutrals.
Type: IBM Plex Sans 400, 500 and 600 for text; IBM Plex Mono 400 and 500 for labels, numbers and table data, with tabular figures. Base 15px in data views, 16px on marketing pages. Scale 1.2: 15, 18, 22, 26, 31, 37, 45px. Labels 11px uppercase mono at +0.06em.
Palette: background #0A1B33, surface #0F2545, raised #14305A, text #E6EEF8, muted #9DB2CC, gridline #1E3A63, accent cyan #4FD1FF (hover #8BE1FF), warning #FFB547, error #FF6B6B, success #4ADE80. Light mode: #F5F7FA with #0A1B33 text.
Shape: radius 2px; 1px borders; no shadows; small crosshair marks at card corners.
Grid: a faint 8px background grid in the hero only; 12 columns with 16px gutters at 1280px; 4 and 8px spacing inside panels; tables with sticky headers, right-aligned numbers and 40px rows.
Imagery: line drawings, exploded diagrams and schematics in cyan on navy; product cut-outs with dimension lines; charts with direct labels.
Motion: functional. 150ms state changes; diagrams draw their lines once at 600ms; numbers never count up.
Signature details: dimension-line callouts with leader lines pointing at features; spec tables; IDs or coordinates in mono beside headings; a status footer with real data.
Do: show real numbers with units; design empty, loading and error states for every table; keep density readable.
Avoid: charts with fake data, neon glow, tiny gray text, data hidden behind tabs.
Check: text contrast of at least 4.5:1, visible focus, 44px touch targets, no horizontal scroll at 360px, reduced motion respected. Finish with a short change list and the reason for each decision.
Technicalnvoka.com/library/nvoka-technical-blueprint-design-system-for-data-dense-sitesScan to open
Technical
Technical blueprint design system for data-dense sites
Blueprint navy, mono labels, dimension lines and dense tables for technical and data-heavy products.
Curated by Nvoka
Lovablev0CursorClaude Code
Make it yours
Fill in the blanks and change any word. Only your copy changes, never the card.
Fill in the blanks
0 of 3 filledYour prompt
Act as a senior brand designer. Restyle the existing site for {{business_name}}, a {{business_type}}, as a complete technical blueprint, data-dense design system. Keep every page, route, component and line of content; change only the visual layer, through shared tokens in the current styling system. Read the existing styles first and tell me what you'll replace. Our brand colors are {{brand_colors}}: map them onto the roles below where they fit, and if they fight the style, keep one as the accent and use the pack's neutrals.
Type: IBM Plex Sans 400, 500 and 600 for text; IBM Plex Mono 400 and 500 for labels, numbers and table data, with tabular figures. Base 15px in data views, 16px on marketing pages. Scale 1.2: 15, 18, 22, 26, 31, 37, 45px. Labels 11px uppercase mono at +0.06em.
Palette: background #0A1B33, surface #0F2545, raised #14305A, text #E6EEF8, muted #9DB2CC, gridline #1E3A63, accent cyan #4FD1FF (hover #8BE1FF), warning #FFB547, error #FF6B6B, success #4ADE80. Light mode: #F5F7FA with #0A1B33 text.
Shape: radius 2px; 1px borders; no shadows; small crosshair marks at card corners.
Grid: a faint 8px background grid in the hero only; 12 columns with 16px gutters at 1280px; 4 and 8px spacing inside panels; tables with sticky headers, right-aligned numbers and 40px rows.
Imagery: line drawings, exploded diagrams and schematics in cyan on navy; product cut-outs with dimension lines; charts with direct labels.
Motion: functional. 150ms state changes; diagrams draw their lines once at 600ms; numbers never count up.
Signature details: dimension-line callouts with leader lines pointing at features; spec tables; IDs or coordinates in mono beside headings; a status footer with real data.
Do: show real numbers with units; design empty, loading and error states for every table; keep density readable.
Avoid: charts with fake data, neon glow, tiny gray text, data hidden behind tabs.
Check: text contrast of at least 4.5:1, visible focus, 44px touch targets, no horizontal scroll at 360px, reduced motion respected. Finish with a short change list and the reason for each decision.
ChatGPT
Gemini
Perplexity