Visual Style Guide
The intent of this document is to discuss and document things like colors, fonts, drop-shadows, and so on for Ricochet's UI. This is a live wiki page, and it is very new, so it will probably change rapidly.
Mockup adhering to current guide:
Mockup with metrics:
The current style guide is currently being rebuilt (AS OF MAY 21 2017) in CSS -- which are effectively metrics. so that we don't have to worry about proprietary tooling, and we can also have basic interaction design documented this way as well.
Ricochet UI Style Guide in HTML/CSS Live Demo Assets and code
Open Sans and Liberation Sans. Both are free, open source projects released under the SIL Open Font License.
- Interface headings: Open Sans Semibold
- Interface text: Open Sans Regular
- Speech bubbles: Liberation Sans Regular
Primary Blue: #1b89e3 (RGB 27,137,227)
Used for: stroke around speech bubbles, links, interface labels and iconography.
Secondary Blue: #4193D6 (RGB 65, 147, 214)
Used for: bubbles around contacts, numbers in circles
Almost White: #fdfdfd (RGB 253, 253, 253)
Used for: everywhere we'd normally use white.
Light Grey: #f3f3f3 (RGB 243, 243, 243)
Used for: contacts (left) side of window, background of interfaces that are not transparent.
SemiLight Grey #dedede (RGB 222, 222, 222)
Used for: diving lines on top of Light Grey interfaces
Medium Grey* #979797 (RGB 183, 183, 187)
User for: Offline list, divider lines, the stroke around the other person's conversation, the stroke around the input
Almost Black (Blue): #101822 (RGB 16, 24, 34)
Used for: in place of black, Contacts