Typography

We use fluid scaling for typography, meaning we don’t need to specify exact breakpoints. Instead, we define sizes for desktop & mobile and use relative units for the other values to allow the styles to scale seamlessly without much work. With this in mind, it’s important to ensure line-height and letter-spacing are set in percentage (%) values, not pixels.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading 6 Cap

Body

Caption

Utility

Fluid typography utilities

We use fluid scaling for utility classes, meaning we don’t need to specify exact breakpoints. Instead, we define sizes for desktop & mobile and use relative units for the other values to allow the styles to scale seamlessly without much work.

Following are the utilities are available available:

  • fluid-text-[mobile|desktop]
  • fluid-line-height-[mobile|desktop]
  • fluid-gap-[mobile|desktop]
  • fluid-pl-[mobile|desktop]
  • fluid-pr-[mobile|desktop]
  • fluid-pb-[mobile|desktop]
  • fluid-pt-[mobile|desktop]
  • fluid-ml-[mobile|desktop]
  • fluid-mr-[mobile|desktop]
  • fluid-mb-[mobile|desktop]
  • fluid-mt-[mobile|desktop]
  • fluid-inset-[mobile|desktop]
  • fluid-top-[mobile|desktop]
  • fluid-right-[mobile|desktop]
  • fluid-bottom-[mobile|desktop]
  • fluid-left-[mobile|desktop]
  • fluid-size-[mobile|desktop]

Note: Replace mobile with Mobile Pixel Size Base and desktop with Desktop Size base

Examples:

Fluid, 12|16

Fluid, 30|70

fluid-size-[200|400]

Colors

Swatches mirror src/styles/@colors.css — --color-* tokens only. Aliases: bg-yellow = warning, bg-green = success.

Text & foreground

foreground foreground-inverse foreground-secondary foreground-secondary-inverse

Surfaces

background background-inverse background-secondary background-secondary-inverse

Brand, links & accents

accent-01 accent-01-inverse accent-02 accent-02-inverse link link-inverse orange

Borders & disabled

border-01 border-01-inverse border-02 border-02-inverse disabled disabled-inverse

Focus & system

focus blue danger warning success

Primitives & greys

white black light-blue grey-200 grey-400 grey-600 grey-800

Buttons (CTAs)

Form elements

Text inputs, textareas, native and custom selects, switches (toggles), checkboxes, and radios.

Some help text here

This field is required

Provide a message

Select a country

Please select a country

This is a custom Select field

This is a custom Select field

Icons

Sprite icons from src/icons, rendered with the icon snippet.

icon-account
icon-arrow
icon-arrow-back
icon-asterisk
icon-cart
icon-cart-empty
icon-caret
icon-chat-bubble
icon-checkbox-tick
icon-checkmark
icon-close
icon-discount
icon-envelope
icon-error
icon-facebook
icon-filters
icon-hamburger
icon-instagram
icon-minus
icon-mute
icon-pause
icon-phone
icon-play
icon-plus
icon-radio-circle
icon-remove
icon-reset
icon-search
icon-select-arrow
icon-shopping-bag
icon-success
icon-twitter
icon-unmute
icon-zoom

Spacing

3xs 2xs xs sm md lg xl 2xl 3xl

Border Radius

rounded-sm rounded-md rounded-lg rounded-rounded

Swiper Carousels

Slide1 Slide2 Slide3 Slide4 Slide5

Product Cards
原價 原價 -

Dialogs / Modals

Inner modal

Dynamic Product Card

Section Injection with Live Params

Enter something to search for

Tabs component

Typically, this component would be rendered dynamically as part of section blocks, or something similiar, and the attributes could all be controlled dynamically. For the sake of the styleguide, I've hardcoded three tabs.

content for tab 1