Overview

This page outlines useful tools available for developers.

Utility Classes

The utility classes can be applied to any element on the site to set a specific CSS value. The goal of this is to reduce the amount of custom classes needed for basic styling.

The Design System includes both the default Bootstrap utility classes, as well as some additional custom classes outlined below.

Background Color

Sets the background color.

CSS Attribute Color Description Base: 0px+ Sample
background-color primary brand color .bg-primary
background-color primary brand color lightened 97.75% .bg-primary-light
background-color primary brand color lightened 50% .bg-primary-light-alt
background-color primary brand color at 60% opacity .bg-primary-40
background-color secondary brand color .bg-secondary
background-color success .bg-success
background-color info .bg-info
background-color warning .bg-warning
background-color danger .bg-danger
background-color light .bg-light
background-color dark .bg-dark
background-color black .bg-black-1
background-color gray 1 .bg-gray-1
background-color gray 2 .bg-gray-2
background-color gray 3 .bg-gray-3
background-color gray 4 .bg-gray-4
background-color link 1 .bg-link-1
background-color link 2 .bg-link-2
background-color sale .bg-sale
background-color success .bg-success-text
background-color white .bg-white
background-color transparent .bg-transparent
background-color accent
(optional)
.bg-accent

Text Color

Sets the background color.

CSS Attribute Color Description Base: 0px+ Sample
color primary brand color .text-primary Sample
color primary brand color at 25% opacity .text-primary-light Sample
color secondary brand color .text-secondary Sample
color success .text-success Sample
color info .text-info Sample
color warning .text-warning Sample
color danger .text-danger Sample
color light .text-light Sample
color dark .text-dark Sample
color black .text-black Sample
color gray 1 .text-gray-1 Sample
color gray 2 .text-gray-2 Sample
color gray 3 .text-gray-3 Sample
color gray 4 .text-gray-4 Sample
color link 1 .text-link-1 Sample
color link 2 .text-link-2 Sample
color sale .text-sale Sample
color success .text-success-text Sample
color white .text-white Sample
color accent
(optional)
.text-accent 		Sample

Text Decoration

CSS Attribute Value Base: 0px+ Sample
text-decoration line-through .text-decoration-line-through Sample line- or strikethrough
text-decoration underline .text-decoration-underline Sample Underline
text-decoration none .text-decoration-none Sample None

Link Style by Container

Utility class to be applied on a parent container, sets the style for all child links.

CSS Attribute Value Description Base: 0px+ Sample
color black Add class to parent element to make child link elements black (e.g. footer links) .link-area-black Black Link
text-decoration none /
underline (on hover)		 For brands that show underlined links by default, add class to parent element to make child elements show underlined link only on hover .link-area-underline-on-hover Black Link

Position

Specifies the position type and coordinates.

CSS Attribute Value Base: 0px+ SM: 576px+ MD: 761px+ LG: 1024px+ XL: 1476px+
position absolute .position-absolute .position-sm-absolute .position-md-absolute .position-lg-absolute .position-xl-absolute
position fixed .position-fixed .position-sm-fixed .position-md-fixed .position-lg-fixed .position-xl-fixed
position relative .position-relative .position-sm-relative .position-md-relative .position-lg-relative .position-xl-relative
position static .position-static .position-sm-static .position-md-static .position-lg-static .position-xl-static
position sticky .position-sticky .position-sm-sticky .position-md-sticky .position-lg-sticky .position-xl-sticky
top 0 .top-0 .top-sm-0 .top-md-0 .top-lg-0 .top-xl-0
top auto .top-auto .top-sm-auto .top-md-auto .top-lg-auto .top-xl-auto
right 0 .right-0 .right-sm-0 .right-md-0 .right-lg-0 .right-xl-0
right auto .right-auto .right-sm-auto .right-md-auto .right-lg-auto .right-xl-auto
bottom 0 .bottom-0 .bottom-sm-0 .bottom-md-0 .bottom-lg-0 .bottom-xl-0
bottom auto .bottom-auto .bottom-sm-auto .bottom-md-auto .bottom-lg-auto .bottom-xl-auto
left 0 .left-0 .left-sm-0 .left-md-0 .left-lg-0 .left-xl-0
left auto .left-auto .left-sm-auto .left-md-auto .left-lg-auto .left-xl-auto

