TechnicalWarm minimal design system for a local or craft business
Act as a senior brand designer. Restyle the existing site for {{business_name}}, a {{business_type}}, as a complete warm minimal 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: Fraunces 500 with its soft setting high and wonk off for headings; Instrument Sans 400 and 500 for text at 17px, line height 1.6. Scale 1.2: 17, 20, 24, 29, 35, 42, and 56px for the hero. Sentence-case headings at -0.01em.
Palette: background cream #FBF8F3, surface #F3EDE4, text #2B2622, muted #6B6259, border #E4DACB, accent terracotta #B4532A (hover #933F1E), secondary sage #7A8B6F for tags and small marks.
Shape: radius 8px on cards and images, 999px on buttons; 1px warm borders; one soft shadow (0 2px 8px at 8%) kept for the booking or order card.
Grid: 4, 8 and 12 columns at 360, 768 and 1280px with 16, 24 and 32px gutters; content max 1120px; section padding 56px mobile, 112px desktop, alternating cream and surface.
Imagery: real photos of the place, people and work in natural light: hands, tools, materials, the shop front, in one warm grade. Illustration only as small hand-drawn line marks.
Motion: gentle 200 to 300ms ease-out fades and 4px lifts on hover; no parallax.
Signature details: hours, address and phone set as a shop-sign card near the top; a hand-drawn underline under one word in the hero; maker or staff names in photo captions; a short note from the owner.
Do: show the real place, keep the menu or services scannable, keep the call or booking button in reach on phones.
Avoid: stock photos, script fonts for text, beige-on-beige low contrast, invented reviews.
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.