test-page-ignore

Colors

Core

$color-black #161618

$color-white #FFFFFF

Pink Scale

$color-pink #FF8CA5

$color-pink-hover #FBABBE

$color-pink-mid #FFBDC1

$color-pink-soft #FFD6D8

$color-pink-light #FFE7E9

$color-pink-pale #FFEFEF

Grey Scale

$color-grey-dark #707070

$color-grey-mid #9A9A9A

$color-grey #BEBEBE

$color-grey-border #D5D5D5

$color-grey-light #E8E8E8

$color-grey-pale #F8F8F8

Font Families

AKIRA EXPANDED — Eyebrows & Labels

ANTON — Large Display Headlines

Roboto — Body copy & UI text

Roboto Condensed — Small buttons & compact UI

Font Sizes

11px — The quick brown fox jumps over the lazy dog

13px — The quick brown fox jumps over the lazy dog

16px — The quick brown fox jumps over the lazy dog

18px — The quick brown fox jumps over the lazy dog

20px — The quick brown fox jumps over the lazy dog

24px — The quick brown fox jumps over the lazy dog

28px — The quick brown fox jumps over the lazy dog

32px — The quick brown fox jumps over the lazy dog

40px — The quick brown fox jumps over the lazy dog

42px — The quick brown fox jumps over the lazy dog

60px — The quick brown fox jumps over the lazy dog

64px — The quick brown fox jumps over the lazy dog

Title Components

Primary Title — Akira eyebrow + Anton display

✦ ✦ ✦

Explore Our

Bestsellers

✦ ✦ ✦

Akira 14px + Anton 46px + sparkles

Explore Our

Bestsellers

Pink eyebrow + Anton 40px (smaller variant)

✦ ✦ ✦

Returns

Policy

✦ ✦ ✦

Dark background variant

Secondary Title — Akira two-colour stack

✦ ✦ ✦

By Category

✦ ✦ ✦

Single line — Akira 19px pink

✦ ✦ ✦

Company

Values

✦ ✦ ✦

Two lines — pink / black

✦ ✦ ✦

Rewards — Sign Up

The VIP List Today

✦ ✦ ✦

Multi-line secondary

Body Copy

Perfect your base and enhance your complexion with these firm favourite face products. From full coverage foundation and hydrating concealer to glowing highlighters and super strong setting sprays, we have your routine covered!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut link here et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Roboto Regular 15px / 1.5 line-height / #161618 / links #FF8CA5

Colour Utilities

Brand Pink #FF8CA5

Stroke / Muted Text #707070

Pink Background #FF8CA5

Light Pink #FFE7E9

Black Background #161618

uppercase utility

Buttons

Standard — Roboto Black 13px, padding 12/38, hover → #FBABBE

Sizes — Roboto Black 12px small / Roboto Condensed small-flex

Category Buttons — Anton 16px, padding 7/22, white fill → dark hover

Switch / Toggle — active white, passive #FFE7E9

Iconography

stroke-width: 1.25px — default: #161618 — hover/active: #FBABBE

Click any icon to copy its Liquid inline_asset_content tag.

Home

Account

Wishlist

Cart

Location

Camera

Rewards

Arrow Left

Arrow Right

Check

Filter

Star

Trash

Edit

Info

Plus

Sparkle

Inputs

First Name

Date of Birth

Badges

New

Sale

Trending

Limited

New Shade

Tags / Pills

All Lips Eyes Face Skin

Foundation Concealer New In

Quantity Stepper

Progress Bar

Colour Swatches

Rating

★★★★★ (128)

★★★★☆ (42)

Dividers

Tooltip

Flex Utilities

also: .flex--desktop / .flex--tablet

also: .f-d-column--desktop / .f-d-column--tablet

also: .f-wrap--desktop / .f-wrap--tablet

also: .f-grow--desktop / .f-grow--tablet

also: .f-j-start--desktop / .f-j-start--tablet

also: .f-j-center--desktop / .f-j-center--tablet

also: .f-j-end--desktop / .f-j-end--tablet

also: .f-j-between--desktop / .f-j-between--tablet

also: .f-j-around--desktop / .f-j-around--tablet

also: .f-a-start--desktop / .f-a-start--tablet

also: .f-a-center--desktop / .f-a-center--tablet

also: .f-a-end--desktop / .f-a-end--tablet

Gap Utilities

gap: 4px

gap: 8px

gap: 16px

gap: 24px

gap: 40px

Spacing & Layout Utilities

Layout Containers

1400px max-width

1035px max-width

Breakpoints Reference

Breakpoint	SCSS Mixin	Width
Small Phone	@include small-phone	max-width: 360px
Large Phone	@include large-phone	max-width: 767px
Tablet	@include tablet	max-width: 1024px
Laptop	@include laptop	max-width: 1440px
Desktop	@include desktop	max-width: 1920px
Large Desktop	@include large-desktop	min-width: 1921px