Border Width

Sets the border width.

CSS Attribute Value Base: 0px+ SM: 576px+ MD: 761px+ LG: 1024px+ XL: 1476px+
border-width 1px .border-width-1 - - - -
border-width 2px .border-width-2 - - - -
border-width 3px .border-width-3 - - - -

Width

Sets a width in percentage.

CSS Attribute Value Base: 0px+ SM: 576px+ MD: 761px+ LG: 1024px+ XL: 1476px+
width 25% .w-25 .w-sm-25 .w-md-25 .w-lg-25 .w-xl-25
width 50% .w-50 .w-sm-50 .w-md-50 .w-lg-50 .w-xl-50
width 75% .w-75 .w-sm-75 .w-md-75 .w-lg-75 .w-xl-75
width 100% .w-100 .w-sm-100 .w-md-100 .w-lg-100 .w-xl-100
width auto .w-auto .w-sm-auto .w-md-auto .w-lg-auto .w-xl-auto

Brand Fonts

Each brand is allocated 6 custom fonts detailed in the typography section.

Utility classes are available for each custom font that set the correct:

  • font-family
  • font-weight
  • font-style
CSS Attribute Description Base: 0px+ Sample
font-family Brand Font Base
Universal "Neue Helvetica W05" font 		.brand-font-0 Sample
font-family Brand Font 1: "Poppins" .brand-font-1 Sample
font-family Brand Font 2: "Poppins" .brand-font-2 Sample
font-family Brand Font 3: "Poppins" .brand-font-3 Sample
font-family Brand Font 4: "ivyora-display" .brand-font-4 Sample
font-family Brand Font 5: "Inter Tight" .brand-font-5 Sample
font-family Brand Font 6: "Inter Tight" .brand-font-6 Sample
font-family Primary Brand Font: "Poppins"
Common class defines one of the defined brand-specific fonts as the primary brand font.		 .brand-font-primary Sample
font-family Primary Brand Font (Bold): "Poppins"
Common class defines one of the defined brand-specific fonts as the primary bold brand font. 		.brand-font-primary-bold Sample

Font Size

Sets the font-size.

