Skip to main content

UI Design System

Overview​

This document defines the visual design system for Talbino's reverse marketplace across all platforms: iOS (Swift/SwiftUI), Android (Kotlin/Compose), Flutter (Seller app), and Next.js web.

Design Philosophy: Clean, modern, trustworthy, and optimized for Arabic/English with full RTL support.

Design Principles​

1. Trust-First​

  • Clear visual hierarchy emphasizing seller ratings and verification
  • Transparent pricing and offer details
  • Professional, credible aesthetic

2. Speed & Clarity​

  • Minimal steps to complete actions
  • Clear CTAs with high contrast
  • Instant visual feedback

3. Bilingual Excellence​

  • Seamless Arabic ↔ English switching
  • Perfect RTL/LTR layout mirroring
  • Culturally appropriate imagery and icons

4. Mobile-First​

  • Touch-friendly targets (min 44x44pt)
  • Thumb-zone optimization
  • Gesture-based navigation

Color Palette​

Primary Colors​

/* Brand Primary - Vibrant Teal */
--primary-50: #E0F7F7;
--primary-100: #B3ECEC;
--primary-200: #80E0E0;
--primary-300: #4DD4D4;
--primary-400: #26CACA;
--primary-500: #00C0C0;  /* Main brand color */
--primary-600: #00B0B0;
--primary-700: #009D9D;
--primary-800: #008B8B;
--primary-900: #006A6A;

/* Brand Secondary - Warm Orange */
--secondary-50: #FFF3E0;
--secondary-100: #FFE0B2;
--secondary-200: #FFCC80;
--secondary-300: #FFB74D;
--secondary-400: #FFA726;
--secondary-500: #FF9800;  /* Accent for CTAs */
--secondary-600: #FB8C00;
--secondary-700: #F57C00;
--secondary-800: #EF6C00;
--secondary-900: #E65100;

Semantic Colors​

/* Success - Green */
--success-light: #D4EDDA;
--success-main: #28A745;
--success-dark: #1E7E34;

/* Warning - Yellow */
--warning-light: #FFF3CD;
--warning-main: #FFC107;
--warning-dark: #FF8B00;

/* Error - Red */
--error-light: #F8D7DA;
--error-main: #DC3545;
--error-dark: #BD2130;

/* Info - Blue */
--info-light: #D1ECF1;
--info-main: #17A2B8;
--info-dark: #117A8B;

Neutral Colors​

/* Grayscale */
--gray-50: #F9FAFB;
--gray-100: #F3F4F6;
--gray-200: #E5E7EB;
--gray-300: #D1D5DB;
--gray-400: #9CA3AF;
--gray-500: #6B7280;
--gray-600: #4B5563;
--gray-700: #374151;
--gray-800: #1F2937;
--gray-900: #111827;

/* Background */
--bg-primary: #FFFFFF;
--bg-secondary: #F9FAFB;
--bg-tertiary: #F3F4F6;

/* Text */
--text-primary: #111827;
--text-secondary: #6B7280;
--text-tertiary: #9CA3AF;
--text-inverse: #FFFFFF;

Usage Guidelines​

  • Primary (Teal): Main actions, active states, brand elements
  • Secondary (Orange): CTAs, highlights, important actions
  • Success: Completed deals, approvals, positive feedback
  • Warning: Pending states, cautions
  • Error: Rejections, errors, destructive actions
  • Neutral: Text, borders, backgrounds

Typography​

Font Families​

/* Arabic */
--font-arabic: 'Cairo', 'Tajawal', -apple-system, BlinkMacSystemFont, sans-serif;

/* English/Latin */
--font-latin: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

/* Monospace (prices, numbers) */
--font-mono: 'SF Mono', 'Roboto Mono', 'Courier New', monospace;

Type Scale​

/* Display - Hero sections */
--text-display: 48px / 56px;  /* size / line-height */
--text-display-weight: 700;

/* Headings */
--text-h1: 32px / 40px;
--text-h1-weight: 700;

--text-h2: 24px / 32px;
--text-h2-weight: 600;

--text-h3: 20px / 28px;
--text-h3-weight: 600;

--text-h4: 18px / 24px;
--text-h4-weight: 600;

/* Body */
--text-body-lg: 18px / 28px;
--text-body-lg-weight: 400;

--text-body: 16px / 24px;
--text-body-weight: 400;

--text-body-sm: 14px / 20px;
--text-body-sm-weight: 400;

/* Captions & Labels */
--text-caption: 12px / 16px;
--text-caption-weight: 400;

