Toggle navigation
Global Search
Learn
Code Lab
Foldables and Large Screens
One UI Beta
Samsung Developers Podcasts
Develop
Mobile
Galaxy GameDev
Galaxy Themes
Galaxy Watch
Health
Samsung Blockchain
Samsung DeX
Samsung IAP
Samsung Internet
Samsung Pay
Samsung Wallet
View All
Visual Display
Smart TV
Smart Hospitality Display
Smart Signage
Digital Appliance
Family Hub
Platform
Bixby
Knox
SmartThings
Tizen.NET
Design
Design System
One UI
One UI Watch
Smart TV
Distribute
Galaxy Store
TV Seller Office
Galaxy Store Games
Samsung Podcasts
Support
Developer Support
Remote Test Lab
Issues and Bugs Channel
Samsung Android USB Driver
Galaxy Emulator Skin
Connect
Blog
News
Forums
Events
Samsung Developer Conference
SDC22
SDC21
SDC19 and Previous Events
Global Search
Sign In
Top Global Search Form
Search
Submit
Recommendation
Design Competition 2018
Galaxy Camera SDK
Galaxy App Publishing
Galaxy App Publishing 1
Mobile
Mobile1
Mobile2
Mobile3
Mobile4
Suggestion
Benefit Overview
Best Cording Guide
Best App Store
Beta Galaxy1
Beta Galaxy2
OneUI
Toggle Side navigation
Overview
Structure
Basic structure
Visual depth
Layout
Basic layout
Grid system
Components
App bar
Bottom bar
Bottom navigation
Buttons
Dialog
Lists
Search
Toasts
Color
Color system and usage
Theme
Iconography
Background
Symbol
Icon color
Motion
Introduction
Motion basics and usage
Sound & Haptic
Sound
Haptic
Writing
Focused and purposeful
Simple and human
Empowering and engaging
Accessibility
Introduction
Screen reader
Focus order
Color and contrast
Layout and typography
Interaction and control
Content
Foldable & Large screen
Large screen UI
App continuity and Multi-tasking
Foldable exclusive - Flex mode
OneUI
Visual depth
One UI visual depth
One UI uses blur, dim, and shadow effects to create a hierarchical structure that helps users focus on important information. These effects shouldn't be used excessively or distract from important content. High-priority information should be presented at the top.
When a new screen isn't related to the previous one, blur and dim effects are applied to the previous screen to keep users focused. However, if the new screen is closely related to the previous one, then only the shadow effect is applied to the previous screen so that the two screens appear connected.
Depth type and attributes
Blur
The blur effect helps emphasize the current information while maintaining a connection with what was shown previously. Using the blur effect in combination with the white dim effect in basic light mode delivers a clean, bright, and lively impression.
The blur effect should be applied evenly throughout the background and combined with the light dim or dark dim effect depending on the current theme. This allows users to consistently and clearly distinguish different types of information.
Light theme
Dark theme
Appropriate use of the blur effect creates a soft, comfortable impression and enhances readability. Distinguishing information becomes less effective if the blur effect is too weak and the hierarchical structure becomes less clear if the blur effect is too strong. Instead of using blur alone, use it together with the dim effect to enhance readability.
Dim
The dim effect helps clarify the individual levels of the hierarchical structure, while focusing attention on the element located at the highest level. This effect should be evenly applied across multiple screens so that switching between screens feels natural.
The dim effect should only be used to help users easily distinguish different types of information. To ensure a clear information structure, don't expose multiple levels of structure on a single screen.
Do
Don't
Do
Don't
Do
Don't
Do
Don't
Shadow
One UI provides simple structure and style. A soft shadow effect can be used to show connections between information while maintaining the hierarchy. Shadow should not be seen as having 3D depth because this would create excessive length or contrast.
Do
Don't
Do
Don't
Strong contrast between the shadow and background makes the shadow stand out too much, interfering with focus on information. The shadow effect should be applied lightly and cleanly to focus attention on the layered information.
Repeated and combined use of the shadow and dim effects can increase visual fatigue and bring down the overall impression of the screen. Avoid applying the dim effect and shadow effect at the same time.
Basic structure
Basic layout