CSS Attribute Value Pixel Equilivent Base: 0px+ SM: 576px+ MD: 761px+ LG: 1024px+ XL: 1476px+
font-size .625rem 10px .font-size-xs - - - -
font-size .75rem 12px .font-size-0p75 .font-size-sm-0p75 .font-size-md-0p75 .font-size-lg-0p75 .font-size-xl-0p75
font-size .75rem 12px .font-size-sm - - - -
font-size .8rem 12.8px .font-size-0p8 .font-size-sm-0p8 .font-size-md-0p8 .font-size-lg-0p8 .font-size-xl-0p8
font-size .875rem 14px .font-size-md - - - -
font-size .9rem 14.4px .font-size-0p9 .font-size-sm-0p9 .font-size-md-0p9 .font-size-lg-0p9 .font-size-xl-0p9
font-size 1rem 16px .font-size-1 .font-size-sm-1 .font-size-md-1 .font-size-lg-1 .font-size-xl-1
font-size 1rem 16px .font-size-base - - - -
font-size 1.1rem 17.6px .font-size-1p1 .font-size-sm-1p1 .font-size-md-1p1 .font-size-lg-1p1 .font-size-xl-1p1
font-size 1.125rem 18px .font-size-lg - - - -
font-size 1.2rem 19.2px .font-size-1p2 .font-size-sm-1p2 .font-size-md-1p2 .font-size-lg-1p2 .font-size-xl-1p2
font-size 1.3rem 20.8px .font-size-1p3 .font-size-sm-1p3 .font-size-md-1p3 .font-size-lg-1p3 .font-size-xl-1p3
font-size 1.4rem 22.4px .font-size-1p4 .font-size-sm-1p4 .font-size-md-1p4 .font-size-lg-1p4 .font-size-xl-1p4
font-size 1.5rem 24px .font-size-1p5 .font-size-sm-1p5 .font-size-md-1p5 .font-size-lg-1p5 .font-size-xl-1p5
font-size 1.6rem 25.6px .font-size-1p6 .font-size-sm-1p6 .font-size-md-1p6 .font-size-lg-1p6 .font-size-xl-1p6
font-size 1.7rem 27.2px .font-size-1p7 .font-size-sm-1p7 .font-size-md-1p7 .font-size-lg-1p7 .font-size-xl-1p7
font-size 1.8rem 28.8px .font-size-1p8 .font-size-sm-1p8 .font-size-md-1p8 .font-size-lg-1p8 .font-size-xl-1p8
font-size 1.9rem 30.4px .font-size-1p9 .font-size-sm-1p9 .font-size-md-1p9 .font-size-lg-1p9 .font-size-xl-1p9
font-size 2rem 32px .font-size-2 .font-size-sm-2 .font-size-md-2 .font-size-lg-2 .font-size-xl-2
font-size 2.1rem 33.6px .font-size-2p1 .font-size-sm-2p1 .font-size-md-2p1 .font-size-lg-2p1 .font-size-xl-2p1
font-size 2.2rem 35.2px .font-size-2p2 .font-size-sm-2p2 .font-size-md-2p2 .font-size-lg-2p2 .font-size-xl-2p2
font-size 2.3rem 36.8px .font-size-2p3 .font-size-sm-2p3 .font-size-md-2p3 .font-size-lg-2p3 .font-size-xl-2p3
font-size 2.4rem 38.4px .font-size-2p4 .font-size-sm-2p4 .font-size-md-2p4 .font-size-lg-2p4 .font-size-xl-2p4
font-size 2.5rem 40px .font-size-2p5 .font-size-sm-2p5 .font-size-md-2p5 .font-size-lg-2p5 .font-size-xl-2p5
font-size 2.6rem 41.6px .font-size-2p6 .font-size-sm-2p6 .font-size-md-2p6 .font-size-lg-2p6 .font-size-xl-2p6
font-size 2.7rem 43.2px .font-size-2p7 .font-size-sm-2p7 .font-size-md-2p7 .font-size-lg-2p7 .font-size-xl-2p7
font-size 2.8rem 44.8px .font-size-2p8 .font-size-sm-2p8 .font-size-md-2p8 .font-size-lg-2p8 .font-size-xl-2p8
font-size 2.9rem 46.4px .font-size-2p9 .font-size-sm-2p9 .font-size-md-2p9 .font-size-lg-2p9 .font-size-xl-2p9
font-size 3rem 48px .font-size-3 .font-size-sm-3 .font-size-md-3 .font-size-lg-3 .font-size-xl-3
font-size 3.1rem 49.6px .font-size-3p1 .font-size-sm-3p1 .font-size-md-3p1 .font-size-lg-3p1 .font-size-xl-3p1
font-size 3.2rem 51.2px .font-size-3p2 .font-size-sm-3p2 .font-size-md-3p2 .font-size-lg-3p2 .font-size-xl-3p2
font-size 3.3rem 52.8px .font-size-3p3 .font-size-sm-3p3 .font-size-md-3p3 .font-size-lg-3p3 .font-size-xl-3p3
font-size 3.4rem 54.4px .font-size-3p4 .font-size-sm-3p4 .font-size-md-3p4 .font-size-lg-3p4 .font-size-xl-3p4
font-size 3.5rem 56px .font-size-3p5 .font-size-sm-3p5 .font-size-md-3p5 .font-size-lg-3p5 .font-size-xl-3p5
font-size 3.6rem 57.6px .font-size-3p6 .font-size-sm-3p6 .font-size-md-3p6 .font-size-lg-3p6 .font-size-xl-3p6
font-size 3.7rem 59.2px .font-size-3p7 .font-size-sm-3p7 .font-size-md-3p7 .font-size-lg-3p7 .font-size-xl-3p7
font-size 3.8rem 60.8px .font-size-3p8 .font-size-sm-3p8 .font-size-md-3p8 .font-size-lg-3p8 .font-size-xl-3p8
font-size 3.9rem 62.4px .font-size-3p9 .font-size-sm-3p9 .font-size-md-3p9 .font-size-lg-3p9 .font-size-xl-3p9
font-size 4rem 64px .font-size-4 .font-size-sm-4 .font-size-md-4 .font-size-lg-4 .font-size-xl-4
font-size 4.1rem 65.6px .font-size-4p1 .font-size-sm-4p1 .font-size-md-4p1 .font-size-lg-4p1 .font-size-xl-4p1
font-size 4.2rem 67.2px .font-size-4p2 .font-size-sm-4p2 .font-size-md-4p2 .font-size-lg-4p2 .font-size-xl-4p2
font-size 4.3rem 68.8px .font-size-4p3 .font-size-sm-4p3 .font-size-md-4p3 .font-size-lg-4p3 .font-size-xl-4p3
font-size 4.4rem 70.4px .font-size-4p4 .font-size-sm-4p4 .font-size-md-4p4 .font-size-lg-4p4 .font-size-xl-4p4
font-size 4.5rem 72px .font-size-4p5 .font-size-sm-4p5 .font-size-md-4p5 .font-size-lg-4p5 .font-size-xl-4p5
font-size 4.6rem 73.6px .font-size-4p6 .font-size-sm-4p6 .font-size-md-4p6 .font-size-lg-4p6 .font-size-xl-4p6
font-size 4.7rem 75.2px .font-size-4p7 .font-size-sm-4p7 .font-size-md-4p7 .font-size-lg-4p7 .font-size-xl-4p7
font-size 4.8rem 76.8px .font-size-4p8 .font-size-sm-4p8 .font-size-md-4p8 .font-size-lg-4p8 .font-size-xl-4p8
font-size 4.9rem 78.4px .font-size-4p9 .font-size-sm-4p9 .font-size-md-4p9 .font-size-lg-4p9 .font-size-xl-4p9
font-size 5rem 80px .font-size-5 .font-size-sm-5 .font-size-md-5 .font-size-lg-5 .font-size-xl-5
font-size 5.1rem 81.6px .font-size-5p1 .font-size-sm-5p1 .font-size-md-5p1 .font-size-lg-5p1 .font-size-xl-5p1
font-size 5.2rem 83.2px .font-size-5p2 .font-size-sm-5p2 .font-size-md-5p2 .font-size-lg-5p2 .font-size-xl-5p2
font-size 5.3rem 84.8px .font-size-5p3 .font-size-sm-5p3 .font-size-md-5p3 .font-size-lg-5p3 .font-size-xl-5p3
font-size 5.4rem 86.4px .font-size-5p4 .font-size-sm-5p4 .font-size-md-5p4 .font-size-lg-5p4 .font-size-xl-5p4
font-size 5.5rem 88px .font-size-5p5 .font-size-sm-5p5 .font-size-md-5p5 .font-size-lg-5p5 .font-size-xl-5p5
font-size 5.6rem 89.6px .font-size-5p6 .font-size-sm-5p6 .font-size-md-5p6 .font-size-lg-5p6 .font-size-xl-5p6
font-size 5.7rem 91.2px .font-size-5p7 .font-size-sm-5p7 .font-size-md-5p7 .font-size-lg-5p7 .font-size-xl-5p7
font-size 5.8rem 92.8px .font-size-5p8 .font-size-sm-5p8 .font-size-md-5p8 .font-size-lg-5p8 .font-size-xl-5p8
font-size 5.9rem 94.4px .font-size-5p9 .font-size-sm-5p9 .font-size-md-5p9 .font-size-lg-5p9 .font-size-xl-5p9
font-size 6rem 96px .font-size-6 .font-size-sm-6 .font-size-md-6 .font-size-lg-6 .font-size-xl-6
font-size 7rem 112px .font-size-7 .font-size-sm-7 .font-size-md-7 .font-size-lg-7 .font-size-xl-7
font-size 8rem 128px .font-size-8 .font-size-sm-8 .font-size-md-8 .font-size-lg-8 .font-size-xl-8
font-size 9rem 144px .font-size-9 .font-size-sm-9 .font-size-md-9 .font-size-lg-9 .font-size-xl-9
font-size 10rem 160px .font-size-10 .font-size-sm-10 .font-size-md-10 .font-size-lg-10 .font-size-xl-10
font-size 11rem 176px .font-size-11 .font-size-sm-11 .font-size-md-11 .font-size-lg-11 .font-size-xl-11
font-size 12rem 192px .font-size-12 .font-size-sm-12 .font-size-md-12 .font-size-lg-12 .font-size-xl-12
font-size 13rem 208px .font-size-13 .font-size-sm-13 .font-size-md-13 .font-size-lg-13 .font-size-xl-13
font-size 14rem 224px .font-size-14 .font-size-sm-14 .font-size-md-14 .font-size-lg-14 .font-size-xl-14
font-size 15rem 240px .font-size-15 .font-size-sm-15 .font-size-md-15 .font-size-lg-15 .font-size-xl-15
font-size 16rem 256px .font-size-16 .font-size-sm-16 .font-size-md-16 .font-size-lg-16 .font-size-xl-16
font-size 17rem 272px .font-size-17 .font-size-sm-17 .font-size-md-17 .font-size-lg-17 .font-size-xl-17
font-size 18rem 288px .font-size-18 .font-size-sm-18 .font-size-md-18 .font-size-lg-18 .font-size-xl-18
font-size 19rem 304px .font-size-19 .font-size-sm-19 .font-size-md-19 .font-size-lg-19 .font-size-xl-19
font-size 20rem 320px .font-size-20 .font-size-sm-20 .font-size-md-20 .font-size-lg-20 .font-size-xl-20

