Brand
Whether you are contributing to GRASS or creating materials which involve GRASS, help the project by keeping these branding guidelines.
Logos
Green
The green logo is the primary version of the logo for white and light gray backgrounds. This logo should be used whenever possible to maintain brand consistency.
(Click Icons to download the SVG)
PNG Download
White
The white logo should be used on green backgrounds, photographs of grass, and other pictures as long as they provide sufficient contrast. Use with the brand green color or a grass photograph in the background is preferred to maintain brand consistency.
(Click Icons to download the SVG)
PNG Download
Gradient
The gradient logo can be used when it fits the overall design context or when multiple colors are required and the combination of the brand green color and white color are not sufficient. The gradient logo should be used only with extra care. The gradient logo should not be used on a (any) green or (any) blue background or with multicolor backgrounds. An example of appropriate usage is for a sticker, or white T-shirt.
(Click Icons to download the SVG)
PNG Download
Colors
Green
Values
- HEX #4cb05b
- RGB rgb(76,176,91)
- HSL hsl(129, 40%, 49%)
-
var(--gs-primary-color)
var(--gs-primary-color--light)
var(--gs-primary-color--lighter)
var(--gs-primary-color--lightest)
-
.grass-green
Alt-Green
Values
- HEX #6ed079
- RGB rgb(110,208,121)
- HSL hsl(127, 51%, 62%)
-
var(--gs-primary-alt-color)
var(--gs-primary-alt-color--light)
var(--gs-primary-alt-color--lighter)
var(--gs-primary-alt-color--lightest)
-
.grass-green-alt
Light Green
Values
- HEX #87e991
- RGB rgb(135,233,145)
- HSL hsl(126, 69%, 72%)
-
var(--gs-primary-ligh-color)
var(--gs-primary-ligh-color--light)
var(--gs-primary-ligh-color--lighter)
var(--gs-primary-ligh-color--lightest)
-
.grass-green-light
Dark Green
Values
- HEX #088b36
- RGB rgb(8,139,54)
- HSL hsl(141, 89%, 29%)
-
var(--gs-primary-dark-color)
var(--gs-primary-dark-color--light)
var(--gs-primary-dark-color--lighter)
var(--gs-primary-dark-color--lightest)
-
.grass-green-dark
Blue
Values
- HEX #00393f
- RGB rgb(0,57,63)
- HSL hsl(186, 100%, 12%)
-
var(--gs-secondary-color)
var(--gs-secondary-color--light)
var(--gs-secondary-color--lighter)
var(--gs-secondary-color--lightest)
-
.grass-blue
Alt-Blue
Values
- HEX #27575c
- RGB rgb(39,87,92)
- HSL hsl(186, 40%, 26%)
-
var(--gs-secondary-alt-color)
var(--gs-secondary-alt-color--light)
var(--gs-secondary-alt-color--lighter)
var(--gs-secondary-alt-color--lightest)
-
.grass-blue
Light Blue
Values
- HEX #4a787d
- RGB rgb(74,120,125)
- HSL hsl(186, 26%, 39%)
-
var(--gs-secondary-light-color)
var(--gs-secondary-light-color--light)
var(--gs-secondary-light-color--lighter)
var(--gs-secondary-light-color--lightest)
-
.grass-blue
Dark Blue
Values
- HEX #002024
- RGB rgb(0,32,36)
- HSL hsl(187, 100%, 7%)
-
var(--gs-secondary-dark-color)
var(--gs-secondary-dark-color--light)
var(--gs-secondary-dark-color--lighter)
var(--gs-secondary-dark-color--lightest)
-
.grass-blue
Black
Values
- HEX #021905
- RGB rgb(2,25,5)
- HSL hsl(128, 85%, 5%)
-
var(--gs-black-color)
var(--gs-black-color--light)
var(--gs-black-color--lighter)
var(--gs-black-color--lightest)
-
.black-color
White
Values
- HEX #f7f7f7
- RGB rgb(247,247,247)
- HSL hsl(0, 0%, 97%)
-
var(--gs-white-color)
var(--gs-white-color--light)
var(--gs-white-color--lighter)
var(--gs-white-color--lightest)
-
.white-color