Sass files to style the interface that displays the data layout created by the javascript in my charts.js gist

_settings.scss

$font-family-sans-serif : 'Ubuntu', Arial, sans-serif;
$font-family-numbers    : 'Ubuntu Mono', Arial, sans-serif;
 
/* COLORS */
 
$white  : #FFFFFF;
$ghost  : #FAFAFA;
 
$jet    : #222222;
$black  : #000000;
 
$mh-blue  : #204985;
$mh-green : #48BD08;
 
// Google Chart Colors
$google-blue	    : #3366cc;
$google-red		    : #dc3912;
$google-orange	  : #ff9900;
$google-green	    : #109618;
$google-purple	  : #990099;
$google-teal	    : #0099c6;
$google-pink	    : #dd4477;
$google-lime	    : #66aa00;
$google-dark-red  : #b82e2e;
 
$google-charts : (
	$google-blue,
	$google-red,
	$google-orange,
	$google-green,
	$google-purple,
	$google-teal,
	$google-pink,
	$google-lime,
	$google-dark-red
	);
 
$background-color-body      : mix($jet, $mh-blue, 45%);
$background-color-container : mix($jet, $mh-blue, 30%);
 
$base-font-color: transparentize($ghost, .1);
 
/* TYPOGRAPHY */
// base typography styles generated with gridlover.net
 
$base-font-size   : 16px;
$base-line-height : 26px;
$measure          : 1080px;
 
$h1-font-size     : 68px;
$h1-line          : 26px;
$h1-lines         : 3;
$h1-line-height   : $h1-line * $h1-lines;
$h1-margin-top    : 2 * $h1-line;
$h1-margin-bottom : 1 * $h1-line;
 
$h2-font-size     : 42px;
$h2-line          : 26px;
$h2-lines         : 2;
$h2-line-height   : $h2-line * $h2-lines;
$h2-margin-top    : 2 * $h2-line;
$h2-margin-bottom : 1 * $h2-line;
 
$h3-font-size     : 26px;
$h3-line          : 26px;
$h3-lines         : 1;
$h3-line-height   : $h3-line * $h3-lines;
$h3-margin-top    : 1 * $h3-line;
$h3-margin-bottom : 1 * $h3-line;
 
$h4-font-size     : 16px;
$h4-line          : 26px;
$h4-lines         : 1;
$h4-line-height   : $h4-line * $h4-lines;
$h4-margin-top    : 1 * $h4-line;
$h4-margin-bottom : 1 * $h4-line;
 
$headers : (
	h1 : (
		font-size     : $h1-font-size,
		line-height   : $h1-line-height,
		margin-top    : $h1-margin-top,
		margin-bottom : $h1-margin-bottom,
		), 
	h2 : (
		font-size     : $h2-font-size,
		line-height   : $h2-line-height,
		margin-top    : $h2-margin-top,
		margin-bottom : $h2-margin-bottom,
		), 
	h3 : (
		font-size     : $h3-font-size,
		line-height   : $h3-line-height,
		margin-top    : $h3-margin-top,
		margin-bottom : $h3-margin-bottom,
		), 
	h4 : (
		font-size     : $h4-font-size,
		line-height   : $h4-line-height,
		margin-top    : $h4-margin-top,
		margin-bottom : $h4-margin-bottom,
		),
	)

_styles.scss

/* MIXINS */

@mixin chart-keys($color-list) {
	@each $color in $color-list {
		$i: index($color-list, $color);
		&:nth-child(#{$i}) .key-color {
			background-color: $color;
			border: 1px solid darken($color, 2%);
			width: rem(35px);
			height: rem(35px);
			border-radius: 100%;
		}
	}
}

/* PARTIALS */

%header {
  font-weight: 300; 
  font-family: $font-family-sans-serif;
}

%numbers {
	font-family: $font-family-sans-serif;
}

%large-number {
	display: block;	
	font-weight: 700;
	margin: 0;
	line-height: .75em;
	text-align: center;
}

