---
name: coolsouq-design
description: Use this skill to generate well-branded interfaces and assets for CoolSouq, the trilingual (English · العربية · Türkçe) B2B marketplace for industrial HVAC & cooling equipment — either for production or throwaway prototypes/mocks. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
user-invocable: true
---

# CoolSouq Design System

Read the `readme.md` file within this skill first — it carries the full brand context, CONTENT FUNDAMENTALS (voice/copy), VISUAL FOUNDATIONS (color, type, spacing, motion, cards), ICONOGRAPHY, and an INDEX of every file. Then explore the other available files.

## What's here
- `styles.css` — the single global stylesheet entry. Link this and you get every token + webfont. It is an `@import` manifest only.
- `tokens/` — CSS custom properties (colors, typography, spacing, radius, shadows, motion, fonts).
- `guidelines/` — foundation specimen cards (color/type/spacing/brand swatches).
- `assets/` — logos (`logo-mark.svg`, `logo-wordmark.svg`, `logo-wordmark-dark.svg`).
- `components/` — React UI primitives (`core/`, `forms/`, `commerce/`, `navigation/`). Each has `.jsx` + `.d.ts` + `.prompt.md`. Read the `.prompt.md` for usage.
- `ui_kits/` — full interactive screen recreations: `marketplace/`, `seller-dashboard/`, `buyer-account/`, `mobile-app/`. Each has an `index.html` you can open.

## How to use it
- **Visual artifacts** (slides, mocks, throwaway prototypes): copy the assets you need out of `assets/`, link `styles.css`, and build static/standalone HTML for the user to view. Reuse the patterns in `ui_kits/` rather than reinventing layouts.
- **Production code:** copy assets and read the rules here to become an expert in designing with this brand. The component `.jsx` files are reference implementations — match their structure, props, and the CSS-variable styling approach.

## Brand quick reference
- **Primary action:** deep teal `--brand` (`#0E7C86`). **Accent:** lime `--accent` (`#8FB81E`). **Data / cooling:** bright teal (`--teal-400` · `#2BB0C4`). **Structure:** deep teal-slate neutrals (ink `#0E2A2E`).
- **Type:** Saira (display/headings), IBM Plex Sans + Plex Sans Arabic (UI/body), IBM Plex Mono (all spec numbers — kW, model codes, prices).
- **Feel:** engineered, dense, border-led (hairline borders > shadows), small mechanical radii, crisp non-bouncy motion. Numbers are first-class and always carry units. No emoji in UI.
- **Trilingual/RTL:** Arabic mirrors layout (`dir="rtl"`); keep Latin model codes/brands LTR.

If the user invokes this skill without other guidance, ask them what they want to build or design, ask a few clarifying questions (surface? language? production vs mock?), then act as an expert CoolSouq designer who outputs HTML artifacts *or* production code, depending on the need.