Globals
Colors
Text Styles
h1: Heading 1
h2: Heading 2
h3: Heading 3
h4: Heading 4
h5: Heading 5
h6: Heading 6
Paragraph
Paragraph XS
Paragraph SM
Paragraph LG
Type Styles
Hero
Description: Hero type styles are used for large text throughout the site, typically in a prominent or attention-grabbing format. Common examples include text overlays on slideshows or images with text overlays, where the messaging is featured in a larger than normal type style.
Hero
.type-hero
Hero Small
.type-hero .type--sm
Hero Large
.type-hero .type--lg
Headline
Description: Headline type styles are used for titles, such as product titles, page titles, article titles, and collection titles. This style is meant to give prominence and hierarchy to key content elements.
Headline
.type-headline
Headline Small
.type-headline .type--sm
Headline Large
.type-headline .type--lg
Subline
Description: Subline type styles are used for text that follows hero or headline type styles. These are typically secondary or supplementary pieces of information that provide context or additional details.
Subline
.type-subline
Subline Small
.type-subline .type--sm
Subline Large
.type-subline .type--lg
Item
Description: Item type styles are used for product items on Product Listing Pages (PLP), recommended products, article items on blog landing pages, and similar contexts. This style is used to give a consistent look and feel to related content elements.
Item Base
.type-item
Item Small
.type-item .type--sm
Item Large
.type-item .type--lg
Section
Description: Section type styles are used for primary titles of sections. For example, a carousel section may have a title like "Men's New Arrivals," or a page featuring brick-and-mortar stores might have a title that says "California Stores."
Section
.type-section
Section Small
.type-section .type--sm
Section Large
.type-section .type--lg
Eyebrow
Description: Eyebrow type styles are used for small text placed above hero or headline text styles. This style is typically used to provide additional context, a category label, or an introduction to the main content.
Eyebrow
.type-eyebrow
Eyebrow Small
.type-eyebrow .type--sm
Eyebrow Large
.type-eyebrow .type--lg
Font Families
Buttons
Accordion
Tabs
Body 1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati id similique beatae possimus. Rem accusantium harum necessitatibus voluptates consectetur saepe? Voluptate quisquam odio, officia temporibus cumque dolorem quidem nesciunt aperiam.
Body 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati id similique beatae possimus. Rem accusantium harum necessitatibus voluptates consectetur saepe? Voluptate quisquam odio, officia temporibus cumque dolorem quidem nesciunt aperiam.
Body 3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati id similique beatae possimus. Rem accusantium harum necessitatibus voluptates consectetur saepe? Voluptate quisquam odio, officia temporibus cumque dolorem quidem nesciunt aperiam.
Typeface Examples
Typeface Options
Hero Font
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
Headline Font
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
Header Level 3
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.