%container {
	background-color: $background-color-container;
	padding: golden-ratio(300px, -5);
	border-radius: 5px;
	box-shadow: 
		0px 5px 0px darken($background-color-container, 5%),
		2px 5px 0px darken($background-color-container, 5%),
		-2px 5px 0px darken($background-color-container, 5%),
		2px -1px 0px darken($background-color-container, 5%),
		-2px -1px 0px darken($background-color-container, 5%);
}

/* BASE STYLES */

body {
	background-color: $background-color-body;
	font-family: $font-family-sans-serif;
	color: $base-font-color;
	margin: 0;
	padding: 0;
}

/* TYPOGRAPHY */

@each $header, $value in $headers {
	#{$header} {
		@extend %header;
		font-size: map-get($value, font-size);
		line-height: map-get($value, line-height);
		margin-top: map-get($value, margin-top);
		margin-bottom: map-get($value, margin-bottom);
	}
}

table {
	font-size: 1.7rem;
}

/* BASIC LAYOUT */

header {
	background-color: $white;
	opacity: .95;
	box-shadow: 0px 10px 0px darken($background-color-container, 2%);
	section {
		margin-top: 0;
	}
	img {
		@include span-columns(4);
		margin-top: map-get(map-get($headers, h1), margin-top);
		margin-bottom: map-get(map-get($headers, h1), margin-bottom);
	}
}

section {
	@include outer-container;
	position: relative;
	margin-top: map-get(map-get($headers, h1), margin-top);
	margin-bottom: map-get(map-get($headers, h1), margin-bottom);
}

.numberCallout {
	@include span-columns(4);
	&#unassignedTickets {
		@include shift(1);
	}
	&#openTickets {
		@include shift(2);
	}
}

#responseLabel {
	@include span-columns(5);
	@include shift(1);
	display: block;
	margin-top: (map-get(map-get($headers, h1), margin-bottom) * 1.75);
}

#responseAverage {
	@include span-columns(5);
	@include omega;
	margin-top: map-get(map-get($headers, h1), margin-bottom);
	margin-bottom: map-get(map-get($headers, h1), margin-bottom);
}

#staffChart,
#bugChart {
	@include span-columns(6);
}

#staffTable,
#bugTable {
	@include span-columns(5);
	@include shift(1);
	@include omega;
}

/* MODULES */

.numberCallout {
	position: relative;
	@extend %container;
	padding: golden-ratio(300px, -5);
	text-align: center;
	.number {
		@extend %numbers;
		@extend %large-number;
		font-size: golden-ratio($h1-font-size,2);
	}
}

#responseStats {
	@extend %container;
	.number {
		@extend %numbers;
		@extend %large-number;
		font-size: golden-ratio($h2-font-size,2);
	}
	.label {
		font-weight: 400;
		width: 100%;
	}
}

.label {
	font-size: $h2-font-size;
	text-align: center;
	font-weight: 400;
	width: em(90px);
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0;
	margin-top: golden-ratio($h2-font-size,-2);
}

.large-label {
	font-size: $h2-font-size;
	margin: 0;
}

#tickets,
#bugs {
	@extend %container;
	h2 {
		margin-top: 0;
		text-align: center;
		font-size: $h2-font-size;
		font-weight: 400;
	}
}

.stats-table {
	border-spacing: rem(10px);
	border-collapse: separate;
	margin-right: golden-ratio(16px,1);
	th {
		padding-bottom: golden-ratio(16px, -1);
	}
	th:first-child {
		width: rem(100px);
		text-align:right;
		padding-right: golden-ratio(16px,1);
	}
	td {
	}
	td:first-child {
		text-align: right;
		padding-right: golden-ratio(16px,1);
	}

	tr {
		@include chart-keys($google-charts);
	}
}

charts.scss

@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700|Ubuntu:300,400,500,700);

@import "bourbon/bourbon";
@import "grid-settings";
@import "neat/neat";
@import "normalize";

@import "settings";
@import "styles";