Line Height

Sets the line-height.

CSS Attribute Value Base: 0px+ SM: 576px+ MD: 761px+ LG: 1024px+ XL: 1476px+
line-height 1.5 .line-height-base - - - -
line-height 0.75 .line-height-0p75 .line-height-sm-0p75 .line-height-md-0p75 .line-height-lg-0p75 .line-height-xl-0p75
line-height 0.8 .line-height-0p8 .line-height-sm-0p8 .line-height-md-0p8 .line-height-lg-0p8 .line-height-xl-0p8
line-height 0.9 .line-height-0p9 .line-height-sm-0p9 .line-height-md-0p9 .line-height-lg-0p9 .line-height-xl-0p9
line-height 1 .line-height-1 .line-height-sm-1 .line-height-md-1 .line-height-lg-1 .line-height-xl-1
line-height 1.1 .line-height-1p1 .line-height-sm-1p1 .line-height-md-1p1 .line-height-lg-1p1 .line-height-xl-1p1
line-height 1.2 .line-height-1p2 .line-height-sm-1p2 .line-height-md-1p2 .line-height-lg-1p2 .line-height-xl-1p2
line-height 1.3 .line-height-1p3 .line-height-sm-1p3 .line-height-md-1p3 .line-height-lg-1p3 .line-height-xl-1p3
line-height 1.4 .line-height-1p4 .line-height-sm-1p4 .line-height-md-1p4 .line-height-lg-1p4 .line-height-xl-1p4
line-height 1.5 .line-height-1p5 .line-height-sm-1p5 .line-height-md-1p5 .line-height-lg-1p5 .line-height-xl-1p5
line-height 1.6 .line-height-1p6 .line-height-sm-1p6 .line-height-md-1p6 .line-height-lg-1p6 .line-height-xl-1p6
line-height 1.7 .line-height-1p7 .line-height-sm-1p7 .line-height-md-1p7 .line-height-lg-1p7 .line-height-xl-1p7
line-height 1.1 .line-height-1p8 .line-height-sm-1p8 .line-height-md-1p8 .line-height-lg-1p8 .line-height-xl-1p8
line-height 1.9 .line-height-1p9 .line-height-sm-1p9 .line-height-md-1p9 .line-height-lg-1p9 .line-height-xl-1p9
line-height 2 .line-height-2 .line-height-sm-2 .line-height-md-2 .line-height-lg-2 .line-height-xl-2

