Immersive Darkness
Use deep slate and midnight overlays to keep content grounded while letting gradients and neon accents guide focus.
Oscar Studio · UI System
Oscar Studio UI Kit
Reusable surfaces, gradients, CTA patterns, and form elements that capture the dark, cinematic feel of Oscar Studio.
Gradient Pulse
Blend sky, indigo, and purple tones with radial transitions to simulate stage lighting and create depth without heavy borders.
Futuristic Glass
Combine subtle glassmorphism, blur, and fine borders to mimic studio hardware reflections without relying on heavy chrome.
Confident Typography
Pair bold headings with generous tracking for labels and CTAs to express confidence and precision.
Gradient Library
Blend these halos behind sections to transition between stories without harsh dividers.
Skyline Halo
Hero headers, landing backgrounds, large CTA banners.
Gradient token
Aurora Drift
Feature cards, metric highlights, testimonial rails.
Gradient token
Indigo Bloom
Process steps, Academy surfaces, modal shells.
Gradient token
Sunrise Ember
Footer CTA, announcement banners, conversion blocks.
Gradient token
Surface Patterns
Mix and match border intensity with blur or gradient fills to craft consistent layouts.
Glass Panel
Use for dense content such as FAQ blocks, partner highlights, or Academy overview.
ReusableDark-first
Gradient Capsule
Perfect for service cards, testimonials, or stat highlights that need a pop of color.
ReusableDark-first
Ghost Outline
Apply to low-emphasis filters, pill navigation, or slider controls.
ReusableDark-first
Form Essentials
Inputs stay dark with soft inner shadows. Use accent borders only for active states.
Input states
Disabled
Success
Error
Toggle & slider
Timeline
Khối testimonial & slider
Sử dụng flex ngang, snap scroll và auto scroll để hiển thị nhiều review cùng lúc.
Slider shell
Brand Manager · Finance
Creative Lead · Education
Producer · Indie
CTA Patterns
Chọn layout phù hợp từng giai đoạn funnel: nhận diện, giáo dục, chuyển đổi.