# CoolSouq — Design System **CoolSouq** is a trilingual (English · العربية · Türkçe) B2B marketplace for **industrial HVAC & cooling equipment** — VRF systems, air- and water-cooled chillers, heat pumps, dry coolers, evaporators, condensers and refrigeration compressors — both **new and used**, serving the Middle East and surrounding regions. The marketplace connects **HVAC contractors / installers** and **equipment dealers / resellers**: buyers browse spec-filtered catalogs, compare units side-by-side, request quotes (RFQ) or buy directly; sellers list inventory, manage leads, and ship worldwide with verified-dealer trust signals and logistics tracking. > This is a **greenfield brand** — there is no prior codebase, Figma, or logo. The brand below was designed from scratch for this project. --- ## Sources & references The product domain and feature set were derived from two reference marketplaces the client cited as inspiration (the client does **not** own these — they are competitive/market references only): - **Evroprom** — https://evroprom.com/ — used industrial chiller dealer (lead-gen "BUY / RENT" model, spec-led catalog, "Sell to us" buyback, chiller calculator, brand-led listings: Carrier, Trane, York, Climaveneta, Ciat, Daikin…). - **Machineseeker › Chillers** — https://www.machineseeker.com/Chillers/ci-260 — large multi-dealer used-machinery marketplace (deep spec filters: cooling capacity kW, refrigerant, cooling type, year; certified-dealer trust seal; classified + auction listings; inquiry/RFQ flow). Domain vocabulary captured for realistic copy: cooling capacity (kW / tons), refrigerant codes (R410A, R134a, R32, R454B, R407C), compressor types (scroll, screw, reciprocating), heat-exchanger types (shell-and-tube, plate, microchannel), air- vs water-cooled, hydraulic module, free cooling, ΔT, ambient range, IP rating, EXW/ONO pricing, "tested at our own test station", warranty 6–36 months. --- ## Brand at a glance - **Name:** CoolSouq — "Cool" (universal HVAC/cooling signifier) + "Souq" (سوق, *market* — grounds the brand in the MENA region for buyers and sellers alike). - **Personality:** industrial · engineered · precise · confident · commercial. Engineer-to-dealer, not consumer-cute. - **Logo:** a geometric **cooling-star** mark (six-spoke snowflake with a teal core) on a slate tile, beside the `Cool`+`Souq` wordmark (Saira Bold, "Souq" set in brass). Assets in `assets/`: - `logo-mark.svg` — icon only - `logo-wordmark.svg` — full lockup for light backgrounds - `logo-wordmark-dark.svg` — gold-tile lockup for dark backgrounds --- ## CONTENT FUNDAMENTALS **Voice:** confident and commercial, but credible to engineers. CoolSouq speaks *plainly and specifically* — it leads with the number that matters (kW, year, refrigerant, price) before adjectives. It sounds like a sharp dealer who knows the equipment, not a marketing department. - **Person:** address the buyer as **"you"**; CoolSouq is **"we"**. ("Tell us your load — we'll match the unit.") - **Casing:** - **Titlecase** for buttons & nav labels: "Request Quote", "Compare", "Sell Your Equipment". - **UPPERCASE eyebrows / micro-labels** with wide tracking for technical categories & section kickers: "AIR-COOLED CHILLER", "VERIFIED DEALER", "IN STOCK". Keep these short (1–3 words). - Sentence case for body copy and helper text. - **Numbers are first-class.** Always pair a value with its unit and set it in the mono "data" face: `300 kW`, `R410A`, `2017`, `€18,400`, `ΔT ±0.3 °C`. Use tabular figures so columns align. Thousands separators on prices. - **Verbs are direct & active:** Browse · Compare · Request Quote · Buy Now · List Equipment · Track Shipment · Get a Callback. - **Trust language is concrete, never vague:** "Tested at our station · 7-point inspection", "12-month warranty", "Verified Dealer · 240 deals". Avoid empty superlatives ("best ever"); prefer evidence ("save up to 70% vs. new"). - **Tone examples:** - Hero: *"The Gulf's marketplace for industrial cooling. 880+ chillers in stock, tested and warrantied — buy, rent or sell."* - Listing blurb: *"Air-cooled chiller · 300 kW · R410A · 2017 · 2× Bitzer screw · tested, 12-mo warranty."* - Empty state: *"No units match these specs yet. Widen the kW range or set a stock alert — we add inventory weekly."* - RFQ confirmation: *"Quote requested. A CoolSouq engineer will reply within one business day with price, lead time and logistics."* - **Emoji:** **none** in product UI. (Reference sites use them in SEO titles; CoolSouq does not.) Status is shown with icons + color, not emoji. - **Bilingual/RTL:** Arabic mirrors the layout (`dir="rtl"`); numbers, units, model codes and Latin brand names stay LTR within Arabic text. Turkish uses Latin layout. Keep labels short so all three languages fit one line. --- ## VISUAL FOUNDATIONS **Overall feel:** an engineered control-panel aesthetic — dense, gridded, legible, with cool industrial accents. Deep teal-slate structure, deep teal for action, lime for accent emphasis, bright teal for data/cooling. - **Color:** deep teal-slate neutrals (`--slate-*`, base `#0E2A2E`) carry structure; **deep teal `#0E7C86`** (`--brand`, the repurposed `--gold-*` ramp) is the single primary action color (buttons, key highlights, the wordmark accent); **lime `#8FB81E`** (`--accent`) is the accent for emphasis (compare, highlighted specs); **bright teal `#2BB0C4`** (`--teal-*`) is the "cooling & data" color (links, focus ring, the verified-dealer seal); **warm paper `#EFEAE0`** is the on-dark text & soft surface. Status: green/amber/red/blue. The lime accent is used sparingly — it's the spark, not the field. - **Typography:** **Saira** (display/headings — wide industrial grotesque, tight tracking on big sizes), **IBM Plex Sans** (+ **IBM Plex Sans Arabic**) for UI & body, **IBM Plex Mono** for all spec data and numbers. Eyebrows are uppercase Plex Sans with `0.08em` tracking. - **Backgrounds:** predominantly flat — page is `--slate-50`, cards are white. Dark bands (`.theme-dark`, slate-900) anchor hero, footer and dashboard chrome. **No** decorative blob gradients. Permitted texture: a faint blueprint/grid hairline pattern and a very subtle slate→slate vertical gradient on dark hero bands only. Product imagery sits on neutral slate plates. - **Imagery vibe:** real equipment photography on neutral/industrial backdrops, cool and slightly desaturated; where no photo exists, a **slate placeholder plate** with the cooling-star watermark stands in (never invent product art). Photos get a `--radius-md` crop and a hairline border. - **Borders:** hairline `1px var(--border)` everywhere — this is a border-led, not shadow-led, system. Tables and spec grids use visible 1px rules. Borders get slightly stronger (`--border-strong`) on hover/active rows. - **Shadows:** restrained, cool-toned, low-spread (`--shadow-sm/md`). Cards rest on a hairline + `--shadow-sm`; only popovers/modals/dropdowns use `--shadow-lg/xl`. Inputs may use a subtle `--shadow-inset`. Nothing floats dramatically. - **Corner radii:** small and mechanical — `--radius-md (5px)` for controls, `--radius-lg (8px)` for cards, `--radius-sm (3px)` for chips/badges, pill only for filter chips & status dots. No big squircles. - **Cards:** white surface, `--radius-lg`, `1px var(--border)`, `--shadow-sm`. Product cards = image plate on top, then title, a 2–3 line **mono spec row**, price + CTA. Hover: border → `--border-strong`, shadow → `--shadow-md`, lift `translateY(-2px)`. - **Hover states:** buttons darken (gold→`--gold-600`); ghost/secondary fill with a tint (`--gold-50` / `--teal-50` / `--slate-100`); links gain underline; cards lift 2px + stronger border. Never lighten on hover. - **Press states:** `translateY(1px)` + slightly darker fill (`--brand-press`). No scale-bounce. - **Focus:** 3px teal ring (`--ring-focus`) offset 2px — consistent across all interactive elements. - **Transparency & blur:** used sparingly — sticky header gets `backdrop-filter: blur(8px)` over a translucent surface; modal overlay is `--overlay` (slate @ 55%). No frosted-glass everywhere. - **Motion:** crisp and mechanical — `--dur-fast (140ms)` for hovers, `--dur-base (200ms)` for panels/dropdowns, `--ease-standard`. Fades + short translates; **no** bounce, no spring, no infinite decorative loops. Respects `prefers-reduced-motion`. - **Layout rules:** max content width `--container-xl (1320px)`; generous gridded gutters; sticky filter rail on catalog; sticky header; everything aligns to the 4px grid. Spec data right-aligns in tables; labels left-align. --- ## ICONOGRAPHY CoolSouq's icon language is a consistent **~1.8px stroke, rounded-join, line** style (the [Lucide](https://lucide.dev) look). The UI kits ship this as **inline line-SVGs** drawn to that spec (no external dependency at runtime); for production, Lucide (MIT) is the recommended drop-in — `` then `lucide.createIcons()`. *(Substitution note: there is no inherited icon set for this greenfield brand; the Lucide line look was chosen as the closest fit to the technical aesthetic.)* - **Style rules:** line icons only (no filled/duotone), stroke `1.75`, size on the 16/20/24 grid, inherit `currentColor`. Brass is reserved for *action* icons; most icons are `--text-muted` / `--slate-500`. - **Domain icons used:** `snowflake`, `thermometer`, `gauge`, `wind`, `fan`, `zap` (power kW), `package`, `truck` (logistics), `shield-check` (verified dealer), `badge-check`, `git-compare` (compare), `sliders-horizontal` (filters), `phone-call` (callback), `map-pin`, `calendar`, `file-text` (RFQ/spec sheet), `building-2` (dealer). - **Brand glyph:** the cooling-star mark (`assets/logo-mark.svg`) doubles as the app/favicon and a loading/empty-state motif. It is **not** part of the Lucide set — use it only as the logo. - **Emoji & unicode:** not used as UI icons. The only non-Lucide glyphs allowed are typographic: `×` (close), `→` (inline arrow), `±`, `°`, `·` (mid-dot separator in spec rows), `√`/`✓` rendered via `check` icon not emoji. --- ## INDEX — what's in this system **Foundations** - `styles.css` — root entry (link this). `@import`s everything below. - `tokens/` — `colors.css`, `typography.css`, `spacing.css`, `radius.css`, `shadows.css`, `motion.css`, `fonts.css`, `base.css`. - `guidelines/` — foundation specimen cards (Design System tab: Colors, Type, Spacing, Brand). **Assets** — `assets/logo-mark.svg`, `assets/logo-wordmark.svg`, `assets/logo-wordmark-dark.svg`. **Components** (`components/` — React primitives, each with `.jsx` + `.d.ts` + `.prompt.md`, namespace from `check_design_system`): - *core* — Button, IconButton, Badge, Tag, Card, SpecRow / SpecTable - *forms* — Input, Select, Checkbox, Switch - *commerce* — ProductCard, PriceTag, VerifiedDealerBadge, StatusPill - *navigation* — Tabs, Breadcrumbs, Pagination **UI kits** (`ui_kits/` — full interactive recreations): - `marketplace/` — public website: home (hero + categories + featured), catalog (spec filter rail, compare tray), product detail (gallery, spec tabs, buy box), multi-step RFQ modal - `seller-dashboard/` — dealer Seller Hub: KPI overview, listings manager, leads/RFQ inbox (dark sidebar chrome) - `buyer-account/` — buyer account: RFQ inbox, quote review, order + logistics tracking timeline - `mobile-app/` — buyer iOS app (device frame): discovery feed, equipment detail, RFQ inbox **Skill** — `SKILL.md` (Agent-Skills compatible; read this then explore). > See each component's `.prompt.md` for usage and each UI kit's `README.md` for its screen list.