Opacity

Control the opacity of elements.

CSS Attribute Value Base: 0px+ Sample
opacity 0 .opacity-0 Sample
opacity .25 .opacity-25 Sample
opacity .5 .opacity-50 Sample
opacity .75 .opacity-75 Sample
opacity 1 .opacity-100 Sample

Pointer Events

Enable or disable pointer events. Useful for absoutely positioned items that shouldn't be clickable.

CSS Attribute Value Base: 0px+ SM: 576px+ MD: 761px+ LG: 1024px+ XL: 1476px+
pointer-events none .pe-none - - - -
pointer-events auto .pe-auto - - - -

Spacers (Margin and Padding)

Design Systems has customized and expanded our spacers which differs from default spacing values in Bootstrap 4.5.

The selected margin class uses my-* which adds margin to the element's Y-axis (margin-top and margin-bottom). The selected padding class below uses px-*, which adds padding to the element's X-axis (padding-left and padding-right). For full documentation on how to use spacer classes, including viewport-specific classes, click here.

The base element is in yellow with the horizontal arrows symbol ( ↹ ). The arrows indicate the direction from which the padding will be applied. The base element is wrapped by an immediate parent with a green border. Along the Y-axis, the space between the yellow base element and the green border line indicates the margin-top and margin-bottom that has been applied.