--text-overline: 11px / 16px;
--text-overline-weight: 600;
--text-overline-transform: uppercase;
--text-overline-spacing: 0.5px;

Font Weights​

  • Regular: 400 (body text)
  • Medium: 500 (emphasis)
  • Semibold: 600 (headings, labels)
  • Bold: 700 (display, strong emphasis)

RTL Considerations​

  • Use text-align: start instead of left
  • Mirror directional icons (arrows, chevrons)
  • Flip padding/margin order in RTL
  • Test with long Arabic text (tends to be longer than English)

Spacing System​

Base Unit: 4px​

--space-0: 0px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;

Usage​

  • Component padding: 16px (space-4)
  • Card padding: 16-24px (space-4 to space-6)
  • Section spacing: 32-48px (space-8 to space-12)
  • Screen margins: 16-20px (space-4 to space-5)
  • Element gaps: 8-12px (space-2 to space-3)

Border Radius​

--radius-none: 0px;
--radius-sm: 4px;    /* Small elements, tags */
--radius-md: 8px;    /* Buttons, inputs */
--radius-lg: 12px;   /* Cards, modals */
--radius-xl: 16px;   /* Large cards */
--radius-2xl: 24px;  /* Bottom sheets */
--radius-full: 9999px; /* Pills, avatars */

Shadows & Elevation​

/* Elevation levels */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
--shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);

/* Usage */
- Cards: shadow-sm
- Floating buttons: shadow-md
- Modals/sheets: shadow-xl
- Dropdowns: shadow-lg

Components​

Buttons​

Primary Button​

Background: primary-500
Text: white
Height: 48px (mobile), 44px (web)
Padding: 16px 24px
Border radius: radius-md
Font: body-weight: 600

States:
- Hover: primary-600
- Active: primary-700
- Disabled: gray-300, text: gray-500

Secondary Button​

Background: transparent
Border: 2px solid primary-500
Text: primary-500
Height: 48px (mobile), 44px (web)
Padding: 16px 24px
Border radius: radius-md

States:
- Hover: bg: primary-50
- Active: bg: primary-100
- Disabled: border: gray-300, text: gray-400

Destructive Button​

Background: error-main
Text: white
(Same dimensions as primary)

Text Button​

Background: transparent
Text: primary-500
Padding: 8px 16px
Font weight: 600

States:
- Hover: bg: primary-50
- Active: bg: primary-100

Input Fields​

Height: 48px
Padding: 12px 16px
Border: 1px solid gray-300
Border radius: radius-md
Font: body

States:
- Focus: border: primary-500, shadow: 0 0 0 3px primary-100
- Error: border: error-main, shadow: 0 0 0 3px error-light
- Disabled: bg: gray-100, text: gray-500

Label:
- Font: body-sm-weight: 600
- Color: text-primary
- Margin bottom: space-2

Cards​

Request Card​

Background: white
Padding: 16px
Border radius: radius-lg
Shadow: shadow-sm
Border: 1px solid gray-200

Layout:
- Product title (h4)
- Budget range (body, primary-600)
- Location + time (caption, text-secondary)
- Offer count badge (if > 0)

Offer Card​

Background: white
Padding: 16px
Border radius: radius-lg
Border: 2px solid gray-200

Highlight accepted offer:
- Border: 2px solid success-main
- Background: success-light

Layout:
- Seller name + rating (body-weight: 600)
- Price (h3, primary-600)
- Availability + condition (body-sm)
- CTA buttons

Badges​

Padding: 4px 12px
Border radius: radius-full
Font: caption-weight: 600

Variants:
- Active: bg: success-light, text: success-dark
- Pending: bg: warning-light, text: warning-dark
- Closed: bg: gray-200, text: gray-700
- Rejected: bg: error-light, text: error-dark

Rating Stars​

Size: 16px (inline), 24px (prominent)
Color: secondary-500 (filled), gray-300 (empty)
Spacing: 2px between stars

Display format:
★★★★☆ 4.5 (23 reviews)

Avatar​

Sizes:
- xs: 24px
- sm: 32px
- md: 40px
- lg: 56px
- xl: 80px

Border radius: radius-full
Border: 2px solid white (when overlapping)
Fallback: Initials on primary-500 background

Bottom Sheet (Mobile)​

Background: white
Border radius: radius-2xl (top corners only)
Shadow: shadow-2xl
Max height: 90vh
Padding: 24px

Handle:
- Width: 40px
- Height: 4px
- Background: gray-300
- Border radius: radius-full
- Centered at top
Background: white
Border radius: radius-xl
Shadow: shadow-2xl
Max width: 600px
Padding: 32px

