TAPSI

Overview

TAPSI is Iran's dominant super-app for urban mobility, serving millions of passengers, drivers, and businesses daily. The design system embodies a philosophy of "Functional Clarity with Vibrant Accents"—a minimalist white canvas punctuated by a signature teal-blue primary (#1f9ed8) and energetic orange secondary (#ff5b35) that command attention on CTAs and key interactions. The aesthetic is deliberately clean and utilitarian, reflecting the brand's commitment to reliability and speed; the UI prioritizes legibility and task completion over decorative flourish. The emotional response is one of confidence and ease: users should feel that their ride, delivery, or transaction is just one tap away. TAPSI's voice is direct, reassuring, and action-oriented—never apologetic, never flowery. Example: "ثبت‌نام آنلاین تپسی در کمتر از ۱۰ دقیقه" (Register online with TAPSI in under 10 minutes) conveys urgency and simplicity without hype.

Colors

The TAPSI color system is anchored by a clean white surface (#ffffff) with a carefully curated neutral stack for depth and hierarchy. Primary (#1f9ed8) is the brand's signature teal-blue, deployed on all primary CTAs, active tab indicators, and focus states—it appears sparingly but decisively, commanding ~5–8% of the visual field. Secondary (#ff5b35) is a warm, energetic orange reserved for accent highlights, promotional badges, and secondary actions that need to stand out without competing with primary. The neutral palette uses #e9ecef for mid-tone containers, #6c757d for secondary text, and #505050 for disabled or de-emphasized states. Surface containers follow the Material 3 stack: surface-container-low (#f0f9fa) for subtle backgrounds, surface-container (#e9ecef) for interactive elemen

Typography

The type system uses Vazirmatn as the primary typeface—a modern, open-source Persian font optimized for on-screen readability—with fallbacks to iranyekan, Roboto, and Arial for cross-platform consistency. Display (60px, 700 weight) anchors hero sections and major announcements; Headline-lg (40px, 600 weight) is used for page titles and section headers; Body-md (16px, 400 weight) is the workhorse for body copy, form labels, and list items. All headlines use -0.02em to -0.04em letter-spacing to tighten the visual rhythm and convey premium polish. Body text maintains 0em letter-spacing for clarity. Labels (12–14px, 500–600 weight) are used on buttons and badges with 0.01–0.05em tracking to add visual separation. On small labels over busy backgrounds or within dense UI, apply a subtle text-sha

Layout

TAPSI uses a 12-column fluid grid with a max-width of 1280px, allowing the layout to scale gracefully from mobile (single column) to desktop (multi-column). The gutter between columns is 24px, providing breathing room without excessive whitespace. Section separation uses the lg spacing token (40px) to create clear visual breaks between hero, services, and promotional sections. Container padding is consistently 24px on desktop, reducing to 12px on mobile to maximize content area. The hero section spans full-width with a centered text block (max-width 600px) positioned to the right of a large illustration on desktop, stacking vertically on mobile. Cards and list items use 12px (sm spacing) for internal padding, with 24px (md spacing) between card groups. The notification banner at the top of

Elevation & Depth

Depth in TAPSI is achieved through a restrained shadow and border system rather than color gradation. The base layer (Level 1) is the white surface (#ffffff) with no shadow. Level 2 (cards, input fields, dropdowns) uses a soft shadow of 0 3px 8px rgba(0, 0, 0, 0.15) paired with a 1px border in #d0d0d0 to define edges. Level 3 (modals, elevated cards on hover) uses a stronger shadow of 0 4px 12px rgba(0, 0, 0, 0.08) to create clear separation. Interactive elements (buttons, inputs) do not cast shadows by default; they gain a subtle shadow on hover (0 1px 2px rgba(0, 0, 0, 0.06)) to signal inter

Shapes

TAPSI employs a philosophy of "Soft-Technical Minimalism"—rounded corners are used sparingly and consistently to balance the utilitarian nature of a transportation app with approachable, modern aesthetics. Buttons use full border-radius (9999px) to create pill-shaped CTAs that feel friendly and clickable; this 48px height with 12px horizontal padding creates a comfortable touch target. Cards and containers use a 1rem (16px) border-radius to soften edges without appearing playful or casual. Input fields use a smaller 0.5rem (8px) radius to maintain visual hierarchy and distinguish them from lar

Components

Action Elements Buttons are the primary interaction pattern in TAPSI. Primary buttons (button-primary) use the brand teal (#1f9ed8) background with white text, 48px height, 12px vertical / 24px horizontal padding, and a full border-radius (9999px). On hover, the background shifts to primary-fixed-dim (#80d4f0), maintaining the same text color and adding a 200ms ease-in-out transition. Active state (pressed) darkens to #1a7ba8 for tactile feedback. Secondary buttons (button-secondary) are transparent with a 2px border in on-surface (#000000) and black text; on hover, they gain a light gray background (#e0e0e0) to signal interactivity. Accent buttons (button-accent) use the secondary orange (#ff5b35) for promotional or high-priority secondary actions, with a darker orange (#e64a1f) on ho

Do's and Don'ts

**Do**

• Do use primary (#1f9ed8) exclusively for primary CTAs, active states, and focus indicators—never dilute its impact by overusing it.
• Do maintain 24px gutter spacing between major sections and 12px padding within cards to create visual breathing room and reduce cognitive load.
• Do apply the full border-radius (9999px) to all primary action buttons to signal clickability and approachability.
• Do use the label-md typography (14px, 600 weight) for all button and badge text to maintain consistent visual weight across interactive elements.
• Do pair white backgrounds with 1px borders in #d0d0d0 to define container edges without adding visual noise.
• Do transition all interactive state changes (hover, focus, active) over 200ms using ease-in-out timing to provide smooth, predictable feedback.

**Don't**

• Don't use secondary (#ff5b35) on primary CTAs or as a dominant color—reserve it for accent highlights and promotional badges only.
• Don't apply shadows to buttons or input fields in their default state; shadows should appear only on hover or elevated containers to signal depth hierarchy.
• Don't use border-radius values smaller than 0.5rem (8px) on interactive elements; this reduces perceived clickability and feels overly technical.
• Don't mix typeface families within a single section; always use Vazirmatn as the primary with Roboto as the fallback, never introduce serif or display fonts.
• Don't exceed 3 levels of visual hierarchy (primary, secondary, tertiary) in a single view; excess nesting confuses users and dilutes the design system.
• Don't use opacity or color desaturation to indicate disabled states; instead, reduce opacity to 0.5 and remove shadows entirely to create clear visual separation.