Prompt 02 Deliverable

Design System & Component Library

Centralized, reusable, accessible UI tokens and component specifications for DEXTIGO File Transfer platform.

1. Color System (Section 3)

Centralized CSS tokens defining the refined DEXTIGO light premium palette.

Deep Navy
--color-navy
#0B1930

Professional Blue
--color-blue
#1769FF

Blue Dark
--color-blue-dark
#0E4FC8

Premium Gold
--color-gold
#D9A93A

Background
--color-background
#F8FAFC

Surface
--color-surface
#FFFFFF

Success
--color-success
#18A66A

Danger
--color-danger
#D64545

2. Typography Hierarchy (Section 5)

Inter font system with controlled proportion, hierarchy, and readable line heights.

DISPLAY (36–54px)

Connect. Send. Done.

HEADING 1 (30–40px)

Universal File Transfer Across Any Device

HEADING 2 (22–30px)

Simple outside. Powerful inside.

HEADING 3 (18–22px)

Direct WebRTC Streaming with Auto-Resume

BODY (16px)

DEXTIGO enables peer-to-peer file transfer without requiring accounts, passwords, or emails. Encrypted DTLS/SRTP channels ensure files travel strictly between your devices.

SMALL / CAPTION (13.5px)

Expires in 14:59 • Rate limit active • P2P Direct Connection Established

3. Button System (Section 9)

Accessible, mobile-friendly (>=44px touch targets), with hover, active, focus, disabled, and loading states.

BUTTON VARIANTS

SIZES & ICON BUTTONS

BUTTON STATES (DISABLED & LOADING)

4. Input & Form System (Section 10)

Standard Username Input Unique handle for direct discovery

Validated Success State User is online and ready for transfer

Error Validation State Code must be exactly 6 digits

Disabled Input

5. Connection Code Component (Section 11)

Clear letter-spacing, readable numbers, copy button, and expiration countdown.

Your Temporary Connection Code

582 941

Expires in 14:48 Anti-Brute Force Active

6. Status Indicators & User Identity (Sections 13 & 14)

Both color and text indicators (never color alone) for accessible connection tracking.

Connected Connecting... Reconnecting Disconnected

USER IDENTITY CHIPS

Rahul Android • Connected

Alice_Host Windows PC • Host

7. File Dropzone & Transfer Items (Sections 15, 16 & 17)

Drop files here or click to choose

Supports all file formats, folders, and multi-gigabyte files

TRANSFER CARD STATES

📦

project_archive_production.zip

Sending • 4.8 GB / 10 GB

38 MB/s

🎬

raw_4k_documentary_render.mov

Resuming • 6.4 GB / 10 GB verified

Resuming from Chunk 100

✓

invoice_and_specs_signed.pdf

Received • 14.2 MB • SHA-256 Verified

8. Group Selector, Toasts & Modals (Sections 18, 19 & 20)

Send to:

★ Everyone (All connected)

Rahul (Android)

Amit (MacBook)

Neha (iPhone)