Type Styles

We use fluid scaling for typography, meaning we don’t need to specify exact breakpoints. Instead, we define sizes for desktop & mobile and use relative units for the other values to allow the styles to scale seamlessly without much work. With this in mind, it’s important to ensure line-height and letter-spacing are set in percentage (%) values, not pixels.

Heading 1

Sabon Next LT Pro Regular • Desktop: 36px/120% • Mobile: 32px/120% • Letter Spacing: -2%

Heading 2

Sabon Next LT Pro Regular • Desktop: 32px/120% • Mobile: 28px/120% • Letter Spacing: -2%

Heading 3

Sabon Next LT Pro Regular • Desktop: 28px/120% • Mobile: 24px/120% • Letter Spacing: -1%

Heading 4

Sabon Next LT Pro Regular • Desktop: 24px/120% • Mobile: 20px/120% • Letter Spacing: -1%

Heading 5

Sabon Next LT Pro Regular • Desktop: 20px/120% • Mobile: 18px/120% • Letter Spacing: -1%

Heading 6

Sabon Next LT Pro Regular • Desktop: 18px/120% • Mobile: 16px/120% • Letter Spacing: 0%

Body Large

TT Norms Pro Regular • Desktop: 16px/140% • Mobile: 14px/140% • Letter Spacing: 0%

Body Small

TT Norms Pro Regular • Desktop: 14px/130% • Mobile: 12px/130% • Letter Spacing: 0%

Caption

TT Norms Pro Regular • Desktop: 12px/140% • Mobile: 12px/140% • Letter Spacing: 0%

Utility

TT Norms Pro DemiBold • Desktop: 16px/100% • Mobile: 14px/100% • Letter Spacing: 0.1% • Text Case: TITLE

Fluid Utility

We use fluid scaling for utility classes, meaning we don’t need to specify exact breakpoints. Instead, we define sizes for desktop & mobile and use relative units for the other values to allow the styles to scale seamlessly without much work.

Following are the utilities are available available:

fluid-text-[mobile|desktop]
fluid-line-height-[mobile|desktop]
fluid-gap-[mobile|desktop]
fluid-pl-[mobile|desktop]
fluid-pr-[mobile|desktop]
fluid-pb-[mobile|desktop]
fluid-pt-[mobile|desktop]
fluid-ml-[mobile|desktop]
fluid-mr-[mobile|desktop]
fluid-mb-[mobile|desktop]
fluid-mt-[mobile|desktop]
fluid-inset-[mobile|desktop]
fluid-top-[mobile|desktop]
fluid-right-[mobile|desktop]
fluid-bottom-[mobile|desktop]
fluid-left-[mobile|desktop]
fluid-size-[mobile|desktop]

Note: Replace mobile with Mobile Pixel Size Base and desktop with Desktop Size base

Examples:

Fluid, 12|16

Fluid, 30|70

fluid-size-[200|400]

Buttons

Spacing

2xs xs sm md lg xl 2xl 3xl

Border Radius

rounded-sm rounded-md rounded-lg rounded-rounded

Colors

Black / #000 Brand Primary / Blue / #1C59A8 Brand Secondary / Navy / #293244 Cool blue / #9EC0E6 Deep blue / #1c3d6d Soft blue / #cde0f1 Brand beige / #f0ebe5 Southern Tide Grey / #f2f2f2 Secondary Grey / #f6f6f6 Soft white / #f9f9f7 Silver / #a5a5a5 Silver Secondary / #a5a5a5 Grey 900 / #1E1E21 Grey 700 / #222222 Grey 600 / #212120 Grey 500 / #4C4B49 Grey 400 / #6d6c69 Grey 300 / Disabled / #A8A7A1 Grey 200 / #DBD9D2 Grey 100 / #EDEBE4 Light Gray / #f5f5f5 Primary Contrast / White / #fff Danger / #EC0000 Danger secondary / #cf1f00 Sale / #830000 Foreground Secondary / #830000 Foreground Tertiary / #222222 Focus / #1a00ff Darkest / #000000 Body Text / #313133