color-guide.txt
Public
Actions

Authored By

	RHo
	Feb 2 2017, 6:08 PM

Size

2 KB

Referenced Files

None

Subscribers

None

color-guide.txt
View Options

	//Color guide for Wikipedia Android App



	// COLOR HEX //

	// Accent colors - blues
	@accent-color-90 : #EAF3FF;
	@accent-color-50 : #36c;
	@accent-color-30 : #2A4B8D;


	// Base colors - all grays
	@base-color-100: #FFFFFF;
	@base-color-90: #F8F9FA;
	@base-color-80: #EAECF0;
	@base-color-70: #C8CCD1;
	@base-color-50: #A2A9B1;

	@base-color-30: #72777D;
	@base-color-20: #54595D;


	@base-color-10: #222222;
	@base-color-0: #000000;


	// Negative reds
	@n-color-90: #FEE7E6;
	@n-color-50: #DD3333;
	@n-color-30: #B32424;


	// Positive greens
	@p-color-90: #D5FDF4;
	@p-color-50: #00AF89;
	@p-color-30: #14866D;


	// Warning / highlight
	@h-color-90: #FEF6E7;
	@h-color-50: #FFCC33;
	@h-color-30: #AC6600;


	// USE OF COLOR //

	// main app tint color
	@app-tint-color: @accent-color-50;


	//layouts
	@app-background: @base-color-80;
	@content-background: @base-color-100;
	@article-background: @content-background;
	@card-background: @content-background;

	// specific ui elements
	@article-action-toolbar: @base-color-20;
	@article-tabs-view-background: @base-color-10;

	// new navigation ui elements
	@app-bottom-bar: @base-color-100;
	@app-bottom-bar-icon-selected: @app-tint-color;
	@app-bottom-bar-icon-unselected: @base-color-50;
	@app-top-brand-background: @app-tint-color;

	// common UI elements - use app tint color (blue) for all ui elements.
	@raised-button-background: @app-tint-color;
	@raised-button-text: @base-color-100;
	@textfield-tint: @app-tint-color;
	@textfield-label: @app-tint-color;
	@flat-button: @app-tint-color;
	@floating-action-button: @app-tint-color;
	@article-loading-bar: @app-tint-color;

	//Feed card icons
	@card-header-default: @base-color-50;
	@card-header-featured: @h-color-50;
	@card-header-trending: @accent-color-50;
	@today-on-wikipedia-icon: @p-color-50;
	@randomizer-icon: @accent-color-50;

	// card actions e.g. Download, share
	@card-action: @base-color-50;

	// any placeholders, including list items
	@image-placeholder-background: @base-color-80;
	@image-placeholder-icon: @base-color-50;


	// article body
	@article-text: @base-color-10;
	@article-blue-link: @app-tint-color;
	@article-red-link: @n-color-50;
	@article-metadata: @base-color-50;
	@wikidata-description: @article-metadata;
	@article-title-divider: @article-metadata;

File Metadata

Mime Type: text/plain
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 4326180
Default Alt Text: color-guide.txt (2 KB)

color-guide.txtPublicActions

color-guide.txtView Options

File Metadata

Event Timeline

color-guide.txt
Public
Actions

color-guide.txt
View Options