Telefon Messenger

Modern Minimal Design System

Live Preview: https://design.telefon.chat

Design Concepts:

Click to preview different visual directions

All MVP screens • Auto-refresh every 30s

Design System

Color Palette

Primary
#2563eb
Primary Light
#3b82f6
Secondary
#64748b
Success
#10b981
Danger
#ef4444
Warning
#f59e0b
Dark
#1f2937
Light
#ffffff
Gray
#9ca3af
Gray Light
#f3f4f6

Typography

Heading 1 - 2.5rem / 40px

Heading 2 - 2rem / 32px

Heading 3 - 1.75rem / 28px

Heading 4 - 1.5rem / 24px

Body text - 1rem / 16px

Small text - 0.875rem / 14px

Components

Online Offline Away Busy
DV
AJ
MB
Mobile Screens
Web Screens
User Flow

Mobile Screens

A1. Welcome / Start Screen
📱

Telefon

Simple, secure messaging

By continuing, you agree to our Terms & Privacy Policy
A2. Login - Phone Number

Log In

B1. Chat List

Chats

✏️ ⚙️
AJ
Alex Johnson
See you tomorrow at the meeting!
10:30
3
MB
Maria Brown
Thanks for the help yesterday!
09:15
TS
Team Standup
Sarah: I'll share the report today
Yesterday
12
💬 👥 🔔 👤
A3. Login Error & Loading States

Login States

Loading
🔄
Logging in...
Please wait
Error
⚠️
Invalid credentials
Phone number or password is incorrect
Network Error
📡
Connection lost
Check your internet connection
A4. Registration / First Entry

Create Your Profile

DV
or choose from starter avatars
This will be your public name
Starter Avatars
DV
AJ
MB
TS
RK
+
B2. Chat Screen
←
AJ
Alex Johnson
Online
⋯
Today
Hi! How's the design coming along?
10:30
Going well! Just added the chat screen.
10:31
Great! Can you show me the profile screen next?
10:32
Sure, working on it now!
10:33
📎
design-system.pdf
12.4 MB • Download
10:34
+
↑
B3. Profile Screen
←
My Profile
✏️
DV

denisv

Product Designer
42
Chats
128
Contacts
7
Groups
Bio
Product designer passionate about clean interfaces and user experience. Love hiking and coffee.
Contact Info
📱
+7 (123) 456-7890
Verified
✉️
denis@telefon.chat
Settings
🔔
Notifications
→
🔒
Privacy & Security
→
🖥️
Linked Devices
→
B4. Settings Screen
←
Settings
Account
👤
Edit Profile
→
🔐
Change Password
→
📱
Phone Number
→
Privacy
Last Seen
Read Receipts
Blocked Contacts
→
Appearance
Theme
Light
Language
English
C. Service States

Service States

Splash / Loading
🔄
Telefon
Loading your messages...
Empty State
💬
No messages yet
Start a conversation by tapping the + button
Connection States
✓
Connected
⟳
Connecting...
⚠️
Disconnected

Progress & Status

✅ Completed Screens (Wireframes)

  • A1. Welcome / Start Screen (mobile)
  • A2. Login - Phone Number & Password (mobile)
  • A3. Login Error & Loading states (mobile)
  • A4. Registration / First Entry flow (mobile)
  • B1. Chat List (mobile)
  • B2. Chat Screen (mobile)
  • B3. Profile Screen (mobile)
  • B4. Settings Screen (mobile)
  • C. Service States (mobile)
  • Web Chat Interface (basic layout)

🔄 Next Phase (Planning)

  • Web-specific optimizations
  • Dark mode implementation
  • Advanced messaging features
  • Media sharing interface

📋 Ready for Review

  • Design System (colors, typography, components)
  • Mobile-first approach validation
  • User flow for authentication
  • Basic wireframes structure