Technolife

Overview

Technolife is Iran's leading digital commerce platform, serving millions of consumers seeking electronics, appliances, and consumer goods with confidence and transparency. The design system embodies a philosophy of "Accessible Clarity"—a modern, commerce-focused aesthetic that prioritizes usability and trust through clean typography, generous whitespace, and strategic use of vibrant accent colors. The interface evokes a sense of reliability and efficiency, guiding users through complex product catalogs with intuitive navigation and prominent call-to-action elements. The brand personality is professional yet approachable: direct, informative, and customer-centric. Technolife speaks in clear, action-oriented language without unnecessary flourish. Example voice: "تا ۲۰۰ میلیون وام برای خرید محصولات الکترونیکی شما" (Up to 200 million in financing for your electronics purchase).

Colors

The color palette balances a clean, neutral foundation with vibrant digital accents that drive engagement and commerce. Surface colors (#fcfeff, #ffffff, #f0f0f0) create a bright, trustworthy canvas—essential for an e-commerce platform where product imagery must dominate. Primary (#04bde5, a vivid cyan) is reserved exclusively for interactive elements: call-to-action buttons, focus states, active navigation, and key links. This high-contrast accent ensures users immediately recognize clickable elements and conversion opportunities. Secondary (#27bcc9, a teal accent) supports primary in secondary actions, borders, and decorative accents. Tertiary (#da1e28, a bold red) signals urgency, discounts, and errors—critical for commerce contexts where price reductions and warnings demand immediate a

Typography

The type system uses yekanBakh as the primary typeface—a modern, geometric sans-serif optimized for Persian and Latin scripts, ensuring equal legibility across the bilingual interface. Display (60px, 700 weight) anchors hero sections and major announcements; Headline-lg (40px, 600 weight) frames category headers and promotional zones; Headline-md (28px, 600 weight) structures section titles; Title-lg (20px, 600 weight) labels product cards and subsections. Body-lg (18px, 400 weight) and Body-md (16px, 400 weight) carry descriptive content and product details, with 28px and 24px line-heights respectively to ensure comfortable reading at scale. Label-md (14px, 600 weight) and Label-sm (12px, 500 weight) are applied to buttons, badges, and form labels. Letter-spacing ranges from -0.04em on la

Layout

The layout follows a 12-column grid system with a maximum container width of 1200px, ensuring content remains readable on desktop while adapting fluidly to tablet and mobile viewports. The gutter spacing is consistently 24px, creating rhythm and breathing room between sections. Page rhythm is structured around semantic spacing: lg (40px) separates major sections (hero, category carousels, promotional zones); md (24px) divides subsections and card groups; sm (12px) creates internal padding within components. The hero section spans full width with asymmetric product imagery (cyan-tinted product cards on the left, brand messaging on the right), establishing the visual hierarchy immediately. Product grids use 4–6 columns on desktop, collapsing to 2–3 on tablet and 1 on mobile. Whitespace is in

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids visual heaviness while maintaining clear layer hierarchy. Level 1 (Base): The surface (#fcfeff) is the foundation; no shadow applied. Level 2 (Standard Cards): box-shadow: 0 3px 8px rgba(0,0,0,0.15) lifts product cards and content blocks subtly from the background, creating a single-step elevation. Level 3 (Elevated/Modals): box-shadow: 0 5px 15px rgba(0,0,0,0.12) is applied to modals, dropdowns, and floating action elements, signaling they are interactive and dismissible. Hover states transition shadows smoothly (200ms ease-in-o

Shapes

The shape philosophy is termed "Functional Roundness"—a balance between modern approachability and technical precision. Border-radius values are chosen to signal component type and interaction affordance. Buttons use lg (10px) for a friendly, inviting appearance that encourages clicks; inputs use DEFAULT (6px) for a neutral, utilitarian feel; cards use lg (10px) to match buttons and create visual cohesion; badges and pills use full (9999px) to signal compact, non-interactive status indicators. Modals and dropdowns use xl (16px) to emphasize their elevated, temporary nature. This graduated scal

Components

Action Elements Buttons are the primary conversion drivers in e-commerce. Button-primary (44px height, 12px 24px padding, 10px radius, {colors.primary} background) is used exclusively for primary actions: "Add to Cart," "Proceed to Checkout," "View Details." On hover, the background transitions to {colors.primary-container} (#3ebde5) over 200ms, providing visual confirmation. Button-secondary (44px height, 1px solid {colors.outline} border, transparent background) is used for secondary actions: "Compare," "Save for Later," "View More." Button-danger (44px height, {colors.tertiary} background) signals destructive or urgent actions: "Remove from Cart," "Cancel Order." All buttons use label-md typography (14px, 600 weight) and include a 150ms transition on all interactive properties.

###

Do's and Don'ts

**Do**

• Do use primary (#04bde5) exclusively for interactive elements—buttons, links, focus states, and active navigation—to create a consistent, scannable interface.
• Do maintain 24px gutter spacing between sections and 12px internal padding within components to ensure visual breathing room and reduce cognitive load.
• Do apply body-md (16px, 400 weight) for product descriptions and body-lg (18px, 400 weight) for hero copy to ensure comfortable reading at scale.
• Do use tertiary (#da1e28) sparingly for discounts, errors, and urgent actions—overuse dilutes its impact and confuses users.
• Do transition all interactive properties (background-color, border-color, box-shadow) over 150–200ms with ease-in-out timing to provide smooth, professional feedback.

**Don't**

• Don't mix primary and secondary accent colors on the same component—use one accent per element to avoid visual confusion.
• Don't apply shadows darker than 0 5px 15px rgba(0,0,0,0.15) or use pure black (#000000) in shadows; maintain softness with 12–15% opacity black.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii fragment the design system and reduce consistency.
• Don't apply letter-spacing tighter than -0.04em or looser than +0.02em; extreme values reduce legibility and appear unprofessional in commerce contexts.