Headings — title utilities
Heading 6xl — The quick brown fox
Heading 5xl — The quick brown fox
Heading 4xl — The quick brown fox
Heading 3xl — The quick brown fox
Heading 2xl — The quick brown fox
Body text utilities
Body xl — The quick brown fox jumps over the lazy dog.
Body lg — The quick brown fox jumps over the lazy dog.
Body md — The quick brown fox jumps over the lazy dog.
Body base — The quick brown fox jumps over the lazy dog.
Body sm — The quick brown fox jumps over the lazy dog.
Body xs — The quick brown fox jumps over the lazy dog.
Inline link
This is a paragraph with an inline anchor link embedded in it for checking link styles.
Color swatches
background
foreground
heading
primary
on-primary
hover-primary
links
icons
accent-1
accent-2
Buttons — primary
Buttons — secondary
Buttons — ghost
Buttons — link
Buttons — icon
Quantity input
Default
Default · min 1, max 10
Default · custom width
Default · disabled
Circle
Circle · min 1, max 5
Circle · disabled
Icon — feature card example (matches Figma)
Trusted Products
Lorem ipsum dolroes set amets lorem
Quality Materials
Lorem ipsum dolroes set amets lorem
Headings — title utilities
Heading 6xl — The quick brown fox
Heading 5xl — The quick brown fox
Heading 4xl — The quick brown fox
Heading 3xl — The quick brown fox
Heading 2xl — The quick brown fox
Body text utilities
Body xl — The quick brown fox jumps over the lazy dog.
Body lg — The quick brown fox jumps over the lazy dog.
Body md — The quick brown fox jumps over the lazy dog.
Body base — The quick brown fox jumps over the lazy dog.
Body sm — The quick brown fox jumps over the lazy dog.
Body xs — The quick brown fox jumps over the lazy dog.
Inline link
This is a paragraph with an inline anchor link embedded in it for checking link styles.
Color swatches
background
foreground
heading
primary
on-primary
hover-primary
links
icons
accent-1
accent-2
Buttons — primary
Buttons — secondary
Buttons — ghost
Buttons — link
Buttons — icon
Quantity input
Default
Default · min 1, max 10
Default · custom width
Default · disabled
Circle
Circle · min 1, max 5
Circle · disabled
Icon — feature card example (matches Figma)
Trusted Products
Lorem ipsum dolroes set amets lorem
Quality Materials
Lorem ipsum dolroes set amets lorem
Headings — title utilities
Heading 6xl — The quick brown fox
Heading 5xl — The quick brown fox
Heading 4xl — The quick brown fox
Heading 3xl — The quick brown fox
Heading 2xl — The quick brown fox
Body text utilities
Body xl — The quick brown fox jumps over the lazy dog.
Body lg — The quick brown fox jumps over the lazy dog.
Body md — The quick brown fox jumps over the lazy dog.
Body base — The quick brown fox jumps over the lazy dog.
Body sm — The quick brown fox jumps over the lazy dog.
Body xs — The quick brown fox jumps over the lazy dog.
Inline link
This is a paragraph with an inline anchor link embedded in it for checking link styles.
Color swatches
background
foreground
heading
primary
on-primary
hover-primary
links
icons
accent-1
accent-2
Buttons — primary
Buttons — secondary
Buttons — ghost
Buttons — link
Buttons — icon
Quantity input
Default
Default · min 1, max 10
Default · custom width
Default · disabled
Circle
Circle · min 1, max 5
Circle · disabled
Icon — feature card example (matches Figma)
Trusted Products
Lorem ipsum dolroes set amets lorem
Quality Materials
Lorem ipsum dolroes set amets lorem
Headings — title utilities
Heading 6xl — The quick brown fox
Heading 5xl — The quick brown fox
Heading 4xl — The quick brown fox
Heading 3xl — The quick brown fox
Heading 2xl — The quick brown fox
Body text utilities
Body xl — The quick brown fox jumps over the lazy dog.
Body lg — The quick brown fox jumps over the lazy dog.
Body md — The quick brown fox jumps over the lazy dog.
Body base — The quick brown fox jumps over the lazy dog.
Body sm — The quick brown fox jumps over the lazy dog.
Body xs — The quick brown fox jumps over the lazy dog.
Inline link
This is a paragraph with an inline anchor link embedded in it for checking link styles.
Color swatches
background
foreground
heading
primary
on-primary
hover-primary
links
icons
accent-1
accent-2
Buttons — primary
Buttons — secondary
Buttons — ghost
Buttons — link
Buttons — icon
Quantity input
Default
Default · min 1, max 10
Default · custom width
Default · disabled
Circle
Circle · min 1, max 5
Circle · disabled
Icon — feature card example (matches Figma)
Trusted Products
Lorem ipsum dolroes set amets lorem
Quality Materials
Lorem ipsum dolroes set amets lorem
