Style Guide
A living overview of core UI elements, bound to theme tokens and Tailwind utilities.
Typography
Heading 1 / H1
Heading 2 / H2
Heading 3 / H3
Heading 4 / H4
Heading 5 / H5
Heading 6 / H6
Body paragraph. Uses `--font-family-body` and theme-controlled sizing, tracking and leading. The quick brown fox jumps over the lazy dog.
Small text for captions and meta. The quick brown fox jumps over the lazy dog.
Semibold emphasis as needed within body copy.
Rich Text Elements
Subheading inside RTE
Paragraph with a link, bold, italic, and inline code. The quick brown fox jumps over the lazy dog.
A blockquote for long-form content and testimonials. It aligns with theme spacing and border styles.
- Unordered list item one
- Unordered list item two
- Unordered list item three
- Ordered list item one
- Ordered list item two
- Ordered list item three
// Code block example
function greet(name) {
return `Hello, ${name}`
}Colors
primary 50
--color-primary-50
primary 100
--color-primary-100
primary 200
--color-primary-200
primary 300
--color-primary-300
primary 400
--color-primary-400
primary 500
--color-primary-500
primary 600
--color-primary-600
primary 700
--color-primary-700
primary 800
--color-primary-800
primary 900
--color-primary-900
secondary 50
--color-secondary-50
secondary 100
--color-secondary-100
secondary 200
--color-secondary-200
secondary 300
--color-secondary-300
secondary 400
--color-secondary-400
secondary 500
--color-secondary-500
secondary 600
--color-secondary-600
secondary 700
--color-secondary-700
secondary 800
--color-secondary-800
secondary 900
--color-secondary-900
accent 50
--color-accent-50
accent 100
--color-accent-100
accent 200
--color-accent-200
accent 300
--color-accent-300
accent 400
--color-accent-400
accent 500
--color-accent-500
accent 600
--color-accent-600
accent 700
--color-accent-700
accent 800
--color-accent-800
accent 900
--color-accent-900
neutral 50
--color-neutral-50
neutral 100
--color-neutral-100
neutral 200
--color-neutral-200
neutral 300
--color-neutral-300
neutral 400
--color-neutral-400
neutral 500
--color-neutral-500
neutral 600
--color-neutral-600
neutral 700
--color-neutral-700
neutral 800
--color-neutral-800
neutral 900
--color-neutral-900
success 50
--color-success-50
success 100
--color-success-100
success 200
--color-success-200
success 300
--color-success-300
success 400
--color-success-400
success 500
--color-success-500
success 600
--color-success-600
success 700
--color-success-700
success 800
--color-success-800
success 900
--color-success-900
warning 50
--color-warning-50
warning 100
--color-warning-100
warning 200
--color-warning-200
warning 300
--color-warning-300
warning 400
--color-warning-400
warning 500
--color-warning-500
warning 600
--color-warning-600
warning 700
--color-warning-700
warning 800
--color-warning-800
warning 900
--color-warning-900
error 50
--color-error-50
error 100
--color-error-100
error 200
--color-error-200
error 300
--color-error-300
error 400
--color-error-400
error 500
--color-error-500
error 600
--color-error-600
error 700
--color-error-700
error 800
--color-error-800
error 900
--color-error-900
Components
Video Player
Select a video in section settings to preview.
Reusable video component supporting Shopify-hosted, YouTube, and Vimeo sources. Honors autoplay/loop and poster settings.
- Aspect ratio: Tailwind `aspect-video`
- Poster and deferred loading supported
- Controls can be disabled for minimal UI