# Woowind DESIGN.md

Portable brand/design memory for agents creating Woowind pages, campaigns, ads, email, and product assets.

## Brand soul
Woowind is practical adventure confidence: premium, technical, reliable, compact, ready for the road. The design should feel like smart gear for people who move — cyclists, drivers, outdoor families, commuters, and emergency-prepared travellers.

The brand is not luxury fashion and not generic automotive. It is high-utility, energetic, clear, and trustworthy.

## Core promise
**Made to Inflate.**
Small devices that remove friction from movement: tyres, bikes, balls, mattresses, emergency kits, and road readiness.

## Palette
- Deep Navy `#182746` — primary brand authority, headers, dark panels, footer, text.
- Lime Green `#D5F997` — signature energy, CTAs, badges, highlights, icon circles.
- White `#FFFFFF` — clean ecommerce clarity.
- Soft Grey `#F5F6F8` — product card backgrounds and quiet section contrast.
- Border Grey `#E5E5E5` — dividers, subtle card borders.
- Muted Text `#666666` / `#6B7280` — secondary copy.
- Alert Red `#C12434` — sale labels only, never decorative.

Use navy + white as the base. Lime is the spark. Do not overuse lime as a full background unless the message is a trust/impact moment.

## Typography
- Primary font: **Kanit**.
- Body: Kanit weight 300, 17px base.
- Navigation: 16px, weight 400.
- Headings: weight 500–600.
- Buttons: 15px, weight 400, uppercase.
- Product names: 17px, weight 300.
- Product prices: 20px, weight 500.

Tone: direct, concise, active. Avoid fluffy lifestyle copy.

## Shape language
- Buttons are pill-shaped: `border-radius: 30px`.
- Product cards are clean with light-grey image areas.
- Category pills: white pill, thin grey border, lime icon badge.
- Banners may use rounded corners and dark overlays on action photography.
- Layout prefers wide ecommerce grids, big hero visuals, and clear product comparison.

## Visual rules
- Show product in use: road, bike, SUV, camping, sports, emergency context.
- Use dark navy panels for authority and premium feel.
- Use lime only to direct action or signal readiness.
- Product photos should be crisp, realistic, and technical.
- Lifestyle scenes should feel real, outdoors/road-ready, not glossy AI stock.
- Keep UI sharp, fast, ecommerce-first.

## Components agents should preserve
- Sticky header with Products mega menu.
- Hero: product image/video + short punchy copy + lime CTA.
- Product tabs: Pumps / Emergency Kits / Bundles / Accessories.
- Hover image swap on product cards.
- Category pills with lime icon circles.
- Trust strip: warranty, returns, support, countries/Amazon proof.
- Activity gallery: SUVs, bikes, motorcycles, sports, camping, inflatables.
- Dark navy footer.

## Motion and interaction
- Subtle only: hover lift, image swap, light scale, mega menu reveal.
- No chaotic animations.
- Motion should make the product feel responsive and engineered.

## Agentic AI workflow
1. Load this `DESIGN.md` before generating any Woowind asset.
2. Load one concrete reference when available: current homepage, product card, banner, or screenshot.
3. Generate 2–4 options, each with a clear purpose.
4. Score output on: brand fit, conversion clarity, product truth, visual consistency, mobile readability.
5. Iterate the best option, do not restart from scratch unless the direction is wrong.
6. Save accepted patterns back into this file or a component note.

## Demo prompt pattern
“Using Woowind DESIGN.md, create a [landing section / ad / email / carousel / product page module] for [product/use case]. Preserve navy + lime brand DNA, Kanit typography, pill CTAs, clean ecommerce structure, and practical adventure confidence.”

## Avoid
- Generic SaaS purple/blue gradients.
- Random 3D blobs or AI shine.
- Fake product details, fake safety claims, fake certifications.
- Overusing lime until everything screams.
- Luxury-car moodboards that hide product usefulness.
- Long paragraphs where a product shopper needs scannable proof.