Autumn Savings | Up to 30% Off* Selected Styles
Mocka AU Dev
Mocka AU Dev

Colours

Brand
Token Role Value Example
primary Primary brand colour

rgba(54, 54, 54, 1)

#363636
primary-hover Primary color when hover

rgba(25, 32, 35, 1)

#192023
Functional
Token Role Value Example
info-bg Info background colour

#F6F6F6
info-content Foreground content color to use on info color

#181818

 Aa
success-bg Success background

#EBF4E1
success-content Foreground content color to use on success color

#8E9E6A

 Aa
warning-bg Warning background

#FEFCEA
warning-content Foreground content color to use on warning color

#E3A970

 Aa
error-bg Error Background

#FCF2F2
error-content Foreground content color to use on error color

#F33800

 Aa
Accent
Token Role Value Example
accent-1 Accent colour 1

#5F6F76
accent-2 Accent colour 2

#5F8EAD
accent-3 Accent colour 3

#D1DDDC
accent-4 Accent colour 4

#CD4B22
Background
Token Role Value Example
white Background color used for the main page body

rgb(255, 255, 255)

#FFFFFF
blush-100 Blush Page Background

#EFE3DB
white-overlay Background color used for overlays rgba(255, 255, 255, 0.3)
grey-100 Weakest background color used for decorative purposes

#F6F6F6
dark-overlay Background color used for overlays rgba(0, 0, 0, 0.12)
Borders
Token Role Value Example
border Default border color

#E7E7E7
border-focus Border color when focused

#878787
border-error Error border color

#F33800
Typography
Token Role Value Example
grey-1000 Used for headlines

#181818

 Aa
grey-700 Used for body text

#363636

 Aa
grey-500 Weaker body text for visual hierarchy

#666666

 Aa
grey-300 Weaker body text for visual hierarchy

#A0A0A0

 Aa
grey-200 Weaker body text for visual hierarchy

#EBEBEB

 Aa
grey-100 Used for body text on inverse backgrounds

#F6F6F6

 Aa
white For Headings on Inverse

#FFFFFF

 Aa
link Used for text links

#363636

 Aa
link-hover Used for text links when hover

#5F6F76

 Aa

Typographys

Display Token Size Line-height Weight
Headline 1 text-3xl lg:text-6xl 60px 64px 400
Headline 2 text-2xl lg:text-5xl 48px 54px 400
Headline 3 text-xl lg:text-4xl 36px 42px 400
Headline 4 text-lg lg:text-3xl 30px 36px 400
Headline 5 text-base lg:text-2xl 24px 32px 400
Headline 6 text-xl 20px 28px 400
Headline 6 text-lg 18px 26px 400
Body medium text-base 16px 26px 500
Body text-base 16px 26px 400
Body small text-sm 14px 24px 400
Body small medium text-sm 14px 24px 500
Body small semibold text-sm 14px 24px 600
Label label 12px 16px 400
Body small text-xs 12px 16px 400
Text Link link 14px 24px 400

Buttons

Role Token Enable Disabled
Primary button button-primary
Outlined button button-outlined
Small button button-small
Large button button-large
Button White button-white
Outlined white button button-outlined-white

Forms

Text inputs

Invalid email address

Text area

Dropdown

Radio button

Checkboxes

Toggle

Modules

Notifications

Toaster notification
Toaster notification

There were 2 error with your submission

  • Your password must be at least 8 characters
  • Your password must include at least one pro wrestling finishing move

Attention needed

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Success! Something went exactly as planned.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Slideout

Heading 1

Content slideout 1

Heading 2

Content slideout 2

Modal dialog

Content modal

Quantity Counter

Additionals

Pagination

Breadcrumbs

  1. Home
  2. Style Guide

Accordion

Here is space for body copy that answers the question above. There is no character limit and can go as long as needed.

Here is more space for body copy, underneath a sub-dividing line within each section.

Here is space for body copy that answers the question above. There is no character limit and can go as long as needed.

Here is more space for body copy, underneath a sub-dividing line within each section.

Here is space for body copy that answers the question above. There is no character limit and can go as long as needed.

Here is more space for body copy, underneath a sub-dividing line within each section.

Here is space for body copy that answers the question above. There is no character limit and can go as long as needed.

Here is more space for body copy, underneath a sub-dividing line within each section.

Badge & label

Display Token
Badge badge

Scrollbar

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Carousel

Carousel Fullwidth
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Carousel Grid
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Carousel Hide dots
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Carousel Disabled
Slide 1
Slide 2
Slide 3
Slide 4
Carousel Hide naviation
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Carousel Swiper
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10

Icons

Code Preview
icon-menu
icon-shopping-bag
icon-close
icon-faild
icon-success
icon-search
icon-facebook
icon-instagram
icon-pinterest
icon-apple
icon-google
icon-person
icon-person-outline
icon-arrow-right
icon-arrow-left
icon-shield
icon-heart
icon-heart-2
icon-chevron-up
icon-chevron-right
icon-chevron-left
icon-chevron-left-2
icon-check
Code Preview
icon-trash
icon-arrow-right-2
icon-filter
icon-share
icon-help
icon-plus
icon-minus
icon-location
icon-phone
icon-image
icon-info
icon-info-2
icon-card
icon-truck
icon-clock
icon-note
icon-gift
icon-calendar
icon-tag
icon-giftcard
icon-chevron-down-outline
Code Preview
icon-eye
icon-chat
icon-home
icon-receipt
icon-logout
icon-share-social
icon-ellipsis
icon-forkknife
icon-gauge
icon-visa
icon-amex
icon-mastercard
icon-paypal
icon-googlepay
icon-applepay
icon-shoppay
icon-klarna
icon-zip
icon-afterpay

Going Strong

Built on a foundation of quality and affordability.

Designed in Australia

Inspired by global trends and designed in-house.

Australia-Wide Delivery

Affordable shipping nationwide.

Local customer support

Aussie-based support team here to help.

Your Cart
Delivery Location

Get updated information about product delivery and stock availability for your area.

We use cookies to provide this service. Read more about how we use cookies in our policy. Please note that your location won't be shared.

🔧 GM_STATE Debug ×
Loading...
Open Console for details