# Wear At Work — Design System

A redesign design system for **WEAR AT WORK** (`wearatwork.gr`), a Greek e-commerce store for professional workwear, safety footwear and accessories. Tagline: **"Inspiring Workwear"** — *"Φτιαγμένα για δουλειά. Ταιριαστά στην καθημερινότητα."*

This system defines the visual foundations, tone, reusable UI components and a storefront UI kit for a modernised version of the shop. The storefront is **Greek-only** (locale `el_GR`).

## Sources
- **Live site:** https://www.wearatwork.gr/ (WooCommerce / Elementor). Explored via web fetch of the homepage.
- **Logo:** provided by the user — `uploads/logo.png` (white horizontal lockup with shield "W" mark + "INSPIRING WORKWEAR" tagline). Copied to `assets/logo-white.png`; recoloured navy/ink/yellow variants generated programmatically.
- **Brand palette:** directed by the user — anchored on `#1e3049`, `#2b4567`, `#ffd300` plus white / gray / black.
- Partner brands sold: Helly Hansen Workwear, Projob, Shoes For Crews, Reebok, Puma, Guardio, Petzl, Salomon, Skylotec, Tegera, Monitor, Mozo. (Their logos are third-party and are **not** bundled here — reference from the live site when needed.)

## Product context
Verticals: **Ένδυση** (men's/women's clothing — jackets, pants, fleece, hi-vis, base layers), **Υπόδηση** (safety footwear), **Αξεσουάρ** (gloves, helmets, eyewear, tool organisation, fall protection). Products are also browsable "ΑΝΑ ΕΠΑΓΓΕΛΜΑ" (by profession: logistics, construction, technicians, high-voltage, food service). Prices show gross and **"χωρίς ΦΠΑ"** (ex-VAT); colourways render as small round "BUBBL" swatches; hi-vis items are heavily represented (safety yellow / orange).

---

## CONTENT FUNDAMENTALS
- **Language:** Greek only. Formal plural of politeness ("εσείς", "Μείνετε", "Αναδείξτε") — the brand addresses the professional with respect, never casual "εσύ".
- **Tone:** empowering, confident, benefit-led. It sells *standing out and professionalism*, not just garments. Example headlines: **"ΑΝΑΔΕΙΞΤΕ ΤΗΝ ΑΞΙΑ ΣΑΣ"**, *"Μείνετε ασφαλής και κερδίστε τις εντυπώσεις"*, *"δώστε την καλύτερη πρώτη εντύπωση. παίζει ρόλο!"*
- **Casing:** primary headlines and all navigation / CTAs are **UPPERCASE**. Section intro headings sometimes appear lowercase for a softer editorial beat, then hero/nav go uppercase. Buttons are always uppercase ("ΕΠΙΛΟΓΗ", "ΠΡΟΕΠΙΣΚΟΠΗΣΗ").
- **Emphasis:** key words are **bolded** mid-sentence ("ξεχωρίζουν!", "με την πρώτη ματιά").
- **Emoji:** none. The register is professional/industrial.
- **Technical vocabulary is a feature:** standards and product tech are shown verbatim — "EN ISO 20471 CLASS 1", "HH CONNECT™", "S3S", "HiVis", "Softshell". Keep them.
- **Micro-copy examples:** "Δωρεάν Επιστροφή", "Άμεση Αποστολή", "Επιλογή", "Προεπισκόπηση", "Πρόσθήκη στην λίστα επιθυμιών", "0 προϊόντα".

