Overview
Introduction

Colors

Introduction

Ambient colors

Ambient colors are inspired by the Material palette and are designed to work alongside Material.

Backgrounds

Introducing Ambient colors. A collection of skin classes to use while building UI.

Includes a set of classes to set background color.

.am-clr-NUMBER-bg

Red .am-clr-1-bg
@am-palette-1

Pink .am-clr-2-bg
@am-palette-2

Purple .am-clr-3-bg
@am-palette-3

Deep Purple .am-clr-4-bg
@am-palette-4

Indigo .am-clr-5-bg
@am-palette-5

Blue .am-clr-6-bg
@am-palette-6

Light blue .am-clr-7-bg
@am-palette-7

cyan .am-clr-8-bg
@am-palette-8

Teal .am-clr-9-bg
@am-palette-9

Green .am-clr-10-bg
@am-palette-10

Light green .am-clr-11-bg
@am-palette-11

Lime .am-clr-12-bg
@am-palette-12

Yellow .am-clr-13-bg
@am-palette-13

Amber .am-clr-14-bg
@am-palette-14

Orange .am-clr-15-bg
@am-palette-15

Deep orange .am-clr-16-bg
@am-palette-16

Brown .am-clr-17-bg
@am-palette-17

Grey .am-clr-18-bg
@am-palette-18

Blue grey .am-clr-19-bg
@am-palette-19

Black .am-clr-20-bg
@am-palette-20

Borders & Text

Includes a set of classes to set text and or border color.

.am-clr-NUMBER-text
.am-clr-NUMBER-border

Red

Pink

Purple

Deep purple

Indigo

Blue

Light blue

cyan

Teal

Green

Light green

Lime

Yellow

Amber

Orange

Deep orange

Brown

Grey

Blue grey

Black

SVG fills and strokes

Includes a set of classes to set fills and or strokes.

.am-clr-NUMBER-fill
.am-clr-NUMBER-stroke

LESS

Easily change the hue for a Material background, text, border, fill or stroke within the mixin. Or, use your own custom color by updating the base am-palette-1 - am-palette-20 color variables.

Material Mixin build

.COLOR(RANGE, ORIENTATION);

COLOR: Material unique color name.

RANGE: 1-14. Range is the color value within the LESS group list for the color. The value of 6 is Material 500.

ORIENTATION: text, bg, border, fill, stroke

I have created a Github Gist of the LESS files used in Ambient colors for skin classes to use while building UI.

Mixin

// Red
.am-clr-1 {
    &-text {
        .red(6, text);
    }
    &-bg {
        .red(6, bg);
    }
    &-border {
        .red(6, border);
    }
    &-fill {
        .red(6, fill);
    }
    &-stroke {
        .red(6, stroke);
    }
}

Material palette

@variables

Red

Red@am-clr-red-500
@am-clr-red-50
@am-clr-red-100
@am-clr-red-200
@am-clr-red-300
@am-clr-red-400
@am-clr-red-500
@am-clr-red-600
@am-clr-red-700
@am-clr-red-800
@am-clr-red-900
@am-clr-red-A100
@am-clr-red-A200
@am-clr-red-A400
@am-clr-red-A700

Pink

Pink@am-clr-pink-500
@am-clr-pink-50
@am-clr-pink-100
@am-clr-pink-200
@am-clr-pink-300
@am-clr-pink-400
@am-clr-pink-500
@am-clr-pink-600
@am-clr-pink-700
@am-clr-pink-800
@am-clr-pink-900
@am-clr-pink-A100
@am-clr-pink-A200
@am-clr-pink-A400
@am-clr-pink-A700

Purple

Purple@am-clr-purple-500
@am-clr-purple-50
@am-clr-purple-100
@am-clr-purple-200
@am-clr-purple-300
@am-clr-purple-400
@am-clr-purple-500
@am-clr-purple-600
@am-clr-purple-700
@am-clr-purple-800
@am-clr-purple-900
@am-clr-purple-A100
@am-clr-purple-A200
@am-clr-purple-A400
@am-clr-purple-A700

Deep Purple

Deep Purple@am-clr-deep-purple-500
@am-clr-purple-50
@am-clr-purple-100
@am-clr-purple-200
@am-clr-purple-300
@am-clr-purple-400
@am-clr-purple-500
@am-clr-purple-600
@am-clr-purple-700
@am-clr-purple-800
@am-clr-purple-900
@am-clr-purple-A100
@am-clr-purple-A200
@am-clr-purple-A400
@am-clr-purple-A700

Indigo

Indigo@am-clr-indigo-500
@am-clr-indigo-50
@am-clr-indigo-100
@am-clr-indigo-200
@am-clr-indigo-300
@am-clr-indigo-400
@am-clr-indigo-500
@am-clr-indigo-600
@am-clr-indigo-700
@am-clr-indigo-800
@am-clr-indigo-900
@am-clr-indigo-500
@am-clr-indigo-500
@am-clr-indigo-500
@am-clr-indigo-500

Blue

Blue@am-clr-blue-500
@am-clr-blue-50
@am-clr-blue-100
@am-clr-blue-200
@am-clr-blue-300
@am-clr-blue-400
@am-clr-blue-500
@am-clr-blue-600
@am-clr-blue-700
@am-clr-blue-800
@am-clr-blue-900
@am-clr-blue-A100
@am-clr-blue-A200
@am-clr-blue-A400
@am-clr-blue-A700

Light Blue

Light Blue@am-clr-light-blue-500
@am-clr-light-blue-50
@am-clr-light-blue-100
@am-clr-light-blue-200
@am-clr-light-blue-300
@am-clr-light-blue-400
@am-clr-light-blue-500
@am-clr-light-blue-600
@am-clr-light-blue-700
@am-clr-light-blue-800
@am-clr-light-blue-900
@am-clr-light-blue-A100
@am-clr-light-blue-A200
@am-clr-light-blue-A400
@am-clr-light-blue-A700

