Design system

Demo showcase

A reference page showing the custom utility classes and components available in this theme.

Typography

Display 2xl — ll-display-2xl

Display xl — ll-display-xl

Display lg — ll-display-lg

Display md — ll-display-md

Display sm — ll-display-sm

Display xs — ll-display-xs

Display 2xs — ll-display-2xs

Body md — ll-body-md

Body rg — ll-body-rg

Body sm — ll-body-sm

Body xs — ll-body-xs

Quote — ll-add-quote

Overline — ll-add-overline

Tag — ll-add-tag

Prefix — ll-add-prefix

Colors

bg-darkBlue

#073948

bg-darkerBlue

#052833

bg-lightBlue

#12B8D8

bg-orange

#F7A500

bg-offWhite

#FBF8F2

bg-white

#FFFFFF

bg-black

#000000

bg-red

#EB001B

Spacing tokens

p-xs

p-sm

p-md

p-lg

p-xl

Grid — col-span (6 mobile / 12 desktop)

col-span-6 / lg:col-span-12

col-span-3 / lg:col-span-6

4

Column widths — w-ll-{n}/12

w-ll-3/12

w-ll-6/12

w-ll-9/12

Buttons

Section theme: Orange

Semantic colors adapt to the theme

This block uses bg-background, text-text and a themed button, so it changes with the section color theme.