TechnicalCollectible prompt

Chrome Y2K design system for your website

Chrome wordmarks, bubble buttons and sparkle stars, kept to a few moments so the site stays usable.

Lovablev0Bolt

Curated by Nvoka

Nvoka wordmark logo
Nvoka wordmark logoTechnical

Chrome Y2K design system for your website

Act as a senior brand designer. Restyle the existing site for {{business_name}}, a {{business_type}}, as a complete chrome Y2K 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: Unbounded 600 and 800 for display and headings; Sora 400 and 600 for text at 16px, line height 1.6. Scale 1.333: 16, 21, 28, 38, 50, 67, 96px. Display at -0.02em, uppercase only for short words. Palette: background silver-white #EEF0F4, surface #FFFFFF, text #0E1016, muted #4E5566, border #C9CED8; hot pink #FF3EA5, ice blue #9EE7FF and lime #C6FF3D as fills with dark text. Chrome is a gradient through #FFFFFF, #9AA3B2, #F2F4F8 and #6B7385, used only on the wordmark, one hero object and primary buttons. Shape: radius 999px on buttons and chips, 28px on panels; 1px borders with a white highlight along the top edge; a soft shadow on raised panels only. Grid: 4, 8 and 12 columns at 360, 768 and 1280px with 16, 24 and 24px gutters; section padding 64px mobile, 120px desktop. Imagery: one chrome 3D object or wordmark as an optimized image; four-point sparkle stars as an SVG motif; glossy product shots on flat pastel backgrounds. Motion: one shine sweep across the primary button on hover at 600ms; sparkles twinkle once on load; reduced motion removes both. Signature details: the chrome wordmark, bubble buttons with a glossy top highlight, sparkles at a few anchor points, pixel-thin outlines on cards. Do: keep the chrome to a few hero moments and the rest crisp and readable. Avoid: purple-to-blue background gradients, glass blur on every card, chrome on body text, more than one effect per element. 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-chrome-y2k-design-system-for-your-websiteScan to open
Technical

Chrome Y2K design system for your website

Chrome wordmarks, bubble buttons and sparkle stars, kept to a few moments so the site stays usable.

Nvoka logo

Curated by Nvoka

Lovablev0BoltClaude 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 chrome Y2K 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: Unbounded 600 and 800 for display and headings; Sora 400 and 600 for text at 16px, line height 1.6. Scale 1.333: 16, 21, 28, 38, 50, 67, 96px. Display at -0.02em, uppercase only for short words. Palette: background silver-white #EEF0F4, surface #FFFFFF, text #0E1016, muted #4E5566, border #C9CED8; hot pink #FF3EA5, ice blue #9EE7FF and lime #C6FF3D as fills with dark text. Chrome is a gradient through #FFFFFF, #9AA3B2, #F2F4F8 and #6B7385, used only on the wordmark, one hero object and primary buttons. Shape: radius 999px on buttons and chips, 28px on panels; 1px borders with a white highlight along the top edge; a soft shadow on raised panels only. Grid: 4, 8 and 12 columns at 360, 768 and 1280px with 16, 24 and 24px gutters; section padding 64px mobile, 120px desktop. Imagery: one chrome 3D object or wordmark as an optimized image; four-point sparkle stars as an SVG motif; glossy product shots on flat pastel backgrounds. Motion: one shine sweep across the primary button on hover at 600ms; sparkles twinkle once on load; reduced motion removes both. Signature details: the chrome wordmark, bubble buttons with a glossy top highlight, sparkles at a few anchor points, pixel-thin outlines on cards. Do: keep the chrome to a few hero moments and the rest crisp and readable. Avoid: purple-to-blue background gradients, glass blur on every card, chrome on body text, more than one effect per element. 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