Themes

Take full control of all the colors

Light

Base
Foreground	#262626
Background	#FFFFFF
Border	none

Primary button
Foreground	#FFFFFF
Background	#262626
Border	#262626
Hover foreg.	#262626
Hover backg.	#FFFFFF
Hover border	#FFFFFF

Secondary button
Foreground	#1E1A33
Background	#FFFFFF
Border	#262626
Hover foreg.	#1E1A33
Hover backg.	hsl(0, 0%, 85%)
Hover border	#262626

Implementation

Light - w. orange button

Base
Foreground	#262626
Background	#FFFFFF
Border	none

Primary button
Foreground	#FFFFFF
Background	#F29B55
Border	#F29B55
Hover foreg.	#FFFFFF
Hover backg.	#E69351
Hover border	#E69351

Secondary button
Foreground	#1E1A33
Background	#FFFFFF
Border	#262626
Hover foreg.	#1E1A33
Hover backg.	hsl(0, 0%, 85%)
Hover border	#262626

Implementation

Dark

Base
Foreground	#FFFFFF
Background	#262626
Border	none

Primary button
Foreground	#262626
Background	#FFFFFF
Border	#FFFFFF
Hover foreg.	#FFFFFF
Hover backg.	#262626
Hover border	#262626

Secondary button
Foreground	#FFFFFF
Background	#262626
Border	#FFFFFF
Hover foreg.	#262626
Hover backg.	#FFFFFF
Hover border	#FFFFFF

Implementation

Light transparent

Base
Foreground	#262626
Background	none
Border	none

Primary button
Foreground
Background
Hover backg.	hsl(0, 0%, 40%)

Secondary button
Foreground
Background
Hover backg.	hsl(0, 0%, 40%)

Implementation

Dark transparent

Base
Foreground	#FFFFFF
Background	none
Border	none

Primary button
Foreground	#FFFFFF
Background
Hover foreg.	#FFFFFF
Hover backg.	hsl(0, 0%, 40%)

Secondary button
Foreground	#FFFFFF
Background
Hover foreg.	#FFFFFF
Hover backg.	hsl(0, 0%, 40%)

Implementation

Light gray

Base
Foreground	#333333
Background	#F7F7F7
Border	none

Primary button
Foreground	#FFFFFF
Background	#333333
Hover foreg.	#FFFFFF
Hover backg.	hsl(0, 0%, 40%)

Secondary button
Foreground	#333333
Background	#CCCCCC
Hover foreg.	#333333
Hover backg.	hsl(0, 0%, 85%)

Implementation

Gray border

Base
Foreground	#333333
Background	#FFFFFF
Border	#EBEBEB

Primary button
Foreground	#FFFFFF
Background	#333333
Hover foreg.	#FFFFFF
Hover backg.	hsl(0, 0%, 40%)

Secondary button
Foreground	#333333
Background	#CCCCCC
Hover foreg.	#333333
Hover backg.	hsl(0, 0%, 85%)

Implementation

DW - Overall

Base
Foreground	#FFFFFF
Background	#FFFFFF
Border	none

Primary button
Foreground	#FFFFFF
Background	#FF8500
Hover foreg.	#FFFFFF
Hover backg.	#FF8500

Secondary button
Foreground	#FFFFFF
Background	#FF8500
Hover foreg.	#FFFFFF
Hover backg.	hsl(31.29, 100%, 85%)
Focus outline	#CCCCCC

Implementation

DW - Full width (darkblue)

Base
Foreground	#F1F1F1
Background	#0B3050
Border	none

Primary button
Foreground
Background
Hover backg.	hsl(0, 0%, 40%)

Secondary button
Foreground
Background
Hover backg.	hsl(0, 0%, 40%)

Implementation

DW - Brands grow with Dynamicweb

Base
Foreground	#3B3B3B
Background	#F2F2F2
Border	none

Primary button
Foreground
Background
Hover backg.	hsl(0, 0%, 40%)

Secondary button
Foreground
Background
Hover backg.	hsl(0, 0%, 40%)
Focus outline	#CCCCCC

Implementation

DW - Top image

Base
Foreground	#FFFFFF
Background	#002E54
Border	none

Primary button
Foreground	#F1F1F1
Background	#FF8500
Hover foreg.	#F1F1F1
Hover backg.	#F58000

Secondary button
Foreground	#333333
Background	#CCCCCC
Hover foreg.	#333333
Hover backg.	hsl(0, 0%, 85%)
Focus outline	#CCCCCC

Implementation

DW - Full width (blue)

Base
Foreground	#F1F1F1
Background	#005999
Border	none

Primary button
Foreground	#FFFFFF
Background	#FF8500
Hover foreg.	#FFFFFF
Hover backg.	hsl(31.29, 100%, 85%)

Secondary button
Foreground
Background
Hover backg.	hsl(0, 0%, 40%)

Implementation

DW - Full width (more then a ecommerce)

Base
Foreground	#3B3B3B
Background	#EBF5FA
Border	none

Primary button
Foreground	#FFFFFF
Background	#FF8500
Hover foreg.	#FFFFFF
Hover backg.	hsl(31.29, 100%, 85%)

Secondary button
Foreground
Background
Hover backg.	hsl(0, 0%, 40%)

