Youtap Tech Indonesia
Breadcrumbs

Foundations

Version History

Version

Date

Comment

Current Version (v. 1)

Oct 03, 2023 01:34

@Unknown user

Foundations inform the basis of any great user interface, from accessibility standards to essential patterns for layout and interaction.

RectangleA.png

Why Foundations?

To keep a user interface consistent across every component, even when new ones are designed, foundations are the key to keeping that consistency. This help the customer to find their way around the app and sets expectations on where to find elements and how to use the app.


What to know before digging in deep?

To use the design styleguide correctly, please pay attention to the following:

All designs are optimised for a screen size of

375 x 812px (iPhone 13 mini)

Certain elements are customisable, however, this will be kept to a minimum. Elements that are customisable are highlighted in the guide.


What’s included?


Colour confluence.png

Colour styles

Primary, secondary, and tertiary colours


Confluence Blur.png


Standards for shadows, blurs, and corner radius

Media material - Confluence.png

Gap and spacing

All padding, spacing etc. as an increment of 8px


Icons - Confluence.png

Iconography

A full list of icons that can be used

Grid - Confluence.png

Layout and Grid

Alignment of components for different screens


Logo - Confluence.png

Logo

Specifications for the company logo

Media material - Confluence.png

Media material

Material to showcase the app screens


Font - Confluence.png

Typography

All the different types of text sizes