TechnicalCollectible prompt
Retro terminal design system for your website
Act as a senior brand designer. Restyle the existing site for {{business_name}}, a {{business_type}}, as a complete retro terminal, monospace 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: JetBrains Mono 400 and 700 for everything, body at 16px, line height 1.6; VT323 for the logo only. Scale 1.2: 16, 19, 23, 28, 33, 40px; headings marked by weight and a prefix character, not size alone.
Palette (dark): background #0C0F0A, surface #12170F, text #C8E6C0, muted #7FA37A, border #2A3626, accent phosphor green #33FF66 (hover #7DFF9A), warning amber #FFB000. A light paper theme: #F4F1E8 with #1C1C1C text.
Shape: radius 0; 1px solid or dashed borders; dividers drawn with box-drawing characters, hidden from screen readers. No shadows; a faint glow on the hero heading only.
Grid: a character grid. 8px spacing steps that line up with the line height; text at most 72 characters wide; one column at 360px, two panes at 1280px like a split terminal.
Imagery: dithered or ASCII-processed images in the accent color; diagrams drawn as text.
Motion: a block cursor after the hero line blinks for 3 seconds, then stops; the hero types in once in under a second, or appears instantly with reduced motion. Hover inverts colors instantly.
Signature details: navigation styled as commands with a prompt sign before each link; keyboard shortcuts for main pages listed in the footer; a status bar with real info such as hours or version; buttons as inverted text blocks.
Do: readability first, with real links and buttons under the costume.
Avoid: scanlines over text, low-contrast green, endless typing effects, fake hacker jargon.
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-retro-terminal-design-system-for-your-websiteScan to open
Technical
Retro terminal design system for your website
Monospace type, phosphor green on near-black and command-style navigation that stays readable.
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 retro terminal, monospace 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: JetBrains Mono 400 and 700 for everything, body at 16px, line height 1.6; VT323 for the logo only. Scale 1.2: 16, 19, 23, 28, 33, 40px; headings marked by weight and a prefix character, not size alone.
Palette (dark): background #0C0F0A, surface #12170F, text #C8E6C0, muted #7FA37A, border #2A3626, accent phosphor green #33FF66 (hover #7DFF9A), warning amber #FFB000. A light paper theme: #F4F1E8 with #1C1C1C text.
Shape: radius 0; 1px solid or dashed borders; dividers drawn with box-drawing characters, hidden from screen readers. No shadows; a faint glow on the hero heading only.
Grid: a character grid. 8px spacing steps that line up with the line height; text at most 72 characters wide; one column at 360px, two panes at 1280px like a split terminal.
Imagery: dithered or ASCII-processed images in the accent color; diagrams drawn as text.
Motion: a block cursor after the hero line blinks for 3 seconds, then stops; the hero types in once in under a second, or appears instantly with reduced motion. Hover inverts colors instantly.
Signature details: navigation styled as commands with a prompt sign before each link; keyboard shortcuts for main pages listed in the footer; a status bar with real info such as hours or version; buttons as inverted text blocks.
Do: readability first, with real links and buttons under the costume.
Avoid: scanlines over text, low-contrast green, endless typing effects, fake hacker jargon.
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.