Skip to content

Latest commit

 

History

History
78 lines (40 loc) · 2.04 KB

UI GUIDELINES.md

File metadata and controls

78 lines (40 loc) · 2.04 KB

Tox User Interface Guidelines

======

Padding

In the mockup, nearly everything is given 10 pixels of space. There are only a few places where this rule is broken, and those are usually for good reason such as to draw attention. This 10 pixel number is not set in stone, but if you're building a UI off of these mockups, I would at the very least appreciate you try to use a uniform padding if you're not going to use 10 pixels exactly.

Corners

In the process of "teaching" the user how to interact with Tox, we give them a few visual cues that things are clickable. One of them is to use the cue color Tox Green, while the other is to give the clickable object rounded corners. All rounded corners in this mockup have a corner radius of 5 pixels.

Colors

Tox Green: #6bc260

Tox Yellow: #cebf44

Tox Red: #c84e4e

Black: #000000

Dark Grey: #1c1c1c

Medium Grey: #414141

Light Grey: #d1d1d1

White: #ffffff

Avatars

User and Contact avatar images are 40x40 pixels.

Fonts

Currently these mockups are employing the use of the Roboto font which can be downloaded here.

User (You)

Name: Bold, 14 px, white

Status: Regular, 11px, light grey

Contact List (Friend)

Contact Sorting and Friend Request Buttons: Bold, 12px, white

Contact Name: Regular, 12px, white

Contact Status: Regular, 11px, light grey

Selected Contact Name: Regular, 12px, dark grey

Selected Contact Status: Regular, 11px, medium grey

Chat Side

Currently Selected Contact Header Name: Bold, 12px, dark grey

Currently Selected Contact Header Status: Regular, 11px, medium grey

User Chat Shortname: Light, 10px, medium grey

Contact Chat Shortname: Light, 10px, black

User Chat Text: Light, 11px, medium grey

Contact Chat Text: Light, 11px, black

File Transfer In-Progress Box Text: Regular, 10px, medium grey

File Transfer Finished Box Text: Regular, 10px, white

User Timestamps: Light, 10px, medium grey

Contact Timestamps: Light, 10px, black

Chat Input Box Tooltip Text: Regular, 11px, light grey