Style Guide

Colors

Brand Palette

The global color palette from the theme editor (settings.color_palette) — merchant-editable.

#3D4923
#ffffff
#18191A
#F5F6F6
#ced1d3
#333333
#eef1ea
#dfdfdf
#67793A
#C41911
#18191A

Grayscale

Primitive tokens — fixed values from primitive-global-tokens.liquid, not merchant-editable. Chips render the live --color-* variables.

black
white

Gray --color-gray-N

950
900
800
700
600
500
400
300
200
100
50

Notification

Status color ramps (--color-red-N, --color-yellow-N, --color-green-N, --color-blue-N).

Red --color-red-N

900
700
500
300
100
50

Yellow --color-yellow-N

900
700
500
300
100
50

Green --color-green-N

900
700
500
300
100
50

Blue --color-blue-N

900
700
500
300
100
50

Opacities

Black and white overlay ramps (--color-opacity-black-N, --color-opacity-white-N).

Black --color-opacity-black-N

90
80
70
60
50
40
30
20
10
05

White --color-opacity-white-N

90
80
70
60
50
40
30
20
10
05