Branding & Colors

Use the Branding & Colors guide for information on color logo usage when developing content for or social media channel content.

Brand Colors

SCSS file: _sass/config/_colors.scss

Fext Blue
SASS Variable $fext-blue
HEX #1c4f90
Fext Green
SASS Variable $fext-green
HEX #388E3C
Fext Web Text
SASS Variable $fext-text
HEX #444444
Fext Gray
SASS Variable $fext-gray
HEX #e6e6e6

UI Colors

SCSS file: _sass/config/_colors.scss

In addition to the brand colors, the following colors may be used for UI elements.

Fext Success
SASS Variable $fext-success
HEX #3adb76
Fext Warning
SASS Variable $fext-warning
HEX #ffae00
Fext Alert
SASS Variable $fext-alert
HEX #ec5840
Fext Gray Dark
SASS Variable $fext-gray-dark
HEX #546673


SCSS file: /_sass/config/_iconography.scss uses FontAwesome Icons for iconography throughout the site. For a full listing of icons available visit:

When using icons in regards to food or nutrition we should not show actual food items (ie: ice cream, chicken leg, steak, etc...) we should show icons that indicate the action of eating: fork and knife, pots & pans, etc..

SMS iconongraphy should reference chatting or conversational metaphors


SCSS file: _sass/config/_typography.scss

For basic body copy and headers will use the font: Hind available from Google's Web Font service.

Hind Font Family


Type Hierarchy

Heading 1 - 48px

Heading 2 - 36px

Heading 3 - 24px

Heading 4 - 21px

Heading 5 - 18px
Heading 6 - 16px

Paragraph / Body Copy - 16px