TechnicalCollectible prompt

Retro terminal design system for your website

Monospace type, phosphor green on near-black and command-style navigation that stays readable.

Lovablev0Cursor

Curated by Nvoka

Nvoka wordmark logo
Nvoka wordmark logoTechnical

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.

Nvoka logo

Curated by Nvoka

Lovablev0CursorClaude Code
Add to my library

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 filled

Your 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.
See all