Selected Spacing Classes Value Pixel Equilivent Example
.my-0 and .px-0 0 0px
↹
.my-1 and .px-1 .25rem 4px
↹
.my-2 and .px-2 .5rem 8px
↹
.my-3 and .px-3 .75rem 12px
↹
.my-4 and .px-4 1rem 16px
↹
.my-5 and .px-5 1.5rem 24px
↹
.my-6 and .px-6 2rem 32px
↹
.my-7 and .px-7 3rem 48px
↹

Icon Size

CSS Attributes Value Base: 0px+ Example
height and width .5rem .icon-size-xxs
height and width .625rem .icon-size-xs
height and width .75rem .icon-size-sm
height and width .875rem .icon-size-md
height and width 1rem .icon-size-base
height and width 1.125rem .icon-size-lg
height and width 1.25rem .icon-size-xl
height and width 1.5rem .icon-size-xxl
height and width 2rem .icon-size-xxxl

Rotate

For illustration purposes, the rotate class is applied to a "back" arrow icon, which is pointing left by default.

CSS Attributes Value Base: 0px+ Example
transform 0deg (default) .rotate-0
transform 15deg .rotate-15
transform 45deg .rotate-45
transform 90deg .rotate-90
transform 180deg .rotate-180
transform 270deg .rotate-270

Marketing Modules

Marketing Modules are reusable components built on top of the Design System. They are primarily used for marketing content and recommendations.

The CSS/JS for these modules runs out of Adobe Target globally to the entire website with the intent that these modules can be implemented on any page.

The HTML can then be implemented either in an Adobe Target test, or within a content asset.

Each module shown via the link below includes the relevant HTML necessary for implementation.

View Marketing Modules
©2021 FullBeauty Brands Operations, LLC. All rights reserved.