Youtap Tech Indonesia
Youtap Tech Indonesia
Breadcrumbs

Gap and spacing

Version history

Version

Date

Comment

Current Version (v. 1)

Oct 03, 2023 01:34

@Unknown user

Introduction

Gap and padding are used to separate elements within the UI for enhancing readability.

The following defined spacing are to be used as standard unit through the app without any exception.

It includes the following sections:


Specification Not customisable

The font size is set in the core specifications.

1 rem = 16px (can be changed, but other values change accordingly).

These need to checked!

Label

Pixel

REM value

Usage

SP_1

8px

0.5

Spacing between text

SP_2

SP_3 prev

16px

1

Padding to the edge

SP_3

SP_4 prev

24px

1.5

Distinction between different features

Application and Usage Not customisable

Any gaps or spaces between UI elements have the above mentioned specifications. This is not customisable.


Spacing/ Padding example from 3_3.0_1.0_Transaction, showcasing a list of transactions underneath each other:


Resources

Notes

  1. Introduction overview:

  2. Specs: Details of the UI value

    1. Gap value hierarchy

    2. Graphical Collection of the colour schemes - Attach as images

  3. Application and usage

    1. Their usage in terms of:

      1. Screens

      2. Components

        1. Padding around UI

        2. Spacing between subheading - paragraph

        3. etc (standard aspects)

    2. Figma links/thumbnails of the chart

    3. Screenshot with gap/padding values drawn on for graphical reference