# Hatch Sanitary — Design System A minimalist, monochrome-first design system for **Hatch Sanitary**, a global sanitary-ware manufacturer and retailer. This system powers a refreshed, responsive marketing + catalogue website that showcases the company's products with clarity and calm. > **Tagline:** *Innovating Sanitary Solutions Worldwide.* ## Sources - **Live site (ground truth):** https://dev.hatchsanitary.com/en (production mirror: https://hatchsanitary.com) - **Brand assets provided by the client:** `uploads/Hatch Sanitary.png` (wordmark), `uploads/gilroy-extrabold.otf`, `uploads/gilroy-light.otf` - Product imagery in the UI kit is loaded live from the Hatch CDNs (`d2jpxnk9ldi6wc.cloudfront.net`, `dev.hatchsanitary.com/assets`). The brief: *"improve the layout and design with a minimalist approach; keep the same logo, colors and fonts."* This system keeps Hatch's black wordmark, Gilroy type and strictly monochrome (grey & black) palette, and rebuilds the layout system to be cleaner, more spacious and more considered. --- ## Company & product context Hatch sells premium bathroom and sanitary products across seven families: 1. **Faucets** — exposed & concealed mixers 2. **Sanitary Ware** — washbasins, bathtubs, toilets 3. **Shower Systems** — heads, rails, arms, hand showers, brackets 4. **Concealed Cisterns & Actuators** 5. **Valves & Fitting Parts** — valves, hoses, fittings 6. **Bathroom & Washroom Accessories** — towel bars, holders, shelves, dispensers 7. **Drainage** — waste fittings, indoor drainage The site is bilingual (English / العربية, RTL-ready) and organized as a browsable catalogue with category → subcategory → product drill-down, plus About, Articles, Contact, Catalogue, Find Us and a VR view. --- ## CONTENT FUNDAMENTALS **Voice:** aspirational but grounded; calm and quality-focused. Hatch talks about *elevating*, *revolutionizing* and *enhancing* personal spaces. - **Person:** first-person plural — *"we always seek to revolutionize personal spaces"*, *"we aim to provide sustainable solutions"*. Addresses the reader implicitly ("your bathroom", "for homeowners and businesses"). - **Casing:** Sentence case for body copy and descriptions. **Headings and UI labels are UPPERCASE** (a direct consequence of Gilroy ExtraBold display styling), letters tracked tight. - **Tone words:** *innovative, durable, eco-friendly, sustainable, aesthetically pleasing, distinct, functional, premium, comfort, well-being.* - **Product naming:** descriptive product name + model code, e.g. "Wall Mounted Shattaf Mixer" · `HAT-MX097`, "Ultimate 12 Concealed Cistern" · `U121`. - **CTAs:** short, verb-led — *Learn More, Read more, View All, Explore products, Contact Us, Find Us, Get catalogue.* - **Emoji:** none. A single 🌐 glyph appears only as the language switcher affordance on the live site; the refreshed system replaces it with a line-icon globe. Do not use emoji in content. - **Example section headers from the site:** "About Us", "Our Mission", "Categories", "Subcategories", "Recent Products", "Videos", "Follow us". --- ## VISUAL FOUNDATIONS **Overall vibe:** minimalist, editorial, monochrome-first. White space is a primary material. The design feels like a premium product catalogue — restrained, confident, chrome-cool, with clean water-blue accents. - **Color:** monochrome foundation — near-black **Ink `#111516`** on **White**, with a cool-grey neutral ramp (faint blue undertone that evokes chrome fixtures and water). Over that sits a **water-blue signature accent** (`--accent #1B86A8`) used for interactive states: links, focus rings, active nav underline, primary badges, category-card keylines/arrows. A small, cool-forward **category-coding family** (`--cat-aqua/-marine/-sage/-clay/-brass`) tints product families — muted, so tiles read as a set, never candy-bright. Color is an accent layer over grey & black: keep it purposeful, max one or two background tones per page (white + ink panels; occasionally `--bg-subtle`). - **Type:** Gilroy only, two weights. **ExtraBold (800)** for all display, headings, labels, buttons — set UPPERCASE with tight tracking (−0.01 to −0.02em). **Light (300)** for all body copy, giving an airy, calm read at generous line-height (1.65). No other weights ship. - **Spacing & layout:** 4px base grid; generous section padding (`clamp(64px,9vw,128px)`); max content width 1280px (wide chrome 1440px). Grid-and-gap layouts throughout. Big rhythmic sections separated by overline+heading blocks. - **Backgrounds:** mostly flat white; occasional full-bleed photographic hero and full-width **ink panels** for mission/CTA moments. No gradients as decoration (only functional image-overlay gradients for legibility). The logo carries a hand-drawn **wave** motif; imagery, not illustration, carries the brand. - **Imagery:** product photography on white/neutral backgrounds, composited with `mix-blend-mode: multiply` so it sits cleanly on `--bg-subtle` panels. Lifestyle/hero shots are cool-toned and clean. Category tiles use a dark bottom-up gradient for the name bar. - **Corner radii:** crisp. Default `--radius-sm: 2px`; cards and buttons stay near-rectangular. Pills only for tiny count chips. This sharpness is deliberate and on-brand. - **Borders vs shadows:** borders do most of the work — 1px `--border-subtle` hairlines define cards and dividers. Shadows are soft, cool-tinted and reserved for hover elevation (`--shadow-md`) — never ambient/decorative. - **Cards:** white surface, 1px hairline border, 2px radius, no shadow at rest; on hover the border strengthens, a soft shadow appears, and the card lifts 3px. Product images scale slightly on hover. - **Animation:** calm and functional. Durations 120–420ms; standard `cubic-bezier(.4,0,.2,1)` and a soft `ease-out` for entrances. Nav underline wipes in; hero slides crossfade; category arrows shift and fill with the accent/category color. No bounce, no spring, nothing playful. - **Hover states:** primary buttons darken + lift 1px; secondary (outline) inverts to ink fill; ghost gets a faint neutral wash; links go accent→accent-600; footer links brighten to white. - **Press/focus:** focus shows a 2px ink outline (offset 2px) or a soft grey ring on inputs. Finish swatches and active filters mark selection with an ink border/left-rule. - **Transparency & blur:** the sticky header is translucent white with `backdrop-filter: blur(10px)`. Count chips over imagery use a subtle dark blur. Used sparingly, only for chrome-over-content. --- ## ICONOGRAPHY Hatch's own site is **very light on icons** — it favors type and imagery. The observed icon usage on the live site: - **UI SVGs** on the CDN: `icon-plus.svg` / `icon-minus.svg` (expand/collapse category accordions), `menu-arrow-right.svg` (mobile menu drill-in). These are simple line/stroke marks. - A **globe** affordance (🌐 on the live site) for the EN/العربية language switch. - Arrow glyphs (→, ‹ ›) for navigation and "read more" affordances. **Approach in this system:** minimal, thin-stroke **inline SVG line icons** drawn at ~1.6–1.8px stroke weight (search, globe) matching the site's plus/minus/arrow style — kept inside components so no icon font is needed. Unicode arrow glyphs (→ ‹ ›) are used for directional affordances, consistent with the source. **No emoji.** No icon font, no colored/filled icon set. If a broader icon set is ever needed, substitute **Lucide** (thin 1.75px stroke, matching feel) from CDN and flag it — this has *not* been introduced yet, to stay faithful to the source's sparse iconography. --- ## Tokens All tokens live under `tokens/`, imported by the root `styles.css` (the only file consumers link): - `fonts.css` — Gilroy `@font-face` (ExtraBold 800, Light 300) - `colors.css` — base neutrals, water-blue accent ramp, category-coding family, semantics, and semantic aliases - `typography.css` — font stacks, weights, type scale, line-heights, tracking - `spacing.css` — 4px scale + layout (container, gutter, section-y) - `effects.css` — radius, elevation/shadow, motion (easing + durations) - `base.css` — element resets, base element styles, reusable `.t-*` type utilities & `.hatch-container` --- ## Components Reusable React primitives (import via `const { X } = window.HatchSanitaryDesignSystem_c15e1f`): **Core** (`components/core/`) - **Button** — rectangular uppercase CTA; variants primary / accent / secondary / ghost; sizes sm/md/lg. - **Badge** — small uppercase chip; tones neutral / ink / outline / accent / new. - **SectionHeading** — overline + heading + optional description/action; the page section rhythm device. **Forms** (`components/forms/`) - **Input** — labeled text field with ink focus ring and error state. - **Select** — styled native dropdown for filters/sorting. **Navigation** (`components/navigation/`) - **SiteHeader** — sticky translucent header with wordmark, uppercase nav (ink underline), search + language. - **SiteFooter** — ink footer with white wordmark, link columns, legal bar. - **Breadcrumb** — slash-separated catalogue trail. **Product** (`components/product/`) - **ProductCard** — catalogue tile: contained product image, name, model, category, badge. - **CategoryCard** — image-led category tile with gradient overlay and name bar. - **HeroSlider** — full-bleed home hero with overlaid headline and numbered pagination. Each component ships `.jsx` + `.d.ts` + `.prompt.md`, with one `@dsCard` demo HTML per directory. --- ## UI kit `ui_kits/website/` — an interactive recreation of the refreshed Hatch site. Open `index.html`: - **Home** — hero slider, shop-by-category grid, ink mission strip with stats, recent products. - **Products** — filterable catalogue with search, category rail, sort, product grid. - **Product detail** — gallery, finish selector, spec table, related products. - **About** — brand story, values, catalogue CTA. Navigate by clicking Home / About / Products in the header, category/product cards, and breadcrumbs. --- ## Repo index - `styles.css` — global entry (import this) - `tokens/` — all design tokens (see above) - `assets/` — `logo.png` (black wordmark), `logo-white.png` (inverse), `fonts/` (Gilroy otf) - `components/` — core, forms, navigation, product primitives - `ui_kits/website/` — interactive site recreation - `guidelines/` — foundation specimen cards (Colors, Type, Spacing, Brand) - `thumbnail.html` — project tile - `SKILL.md` — Agent-Skill entry point ## Notes / substitutions - **Fonts:** using the client-supplied Gilroy ExtraBold + Light only. The live site uses additional Gilroy weights for some UI; this system deliberately restricts to the two provided weights. If you want Medium/SemiBold for denser UI, please supply those files. - **Accent color:** the system uses a **water-blue signature accent** (`--accent #1B86A8`) for interactive states, plus a muted category-coding family (`--cat-*`) for product families. Keep it an accent layer over the grey/black foundation — don't let color dominate.token change if ever wanted.)