Implementation

DW - Gain the insights

Base
Foreground	#3B3B3B
Background	#FFFFFF
Border	none

Primary button
Foreground
Background
Hover backg.	hsl(0, 0%, 40%)

Secondary button
Foreground
Background
Hover backg.	hsl(0, 0%, 40%)
Focus outline	#CCCCCC

Implementation

Base
Foreground	#F1F1F1
Background	#005999
Border	none

Primary button
Foreground
Background
Hover backg.	hsl(0, 0%, 40%)

Secondary button
Foreground
Background
Hover backg.	hsl(0, 0%, 40%)
Focus outline	#CCCCCC

Implementation

Logo

Base
Foreground	#50D2FF
Background	none
Border	none

Primary button
Foreground
Background
Hover backg.	hsl(0, 0%, 40%)

Secondary button
Foreground
Background
Hover backg.	hsl(0, 0%, 40%)

Implementation

Base
Foreground	#F1F1F1
Background	#3B3B3B
Border	none

Primary button
Foreground	#FFFFFF
Background	#333333
Hover foreg.	#FFFFFF
Hover backg.	hsl(0, 0%, 40%)

Secondary button
Foreground	#333333
Background	#CCCCCC
Hover foreg.	#333333
Hover backg.	hsl(0, 0%, 85%)
Focus outline	#CCCCCC

Implementation

DW - Full width (with orange button)

Base
Foreground	#F1F1F1
Background	#0B3050
Border	none

Primary button
Foreground	#FFFFFF
Background	#F29B55
Border	#F29B55
Hover foreg.	#FFFFFF
Hover backg.	hsl(26.75, 86%, 85%)
Hover border	#F29B55

Secondary button
Foreground
Background	#FFFFFF
Border	#616161
Hover foreg.	#F29B55
Hover backg.	#F29B55
Hover border	#F29B55

Implementation

homeFINAL - top image

Base
Foreground	#FFFFFF
Background	none
Border	none

Primary button
Foreground	#50D2FF
Background	#002C50
Border	#50D2FF
Hover foreg.	#FFFFFF
Hover backg.	#50D2FF
Hover border	#50D2FF

Secondary button
Foreground
Background
Hover backg.	hsl(0, 0%, 40%)

Implementation

homeFINAL - Customise or Compose

Base
Foreground	#002E54
Background	#FCFCFC
Border	none

Primary button
Foreground	#50D2FF
Background	#FCFCFC
Border	#50D2FF
Hover foreg.	#FFFFFF
Hover backg.	#50D2FF
Hover border	#50D2FF

Secondary button
Foreground
Background
Hover backg.	hsl(0, 0%, 40%)

Implementation

homeFINAL - Customise or Compose Text

Base
Foreground	#464646
Background	#FCFCFC
Border	none

Primary button
Foreground	#50D2FF
Background	#FCFCFC
Border	#50D2FF
Hover foreg.	#FFFFFF
Hover backg.	#50D2FF
Hover border	#50D2FF

Secondary button
Foreground
Background
Hover backg.	hsl(0, 0%, 40%)

Implementation

homeFINAL - Experience the power

Base
Foreground	#005999
Background	#FFFFFF
Border	none

Primary button
Foreground	#FFFFFF
Background	#00A2F4
Hover foreg.	#FFFFFF
Hover backg.	#50D2FF

Secondary button
Foreground
Background
Hover backg.	hsl(0, 0%, 40%)

Implementation

homeFINAL - More than an eCommerce Suite

Base
Foreground	#002E54
Background	#F0F3F5
Border	none

Primary button
Foreground	#50D2FF
Background	#F0F3F5
Border	#50D2FF
Hover foreg.	#FFFFFF
Hover backg.	#50D2FF
Hover border	#50D2FF

Secondary button
Foreground
Background
Hover backg.	hsl(0, 0%, 40%)

Implementation

homeFINAL - More than an eCommerce Suite Content

Base
Foreground	#262626
Background	#FFFFFF
Border	none

Primary button
Foreground	#FFFFFF
Background	#00A2F4
Hover foreg.	#FFFFFF
Hover backg.	#E69351
Hover border	#E69351

Secondary button
Foreground	#1E1A33
Background	#FFFFFF
Border	#262626
Hover foreg.	#1E1A33
Hover backg.	hsl(0, 0%, 85%)
Hover border	#262626

Implementation

Base
Foreground	#0E193E
Background	#F8F8F8
Border	none

Primary button
Foreground	#50D2FF
Background	#002C50
Border	#50D2FF
Hover foreg.	#FFFFFF
Hover backg.	#50D2FF
Hover border	#50D2FF

Secondary button
Foreground
Background
Hover backg.	hsl(0, 0%, 40%)

Implementation

tabs-nav

Base
Foreground	#002E54
Background	#FFFFFF
Border	none

Primary button
Foreground	#FFFFFF
Background	#00A2F4
Hover foreg.	#FFFFFF
Hover backg.	#00A2F4

Secondary button
Foreground	#FFFFFF
Background	#00A2F4
Hover foreg.	#FFFFFF
Hover backg.	hsl(200.16, 100%, 40%)
Focus outline	#CCCCCC

Implementation