Sandbox - Modern & Multipurpose NextJS Template

Changing Primary Color

To change the primary color to a custom color, open src/assets/scss/user-variables.scss and assign your custom color value to $primary.

View example's code

$primary: #36a6cf;

Background Colors

.bg-yellow

.bg-pale-yellow

.bg-soft-yellow

.bg-orange

.bg-pale-orange

.bg-soft-orange

.bg-red

.bg-pale-red

.bg-soft-red

.bg-pink

.bg-pale-pink

.bg-soft-pink

.bg-violet

.bg-pale-violet

.bg-soft-violet

.bg-purple

.bg-pale-purple

.bg-soft-purple

.bg-blue

.bg-pale-blue

.bg-soft-blue

.bg-aqua

.bg-pale-aqua

.bg-soft-aqua

.bg-green

.bg-pale-green

.bg-soft-green

.bg-leaf

.bg-pale-leaf

.bg-soft-leaf

.bg-ash

.bg-pale-ash

.bg-soft-ash

.bg-navy

.bg-pale-navy

.bg-soft-navy

.bg-fuchsia

.bg-pale-fuchsia

.bg-soft-fuchsia

.bg-sky

.bg-pale-sky

.bg-soft-sky

.bg-grape

.bg-pale-grape

.bg-soft-grape

.gradient-1

.gradient-2

.gradient-3

.gradient-4

.gradient-5

.gradient-6

.gradient-7

View example's code

<div className="bg-yellow" />
<div className="bg-pale-yellow" />
<div className="bg-soft-yellow" />
  
<div className="bg-orange" />
<div className="bg-pale-orange" />
<div className="bg-soft-orange" />
  
<div className="bg-red" />
<div className="bg-pale-red" />
<div className="bg-soft-red" />
  
<div className="bg-pink" />
<div className="bg-pale-pink" />
<div className="bg-soft-pink" />
  
<div className="bg-violet" />
<div className="bg-pale-violet" />
<div className="bg-soft-violet" />
  
<div className="bg-purple" />
<div className="bg-pale-purple" />
<div className="bg-soft-purple" />
  
<div className="bg-blue" />
<div className="bg-pale-blue" />
<div className="bg-soft-blue" />
  
<div className="bg-aqua" />
<div className="bg-pale-aqua" />
<div className="bg-soft-aqua" />
  
<div className="bg-green" />
<div className="bg-pale-green" />
<div className="bg-soft-green" />
  
<div className="bg-leaf" />
<div className="bg-pale-leaf" />
<div className="bg-soft-leaf" />
  
<div className="bg-ash" />
<div className="bg-pale-ash" />
<div className="bg-soft-ash" />
  
<div className="bg-navy" />
<div className="bg-pale-navy" />
<div className="bg-soft-navy" />

<div className="bg-fuchsia" />
<div className="bg-pale-fuchsia" />
<div className="bg-soft-fuchsia" />

<div className="bg-sky" />
<div className="bg-pale-sky" />
<div className="bg-soft-sky" />

<div className="bg-grape" />
<div className="bg-pale-grape" />
<div className="bg-soft-grape" />

<div className="gradient-1" />
<div className="gradient-2" />
<div className="gradient-3" />
<div className="gradient-4" />
<div className="gradient-5" />
<div className="gradient-6" />
<div className="gradient-7" />

Text Colors

.text-yellow

.text-orange

.text-red

.text-pink

.text-fuchsia

.text-violet

.text-purple

.text-blue

.text-aqua

.text-sky

.text-green

.text-leaf

.text-ash

.text-navy

.text-grape

.text-primary

.text-muted

.text-white

.gradient-1

.gradient-2

.gradient-3

.gradient-4

.gradient-5

.gradient-6

.gradient-7

View example's code

<span className="text-yellow" />
<span className="text-orange" />
<span className="text-red" />
<span className="text-pink" />
<span className="text-violet" />
<span className="text-purple" />
<span className="text-blue" />
<span className="text-aqua" />
<span className="text-green" />
<span className="text-leaf" />
<span className="text-ash" />
<span className="text-navy" />
<span className="text-fuchsia" />
<span className="text-sky" />
<span className="text-grape" />

<span className="text-primary" />
<span className="text-muted" />
<span className="text-white" />

<span className="text-gradient gradient-1" />
<span className="text-gradient gradient-2" />
<span className="text-gradient gradient-3" />
<span className="text-gradient gradient-4" />
<span className="text-gradient gradient-5" />
<span className="text-gradient gradient-6" />
<span className="text-gradient gradient-7" />

PROJECT PAGES

SINGLE PROJECTS

Usage

Styleguide

Elements

Color

Changing Primary Color

Background Colors

Text Colors

Think unique and be creative. Make a difference with Sandbox.