## VISUAL FOUNDATIONS
- **Colour:** deep workwear **navy** (`--navy-700 #1e3049` primary, `--navy-600 #2b4567` secondary) is the structural brand colour — headers, footers, primary buttons. **HiVis safety yellow** (`--yellow-500 #ffd300`) is the single loud accent, reserved for the most important CTA and hi-vis product signalling; **orange** `#ff6a13` is the secondary safety accent drawn from the product line. Neutrals are a slightly cool gray scale. Sale prices are red (`#cf2e2e`).
- **Type:** **Montserrat** for display/headings — bold-to-black, UPPERCASE, tight tracking (`-0.02em`), industrial and confident. **Mulish** for body/UI — clean humanist sans with full Greek coverage. Uppercase eyebrows/labels use wide tracking (`0.12em`). *(Substitution note below — these are the closest free Greek-capable matches, not the site's licensed fonts.)*
- **Backgrounds:** predominantly white with navy full-bleed feature bands (hero, "εταιρική ένδυση" block, footer). No gradients-for-decoration, no purple. Product imagery sits on very light gray (`--gray-50`). Photography is real product/lifestyle — cool, crisp, professional; hi-vis pieces pop against neutral scenes.
- **Layout:** wide max-width container (~1280px), generous section rhythm, product grids of firm rectangular tiles. Fixed sticky header.
- **Corners & borders:** **sharp / technical** — radii are small (3–10px; controls use 3px). Thin `1px` gray borders on cards and fields; primary buttons use a `2px` border matching their fill.
- **Shadows:** low-diffusion, navy-tinted, used sparingly — cards are mostly flat and lift only on hover (`--shadow-md`).
- **Motion:** snappy and precise, **no bounce**. Fast fades and small transforms (`120–280ms`, `cubic-bezier(0.2,0,0.1,1)`). Product image scales ~1.04 on card hover.
- **Hover states:** primary navy darkens to `--navy-800`; accent yellow darkens to `--yellow-600`; secondary/outline fills navy; product-card CTA flips to HiVis yellow. **Press:** colour shift (no shrink).
- **Focus:** navy focus ring `--shadow-focus` (3px, 35% navy).
- **Transparency/blur:** minimal — the aesthetic is solid and grounded, not glassy.

## ICONOGRAPHY
- The live site is Elementor-based and uses inline **SVG line icons** (cart, account, search, wishlist heart, social) at a light-to-medium stroke weight — no icon *font*, no emoji, no unicode-as-icon.
- This system standardises on **[Lucide](https://lucide.dev)** (via CDN) as the closest free match to that thin-stroke line style — use `stroke-width: 1.75`, `currentColor`. **This is a substitution** (the site's exact SVGs were not extracted); flag if pixel-exact icons are required and provide the source SVGs.
- Product colourways use small filled **round swatches** ("BUBBL"), reproduced by the `ColorSwatch` component.
- Brand/partner logos are external assets — not redrawn here.

---

## Components
Reusable primitives live in `components/<group>/` (`.jsx` + `.d.ts` + `.prompt.md`, one `@dsCard` per folder). Full inventory:
- **forms/** — `Button`, `IconButton`, `Input`, `Select`, `QuantityStepper`
- **product/** — `ProductCard`, `Badge`, `PriceTag`, `ColorSwatch`
- **navigation/** — `Breadcrumb`
- **layout/** — `SectionHeader`

### Intentional additions
The source has no published component library, so the inventory above was derived from the storefront's recurring UI (product tiles, badges, price/VAT display, colourway swatches, category trail, section headers, forms). `SectionHeader` and `Breadcrumb` are layout helpers added to support the UI kit; all map to real patterns on the live site.

## UI kit
- **ui_kits/storefront/** — interactive recreation of the shop: homepage (hero + hi-vis grid + brand strip), product listing, product detail, and mini-cart. See its `README.md`.

## Foundations (Design System tab)
Specimen cards live in `guidelines/*.card.html` — Colors (navy / accents / neutrals / status), Type (display / body / scale / labels), Spacing (grid / radius+elevation), Brand (logo lockups / voice).

## Assets
- `assets/logo-white.png` — primary lockup (white, for navy/dark backgrounds)
- `assets/logo-navy.png`, `assets/logo-ink.png`, `assets/logo-yellow.png` — recoloured variants

## Root manifest
- `styles.css` — entry point (imports only) → `tokens/{fonts,colors,typography,spacing,effects,base}.css`
- `components/` — UI primitives · `guidelines/` — specimen cards · `ui_kits/` — product recreations · `assets/` — logos
- `SKILL.md` — Agent-Skills wrapper

## CAVEATS / substitutions
1. **Fonts** are the closest **free, Greek-capable** matches (Montserrat + Mulish), loaded from Google Fonts CDN — **not** the site's licensed typefaces. Swap in the real fonts if brand-exact.
2. **Icons** substitute Lucide for the site's inline SVGs.
3. **Partner-brand logos** and site product photography are not bundled (third-party).