TechnicalBauhaus 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.