Pattern library

Typography

Type presets, font families, and size scale from theme settings.

Type presets

Sample H1 heading

h1

Sample H2 heading

h2

Sample H3 heading

h3

Sample H4 heading

h4
Sample H5 heading
h5
Sample H6 heading
h6

Sample paragraph text using the paragraph preset.

paragraph

Font families

  • Body — The quick brown fox jumps over the lazy dog. --font-body--family
  • Subheading — The quick brown fox jumps over the lazy dog. --font-subheading--family
  • Heading — The quick brown fox jumps over the lazy dog. --font-heading--family
  • Accent — The quick brown fox jumps over the lazy dog. --font-accent--family

Font size scale

  • 3xs --font-size--3xs
  • 2xs --font-size--2xs
  • xs --font-size--xs
  • sm --font-size--sm
  • md --font-size--md
  • lg --font-size--lg
  • xl --font-size--xl
  • 2xl --font-size--2xl
  • 3xl --font-size--3xl
  • 4xl --font-size--4xl
  • 5xl --font-size--5xl
  • 6xl --font-size--6xl

Buttons

Primary, secondary, link, and disabled button styles.

SHOP THE COLLECTION Secondary button Text link

Colors

Color schemes and tokens defined in theme settings.

scheme-1

  • background #ffffff
  • foreground #0f223e
  • foreground heading #0f223e
  • primary #0f223e
  • primary hover #0f223e
  • border #d8d8dc
  • primary button background #12284b
  • primary button text #ffffff
  • secondary button background #fef9f4
  • secondary button text #0f223e
  • input background #ffffff
  • input text color #0f223e
  • input border color #0f223e
  • variant background color #ffffff
  • variant text color #0f223e
  • selected variant background color #0f223e
  • selected variant text color #ffffff

Sample text on this color scheme.

Primary button Secondary button

scheme-2

  • background #eee2d5
  • foreground #0f223e
  • foreground heading #0f223e
  • primary #0f223e
  • primary hover #0f223e
  • border #0f223e
  • primary button background #12284b
  • primary button text #ffffff
  • secondary button background #fef9f4
  • secondary button text #0f223e
  • input background #ffffff
  • input text color #0f223e
  • input border color #0f223e
  • variant background color #ffffff
  • variant text color #0f223e
  • selected variant background color #0f223e
  • selected variant text color #ffffff

Sample text on this color scheme.

Primary button Secondary button

scheme-3

  • background #fef9f4
  • foreground #0f223e
  • foreground heading #0f223e
  • primary #0f223e
  • primary hover #0f223e
  • border #d8d8dc
  • primary button background #12284b
  • primary button text #ffffff
  • secondary button background #fef9f4
  • secondary button text #0f223e
  • input background #ffffff
  • input text color #0f223e
  • input border color #efeeea
  • variant background color #ffffff
  • variant text color #0f223e
  • selected variant background color #0f223e
  • selected variant text color #ffffff

Sample text on this color scheme.

Primary button Secondary button

scheme-4

  • background #0f223e
  • foreground #fef9f4
  • foreground heading #fef9f4
  • primary #fef9f4
  • primary hover #fef9f4
  • border #d8d8dc
  • primary button background #12284b
  • primary button text #ffffff
  • secondary button background #fef9f4
  • secondary button text #0f223e
  • input background #ffffff
  • input text color #0f223e
  • input border color #efeeea
  • variant background color #ffffff
  • variant text color #ffffff
  • selected variant background color #0f223e
  • selected variant text color #ffffff

Sample text on this color scheme.

Primary button Secondary button

Forms

Common form field styles and states.

Radio group

Spacing

Padding and margin tokens from the design system.

Padding scale

  • --padding-3xs
  • --padding-2xs
  • --padding-xs
  • --padding-sm
  • --padding-md
  • --padding-lg
  • --padding-xl
  • --padding-2xl
  • --padding-3xl
  • --padding-4xl
  • --padding-5xl
  • --padding-6xl

Margin scale

  • --margin-3xs
  • --margin-2xs
  • --margin-xs
  • --margin-sm
  • --margin-md
  • --margin-lg
  • --margin-xl
  • --margin-2xl
  • --margin-3xl
  • --margin-4xl
  • --margin-5xl
  • --margin-6xl

Badges

Product badge styles from theme settings.

Sale
Sold out