Zid

Overview

Zid is a comprehensive e-commerce platform designed for merchants across the Middle East who demand speed, simplicity, and sophistication in their digital storefronts. The brand embodies a "Premium Minimalism" aesthetic—a design philosophy that pairs a deep, authoritative dark purple foundation (#1f0433) with vibrant, energetic accent colors (primary purple #af72ff, success green #9eec98) to create an interface that feels both trustworthy and forward-thinking. The visual language prioritizes clarity and efficiency: clean typography hierarchies, generous whitespace, and purposeful color application guide users through complex e-commerce workflows without cognitive overload. The emotional response is one of empowerment—merchants feel capable, supported, and ready to scale their business.

Zid's voice is professional yet approachable, confident without arrogance. The brand speaks in direct, action-oriented language: "أنشئ متجرك مجاناً" (Create your store free), "اكتشف المتجر التجريبي" (Explore the demo store). Vocabulary emphasizes integration, completeness, and ease: "منصة متكاملة" (integrated platform), "حلول شاملة" (comprehensive solutions), "بسهولة" (with ease). The tone avoids jargon while maintaining authority—merchants are treated as intelligent business owners, not novices. Example sentence in brand voice: "في 24 ساعة، متجرك جاهز للبيع مع كل الأدوات التي تحتاجها." (In 24 hours, your store is ready to sell with every tool you need.)

Colors

The Zid color system operates on a principle of "Purposeful Contrast"—a light, neutral foundation (#ffffff surface, #f5f4f6 surface-dim) provides breathing room and legibility, while strategic accent colors drive user attention and emotional response. Primary (#af72ff, rgb(175, 114, 255)) is the signature brand accent, deployed on all primary CTAs ("أنشئ متجرك مجاناً"), interactive states, and brand-critical UI elements. This purple conveys premium positioning and forward momentum. Secondary (#9eec98, a soft success green) is reserved for positive affirmations, growth metrics, and completion states—reinforcing the brand's promise of business growth. Tertiary (#3c1c54, a deep purple-black) anchors the system as the primary text color on light backgrounds and appears in headers and navigatio

Typography

The Zid type system is built on a three-tier hierarchy: Display (Codec, 60px, 800 weight, -0.04em tracking) for hero statements and brand moments; Headline (Codec Pro, 40px–28px, 600–700 weight) for section titles and major content breaks; and Body (Suisse, 16px–18px, 400 weight) for reading and interaction. This pairing—geometric, modern Codec for display, humanist Codec Pro for headlines, and refined Suisse for body—creates a sophisticated yet accessible voice. Codec's ultra-bold weight (800) commands attention on hero sections ("من القصص إلى الأرقام"), while Codec Pro's 600–700 weight provides visual authority without aggression. Suisse at 400 weight ensures body text remains legible at 16px on light backgrounds with 24px line-height, meeting WCAG AAA standards. Label text (Suisse, 14px

Layout

Zid employs a fluid 12-column grid with a maximum container width of 1300px, allowing content to breathe on ultra-wide displays while maintaining focus on smaller screens. The spacing scale is semantic: unit (8px) as the base increment, xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for gutter and section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. The hero section uses lg spacing (40px) above and below to create visual separation from navigation and body content. Cards and containers employ md padding (24px) internally, with lg spacing (40px) between card groups. The RTL layout (dir="rtl") is native to the HTML structure, requiring no CSS overrides—all margin and padding values flow naturally. Container max-wi

Elevation & Depth

Zid uses a subtle shadow system to convey depth without visual heaviness. Level 1 (Base): No shadow; flat surfaces on the white background (#ffffff) establish the default plane. Level 2 (Cards & Containers): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) creates a hairline lift, used on card components and input fields to distinguish them from the background. Level 3 (Elevated/Hover States): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) applied on card-hover and button-hover states, signaling interactivity and focus. Level 4 (Modals/Dropdowns): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) for modals, d

Shapes

Zid's shape philosophy is "Geometric Warmth"—sharp enough to convey modernity and precision, rounded enough to feel approachable and human. Buttons and primary CTAs use border-radius: 9999px (full pill shape), creating a distinctive, friendly silhouette that stands out in the e-commerce landscape and signals "click me" through familiarity. Cards and containers use border-radius: 1rem (16px), a moderate curve that balances geometric clarity with organic softness—not too sharp (which reads corporate), not too rounded (which reads playful). Input fields use border-radius: 0.5rem (8px), a subtle c

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (backgroundColor: #af72ff, textColor: #ffffff, padding: 8px 16px, height: 40px, border-radius: 9999px, fontFamily: Suisse, fontSize: 14px, fontWeight: 600) are used for all primary CTAs ("أنشئ متجرك مجاناً", "تسجيل الدخول"). On hover, apply backgroundColor: #9d5fe8 with transition: background-color 200ms ease-in-out. On focus, add box-shadow: 0 0 0 3px rgba(175, 114, 255, 0.1). Secondary buttons (backgroundColor: #ffffff, textColor: #1f0433, border: 1px solid #d1d5db) are used for alternative actions ("الأسعار", "اكتشف المتجر"). Tertiary buttons (backgroundColor: transparent, textColor: #af72ff) are used for low-priority actions or links within dense content. All buttons use 200ms ease-in-out transitions on

Do's and Don'ts

**Do**

• Do use primary purple (#af72ff) exclusively on primary CTAs and brand-critical interactive elements—never dilute it with secondary uses.
• Do maintain 24px gutter spacing on mobile, scaling to 40px on desktop, to preserve readability and visual rhythm across devices.
• Do apply 200ms ease-in-out transitions on all interactive state changes (hover, focus, active) to signal responsiveness without feeling sluggish.
• Do use Codec (800 weight) only for hero display text; reserve Codec Pro for headlines to avoid visual cacophony.
• Do pair light backgrounds (#ffffff, #f5f4f6) with dark text (#1f0433) for accessibility; never reverse this on body content.
• Do use the full pill-shaped button (border-radius: 9999px) for all primary CTAs to maintain brand recognition and clickability.

**Don't**

• Don't use secondary green (#9eec98) on CTAs or primary interactive elements—reserve it for success states and affirmation messaging only.
• Don't apply shadows deeper than 0 16px 40px rgba(0, 0, 0, 0.12); deeper shadows create visual clutter and reduce focus on content.
• Don't mix Codec and Codec Pro in the same heading hierarchy; use Codec for display (60px+) and Codec Pro for headlines (40px–28px).
• Don't reduce button padding below 8px vertical or 16px horizontal; smaller padding makes touch targets inaccessible on mobile.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii break visual consistency.
• Don't apply color transitions longer than 200ms on interactive elements; slower transitions feel unresponsive and frustrate users.