CSS Variables

CSS variables are intended only for use with Less files to leverage Houzz UI theming. They may not be available in every Jukwaa app!

Semantic Colors

Always prefer using semantic naming over referencing colors directly, for example accent is better than neutral.black. Also pay attention to using appropriate semantic groups – bg for background, content for content etc.

Not following these guidelines can cause unintended issues when the color palette/theme is updated.

Note: Brand color and accent colors can have different semantic meanings. Accent is usually used for CTAs.

BrandAccent

Other semantic colors

DefaultHoverActiveDisabled
Shortcuts
accent

#222222

#727169

#222222

#DFDACE

accent:hover

#727169

accent:active

#222222

accent:disabled

#DFDACE

danger

#D73417

warning

#FFBE28

focus

rgba(114,113,105,0.6)

focusDanger

rgba(244,72,42,0.6)

:focus

rgba(114,113,105,0.6)

iconAccent

#4DBC15

accentTint

#F0EEE8

accentShade

#2B2B28

promotion

#FFF6E0

overlayDark

rgba(0, 0, 0, 0.6)

overlayLight

rgba(0, 0, 0, 0.4)

lineDivider

#E8E5DC

separator

#F8F6F2

Background
primary

#FFFFFF

#F8F6F2

#E8E5DC

#FBFBF9

primarySurface

#FFFFFF

secondary

#FBFBF9

tertiary

#F8F6F2

accentTint

#F0EEE8

accentShade

#2B2B28

promotion

#FFF6E0

inverse

#222222

overlayDark

rgba(0, 0, 0, 0.6)

overlayLight

rgba(0, 0, 0, 0.4)

overlayWhite

rgba(255, 255, 255, 0.6)

danger

#FEECE9

warning

#FFF6E0

success

#EBFCE3

info

#ECF1FD

emptyState

#F4F7FF

autoMate

#EFEAFA

autoMateHover

#DDD2F4

alwaysFullBlack

#000000

Content
primary

#222222

#222222

#222222

#CEC7B5

secondary

#55544E

tertiary

#727169

deemphasized

#A39E8F

inverse

#FFFFFF

alwaysWhite

#FFFFFF

alwaysBlack

#222222

danger

#D73417

warning

#FFBE28

success

#4DBC15

info

#275EE7

muted

#A39E8F

Border
primary

#DFDACE

#A39E8F

#222222

#F0EEE8

secondary

#E8E5DC

tertiary

#F0EEE8

lineDivider

#E8E5DC

separator

#F8F6F2

alwaysWhite

#FFFFFF

danger

#F4482A

warning

#FFBE28

success

#4DBC15

info

#275EE7

inverse

none

emptyState

#A3BDFF

emptyStateHover

#6692FF

autoMate

#6636D9

Highlight Tint
yellow

#FFD980

orange

#FFBE8F

red

#FAB0A3

pink

#FFB8C9

cyan

#A0EDF3

teal

#8FEDD1

green

#B0EC93

blue

#A3BDFF

purple

#C5B1F1

Highlight Core
yellow

#FFBE28

orange

#FC6B03

red

#F4482A

pink

#FC5F86

cyan

#16D2DF

teal

#05D6B4

green

#4DBC15

blue

#275EE7

purple

#6636D9

Highlight Shade
yellow

#996B00

orange

#9C4507

red

#A12C17

pink

#DB335D

cyan

#045359

teal

#006B5A

green

#2B730D

blue

#1044C6

purple

#512BAB

Full Palette

Neutrals

  • fullBlack

    #000000

  • black

    #222222

  • white

    #FFFFFF

  • gray1100

    #333333

  • gray1000

    #444444

  • gray900

    #4F4F4F

  • gray800

    #666666

  • gray700

    #888888

  • gray600

    #ABABAB

  • gray500

    #CCCCCC

  • gray400

    #E6E6E6

  • gray300

    #F0F0F0

  • gray200

    #F4F4F4

  • gray100

    #FAFAFA

  • beige1100

    #2B2B28

  • beige1000

    #3D3D39

  • beige900

    #55544E

  • beige800

    #727169

  • beige700

    #A39E8F

  • beige600

    #CEC7B5

  • beige500

    #DFDACE

  • beige400

    #E8E5DC

  • beige300

    #F0EEE8

  • beige200

    #F8F6F2

  • beige100

    #FBFBF9

Reds

  • shade4

    #43110A

  • shade3

    #6B1C0F

  • shade2

    #A12C17

  • shade1

    #D73417

  • core

    #F4482A

  • tint1

    #F4482A

  • tint2

    #FAB0A3

  • tint3

    #FBCEC6

  • tint4

    #FEECE9

  • tint5

    #FEF8F7

Yellows

  • shade4

    #453103

  • shade3

    #453103

  • shade2

    #996B00

  • shade1

    #DA9C0B

  • core

    #FFBE28

  • tint1

    #FFCA4D

  • tint2

    #FFD980

  • tint3

    #FFEAB8

  • tint4

    #FFF6E0

  • tint5

    #FFFAF0

Green

  • shade4

    #102905

  • shade3

    #134908

  • shade2

    #2B730D

  • shade1

    #3B9C11

  • core

    #4DBC15

  • tint1

    #83DB57

  • tint2

    #B0EC93

  • tint3

    #D8F9C8

  • tint4

    #EBFCE3

  • tint5

    #F8FDF5

Blue

  • shade4

    #081438

  • shade3

    #122968

  • shade2

    #193B8F

  • shade1

    #1044C6

  • core

    #275EE7

  • tint1

    #6692FF

  • tint2

    #A3BDFF

  • tint3

    #CFDDFC

  • tint4

    #ECF1FD

  • tint5

    #F4F7FF

Pink

  • shade4

    #4D1C27

  • shade3

    #6E162B

  • shade2

    #B12F50

  • shade1

    #DB335D

  • core

    #FC5F86

  • tint1

    #FF809F

  • tint2

    #FFB8C9

  • tint3

    #FFD3DE

  • tint4

    #FFEBF0

  • tint5

    #FFF7F9

Purple

  • shade4

    #21153E

  • shade3

    #2E1B5B

  • shade2

    #432A7E

  • shade1

    #512BAB

  • core

    #6636D9

  • tint1

    #9C7CE9

  • tint2

    #C5B1F1

  • tint3

    #DDD2F4

  • tint4

    #EFEAFA

  • tint5

    #F9F6FF

Cyan

  • shade4

    #033538

  • shade3

    #045359

  • shade2

    #06818A

  • shade1

    #00B6C2

  • core

    #16D2DF

  • tint1

    #64E5EE

  • tint2

    #A0EDF3

  • tint3

    #BFF0F4

  • tint4

    #DCF7FA

  • tint5

    #F5FEFF

Teal

  • shade4

    #003A30

  • shade3

    #006B5A

  • shade2

    #009B82

  • shade1

    #00B89A

  • core

    #05D6B4

  • tint1

    #63E2BD

  • tint2

    #8FEDD1

  • tint3

    #C2F5E6

  • tint4

    #E5FAF4

  • tint5

    #F1FEF9