Design System Guide

This page showcases all typography styles, button variants, semantic colors, scale-based spacing, and components from the LSA design system. All styles use CSS variables from Figma tokens and follow the latest Tailwind configuration.

Container System

Container Classes for Sections: All sections should use one of the following container classes to control the width of the section container.

These container classes determine the maximum width and horizontal padding of the section, creating consistent layouts across different breakpoints.

Content Wrapping: Content inside these containers should use the wrap-content class to prevent content from exceeding the maximum content width (1538px).

Container Classes

.app-container | Standard container width with padding

Breakpoints: max-w-full (mobile) → smd:max-w-[95%] → md:max-w-[83%] → lg:max-w-[91%]

Padding: px-scale-400 (mobile) → smd:px-0 (tablet+)

Use for: Standard content sections, product grids, general page content

Example: .app-container

.banner-container | Banner/hero container width without padding

Breakpoints: max-w-full (mobile) → smd:max-w-[95%] → md:max-w-[83%] → lg:max-w-[91%]

Padding: No horizontal padding (full-width on mobile)

Use for: Hero banners, full-width sections, image carousels

.app-container-small | Narrower container for focused content

Breakpoints: max-w-full (mobile) → smd:max-w-[75%] → xl:max-w-[1280px]

Padding: No default padding

Use for: Forms, focused content sections, narrower layouts

Example: .app-container-small

Content Wrapping

.wrap-content | Prevents content from exceeding maximum width

Max Width: 1538px

Properties: max-w-[1538px] mx-auto overflow-hidden

Use inside container classes to ensure content doesn't exceed the maximum content width, even on very large screens.

<section class="app-container">
  <div class="wrap-content">
    <!-- Your content here -->
  </div>
</section>

Using the Container Class Snippet

Use the container-class.liquid snippet to dynamically select container classes based on section settings.

container_style Value	Returns	Usage
full_width	w-full	Full width container
banner-container	banner-container	Banner/hero container
container	app-container	Standard container
smaller	app-container-small	Narrower container

Best Practices

Always use a container class: Every section should have one of the container classes applied to its root element.
Wrap content inside: Use wrap-content for content that should not exceed 1538px width.
Choose the right container: Use app-container for standard content, banner-container for full-width sections, and app-container-small for focused/narrower layouts.
Reference: See src/styles/global/layout.scss (lines 24-39) for container class definitions and snippets/container-class.liquid for the helper snippet.

Typography

Font Families

Body Font

Neue Haas Unica

.font-neue-haas

var(--font-body)

Used for: body text, paragraphs, buttons

Heading Font

Neue Haas Unica

.font-heading

var(--font-heading)

Used for: headings (h1-h6)

Subheading Font

Lato

.font-lato

var(--font-subheading)

Used for: subtitles

Display Font

Trocchi

.font-trocchi

'Trocchi', serif

Used for: decorative text

Headings

Heading 1 - The quick brown fox

Heading 2 - The quick brown fox jumps

Heading 3 - The quick brown fox jumps over

Heading 4 - The quick brown fox jumps over the lazy

Heading 5 - The quick brown fox jumps over the lazy dog

Heading 6 - The quick brown fox jumps over the lazy dog

Sub-headings

Sub-heading 1 - The quick brown fox jumps over the lazy dog

Sub-heading 2 - The quick brown fox jumps over the lazy dog

Paragraphs

Paragraph 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Paragraph 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Paragraph 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.

Captions

Caption 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Caption 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.text-c3 | 12px | fw: 400 | lh: 16px | ls: 0 | font-body

Caption 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Quote

"The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit."

Font Size Utilities (CSS Variables)

Font sizes use CSS variables from Figma tokens. Use these utilities for direct size control.

.text-12 | var(--text-size-12) = 12px | Usage: c3, small captions

Font Size 12 - The quick brown fox jumps over the lazy dog

.text-13 | var(--text-size-13) = 13px | Usage: inline buttons, s2 mobile

Font Size 13 - The quick brown fox jumps over the lazy dog

.text-14 | var(--text-size-14) = 14px | Usage: p2, s2, text buttons

Font Size 14 - The quick brown fox jumps over the lazy dog

.text-15 | var(--text-size-15) = 15px | Usage: buttons, p1 mobile

Font Size 15 - The quick brown fox jumps over the lazy dog

.text-16 | var(--text-size-16) = 16px | Usage: p1, s1, default

Font Size 16 - The quick brown fox jumps over the lazy dog

.text-17 | var(--text-size-17) = 17px | Usage: p3 mobile

