AQWA - Design System 🎨

Colors

General

You can copy any of these colours for background-color or color

    Colors for Typography

    Examples of the above swatches applied to typography.

    Backgrounds

    .bg-wavy

    .bg-gradient-1

    Typography

    f-reset (one level)

    f-reset-all (nested)

    Use this to unseat baked in styles for h1 to h6 before applying display styles.

    h1: Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    h2: Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    h3: Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    h4: Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    h5: Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea
    h6: Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    h1 reset: Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    h2 reset: Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    h3 reset: Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    h4 reset: Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    h5 reset: Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea
    h6 reset: Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    tagline-plain

    Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    This is somehow not the same as below so this should be investigated.

    tagline

    Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    This is somehow not the same as below so this should be investigated.

    f-tagline-a

    Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    f-tagline-a f-tagline-a--nude

    Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    f-tagline-a--large

    Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    f-display-a

    Heading Here

    Nested inside copy classes

    Heading Here

    f-display-b

    f-display-b--large

    f-display-b--small

    f-display-b--xsmall

    Heading Here

    Heading Here Large

    Heading Here Small

    Heading Here XSmall

    f-display-c

    f-display-c--alt

    Heading Here

    Heading Here

    f-display-d

    Heading Here

    f-display-e

    Heading Here

    f-display-f

    Heading Here

    f-display-g

    Heading Here

    f-display-h

    Heading Here

    f-display-i

    Heading Here

    f-copy-b

    f-copy-b--alt

    f-copy-b2

    Lorem ipsum dolor sit amet consectetur adipisicing elit.

    Lorem ipsum dolor sit amet consectetur adipisicing elit.

    Lorem ipsum dolor sit amet consectetur adipisicing elit.

    Soft .f-reset

    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.

    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.

    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.

    Harder .f-reset-all

    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.

    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.

    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.

    f-copy-c

    Lorem ipsum dolor sit amet consectetur adipisicing elit.

    f-copy-d

    Lorem ipsum dolor sit amet consectetur adipisicing elit.

    ul.small-bullet-list

    • Lorem ipsum dolor sit amet.
    • Lorem ipsum dolor sit.
    • Lorem, ipsum dolor sit amet consectetur adipisicing.
    • Lorem ipsum dolor sit amet.

    .f-list-a.f-copy-b

    • Lorem ipsum dolor sit amet.
    • Lorem ipsum dolor sit.
    • Lorem, ipsum dolor sit amet consectetur adipisicing.
    • Lorem ipsum dolor sit amet.

    Icons

    General

    assembly
    binoculars
    bus
    calendar
    car
    clock
    coffee
    document
    eat
    eye
    facilities
    flippers
    gift
    graduation
    home
    ice-cream
    important
    lightning
    logo-letter
    map-marker
    map
    music-note
    music
    phone
    play-room
    resource
    snorkel
    speech-bubble
    sun
    tickets
    caution-sign
    check
    face-mask
    heart-banner
    needle
    icon-aqwa-foundation-clean.svg

    General Utility

    .c-icon-chevron

    .c-icon-chevron .c-icon-chevron--reverse

    .c-icon-chevron .c-icon-chevron--white

    .c-icon-chevron .c-icon-chevron--white .c-icon-chevron--reverse

    .c-icon-arrow

    Buttons

    c-button-outlined c-button-outlined--small

    c-button-outlined c-button-outlined--thin

    c-button-outlined c-button-outlined--white

    Links

    Containers

    .l-container-1

    Adds 80px margin onto the top and 40px on tablet if there is another l-container above

    .l-container-2 .mt-0

    Adds 120px margin onto the top and 40px on tablet if there is another container above

    .l-container-2 .mb-0

    Removes the margin on the container below.

    .l-container-2

    Adds 120px margin onto the top and 40px on tablet if there is another container above

    .l-container-2

    Adds 120px margin onto the top and 40px on tablet if there is another container above

    .l-container-2 .my-0

    Adds 120px margin onto the top and 40px on tablet if there is another container above

    .l-container-2

    Adds 120px margin onto the top and 40px on tablet if there is another container above

    .l-container-3

    Adds 154px / 120px / 40px margin onto the top if there is another container above

    .l-container-4

    Adds 192px / 125px / 40px margin onto the top if there is another container above

    padding-80

    Containers have padding top and bottom of 80px

    Gradient Strip

    Price

    From only: $120

    Cards

    .c-card-long

    component-card-long.php

    Includes AQWA Entry

    AQWA Entry and Glass Bottom Boat (Age 4+)

    SEA for yourself at AQWA! Encounter the incredible and iconic marine life of Western Australia on a spectacular underwater journey. General Admission is valid 9am-4pm & AQWA is open everyday! Online ticket does NOT guarantee priority entry.

    Duration: 3 hours (approx)

    From only: $110

    Includes AQWA Entry

    Includes AQWA Entry

    AQWA Entry and Glass Bottom Boat (Age 4+)

    SEA for yourself at AQWA! Encounter the incredible and iconic marine life of Western Australia on a spectacular underwater journey. General Admission is valid 9am-4pm & AQWA is open everyday! Online ticket does NOT guarantee priority entry.

    Duration: 3 hours (approx)

    From only: $110

    Includes AQWA Entry

    Includes AQWA Entry

    AQWA Entry and Glass Bottom Boat (Age 4+)

    SEA for yourself at AQWA! Encounter the incredible and iconic marine life of Western Australia on a spectacular underwater journey. General Admission is valid 9am-4pm & AQWA is open everyday! Online ticket does NOT guarantee priority entry.

    Duration: 3 hours (approx)

    From only: $110

    Includes AQWA Entry

    .c-card-b

    component-card.php

    Label

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    .c-card

    component-card-barred.php

    .c-card-squared

    component-card-squared.php

    card squared

    Lorem ipsum dolor sit

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione tempora illum iatem.

    Product Tabs

    These require actual content and currently don't have dummy content.

    Admission Tickets

    Standard Entry Ticket

    SEA for yourself at AQWA! Encounter the incredible and iconic marine life of Western Australia on a spectacular underwater journey. AQWA is open daily from 9am-4pm and Entry Tickets are valid all day

    From only: $19

    Videos

    Component: Video Embed

    component-video-embed.php

    Components

    Video Embed

    Box Prompt (CTA General) - Also Ticket Prompt

    .c-box-prompt

    Lorem Ipsum Dolor Sit

    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed dolores molestiae vitae.

    Lorem Ipsum Dolor Sit (Type: Dark)

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor lorem ipsum dolor sit.

    Text Divider

    .c-text-divider

    Activities for all ages

    l-information-row

    $28 Entry and Lunch Combo

    Lorem ipsum dolor sit amet, conse adipisicing elit, sed do eiusmod tempor incididunt ut labore et.

    box-b + border-grey-d7d + c-border-between + l-padding-between

    • Whale Watching

      22 JAN -25 JAN

      The whales are here! Western Australia’s humpback whale population has begun its annual migration south and will be passing by Perth by late August! AQWA partners with two of Perth’s premiere charter companies to host a unique whale watching experience right out of Hillarys Boat Harbour.

    • Whale Watching

      22 JAN -25 JAN

      The whales are here! Western Australia’s humpback whale population has begun its annual migration south and will be passing by Perth by late August! AQWA partners with two of Perth’s premiere charter companies to host a unique whale watching experience right out of Hillarys Boat Harbour.

    • Whale Watching

      22 JAN -25 JAN

      The whales are here! Western Australia’s humpback whale population has begun its annual migration south and will be passing by Perth by late August! AQWA partners with two of Perth’s premiere charter companies to host a unique whale watching experience right out of Hillarys Boat Harbour.

    • Whale Watching

      22 JAN -25 JAN

      The whales are here! Western Australia’s humpback whale population has begun its annual migration south and will be passing by Perth by late August! AQWA partners with two of Perth’s premiere charter companies to host a unique whale watching experience right out of Hillarys Boat Harbour.

    l-box-promo

    Dec - Jan

    School Holidays at AQWA

    Lorem ipsum dolor sit amet, consectetur adip isicing elit, sed do eiusmod tempor incididunt.

    Component: Info Chunk

    Lorem Ipsum Dolor Sit

    Lorem Ipsum Dolor Sit

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores non possimus modi aut qui. Tempora tempore eveniet libero corrupti ullam dolorum ipsa fugiat natus eligendi dolores culpa aliquam molestias neque maxime temporibus est qui, laborum error amet beatae nobis animi ex voluptates fuga? Officiis iure necessitatibus corporis adipisci aperiam, illo molestiae corrupti dolorum, accusantium vel optio consequuntur? Laudantium nemo facilis repellat blanditiis enim d

    Sections

    Section: Products Table

    section-products-table.php

    Buy Tickets

    An awesome underwater adventure awaits you at the Aquariam of Western Australia!

    Entry & Glass Bottom Boat Ticket

    From only $29

    Buy Tickets

    Entry & Behind The Scenes Pass

    From only $54

    Buy Tickets

    Dine Beneath the Sea

    From only $195

    Buy Tickets

    Dine Beneath the Sea

    From only $195

    Buy Tickets

    Junior Marine Scientist (6-12 years)

    From only $79.00

    Buy Tickets

    Eco Teen: Turtle Researcher

    From only $129

    Buy Tickets

    Section: Experience Bar

    section-experience-bar.php

    ↻ Reload the page to see this correctly.

    Entry & Glass Bottom Boat Ticket

    Entry & Glass Bottom Boat Ticket

    Glide across the top of Australia's largest single aquarium in AQWA's custom glass bottom boat!

    Entry & Behind The Scenes Pass

    Entry & Behind The Scenes Pass

    For true AQWA lovers! Access restricted areas and behind the scenes guided tours, glass bottom boat ride & animal feeding!

    Dine Beneath the Sea

    Dine Beneath the Sea

    Celebrate Christmas with someone special at AQWA's Dine Beneath the Sea!

    Dine Beneath the Sea

    Dine Beneath the Sea

    Spoil someone who truly deserves it at AQWA's Dine Beneath the Sea!

    Junior Marine Scientist (6-12 years)

    Junior Marine Scientist (6-12 years)

    AQWA's Junior Marine Scientist mixes real animal care, with hands-on science fun and behind the scenes access. It's sure to generate wonder for our oceans and inspire your little scientist!

    Eco Teen: Turtle Researcher

    Eco Teen: Turtle Researcher

    Embrace your teen's passion for the sea, science and sustainability these school holidays! Turtle Researcher is a full day program perfect for budding biologists and keen marine warriors!

    Eco Teen: Shark Swim

    Eco Teen: Shark Swim

    Nurture your teen's passion for the marine world and allow them to dive right in, with this adventurous full-day program that includes swimming with sharks!

    Snorkel With Sharks

    Snorkel With Sharks

    Plunge into the beautiful world of AQWA’s shipwreck coast aquarium and come face to fin with sharks, stingrays and hundreds of stunning fish.

    Dive With Sharks

    Dive With Sharks

    Plunge into the beautiful world of AQWA’s shipwreck coast aquarium and come face to fin with sharks, stingrays and hundreds of stunning fish!

    Unique Birthday Parties

    Unique Birthday Parties

    Birthdays with a difference! Our bespoke party packages will create an experience your guests will never forget!