Skip to content
Snippets Groups Projects
colors.less 1.80 KiB
// GO B1G RED

	// Scarlet
	@scarlet: #d00000;
	@brand: @scarlet;

	// Cream
	@cream: #fefdfa;
	@page-background: @cream; // A color to represent the page background, used for WDN colors

// UI

	// Light (<50%)
	@ui01: mix(#000, @cream, 2%);  // #f9f8f5
	@ui02: mix(#000, @cream, 4%);  // #f4f3f0
	@ui03: mix(#000, @cream, 8%);  // #eae9e6
	@ui04: mix(#000, @cream, 16%); // #d5d5d2
	@ui05: mix(#000, @cream, 24%); // #c1c0be
	@ui06: mix(#000, @cream, 32%); // #adacaa
	@ui07: mix(#000, @cream, 48%); // #848482

	// Dark (>50%)
	@ui08: mix(#000, @cream, 64%); // #5b5b5a
	@ui09: mix(#000, @cream, 72%); // #474746
	@ui10: mix(#000, @cream, 80%); // #333332
	@ui11: mix(#000, @cream, 82%); // #2e2e2d
	@ui12: mix(#000, @cream, 84%); // #292828
	@ui13: mix(#000, @cream, 88%); // #1e1e1e
	@ui14: mix(#000, @cream, 92%); // #141414

// A few neutral shades, light tan and dark brown
@neutral: #4a3b13;
@light-neutral: lighten(desaturate(@neutral, 15%), 5%);
@dark-neutral: darken(mix(@neutral, #666, 60%), 5%);
@faded-neutral: mix(#3b3816, @page-background, 5%); // To be used for subtle color variations. Works OK on most banded colors

// Base spinner
@base-spinner: #137cbd;

// Color triads, in the blue family
@triad: @base-spinner;
@light-triad: lighten(@triad, 10%);
@dark-triad: mix(@triad, #666, 45%);

// Color complementary, in the green family
@complement: #00892c;
@light-complement: lighten(@complement, 10%);
@dark-complement: mix(@complement, #666, 45%);

// Color complementary, in the orange family
@energetic: #d4440b;
@light-energetic: lighten(@energetic, 10%);
@dark-energetic: mix(@energetic, #666, 70%);

// Assign base colors

    // Base text and heading text colors    
    @heading-text: @ui09;
    @base-text: @ui08;

    // Warnings. Since red is our brand color, we're using a brighter orange
    @warning: #ffa500;