Fender Design System

Palette

Colors can be applied to backgrounds of an element with the .bg prefix, or can apply color to the text of the element with just its name.

	Aa	.bg-dark-red, .dark-red = #b12419;
	Aa	.bg-red, .red = #d52b1e;
	Aa	.bg-light-red, .light-red = #ff725c;
	Aa	.bg-orange, .orange = #E85A00;
	Aa	.bg-brown, .brown = #5f4132;
	Aa	.bg-gold, .gold = #df8900;
	Aa	.bg-yellow, .yellow = #ffd700;
	Aa	.bg-dark-yellow, .dark-yellow = #febb31;
	Aa	.bg-light-yellow, .light-yellow = #fbf1a9;
	Aa	.bg-purple, .purple = #6e3d99;
	Aa	.bg-dark-purple, .dark-purple = #2f1944;
	Aa	.bg-dark-pink, .dark-pink = #dc3d9f;
	Aa	.bg-hot-pink, .hot-pink = #ff41b4;
	Aa	.bg-pink, .pink = #ff80cc;
	Aa	.bg-light-pink, .light-pink = #ffa3d7;
	Aa	.bg-dark-green, .dark-green = #156E02;
	Aa	.bg-green, .green = #2ac278;
	Aa	.bg-olive-green, .olive-green = #3d422a;
	Aa	.bg-teal, .teal = #06807E;
	Aa	.bg-navy, .navy = #001b44;
	Aa	.bg-dark-blue, .dark-blue = #185B9D;
	Aa	.bg-blue, .blue = #038cca;
	Aa	.bg-blue-gray, .blue-gray = #4b6782;
	Aa	.bg-light-blue, .light-blue = #96ccff;
	Aa	.bg-lightest-blue, .lightest-blue = #cdecff;
	Aa	.bg-washed-blue, .washed-blue = #f6fffe;
	Aa	.bg-washed-green, .washed-green = #e8fdf5;
	Aa	.bg-washed-yellow, .washed-yellow = #fffceb;
	Aa	.bg-washed-red, .washed-red = #ffdfdf;

:root { --dark-red: #b12419; --red: #d52b1e; --light-red: #ff725c; --orange: #E85A00; --brown: #5f4132; --gold: #df8900; --yellow: #ffd700; --dark-yellow: #febb31; --light-yellow: #fbf1a9; --purple: #6e3d99; --dark-purple: #2f1944; --dark-pink: #dc3d9f; --hot-pink: #ff41b4; --pink: #ff80cc; --light-pink: #ffa3d7; --dark-green: #156E02; --green: #2ac278; --olive-green: #3d422a; --teal: #06807E; --navy: #001b44; --dark-blue: #185B9D; --blue: #038cca; --blue-gray: #4b6782; --light-blue: #96ccff; --lightest-blue: #cdecff; --washed-blue: #f6fffe; --washed-green: #e8fdf5; --washed-yellow: #fffceb; --washed-red: #ffdfdf; } .bg-dark-red { background-color: var(--dark-red)}; .bg-red { background-color: var(--red)}; .bg-light-red { background-color: var(--light-red)}; .bg-orange { background-color: var(--orange)}; .bg-brown { background-color: var(--brown)}; .bg-gold { background-color: var(--gold)}; .bg-yellow { background-color: var(--yellow)}; .bg-dark-yellow { background-color: var(--dark-yellow)}; .bg-light-yellow { background-color: var(--light-yellow)}; .bg-purple { background-color: var(--purple)}; .bg-dark-purple { background-color: var(--dark-purple)}; .bg-dark-pink { background-color: var(--dark-pink)}; .bg-hot-pink { background-color: var(--hot-pink)}; .bg-pink { background-color: var(--pink)}; .bg-light-pink { background-color: var(--light-pink)}; .bg-dark-green { background-color: var(--dark-green)}; .bg-green { background-color: var(--green)}; .bg-olive-green { background-color: var(--olive-green)}; .bg-teal { background-color: var(--teal)}; .bg-navy { background-color: var(--navy)}; .bg-dark-blue { background-color: var(--dark-blue)}; .bg-blue { background-color: var(--blue)}; .bg-blue-gray { background-color: var(--blue-gray)}; .bg-light-blue { background-color: var(--light-blue)}; .bg-lightest-blue { background-color: var(--lightest-blue)}; .bg-washed-blue { background-color: var(--washed-blue)}; .bg-washed-green { background-color: var(--washed-green)}; .bg-washed-yellow { background-color: var(--washed-yellow)}; .bg-washed-red { background-color: var(--washed-red)}; .dark-red { color: var(--dark-red)}; .red { color: var(--red)}; .light-red { color: var(--light-red)}; .orange { color: var(--orange)}; .brown { color: var(--brown)}; .gold { color: var(--gold)}; .yellow { color: var(--yellow)}; .dark-yellow { color: var(--dark-yellow)}; .light-yellow { color: var(--light-yellow)}; .purple { color: var(--purple)}; .dark-purple { color: var(--dark-purple)}; .dark-pink { color: var(--dark-pink)}; .hot-pink { color: var(--hot-pink)}; .pink { color: var(--pink)}; .light-pink { color: var(--light-pink)}; .dark-green { color: var(--dark-green)}; .green { color: var(--green)}; .olive-green { color: var(--olive-green)}; .teal { color: var(--teal)}; .navy { color: var(--navy)}; .dark-blue { color: var(--dark-blue)}; .blue { color: var(--blue)}; .blue-gray { color: var(--blue-gray)}; .light-blue { color: var(--light-blue)}; .lightest-blue { color: var(--lightest-blue)}; .washed-blue { color: var(--washed-blue)}; .washed-green { color: var(--washed-green)}; .washed-yellow { color: var(--washed-yellow)}; .washed-red { color: var(--washed-red)};