A minimalist, monochrome-first design system that powers a refreshed, responsive marketing & catalogue website for a global sanitary-ware manufacturer — built for clarity, calm and confidence.
“Innovating Sanitary Solutions Worldwide.”
The brief was simple: improve the layout with a minimalist approach; keep the same logo, colors and fonts. This system keeps Hatch's black wordmark, Gilroy type and a strictly monochrome palette, then rebuilds the layout to be cleaner, more spacious and more considered — with white space treated as a primary material and a single water-blue accent reserved for interaction.
Near-black ink on white over a cool chrome-grey ramp. Color is an accent layer — never the foundation.
Gilroy ExtraBold display set uppercase, Gilroy Light body. Product photography carries the brand — not illustration.
2px corners, 1px hairline borders doing the work, shadows only on hover. Calm, functional motion — no bounce.
Every value is a token under tokens/, imported by the single styles.css entry consumers link. Colour, type, spacing, radius, elevation and motion — all from one source of truth.
A cool grey ramp with a faint chrome/water undertone — --neutral-0 → --neutral-900 plus --ink.
#ffffff#f4f6f6#eaeded#d8dddd#bcc3c4#949d9f#6f797b#525b5d#3a4143#22282a#111516The signature interactive colour for links, focus, active states and primary badges. --accent #1b86a8.
#eef6fa#d5eaf2#79bdd6#1b86a8#156b88#0e4d64Semantic status
#2f7d5b
Warning #b7791f
Danger #b23b3b
Info #1b86a8
A cohesive, cool-forward family that tints product families — muted, so tiles read as a set, never candy-bright.
#1b86a8
Marine — showers #2f5786
Sage — wellness #5c8a72
Clay — ceramics #b06a4a
Brass — fittings #a3813a
ExtraBold (800) for all display & labels, set uppercase with tight tracking. Light (300) for calm, airy body at 1.65 line-height.
Fluid display down to overline — a single, considered ramp.
A 4px base scale drives every gap and pad, from --space-1 (4px) to --space-32 (128px).
Crisp corners by default (2px). Borders define surfaces; soft, cool-tinted shadows appear only on hover.
Reusable primitives, each shipping .jsx + .d.ts + .prompt.md and a demo card. Imported via const { X } = window.HatchSanitaryDesignSystem_c15e1f.
Rectangular uppercase CTA — primary / accent / secondary / ghost, sizes sm/md/lg.
Small uppercase chip — neutral / ink / outline / accent / new.
Overline + heading + optional description/action — the page section rhythm device.
Labeled text field with ink focus ring and error state.
Styled native dropdown for filters and sorting.
Sticky translucent header — wordmark, uppercase nav, search & language.
Ink footer with white wordmark, link columns and a legal bar.
Slash-separated catalogue trail.
Catalogue tile — contained image, name, model, category, badge.
Image-led category tile with gradient overlay and name bar.
Full-bleed home hero with overlaid headline and numbered pagination.
Hatch sells premium bathroom & sanitary products across seven families. The catalogue is bilingual (EN / العربية, RTL-ready) with category → subcategory → product drill-down.
Exposed & concealed mixers.
Washbasins, bathtubs, toilets.
Heads, rails, arms, hand showers.
Concealed cisterns & actuators.
Valves, hoses, fitting parts.
Towel bars, holders, shelves, dispensers.
Waste fittings, indoor drainage.
A full recreation of the refreshed Hatch site — Home, Products, Product detail and About, all navigable.
Open UI Kit → GuidelinesSpecimen cards for Colours, Type, Spacing and Brand — the reference for using each token correctly.
View guidelines → DocsFull context — content fundamentals, visual foundations, iconography, tokens, components and substitutions.
Read the docs →