Font Size 17 - The quick brown fox jumps over the lazy dog

.text-18 | var(--text-size-18) = 18px | Usage: p3, button extralarge

Font Size 18 - The quick brown fox jumps over the lazy dog

.text-20 | var(--text-size-20) = 20px | Usage: s1, q1, h5

Font Size 20 - The quick brown fox jumps over the lazy dog

.text-24 | var(--text-size-24) = 24px | Usage: p3 desktop

Font Size 24 - The quick brown fox jumps over

.text-28 | var(--text-size-28) = 28px | Usage: h4 mobile, h1 mobile

Font Size 28 - The quick brown fox jumps

.text-32 | var(--text-size-32) = 32px | Usage: h2 mobile

Font Size 32 - The quick brown fox

.text-36 | var(--text-size-36) = 36px | Usage: h3 desktop

Font Size 36 - The quick brown

.text-40 | var(--text-size-40) = 40px | Usage: h2 desktop, h4 desktop

Font Size 40 - The quick

.text-48 | var(--text-size-48) = 48px | Usage: h3 desktop

Font Size 48 - The quick

.text-56 | var(--text-size-56) = 56px | Usage: h1 desktop

Font Size 56 - The

Letter Spacing Utilities

.tracking-0 | var(--text-letter-spacing-0) = 0px

Letter Spacing 0 - The quick brown fox

.tracking-0-2 | var(--text-letter-spacing-0-2) = 0.2px

Letter Spacing 0.2 - The quick brown fox

.tracking-0-4 | var(--text-letter-spacing-0-4) = 0.4px

Letter Spacing 0.4 - The quick brown fox

.tracking-0-8 | var(--text-letter-spacing-0-8) = 0.8px

Letter Spacing 0.8 - The quick brown fox

.tracking-1 | var(--text-letter-spacing-1) = 1px

Letter Spacing 1 - The quick brown fox

Line Height Utilities

.leading-16 | var(--text-line-height-16) = 16px

Line Height 16 - The quick brown fox jumps over the lazy dog

.leading-20 | var(--text-line-height-20) = 20px

Line Height 20 - The quick brown fox jumps over the lazy dog

.leading-24 | var(--text-line-height-24) = 24px

Line Height 24 - The quick brown fox jumps over the lazy dog

.leading-28 | var(--text-line-height-28) = 28px

Line Height 28 - The quick brown fox jumps over the lazy dog

.leading-32 | var(--text-line-height-32) = 32px

Line Height 32 - The quick brown fox jumps over the lazy dog

.leading-40 | var(--text-line-height-40) = 40px

Line Height 40 - The quick brown fox jumps over

.leading-48 | var(--text-line-height-48) = 48px

Line Height 48 - The quick brown fox jumps

.leading-56 | var(--text-line-height-56) = 56px

Line Height 56 - The quick brown fox

.leading-64 | var(--text-line-height-64) = 64px

Line Height 64 - The quick brown

Buttons

Fill Buttons

.button, .button-fill | Black fill, white text | Hover: primary-subdued fill | Active: primary-subdued

.button-fill--white | White fill, black text | Hover: black fill, white text

Outline Buttons

.button-outline | Transparent, black border | Hover: black fill, white text

.button-outline--white | Transparent, white border | Hover: white fill, black text

.button-outline--subdued | Transparent, gray border | Hover: primary-subdued fill

Text Buttons

.button-text | primary-subdued text, 400 weight | Hover: primary text, 700 weight

.button-text--underline | Underline on hover | Active: primary text, 700 weight

.button-text--strong | primary text, 700 weight, always underlined

.button-text--white | White text (for dark backgrounds)

Icon Buttons

.button-icon | 52x52px circle, transparent, primary-inverse-subdued border | Hover: primary border

Inline Button Variants

.button-inline | primary-subdued text | Hover: underline

.button-inline-1 | primary-subdued text | Hover: primary text, underline

.button-inline-2 | primary-inverse text | Hover: underline

.button-inline-extra-small | offer text, smaller size

Button Size Modifiers

.button--small | 14px font, scale-150/400 padding

.button--large | 16px font, scale-300/600 padding

.button--extralarge | 18px font, scale-400/800 padding

Color System

Consolidated Color System:

Semantic colors have been consolidated to eliminate duplicates. Use the base color name (primary, primary-subdued, etc.) with standard Tailwind prefixes: text-, bg-, border-.

Removed duplicates: bg-fill-primary → bg-primary, border-border-primary → border-primary, text-icon-primary → text-primary, bg-primary-white → bg-surface-primary.

Colors

