Basic layout

Better reachability

  • One UI screen are designed to consider user movements and allow intuitive, easy use.
    The top part of the screen is the viewing area where titles appear. The rest of the screen is the interaction area, where user actions occur.

Viewing area

  • The viewing area has wide margins to give the user the impression of open space. It also provides a natural connection between a user's eyes and the flow of action through the margin contrast with the interaction area.


  • The viewing area mainly contains content that users simply look at without any interaction. Components that require touch interaction are avoided here.

Typography for spatial design

  • One UI allows users to check information in the viewing area and then naturally move to the details in the interaction area. To achieve this, the viewing area contains content that is recognized at a glance, and the margins are effectively used to focus attention on this content.
  • With center-aligned text in the viewing area, the top of the screen has greater visual stability. This helps distinguish it from the interaction area which appears below.

Simple cut out

  • When an image is placed in the viewing area, use straight lines to separate it from the interaction area. Simple cuts reduce the complexity of the screen and minimize content loss.

Interaction area

  • Actionable components are grouped and placed in a logical order. The margins of the interaction area should be used appropriately to allow better focus on grouped content.

Grid types

  • The layout of the interaction area may vary depending on the content shown in it. The grid can be adjusted by considering how well the content will be displayed and what size will be used for the margins on each screen.

List grid

Card grid

List grid

Card grid

2 Column grid

3 Column grid

2 Column grid

3 Column grid

Focus block

  • Focus blocks deliver information by grouping content by category so it's easier to view at a glance. There are three types of focus block: card (multiple items provided as cards), list (multiple items provided in a list), and image (one item provided as an image).

Multiple card : Multiple contents in a card

Grouped list : List view

Singular content : Individual content

Multiple card type (Contents all inside)

Image + Text (divided) : In case of the background image has too many details to display text on top.

Image & Text : In case of using the whole image as a full bleed background underneath the text.

Image + Text : In case of locating title text or image captions below the image.

Text only : In case of having more than 3 lines of bodycopy within the card.

Clustered images + Text : The radius value of multiple card and singular contents are different.

Text + Controller : It is recommended to locate text at the top left corner and on/off controller at the bottom right corner.

Singular content type

Thumbnails only

Inside of multiple cards

Thumbnails only

Inside of multiple cards

Grouped list type

Text only

Thumbnail image list

Container icon list

2D icon list

Margin and padding

  • Margins at the edges of the screen allow users to focus on the content in the focus block. Margins are optimized for each of the 3 different types of focus blocks.