Logo
The St John Ambulance logotype is the most visible element of the identity system, it is a universal signature across all of our communications.
Logotype
Logomark
Favicon
Text Input
The text input field is used for collecting single-line information from users, such as their name or phone number.
Search
Default
Hover
Selected
Focus
Text Input
Default
Selected
Hover
Focus
Error
Input Types
Wishlist Icon
Quantity Input
Pill-shaped quantity stepper used on product cards. A single 1.5px border wraps the whole control; the minus/plus buttons are circular with a hover state.
Default
Higher quantity
Colours
The reskin colour palette defined in src/css/main.css @theme. Updating these tokens propagates across all semantic utilities (bg-primary, text-contrast-five, etc.) after rebuilding assets.
Primary
Primary
#50E57A
*-primary
*-primary-medium
Dark Green
#003322
*-primary-dark-green
*-primary-dark
Bright Green
#66FF66
*-primary-bright-green
*-primary-light
Soft Green
#ADD2B9
*-primary-soft-green
Soft Green Dim
rgba(#ADD2B9, 40%)
*-primary-soft-green-dim
Off White
#FAF5EC
*-primary-off-white
Secondary
Warm Orange
#FF8239
*-secondary-warm-orange
Patient Purple
#BA9DFC
*-secondary-patient-purple
Open Blue
#82FFF7
*-secondary-open-blue
Caring Pink
#FFABA1
*-secondary-caring-pink
Calm Beige
#D1B7A6
*-secondary-calm-beige
Yellow Bright
#EDE822
*-yellow-bright
Secondary Aliases
Secondary Light
#FBF9C8
*-secondary-light
Secondary Dark
#B2AE19
*-secondary-dark
Neutrals
Contrast Two
#F7F7F7
*-contrast-two
Contrast Three
#DBDBDB
*-contrast-three
Contrast Four
#767676
*-contrast-four
Contrast Five
#020202
*-contrast-five
Status
Error
#AF1818
*-status-error
Warning
#AF1818
*-status-warning
Success
#4E8B43
*-status-success
Product Status Badges
Sold Out
#774C60
*-sold_out
Pre Order
#C8ADC0
*-pre_order
Coming Soon
#5E8C61
*-coming_soon
Sale
#AF1818
*-sale
Typography
The typeface is St John Sans, served from assets/ via snippets/fonts.liquid. All tokens — font family, weight, and size — are defined in src/css/main.css @theme.
Font Family
--font-body / --font-heading / --font-sans / --font-serif
St John Sans
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( )
Font Weights
Normal — 400
font-normal
The quick brown fox jumps over the lazy dog.
Bold — 700
font-bold
The quick brown fox jumps over the lazy dog.
ExtraBold — 800
font-extrabold
The quick brown fox jumps over the lazy dog.
Bold — 700
font-bold
The quick brown fox jumps over the lazy dog.
ExtraBold — 800
font-extrabold
The quick brown fox jumps over the lazy dog.
Black — 900
font-black
The quick brown fox jumps over the lazy dog.
Heading Scale
h1
Heading One
h2
Heading Two
h3
Heading Three
h4
Heading Four
h5
Heading Five
h6
Heading Six
Type Scale
text-5xl
Heading
text-4xl
Heading
text-3xl
Heading
text-2xl
Heading
text-xl
The quick brown fox jumps over the lazy dog.
text-lg
The quick brown fox jumps over the lazy dog.
text-md
The quick brown fox jumps over the lazy dog.
text-sm
The quick brown fox jumps over the lazy dog.
text-xs
The quick brown fox jumps over the lazy dog.
Text Links
Use the button component to help users carry out an action like buying a product or subscribing to a mailing list.
Sizes
Primary
Secondary
Green
Light
Light Secondary
Product Card
Use the product card component to display a product image, title, price, and other details.
Supplies Product Card
125ml Burnshield Hydrogel Burn Treatment Spray
3M FFP3 Disposable Comfort Dust Masks (10 PACK)
3M Steri-Strip Reinforced Skin Closures 6cm x 7.5cm (3 PACK)
A&D Medical Automatic Blood Pressure Monitor
A&D Medical Personal Blood Pressure Monitors Large Cuff
ABC Dry Powder Fire Extinguisher Vinyl Sign
AbsorbeZe Maxi Fluid Waste Bags (50 PACK)
AbsorbeZe Pads (100 PACK)
AbsorbeZe Traveleze Pouches (50 PACK)
Act+Fast Anti Choking Trainer Red
Advacare Low Adherent Dressing 5cm x 5cm
Advacare Low Adherent Dressing 7.5 x 7.5cm
AED Automated External Defibrillator Poster
AED Automated External Defibrillator Sign Vinyl 300 x 250mm
AED Reflective Badge Large 24.5cm x 11cm
Grid
As agreed with design, we will use CSS Grid for the over-arching layout of the website. For this, we have created a twelve column grid ( with spacing and gaps ), use .moonbase mb-10 to create a grid use the grid. Children of the grid will want to use .col-span-1, .col-span-2
Moonbase
Accordions
The accordion element allows users to expand or collapse specific sections of grouped content.
Accordion Element
FAQs
Accordion Title
Rorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus.
Accordion Title
Rorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus.
Accordion Title
Rorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus.
