Website UI Kit

The monochrome v4 design system of the F. BINSABBAR storefront - the same tokens, type, form components and content blocks the Website Editor composes. This page renders live from store.css and the shared blocks.js registry, so every block (with its variable options) and every unified component appears automatically. Nothing here is hand-maintained that the registry already knows.

Every literal colour lives once, in the store.css :root. Monochrome only - paper / cream / sand / greige grounds and ink / grey type. No gold, champagne or accent.

Semantic roles, single-sourced as --ty-* tokens in the store.css :root (the audited house baseline). Body 16/24, labels + navigation + product names and prices 14/17.5, overlines, tags and references 10/15 uppercase (1px tracking), small headings 22/27.5, section + PLP headings 24/30 switching to 32/40 at exactly 768px, hero 32/40 at every width, editorial statements 24/30, fixed footer group labels 10/15 uppercase and mobile footer accordion labels 16/20. Latin tracking is .4px; sentence case everywhere except overlines, references and the wordmark. Arabic sets in Tajawal through the SAME roles and numeric sizes, with letter-spacing reset (an intentional shaping exception) and no Latin uppercase behavior.

One pill button family. .btn fills ink; .btn.out outlines; .btn.glass frosts over imagery; .btn.sm compacts; .btn.abtn is the circular arrow; .lcta is the editorial text link.

The unified control set (single source: store.css). Every storefront form - concierge, search, newsletter, filters, cookies, the bag, and any future form - is built from these. Monochrome, 44px+ hit targets, RTL-safe, visible focus rings.

Product and collection cards, and the frosted tag badge.

The real product row, personalisation cards, and black order summary rendered from the production bag classes.

The storefront line-icon library, enumerated live from the canonical BOH manifest. Drop any into markup with <svg class="ico"><use href="#i-name"/></svg>. The runtime resolves the current source glyph dynamically.

The site chrome, rendered inline from the real store.css classes (their live CSS is fixed-position, so the demo neutralises that). Header .hdr is transparent-over-hero by default and turns .hdr.solid on scroll; the mega menu is .mega; the footer is class-driven (.fsig / .fcols / .futil / .fbot) and carries the fixed centered House-gate signature (no global sign-up form).

Every storefront overlay, rendered inline from its real classes (their live CSS is fixed / off-screen, so the demo pins them open): search .fbsearch (header or Cmd K), the collection filter/sort drawer .fdrawer (floating .filter-fab), the region & language panel .loc, and the cookie consent bar .cookie. All controls come from the unified form kit.

The remaining storefront patterns, from their real classes: carousel controls, accordion, feedback toast, the 3D-viewer toggle, the bag order-summary, the account hub cards, loading skeletons, collection doorways and the long-form (legal) prose scale.

Every section the Website Editor can place, rendered from its defaults, with its variable options auto-generated from the block's fields[] schema in blocks.js. Editorial and data-bound blocks (collections, product carousels) render sample house content; template and system-page blocks fill from live data on a real page, so here each shows a labelled placeholder of what it becomes.