OTO · Reverse-engineered

Дизайн-система OTO

Извлечена из реальных скринов приложения OTO (v4.3.817, тёмная тема). Единый oto-ds.css — основа всех кликабельных прототипов. Значения цветов — аппроксимации со скриншотов.

Палитра

Поверхности

--bg#0d0d0f
--surface#1c1d1f
--surface-2#2a2a2a
--surface-3#121214

Акцент (sage/teal)

--accent#8fa89e
--accent-strong#7ba8a0
--accent-bg#2d3a3a
--on-accent#14201c

Категории Explore

Calm#67768f
Focus#8c99a8
Sleep#2c3a52

Семантика серьёзности (TFI)

0–17Not a problem
18–31Small
32–53Moderate
54–72Big
73–100Very big

Типографика

--fs-display 30Your Program
--fs-title 26Tinnitus loves attention
--fs-h 20Chapter 4
--fs-body 15Skills to change unhelpful thought patterns.
--fs-meta 13Chapter 1 of 7 • 5 min

Компоненты

Upgrade banner

Upgrade to access your full treatment program
›

Media card (Your Program)

Chapter 1 of 7Your brain can tune out tinnitus

Quick-access tiles

Favourites Recent

Category tiles (Explore)

Calm Focus Sleep

Featured carousel

CBTSkills to change unhelpful thought patterns and gain control SleepLearn how to sleep well with tinnitus

Browse-all card

Physical TherapyPractical exercises to release muscle tension

Lesson rows (states)

✓Welcome to CBT5 min · completed How your brain reacts is the key5 min 🔒Tinnitus loves attention8 min · locked

Buttons

Listen Now Unlock Download

Toggle (Goals)

Calm
Focus
Sleep

Slider + progress (опросник)

Never awareAlways aware

Donut score (TFI)

51

Moderate impact

Subscale bars

I
Intrusive · 57
SC
Sense of Control · 47
SL
Sleep · 37

Trial timeline (paywall)

Start free trial
Get full access to the Oto App
2
Day 5: Trial Reminder
We'll let you know before your free trial ends.
3
Day 7: Trial Ends
Your subscription will start.

Segmented tabs (Sounds)

AllFavouritesColoured

Sound grid

Violet White Green Pink Brown Blue

Сквозная навигация (persistent)

Mini-player

Violet Noise

Tab-bar

Home Explore Sounds