RECOT · DEMO 30 · UI CASE STUDY

Vibe.

Short-video mobile UI · design system + 6 screens · 2026

Platform iOS + Android Type Mobile App Role UI Design Tools Figma + SwiftUI + Compose Year 2026
📱Feed
👤Profile
🔴Live
SCROLL
Screen Gallery

6 key screens · responsive 3×2 grid · glass-morphism frames

A
Following Explore For You
@sunsetvibes
golden hour hits different #sunset #vibes
♪ Original Sound · 12.4M videos
🌅+
3.2K
420
120
Home
Discover
 
Inbox
Profile
FOR YOU FEED · A
B
@neonkid
👾
Neon Kid
✨ 19 · LA · maybe-content-creator · DM for collab
248
Following
89.4K
Followers
1.2M
Likes
Posts Liked Private
▶ 12.3K
▶ 5.8K
▶ 8.1K
▶ 2.4K
▶ 45.2K
▶ 1.1K
▶ 9.6K
▶ 3.3K
▶ 21.7K
PROFILE · B
C
🎥

342 comments

Top ↓
🐱
@luna_cat📌 Pinned2h
this is SO aesthetic best video today ✨
❤ 1.2K 12
🔥
@fire_mood1h
the transition at :23 is insane 🔥🔥
❤ 8908
🌙
@nightowl_2250m
totally agree, that part gave me chills
❤ 2343
🌊
@beach_vibes35m
add this to my travel bucket list 🌴
❤ 1561
🎵
@musiclover20m
what's the song name? 😍
❤ 890
😍🔥❤️🙌
COMMENTS OVERLAY · C
D
LIVE
👁 2.4K watching
🎙️
❤️💖❤️
⭐
@superfan_99 First time watching, this is fire!
🌸
@bloom_rose 🔥🔥🔥 keep going!
💎
@diamond_hand sent a DIAMOND 💎
🎸
@guitar_guy play the new track!!
🌹1 coin
💎99 coins
🦝50 coins
🏰500 coins
LIVE BROADCAST · D
E
Trending
#throwback 2.4B #morningcoffee 890M #cozyfall 1.2B #lofibeats 650M #aesthetic 3.1B
Trending Sounds
🎵 Lo-Fi Morning 1.2M plays
🎸 Sunset Riff 890K plays
🎤 Acoustic Soul 650K plays
Popular Creators
🎨
@art_vibes
🎮
@gamer_zone
🌿
@nature_echo
🍳
@chef_mode
✈️
@travel_lens
🎧
@beats_lab
DISCOVER / SEARCH · E
F
All Activity Likes Comments Mentions Messages
👍
@cool_cat liked your video
2m ago
👥
@tech_ninja started following you
12m ago
💬
@mountain_view commented: "wow this is incredible!"
34m ago
❤️
@starry_night liked your comment
1h ago
🔁
@remix_queen duetted your video
2h ago
💬
@music_buddy
hey! loved your latest track, let's collab on something...
INBOX / DMS · F
Design System

Typography · Color · Iconography · Components

Typography

Display56px · Black
Title 24px24px · Bold
Body 16px16px · Regular
Caption 12px12px · Medium · #888

Iconography

Home
Discover
Create
Inbox
Profile
Heart
Comment
Share

Color Palette

#fe2c55
brand-red
#25f4ee
brand-cyan
#161823
surface-ink
#FFFFFF
text-primary
#888888
text-tertiary
#ff8a4c
warning
#3ecf8e
success
#1a1a26
elevated

Components

Buttons

Primary
Secondary
Ghost

Avatars

A
A
A

Chips

#throwback #aesthetic #vibes #lofi

Toast

Video uploaded successfully
Interactions

Animated micro-interactions · looped CSS

❤️

Tap to Like

Heart fills with a spring scale-pop animation, counter increments by 1.

👆 ↑

Swipe to Next

Vertical swipe navigates between full-screen video panes with smooth snap.

👾 +

Pinch to Follow

Avatar + button scale animation on profile tap — one-click follow.