STRYM Design System

Dark mobile UI · TikTok-style vertical feed · Telegram Mini App

1. Color Palette

Core

Background #000000
Foreground #ffffff
Accent #fe2c55
Surface #14141a
Overlay rgba(0,0,0,0.5)

Borders

Border Subtle rgba(255,255,255,0.1)
Border Strong rgba(255,255,255,0.2)

Text

Secondary rgba(255,255,255,0.7)
Tertiary rgba(255,255,255,0.5)
Muted rgba(255,255,255,0.4)

UI Accents

TG Green #31b545
Next Amber #f59e0b - #d97706
Referral Blue #2196f3
Units Orange #ff6b35
Subscription #ff9800
Lite Mode #ffc832

States

Success Green #4caf50
Gold / Cycle #ffc107
Next Red #ef4444 - #dc2626
Danger rgba(255,100,100,0.9)

Gradients

Avatar #fe2c55 - #ff6b8a
Progress Fill #ff6b35 - #fe2c55
Referral CTA #2196f3 - #03a9f4
Subscribe CTA #ff9800 - #f57c00
Catalog Bar #9c27b0 - #e040fb

Preference Tags

Tag BG rgba(254,44,85,0.15)
Tag Border rgba(254,44,85,0.3)
Tag Count rgba(254,44,85,0.4)

2. Typography Scale

36 / 700
36px bold -- Progress Circle Large
Panel Header Title
18px semibold (600) -- Panel headers
NEXT
16px extrabold (800) uppercase, 1px -- NEXT button
128 Units
16px bold (700) -- Units counter
FRVR Trigon Puzzle
14.5px semibold (600) -- Game name (header)
Body text for descriptions and labels
14px medium (500) -- Body text
Section Title
13px semibold (600) uppercase, 0.5px -- Section titles
Item name in list
13px medium (500) -- Item names
GAME SUBTYPE
11px medium (500) uppercase, 0.5px -- Subtype labels
Like
10px medium (500) -- Action button labels
font-family: ui-rounded, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif

3. Buttons

NEXT
NEXT (Preview)
amber gradient, 16px radius
×
NEXT (Playing)
red gradient, X icon
▶ TAP TO PLAY
TAP TO PLAY
#31b545, 50px pill radius
↑ Swipe to skip
Swipe Hint
dark pill, 20px radius

4. Avatars

Base Sizes

AK
52px -- Bottom Bar
AK
64px -- Profile Panel

Cosmetic Frames

AK
Bronze
#cd7f32
AK
Silver
#c0c0c0
AK
Gold
#ffd700
AK
Diamond
#b9f2ff (animated)

5. Action Buttons (Bottom Bar)

6. Panel (Slide-Up Overlay)

Favorites

FRVR Trigon
GAME
background: rgba(20,20,25,0.95) border-radius: 20px 20px 0 0 backdrop-filter: blur(20px)

7. Tags / Badges (Preference Tags)

Puzzle 12
Arcade 8
Strategy 3
bg: rgba(254,44,85,0.15) border: rgba(254,44,85,0.3) border-radius: 16px

8. Profile Buttons

9. Toggle Switch

Off
On
44 x 26px track 20px thumb on: #ffc832 off: rgba(255,255,255,0.15)

10. Spacing & Layout Reference

Layout Dimensions

TG Header Offset
44px -- var(--tg-header-offset)
App Header
52px -- var(--header-height)
Bottom Bar
72px -- var(--bottom-bar-height)
Max App Width
430px -- max-width

Spacing Scale

4px
8px
12px
16px
20px

Corner Radii

8px Thumbnails
10px Profile btns
12px Cards
16px Buttons
20px Panels
50px / pill TAP TO PLAY, tags