Cyan

Cyan@am-clr-cyan-500
@am-clr-cyan-50
@am-clr-cyan-100
@am-clr-cyan-2500
@am-clr-cyan-300
@am-clr-cyan-400
@am-clr-cyan-500
@am-clr-cyan-600
@am-clr-cyan-700
@am-clr-cyan-800
@am-clr-cyan-900
@am-clr-cyan-A100
@am-clr-cyan-A200
@am-clr-cyan-A400
@am-clr-cyan-A700

Teal

Teal@am-clr-teal-500
@am-clr-teal-50
@am-clr-teal-100
@am-clr-teal-200
@am-clr-teal-300
@am-clr-teal-400
@am-clr-teal-500
@am-clr-teal-600
@am-clr-teal-700
@am-clr-teal-800
@am-clr-teal-900
@am-clr-teal-A100
@am-clr-teal-A200
@am-clr-teal-A400
@am-clr-teal-A700

Green

Green@am-clr-green-500
@am-clr-green-50
@am-clr-green-100
@am-clr-green-200
@am-clr-green-300
@am-clr-green-400
@am-clr-green-500
@am-clr-green-600
@am-clr-green-700
@am-clr-green-800
@am-clr-green-900
@am-clr-green-A100
@am-clr-green-A200
@am-clr-green-A400
@am-clr-green-A700

Light Green

Light Green@am-clr-light-green-500
@am-clr-light-green-50
@am-clr-light-green-100
@am-clr-light-green-200
@am-clr-light-green-300
@am-clr-light-green-400
@am-clr-light-green-500
@am-clr-light-green-600
@am-clr-light-green-700
@am-clr-light-green-800
@am-clr-light-green-900
@am-clr-light-green-A100
@am-clr-light-green-A200
@am-clr-light-green-A400
@am-clr-light-green-A700

Lime

Lime@am-clr-lime-500
@am-clr-lime-50
@am-clr-lime-100
@am-clr-lime-200
@am-clr-lime-300
@am-clr-lime-400
@am-clr-lime-500
@am-clr-lime-600
@am-clr-lime-700
@am-clr-lime-800
@am-clr-lime-900
@am-clr-lime-A100
@am-clr-lime-A200
@am-clr-lime-A400
@am-clr-lime-A700

Yellow

Yellow@am-clr-yellow-500
@am-clr-yellow-50
@am-clr-yellow-100
@am-clr-yellow-200
@am-clr-yellow-300
@am-clr-yellow-400
@am-clr-yellow-500
@am-clr-yellow-600
@am-clr-yellow-700
@am-clr-yellow-800
@am-clr-yellow-900
@am-clr-yellow-A100
@am-clr-yellow-A200
@am-clr-yellow-A400
@am-clr-yellow-A700

Amber

Amber@am-clr-amber-500
@am-clr-amber-50
@am-clr-amber-100
@am-clr-amber-200
@am-clr-amber-300
@am-clr-amber-400
@am-clr-amber-500
@am-clr-amber-600
@am-clr-amber-700
@am-clr-amber-800
@am-clr-amber-900
@am-clr-amber-A100
@am-clr-amber-A200
@am-clr-amber-A400
@am-clr-amber-A700

Orange

Orange@am-clr-orange-500
@am-clr-orange-50
@am-clr-orange-100
@am-clr-orange-200
@am-clr-orange-300
@am-clr-orange-400
@am-clr-orange-500
@am-clr-orange-600
@am-clr-orange-700
@am-clr-orange-800
@am-clr-orange-900
@am-clr-orange-A100
@am-clr-orange-A200
@am-clr-orange-A400
@am-clr-orange-A700

Deep Orange

Deep Orange@am-clr-deep-orange-500
@am-clr-deep-orange-50
@am-clr-deep-orange-100
@am-clr-deep-orange-200
@am-clr-deep-orange-300
@am-clr-deep-orange-400
@am-clr-deep-orange-500
@am-clr-deep-orange-600
@am-clr-deep-orange-700
@am-clr-deep-orange-800
@am-clr-deep-orange-900
@am-clr-deep-orange-A100
@am-clr-deep-orange-A200
@am-clr-deep-orange-A400
@am-clr-deep-orange-A700

Brown

Brown@am-clr-brown-500
@am-clr-brown-50
@am-clr-brown-100
@am-clr-brown-200
@am-clr-brown-300
@am-clr-brown-400
@am-clr-brown-500
@am-clr-brown-600
@am-clr-brown-700
@am-clr-brown-800
@am-clr-brown-900

Grey

Grey@am-clr-grey-500
@am-clr-grey-50
@am-clr-grey-100
@am-clr-grey-200
@am-clr-grey-300
@am-clr-grey-400
@am-clr-grey-500
@am-clr-grey-600
@am-clr-grey-700
@am-clr-grey-800
@am-clr-grey-900

Blue Grey

Blue Grey@am-clr-blue-grey-500
@am-clr-blue-grey-50
@am-clr-blue-grey-100
@am-clr-blue-grey-200
@am-clr-blue-grey-300
@am-clr-blue-grey-400
@am-clr-blue-grey-500
@am-clr-blue-grey-600
@am-clr-blue-grey-700
@am-clr-blue-grey-800
@am-clr-blue-grey-900

Black & white

@am-clr-black
@am-clr-white

Ambient is a lightweight and modular HTML5 UI development methodology.

This system evolved out of the need to fully decouple markup (HTML) from presentation (CSS).