Overlay:
- Background: rgba(0, 0, 0, 0.5)
- Backdrop blur: 4px

Screen Layouts​

Mobile App Structure​

┌─────────────────────┐
│   Status Bar        │
├─────────────────────┤
│   Navigation Bar    │ 56px
│   [Title] [Actions] │
├─────────────────────┤
│                     │
│   Content Area      │
│   (Scrollable)      │
│                     │
│                     │
├─────────────────────┤
│   Bottom Nav/CTA    │ 80px (nav), 72px (CTA)
└─────────────────────┘

Key Screens​

1. Home Screen (Buyer)​

- Header: "Talbino" logo + profile avatar
- Hero CTA: "Post a Request" (large, prominent)
- Tabs: "Active Requests" | "My Deals"
- Request cards list (infinite scroll)
- Floating action button (FAB) for quick post

2. Request Detail​

- Back button + share
- Product info card
- Budget range (highlighted)
- Location + time posted
- Offer count badge
- "View Offers" CTA (if offers > 0)
- "Close Request" button (destructive)

3. Offers List​

- Header: "X Offers"
- Sort/filter chips
- Offer cards (sorted by price/rating)
- Each card: Seller info, price, details, "Chat" + "Accept" buttons

4. Chat Screen​

- Header: Other party name + avatar + rating
- Message list (reverse chronological)
- Input bar (fixed bottom)
- Send button (primary color)

5. Post Request Form​

- Progress indicator (steps)
- Form fields (one section at a time)
- "Next" / "Submit" CTA (bottom)
- "Save Draft" option

Web App Structure​

┌────────────────────────────────────┐
│   Top Navigation Bar               │ 64px
│   [Logo] [Nav Links] [Profile]     │
├────────────────────────────────────┤
│                                    │
│   Main Content Area                │
│   (Max width: 1200px, centered)    │
│                                    │
│   [Sidebar]  [Content]  [Aside]    │
│   (Optional)                       │
│                                    │
└────────────────────────────────────┘

Icons​

Icon Library​

  • iOS: SF Symbols
  • Android: Material Icons
  • Flutter: Material Icons / Custom SVG
  • Web: Heroicons / Lucide Icons

Common Icons​

- Home: house
- Requests: clipboard-list
- Offers: tag
- Deals: handshake
- Chat: message-circle
- Profile: user
- Search: magnifying-glass
- Filter: funnel
- Sort: arrows-up-down
- Close: x-mark
- Back: chevron-left (RTL: chevron-right)
- Forward: chevron-right (RTL: chevron-left)
- Star (filled): star-fill
- Star (empty): star
- Location: map-pin
- Time: clock
- Phone: phone
- Camera: camera
- Send: paper-airplane
- More: ellipsis-horizontal

Icon Sizes​

- xs: 16px
- sm: 20px
- md: 24px
- lg: 32px
- xl: 48px

Animations & Transitions​

Timing Functions​

--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

Durations​

--duration-fast: 150ms;
--duration-normal: 250ms;
--duration-slow: 350ms;

Common Animations​

Button Press​

Scale: 0.98
Duration: 100ms
Easing: ease-in-out

Card Tap​

Scale: 0.97
Shadow: increase
Duration: 150ms

Page Transition​

Slide: translateX(100%) → 0
Fade: opacity 0 → 1
Duration: 300ms
Easing: ease-out

Bottom Sheet​

Slide up: translateY(100%) → 0
Duration: 350ms
Easing: ease-spring

Loading Spinner​

Rotation: 360deg continuous
Duration: 1000ms
Easing: linear

Accessibility​

Touch Targets​

  • Minimum: 44x44pt (iOS), 48x48dp (Android)
  • Spacing between targets: 8px minimum

Color Contrast​

  • Text on background: 4.5:1 minimum (WCAG AA)
  • Large text (18pt+): 3:1 minimum
  • Interactive elements: 3:1 minimum

Focus States​

  • Visible focus indicator (3px outline)
  • Color: primary-500
  • Offset: 2px

Screen Reader Support​

  • Semantic HTML (web)
  • Accessibility labels (mobile)
  • Announce dynamic content changes
  • Logical tab order

RTL Support Checklist​

  • Mirror all directional layouts
  • Flip icons (arrows, chevrons)
  • Test with Arabic content
  • Verify number formatting (Arabic numerals vs. Western)
  • Check date/time formatting

Platform-Specific Guidelines​

