Hanoot

Overview

Hanoot is a local e-commerce platform celebrating heritage, street culture, and nostalgic storytelling through curated products. The brand serves collectors, cultural enthusiasts, and everyday consumers seeking authentic, locally-inspired goods—from vintage records to artisanal ceramics. The design aesthetic is 'Nostalgic Minimalism': a clean, light-filled interface anchored by a rich purple accent (#663b98) that evokes both cultural depth and contemporary sophistication. The hero features a vibrant illustrated pattern of vintage cars, board games, oil lamps, and plants against a deep purple background, immediately establishing the brand's playful reverence for the past. The UI responds with restraint—white surfaces, subtle grays, and precise typography—allowing product imagery and the purple accent to command attention. Voice: warm, conversational, never corporate. The brand speaks as a knowledgeable friend sharing stories: 'Each piece carries a memory—yours to discover.'

Colors

The color system balances heritage warmth with contemporary clarity. Primary (#663b98) is the signature purple accent used on CTAs, active states, and brand moments—it appears on the 'شبكة' (grid) toggle button and drives visual hierarchy throughout. On-primary is pure white (#ffffff) for maximum contrast on interactive elements. Secondary (#3a3a3c) is a near-black used for body text and structural elements, ensuring readability at 16px body-md. Tertiary (#e3fb03) is a bright lime-yellow reserved for highlights and accent badges, creating visual pop against the neutral palette. The surface stack progresses from #ffffff (base) through #f6f6f6 (container-low) to #e0e0e0 (container-highest), providing subtle depth without darkness. Outline (#d1d1d6) and outline-variant (#e3e3e8) define border

Typography

The type system uses Kurdish-Rubik as the primary font family, with Rubik and SNPro as fallbacks, ensuring proper rendering for Arabic and Kurdish text. Display (56px, 700 weight, -0.02em tracking) anchors hero sections and major announcements. Headline-lg (40px, 600 weight) is used for category titles and modal headers. Headline-md (28px, 600 weight) breaks up product sections. Title-lg (20px, 600 weight) labels cards and subsections. Body-lg (18px, 400 weight, 28px line-height) is used for product descriptions and long-form content. Body-md (16px, 400 weight, 24px line-height) is the standard paragraph text and input placeholder. Label-md (14px, 600 weight, 0.01em tracking) is applied to buttons, badges, and form labels. Label-sm (12px, 500 weight, 0.02em tracking) is used for secondary

Layout

The layout uses a 12-column grid with a max-width of 1280px, centered with auto margins. The gutter is 24px on desktop, reducing to 16px on tablet and 12px on mobile. Hero sections span full-width (100vw) with overflow-hidden to bleed imagery edge-to-edge. Product cards are arranged in a responsive grid: 4 columns on desktop (1280px+), 3 columns on tablet (768px–1023px), and 2 columns on mobile (320px–767px). Container padding is 24px (md spacing) on desktop, 16px on tablet, and 12px on mobile. Section separation uses lg spacing (40px) between major content blocks. The header is sticky at z-index 125, with a 10px bottom padding and a subtle 1px border-bottom at rgba(0, 0, 0, 0.06). Whitespace is generous: product cards have 24px internal padding, and text blocks maintain 1.25em top/bottom

Elevation & Depth

Depth is achieved through subtle shadows and layering, never through darkness. Level 1 (Base): flat surfaces at #ffffff with no shadow. Level 2 (Cards & Inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to product cards and input fields. Level 3 (Modals & Dropdowns): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), used for overlays and floating panels. Hover states elevate cards from Level 2 to Level 3 with a 200ms transition. The segmented control uses an inset shadow (inset 0 1px 0 0 rgba(255, 255, 255, 0.5), inset 0 2px 4px rgba(0, 0, 0, 0.06)) to create a recessed appearance, while t

Shapes

The shape philosophy is 'Soft-Technical': rounded corners are used consistently but never aggressively, balancing approachability with precision. Buttons use lg (1rem / 16px) border-radius, creating a friendly but professional appearance. Cards and modals use xl (1.5rem / 24px) border-radius for a softer, more inviting feel. Input fields use DEFAULT (0.5rem / 8px) border-radius for a compact, functional look. The segmented control uses full (9999px) border-radius to create a pill shape, emphasizing its toggle nature. Badges use full (9999px) border-radius to distinguish them as secondary infor

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses #663b98 background with white text, 48px height, 12px vertical / 24px horizontal padding, and lg (16px) border-radius. On hover, the background darkens to #5a2f85 with a 200ms ease-out transition. On active/press, it darkens further to #4a2670. Focus state adds a 3px ring at rgba(102, 59, 152, 0.1). Button-secondary uses a light gray background (#e8e8e8) with a 1px outline at #d1d1d6, maintaining the same 48px height and lg radius. Button-ghost has a transparent background with purple text; on hover, it reveals a light purple container (#e8dff5) background. All buttons use label-md typography (14px, 600 weight) and include a subtle box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to lift them off the page.

C

Do's and Don'ts

**Do**

• Do use the purple primary (#663b98) sparingly on interactive elements—CTAs, active states, focus rings—to maintain visual hierarchy and prevent color fatigue.
• Do maintain 24px gutter spacing on desktop and reduce proportionally on smaller screens (16px tablet, 12px mobile) to preserve the breathing room that defines the brand.
• Do apply label-md (14px, 600 weight) to all button text and use 48px height consistently across primary and secondary buttons for predictable touch targets.
• Do use the full rounded corners (9999px) exclusively for badges and segmented controls to signal secondary or toggle interactions; reserve lg (16px) for primary buttons.
• Do layer shadows progressively: Level 2 (0 3px 8px rgba(0, 0, 0, 0.15)) for cards, Level 3 (0 8px 24px rgba(0, 0, 0, 0.12)) for modals, and never exceed Level 3 to maintain the light, airy aesthetic.

**Don't**

• Don't use the primary purple (#663b98) as a background fill for large surfaces; it overwhelms the interface. Reserve it for accents, borders, and interactive states only.
• Don't mix border-radius values within a single component family (e.g., don't use sm on one button and lg on another in the same group). Consistency signals intentionality.
• Don't apply shadows to text or use text-shadow for decorative purposes; reserve shadows for elevation and depth separation between layers.
• Don't reduce the 48px button height below 44px on mobile—maintain touch target size to ensure accessibility and usability on small screens.
• Don't use the tertiary yellow (#e3fb03) as a background for large text blocks; it reduces contrast and readability. Reserve it for small badges, highlights, and accent elements only.