Cleaner, safer, better ride standards — Learn More.
Modular & Reusable

Style Guide

Colors

Primaries and grays
Primary
Primary 1
#00000
Primary 2
#052C25
Primary 3
#D2C0A6
Primary 4
#D79F6E
Note: The numbers Primary 1, Primary 2 etc. refer to the colors found in the Global Color Swatch . You can set the background color of an element by using the classes: "BG Primary 1" , "BG Primary 2" etc.
Gray
Gray 1
#111112
Gray 2
#62636B
Gray 3
#E4E0DD
Gray 4
#F4F1EE
Note: The numbers Gray 1, Gray 2 etc. refer to the colors found in the Global Color Swatch . You can set the background color of an element by using the classes: "BG Gray 1" , "BG Gray 2" etc.
Status
Success
#51D37E
Warning
#FAB14E
Danger
#FC4343
Info
#8ae2f0
Note: The colors Success, Warning, Danger and Info refer to the colors found in the Global Color Swatch . You can set the background color of an element by using the classes: "BG Success" , "BG Warning" etc.

Type

Headings, body and other common text elements.
Display 1
Display 2
Note: You can make any text element display as a 'Display 1' or 'Display 2' size by adding the class 'Display 1' or 'Display 2' to it.

Heading one

Heading two

Heading three

Heading four

Heading five
Heading six
Lead Text   
Lead Link
Small Text   
Small Text Muted
Small Caps

Icons

Common interface and social network iconography
Interface icons
Social icons

Buttons

Component, text style and size variations
Sizes
Note: Use the class "Button" on an element to format as a button. To format as a large or small button, add the class "Button Large" or "Button Small"
Variations
Note: Add the class "Button Outline" a "Button" element to format as an outlined button.
Round

Cards

Structural component for displaying boxed content
Subtitle

Card Title

Text in the card body. A flexible aesthetic makes Foray the perfect starting point for all websites, from portfolio to product brochure.
Large Button
Card Title
A flexible aesthetic makes Foray the perfect starting point for all websites, from portfolio to product brochure.
Underlined Link

Forms

Size and state variations for text inputs and selectables.
Input Sizes
Note: Add the class "Form Input" a form input element to format as above. Add the classes "Form Input Small" or "Form Input Large" to control the size.
Textarea
Checkboxes + Radios
Dark Input
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Badges

Combine with other components to display metadata
Primary
Primary 1
Primary 2
Primary 3
Primary 4
Note: Use the class "Badge" to format an element as a badge. Use the background color classes . Example add the class "BG Primary 1" to a "Badge" element to control its background color.
Gray
Gray 1
Gray 2
Gray 3
Gray 4
Status
Success
Warning
Danger
Info