element-hq / element-hq/element-ios

Design kit update

Open
#4,356 2 comments 1 reaction 1 assignee Claimed by @SBiOSoftWhare View on GitHub
Dominant language
Swift
Stars
1.8k
Forks
544
PR merge metrics
PR metrics pending

Description

Design is currently cleaning up the Element UI components and basic styles such as colours and text styles.
The ultimate goal is to accomplish the same in the SDK and aim to create consistency and harmony between design and development.
We're starting the cleaning work with basic styles first (colours and text styles)

COLOURS
To start with, I have drastically reduced the colour palette to 25 colours in total. These colours account for both Light and Dark themes and are referenced as Global colours here: https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=1338%3A17947

I have also created a Mobile specific colour guide with appropriate variable namings here: https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=1521%3A23026 and this is what should be implemented.

You can see these colours being applied on the iOS UI here https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/?node-id=1937%3A102

TEXT STYLES
A list of text styles is defined here https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=1362%3A0
This follows the Apple human interface typography guidelines.

It would be ideal to use the variable naming convention proposed in the "font in Figma" column. Again this will ease communication between design and development if the need of text referencing occurs.

Any question let me know :)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.