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.

Components


Example of components, such as warnings, modals, buttons, etc..
Example of components, such as warnings, modals, buttons, etc..
Example of components, such as warnings, modals, buttons, etc..
Example of components, such as warnings, modals, buttons, etc..
Example of components, such as warnings, modals, buttons, etc..

Icons


Icons - style and usage.
Icons - style and usage.
Icons - style and usage.
Icons - style and usage.
Icons - style and usage.