Use the base color name with standard Tailwind prefixes: text-, bg-, border-.

primary

text-primary, bg-primary, border-primary

var(--text-color-primary)

primary-subdued

text-primary-subdued, bg-primary-subdued, border-primary-subdued

var(--text-color-primary-subdued)

minor

text-minor, border-minor

var(--text-color-minor)

primary-inverse

text-primary-inverse, bg-primary-inverse, border-primary-inverse

var(--text-color-primary-inverse)

primary-inverse-subdued

text-primary-inverse-subdued

var(--text-color-primary-inverse-subdued)

error

text-error, border-error

var(--text-color-error)

success

text-success

var(--text-color-success)

offer

text-offer

var(--text-color-offer)

surface-primary

bg-surface-primary

var(--surface-primary)

surface-primary-subdued

bg-surface-primary-subdued

var(--surface-primary-subdued)

surface-primary-inverse

bg-surface-primary-inverse

var(--surface-primary-inverse)

surface-secondary

bg-surface-secondary

var(--surface-secondary)

fill-secondary

bg-fill-secondary

var(--fill-secondary)

fill-minor

bg-fill-minor

var(--fill-minor)

Spacing & Layout

Scale-based Spacing (Figma Tokens)

Use scale-based spacing utilities for padding, margin, and gap. These map directly to Figma design tokens.

Scale Token	Value	Tailwind Class	Example
scale-100	4px	p-scale-100, m-scale-100, gap-scale-100	Padding
scale-200	8px	p-scale-200, m-scale-200, gap-scale-200	Padding
scale-300	12px	p-scale-300, m-scale-300, gap-scale-300	Padding
scale-400	16px	p-scale-400, m-scale-400, gap-scale-400	Padding
scale-500	20px	p-scale-500, m-scale-500, gap-scale-500	Padding
scale-600	24px	p-scale-600, m-scale-600, gap-scale-600	Padding
scale-800	32px	p-scale-800, m-scale-800, gap-scale-800	Padding
scale-1200	48px	p-scale-1200, m-scale-1200, gap-scale-1200	Padding

Usage Examples:

pt-scale-100 (padding-top: 4px)

p-scale-200 (padding: 8px)

gap-scale-500 (gap: 20px)

m-scale-600 (margin: 24px)

Full scale range: scale-0 (0px) through scale-2000 (160px). See tailwind.config.js for complete list.

Container Width

Max container width: 1720px

Class: max-w-container or style="max-width: 1720px"

Component Height

Default component height: 3.5em

Used for buttons, inputs, and other interactive elements

Class: h-component

Border Widths

.border-xs | var(--border-width-xs) = 1px

Border width xs (1px)

.border-s | var(--border-width-s) = 2px

Border width s (2px)

Border Radius

.rounded-none | var(--border-radius-none) = 0px

No border radius

.rounded-xs | var(--border-radius-xs) = 2px

Border radius xs (2px)

Responsive Breakpoints

Breakpoint	Size	Usage	Example
xs:	320px	Very small screens	xs:text-14
sm:	375px	Mobile	sm:text-16
smd:	750px	Small tablet	smd:grid-cols-2
md:	768px	Tablet	md:text-18
nav:	1097px	Nav visible (use nav: prefix per project rules)	nav:flex
max-nav:	max 1097px	Mobile, nav hidden	max-nav:hidden
lg:	1440px	Desktop	lg:text-20
xl:	1920px	Extra large	xl:text-24
2xl:	2560px	Ultra wide	2xl:text-28

Icons & Animations

Loading Spinner

.icon-loading | 1.2s linear infinite rotation

Zippy Indicator (Accordion)

.zippy-indicator | 0.4s ease transition | rotates 180deg when .is-open

Closed:

Open:

Icon Hover Effect

.icon-hover | 0.3s ease transition | Hover color: primary

Transition Timings

Button transitions: 300ms (0.3s) ease-in-out (default)
Icon loading: 1.2s linear infinite
Zippy indicator: 0.4s ease
Icon hover: 0.3s ease
Inline button underline: 300ms (0.3s) ease-in-out

Usage Examples

Typography Classes

<h1 class="text-h1">Heading 1</h1>
<h2 class="text-h2">Heading 2</h2>
<p class="text-p2">Body text</p>
<span class="text-c1">Caption</span>
<blockquote class="text-q1">Quote text</blockquote>

<!-- Font Size Utilities (CSS Variables) -->
<p class="text-14">14px text</p>
<p class="text-16">16px text</p>
<p class="text-20">20px text</p>

