Design Guide
Colors
(Foreground)
#000000
(Foreground 2)
#727483
(Background)
#ffffff
(Background 2)
#f8f9f6
(Background 3)
#eceef0
#b7b4a5
(Error)
#a6192e
(Border)
#bfbfbf
(Disabled)
#757575
#f8f8f8
#e6e7e7
#a0a3ac
(Success)
#60799a
#cfe0e6
#77775a
Icons
Typography
Typography uses the Neue Haas Grotesk font family.
Headings
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
Labels
Label 1 - Regular
Label 1 - Underline
Label 1 - Bold
Label 1 - Bold Underline
Label 2 - Regular
Label 2 - Underline
Label 2 - Bold
Label 2 - Bold Underline
Label 2 - Sentence
Label 2 - Sentence 2
Label 3 - Filter
Caption
Caption — small sentence-case descriptive text used for image captions, footnotes, and helper text.
Overline
Overline — Eyebrow Text
Links
Standard/Numbered - Disabled 01
Body (descriptions, details, text)
Bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas turpis non porta tempus. Etiam vestibulum semper facilisis. Praesent volutpat, orci vitae sodales auctor, nisi velit tempus ex, ut sodales arcu sem sed eros. Pellentesque sed mauris a elit ullamcorper imperdiet nec eget lorem. Fusce sed ornare nibh. Cras et felis massa. Aenean aliquam sapien magna, in pharetra justo aliquam id. Aenean aliquet nec ex sed gravida. Praesent ut urna dui. Proin mollis bibendum vulputate. Nullam luctus diam leo, non convallis est maximus et. Aenean at sapien massa. Pellentesque ex nibh, dapibus ac libero vel, gravida auctor dolor. Maecenas blandit tincidunt augue. Vivamus euismod arcu ac nunc auctor cursus.
Regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas turpis non porta tempus. Etiam vestibulum semper facilisis. Praesent volutpat, orci vitae sodales auctor, nisi velit tempus ex, ut sodales arcu sem sed eros. Pellentesque sed mauris a elit ullamcorper imperdiet nec eget lorem. Fusce sed ornare nibh. Cras et felis massa. Aenean aliquam sapien magna, in pharetra justo aliquam id. Aenean aliquet nec ex sed gravida. Praesent ut urna dui. Proin mollis bibendum vulputate. Nullam luctus diam leo, non convallis est maximus et. Aenean at sapien massa. Pellentesque ex nibh, dapibus ac libero vel, gravida auctor dolor. Maecenas blandit tincidunt augue. Vivamus euismod arcu ac nunc auctor cursus.
Sentence
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas turpis non porta tempus. Etiam vestibulum semper facilisis. Praesent volutpat, orci vitae sodales auctor, nisi velit tempus ex, ut sodales arcu sem sed eros. Pellentesque sed mauris a elit ullamcorper imperdiet nec eget lorem. Fusce sed ornare nibh. Cras et felis massa. Aenean aliquam sapien magna, in pharetra justo aliquam id. Aenean aliquet nec ex sed gravida. Praesent ut urna dui. Proin mollis bibendum vulputate. Nullam luctus diam leo, non convallis est maximus et. Aenean at sapien massa. Pellentesque ex nibh, dapibus ac libero vel, gravida auctor dolor. Maecenas blandit tincidunt augue. Vivamus euismod arcu ac nunc auctor cursus.
Sentence 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas turpis non porta tempus. Etiam vestibulum semper facilisis. Praesent volutpat, orci vitae sodales auctor, nisi velit tempus ex, ut sodales arcu sem sed eros. Pellentesque sed mauris a elit ullamcorper imperdiet nec eget lorem. Fusce sed ornare nibh. Cras et felis massa. Aenean aliquam sapien magna, in pharetra justo aliquam id. Aenean aliquet nec ex sed gravida. Praesent ut urna dui. Proin mollis bibendum vulputate. Nullam luctus diam leo, non convallis est maximus et. Aenean at sapien massa. Pellentesque ex nibh, dapibus ac libero vel, gravida auctor dolor. Maecenas blandit tincidunt augue. Vivamus euismod arcu ac nunc auctor cursus.
Spacing
(2px)
(4px)
(8px)
(12px)
(16px)
(20px)
(24px)
(32px)
(40px)
(64px)
(80px)
(128px)
(160px)
Breakpoints
Breakpoint variables can be used in CSS as follows:
@container style(--min-lg: true) {
/* Red background for minimum 1024px width */
background-color: var(--color-brand-red);
}
Available variables:
--max-sm : < 640px
--min-sm : >= 640px
--max-md : < 768px
--min-md : >= 768px
--max-lg : < 1024px
--min-lg : >= 1024px
--max-xl : < 1440px
--min-xl : >= 1440px
--max-xxl : < 1920px
--min-xxl : >= 1920px
Container
This is a container. It spans the full width of the page, up to a maximum of 1920px. The left/right margins are based on screen width:
- 0 - 767px: 20px
- 768px - 1023px: 32px
- 1024px - 1439px: 40px
- >= 1440px: 55px
This is a container with a visible background color and internal padding. It spans the full width of the page, up to a maximum of 1920px. The left/right margins are based on screen width:
- 0 - 767px: 20px
- 768px - 1023px: 32px
- 1024px - 1439px: 40px
- >= 1440px: 55px
This is a container with a visible background color and internal padding. It spans the full width of the page, up to a maximum of 1920px. The left/right margins are based on screen width:
- 0 - 767px: 20px
- 768px - 1023px: 32px
- 1024px - 1439px: 40px
- >= 1440px: 55px
Components
Accordion
Accordion with multiple items allowed open and enabled on desktop and mobile.
Accordion with one item allowed open and enabled on mobile only.