TechnicalCollectible prompt

Bauhaus primary-color design system for your website

Circles, squares and triangles in red, blue and yellow on a strict grid, with form serving function.

Lovablev0Bolt

Curated by Nvoka

Nvoka wordmark logo
Nvoka wordmark logoTechnical

Bauhaus primary-color design system for your website

Act as a senior brand designer. Restyle the existing site for {{business_name}}, a {{business_type}}, as a complete Bauhaus primary-color 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: League Spartan 700 and 800 for headings, set in lowercase; DM Sans 400 and 500 for text at 17px, line height 1.55. Scale 1.333: 17, 23, 30, 40, 54, 72, 96px. Headings at -0.02em. Palette: background off-white #F4F0E6, surface #FFFFFF, text #111111, muted #4D4A44, red #D72E1F for shapes and large type (#C1271A for small text), blue #1D4E9E, yellow #F2C230 as a fill only, with black text. Shape: three shapes only: circle, square and triangle. Radius is 0 or fully round, nothing between. 3px black borders where a container needs an edge. No shadows. Grid: strict 12 columns with 24px gutters at 1280px, 8 at 768px, 4 at 360px; shapes snap to column edges; asymmetric balance with large shapes on one side and text on the other. Imagery: compositions of primary shapes built in SVG; black-and-white photos cropped into circles or squares, sometimes overlapped by a colored shape. Motion: shapes slide or rotate into place once at 400ms ease-out; buttons swap fill colors at 150ms. Signature details: a hero made only of type and shapes; section labels set vertically along the left edge on desktop; numbered steps inside primary shapes; red, blue and yellow each meaning one thing across the site. Do: let form follow function, keep layouts clean, keep the color code consistent. Avoid: gradients, rounded rectangles, decorative clutter, any color beyond the three plus black and white. 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-bauhaus-primary-color-design-system-for-your-websiteScan to open
Technical

Bauhaus primary-color design system for your website

Circles, squares and triangles in red, blue and yellow on a strict grid, with form serving function.

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 Bauhaus primary-color 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: League Spartan 700 and 800 for headings, set in lowercase; DM Sans 400 and 500 for text at 17px, line height 1.55. Scale 1.333: 17, 23, 30, 40, 54, 72, 96px. Headings at -0.02em. Palette: background off-white #F4F0E6, surface #FFFFFF, text #111111, muted #4D4A44, red #D72E1F for shapes and large type (#C1271A for small text), blue #1D4E9E, yellow #F2C230 as a fill only, with black text. Shape: three shapes only: circle, square and triangle. Radius is 0 or fully round, nothing between. 3px black borders where a container needs an edge. No shadows. Grid: strict 12 columns with 24px gutters at 1280px, 8 at 768px, 4 at 360px; shapes snap to column edges; asymmetric balance with large shapes on one side and text on the other. Imagery: compositions of primary shapes built in SVG; black-and-white photos cropped into circles or squares, sometimes overlapped by a colored shape. Motion: shapes slide or rotate into place once at 400ms ease-out; buttons swap fill colors at 150ms. Signature details: a hero made only of type and shapes; section labels set vertically along the left edge on desktop; numbered steps inside primary shapes; red, blue and yellow each meaning one thing across the site. Do: let form follow function, keep layouts clean, keep the color code consistent. Avoid: gradients, rounded rectangles, decorative clutter, any color beyond the three plus black and white. 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