18F/18f.gsa.gov

// Typography
$h1-font-size:       3.8rem;
$h2-font-size:       3.4rem;
$h3-font-size:       2.3rem;
$h4-font-size:       2.1rem;
$h5-font-size:       1.4rem;
$h6-font-size:       1.2rem;

$base-font-size:     1.8rem;
$tiny-font-size:     1.2rem;

$paragraph-line-height: 1.5;

$banner-font-size:   3rem;
$banner-line-height: 1.4;

$icon-small:         1rem;
$icon:               1.3rem;

$font-sans:          'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
$font-monospace:     Consolas, Monaco, "Andale Mono", monospace;


// Color
$color-light:        #b3efff; // $color-light / $color-secondary-light
$color-bright:       #00cfff; // $color-bright / $color-secondary
$color-bright-light: #1a85ab;
$color-medium:       #046b99; // $color-medium / $theme-color-primary
$color-dark:         #1c304a; // $color-dark / $theme-color-primary-dark
$color-base:         #1f2e4a;
$color-black:        #000000;
$color-inverse:      #ffffff;
$color-gsa-blue:     #003c71;
$color-bright-hover: #00a7ce;
$color-medium-hover: #00547a;

$color-gray-lightest: #f1f1f1; // Adding bc used in our $border-light in this file.
$color-gray-hover:    #fafafa;
$color-gray-divider:  #bbbbbb;

$color-gray-border:   #5b616b;

// Spacing
$spacer-margins:     0.5;
$grid-margins:       100px;
$section-margins:    5;
$paragraph-margins:  1.5;
$paragraph-margins-thick: 3;
$nav-width-extra:    88px; // width needed to add so nav doesn't break on medium-screen size
$text-max-width:     60.6rem;

// Miscellaneous
$border-accent-height: 1rem;
$border-accent:        $border-accent-height solid $color-bright;
$border-accent-medium: $border-accent-height solid $color-medium;
$border-light:         1px solid color('gray-cool-5');
$border-gray:          1px solid $color-gray-divider;
$border-thick:         4px solid color('gray-cool-5');

// Grid breakpoints
$tablet-screen: 'tablet';
$tablet: new-breakpoint(min-width $tablet-screen 6);

// Icons
$icon-diameter: 30px;