iOS (SwiftUI)​

// Color
Color("Primary500") // Use asset catalog

// Typography
.font(.system(size: 16, weight: .regular))

// Spacing
.padding(.horizontal, 16)

// Shadows
.shadow(color: .black.opacity(0.1), radius: 4, x: 0, y: 2)

// Animations
.animation(.spring(response: 0.3, dampingFraction: 0.7), value: isExpanded)

Android (Jetpack Compose)​

// Color
MaterialTheme.colorScheme.primary

// Typography
MaterialTheme.typography.bodyLarge

// Spacing
Modifier.padding(horizontal = 16.dp)

// Shadows
Modifier.shadow(elevation = 4.dp, shape = RoundedCornerShape(8.dp))

// Animations
animateFloatAsState(
    targetValue = if (expanded) 1f else 0f,
    animationSpec = spring(dampingRatio = 0.7f)
)

Flutter (Seller App)​

// Color
Theme.of(context).colorScheme.primary

// Typography
Theme.of(context).textTheme.bodyLarge

// Spacing
EdgeInsets.symmetric(horizontal: 16)

// Shadows
BoxDecoration(
  boxShadow: [
    BoxShadow(
      color: Colors.black.withOpacity(0.1),
      blurRadius: 4,
      offset: Offset(0, 2),
    )
  ]
)

// Animations
AnimatedContainer(
  duration: Duration(milliseconds: 250),
  curve: Curves.easeOut,
)

Next.js (Web)​

// Tailwind CSS classes
className="bg-primary-500 text-white px-6 py-3 rounded-lg shadow-md"

// CSS Modules
import styles from './Button.module.css'

// Framer Motion animations
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3 }}
>

Design Resources​

  1. Figma (Primary design tool)

    • Component library
    • Design system documentation
    • Prototyping
    • Developer handoff

  2. Sketch (Alternative)

    • iOS-focused design
    • Symbol libraries

  3. Adobe XD (Alternative)

    • Cross-platform design
    • Auto-animate

Free UI Kits & Inspiration​

  1. Mobile UI Kits

  2. Marketplace Inspiration

    • OfferUp: Clean card-based layout
    • Mercari: Trust indicators, ratings
    • Carousell: Chat integration
    • Dubizzle: Arabic/English, MENA market
    • OLX: Category browsing

  3. Component Libraries

    • shadcn/ui (Web - already in stack)
    • React Native Paper (If using RN)
    • Flutter Material 3 (Seller app)

Design System Examples​

Implementation Checklist​

Phase 1: Foundation​

  • Set up design tokens (colors, typography, spacing)
  • Create component library in Figma
  • Define icon set
  • Establish grid system

Phase 2: Core Components​

  • Buttons (all variants)
  • Input fields
  • Cards (request, offer, deal)
  • Navigation (bottom nav, top bar)
  • Modals/sheets

Phase 3: Screens​

  • Authentication (OTP)
  • Home/Browse
  • Post Request form
  • Request detail
  • Offers list
  • Chat
  • Profile

Phase 4: Polish​

  • Animations & transitions
  • Loading states
  • Empty states
  • Error states
  • Success confirmations

Phase 5: Localization​

  • Arabic translations
  • RTL layout testing
  • Cultural adaptations
  • Number/date formatting

Quick Start Guide​

For Designers​

  1. Download Figma Template (create from this spec)
  2. Set up design tokens as Figma variables
  3. Create component library with variants
  4. Design key screens (5-7 screens for MVP)
  5. Prototype user flows (request → offer → deal)
  6. Share with developers via Figma Dev Mode

For Developers​

  1. iOS: Create DesignSystem.swift with colors, fonts, spacing
  2. Android: Define Theme.kt and res/values/colors.xml
  3. Flutter: Create app_theme.dart with ThemeData
  4. Web: Configure Tailwind with custom colors in tailwind.config.ts
  5. Build reusable components matching design specs
  6. Test RTL layouts with Arabic locale

Maintenance​

Design System Updates​

  • Version control: Semantic versioning (1.0.0)
  • Changelog: Document all changes
  • Communication: Announce updates to team
  • Migration guides: For breaking changes

Regular Reviews​

  • Quarterly: Review component usage, identify gaps
  • Bi-annually: Audit accessibility compliance
  • Annually: Major design refresh (if needed)

Resources & Links​

Fonts​

Color Tools​

Icons​

Prototyping​

Contact & Support​

For design system questions or contributions:

Version: 1.0.0
Last Updated: February 2026
Maintained by: Talbino Design Team