Welcome to the Pixelated Style Guide

Here you'll find information about visual design and UI guidelines for Pixelated, such as colors, typography and components.

This is a live style guide - that means it's reflecting the actual application cascading stylesheets, but also that it will be continuously and automatically updated as our design evolves.

Pixelated Screenshot

Color Palette


PRIMARY COLOR
#EF4E2F

SECONDARY COLOR
#3E3A37

TOP PANE
#EAEAEA

CONTRAST
#F2F3ED

ACTION BUTTONS
#2ba6cb


SUCCESS
#2DAB49

ATTENTION
#F6A40A

WARNING
#F7E8AF

ERROR
#D72A25

SEARCH HIGHLIGHT
#FFEF29

COUNT BACKGROUND
#C0B9B9

Typography


Pixelated uses Open Sans as its main font for its readability and wide range of variations. Open Sans is a humanist sans serif typeface created by Steve Matteson.

Icons

Every icon in Pixelated comes from a font called Font Awesome.

Here are some of the icons we're currently using on Pixelated