<!-- Letter Spacing & Line Height -->
<p class="text-16 tracking-0-4 leading-24">Custom spacing</p>

Button Classes

<!-- Fill Buttons -->
<button class="button">Default Fill</button>
<button class="button-fill--white">White Fill</button>

<!-- Outline Buttons -->
<button class="button-outline">Outline</button>
<button class="button-outline--white">Outline White</button>
<button class="button-outline--subdued">Outline Subdued</button>

<!-- Text Buttons -->
<button class="button-text">Text Button</button>
<button class="button-text--underline">Text with Underline</button>
<button class="button-text--strong">Text Strong</button>
<button class="button-text--white">Text White</button>

<!-- Icon Button -->
<button class="button-icon">...</button>

<!-- Inline Buttons -->
<button class="button-inline">Inline Link</button>
<button class="button-inline-1">Inline 1</button>
<button class="button-inline-2">Inline 2</button>
<button class="button-inline-extra-small">Extra Small</button>

<!-- Size Modifiers -->
<button class="button button--small">Small</button>
<button class="button button--large">Large</button>
<button class="button button--extralarge">Extra Large</button>

Semantic Color Classes

Colors are consolidated - use the base color name with standard Tailwind prefixes. The same color works for text, background, and border.

<!-- Text colors -->
<span class="text-primary">Primary text</span>
<span class="text-primary-subdued">Secondary text</span>
<span class="text-minor">Tertiary text</span>
<span class="text-primary-inverse">White text on dark</span>
<span class="text-offer">Error/sale text</span>
<span class="text-error">Error state</span>
<span class="text-success">Success state</span>

<!-- Background/Fill colors (same color names) -->
<div class="bg-primary">Black fill</div>
<div class="bg-primary-subdued">Dark gray fill</div>
<div class="bg-primary-inverse">White fill</div>

<!-- Surface colors (unique, not consolidated) -->
<div class="bg-surface-primary">White surface</div>
<div class="bg-surface-secondary">Gray surface</div>
<div class="bg-surface-primary-subdued">Light gray surface</div>
<div class="bg-surface-primary-inverse">Dark surface</div>

<!-- Border colors (same color names) -->
<div class="border border-primary">Black border</div>
<div class="border border-primary-subdued">Gray border</div>
<div class="border border-minor">Light gray border</div>
<div class="border border-primary-inverse">White border</div>
<div class="border border-error">Error border</div>

<!-- Note: Old classes like bg-fill-primary, border-border-primary, 
     text-icon-primary have been removed. Use bg-primary, border-primary, 
     text-primary instead. -->

Scale-based Spacing

<!-- Padding -->
<div class="p-scale-200">Padding 8px</div>
<div class="pt-scale-100 px-scale-500">Custom padding</div>

<!-- Margin -->
<div class="m-scale-400">Margin 16px</div>
<div class="mb-scale-600">Bottom margin 24px</div>

<!-- Gap -->
<div class="flex gap-scale-500">Gap 20px</div>
<div class="grid gap-scale-300">Grid gap 12px</div>

Font Family Classes

<p class="font-neue-haas">Neue Haas Unica (body)</p>
<p class="font-heading">Neue Haas Unica (heading)</p>
<p class="font-lato">Lato (subheading)</p>
<p class="font-trocchi">Trocchi (display)</p>

Responsive Breakpoints

<!-- Mobile-first approach -->
<div class="text-14 nav:text-16 lg:text-20">Responsive text</div>

<!-- Hide/show based on breakpoint -->
<div class="hidden nav:block">Visible on nav+</div>
<div class="block max-nav:hidden">Hidden on mobile</div>

<!-- Grid responsive -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-scale-500">
  <div>Item</div>
</div>

Edits

Our Story

Articles

Container System

Container Classes

Content Wrapping

Using the Container Class Snippet

Best Practices

Typography

Font Families

Headings

Sub-headings

Paragraphs

Captions

Quote

Font Size Utilities (CSS Variables)

Letter Spacing Utilities

Line Height Utilities

Buttons

Fill Buttons

Outline Buttons

Text Buttons

Icon Buttons

Inline Button Variants

Button Size Modifiers

Color System

Colors

Spacing & Layout

Scale-based Spacing (Figma Tokens)

Container Width

Component Height

Border Widths

Border Radius

Responsive Breakpoints

Icons & Animations

Loading Spinner

Zippy Indicator (Accordion)

Icon Hover Effect

Transition Timings

Usage Examples

Typography Classes

Button Classes

Semantic Color Classes

Scale-based Spacing

Font Family Classes

Responsive Breakpoints