Colors

MaskowLabs Basic Components provides a comprehensive color system based on modern design principles. All colors are available as SCSS variables and follow a consistent naming convention with multiple tones for each color family.

Color Palette

The color system includes 22 distinct color families, each with 11 different tones (50-950), providing maximum flexibility for your design needs.

Primary Colors

Primary

50 #e1edfe

100 #c3d9fd

Red

100

200

300

400

500

600

700

800

900

950

Green

100

200

300

400

500

600

700

800

900

950

Blue

100

200

300

400

500

600

700

800

900

950

Yellow

100

200

300

400

500

600

700

800

900

950

Show All Color Families

Orange

Amber

Using Colors in SCSS

All colors are available as SCSS variables that you can use in your stylesheets. The naming convention follows a consistent pattern: $color-{family}-{tone}.

SCSS Variable Usage

 1// Primary colors
 2$color-primary-50: #e1edfe;
 3$color-primary-500: #0957d6;
 4$color-primary-900: #051f4d;
 5 
 6// Neutral colors
 7$color-gray-100: #f3f4f6;
 8$color-gray-500: #6b7280;
 9$color-gray-900: #111827;
10 
11// Semantic colors
12$color-red-500: #ef4444;
13$color-green-500: #22c55e;
14$color-blue-500: #3b82f6;
15$color-yellow-500: #eab308;

Using Variables in Your SCSS

 1.my-component {
 2    background-color: $color-primary-500;
 3    border: 1px solid $color-primary-600;
 4    color: $color-white;
 5 
 6    &:hover {
 7        background-color: $color-primary-600;
 8    }
 9 
10    &.error {
11        background-color: $color-red-50;
12        border-color: $color-red-500;
13        color: $color-red-700;
14    }
15}
16 
17.card {
18    background: $color-white;
19    border: 1px solid $color-gray-200;
20    box-shadow: 0 4px 6px rgba($color-gray-900, 0.1);
21}

Color Map Usage

Colors are also organized in SCSS maps for programmatic access:

 1$colors: (
 2  primary: (
 3    50: #e1edfe,
 4    100: #c3d9fd,
 5    200: #a3c4fc,
 6    // ... all tones
 7    950: #031233,
 8  ),
 9  gray: (
10    50: #f9fafb,
11    100: #f3f4f6,
12    // ... all tones
13    950: #030712,
14  ),
15  // ... all color families
16);
17 
18// Access colors from the map
19.dynamic-color {
20    background-color: map-get(map-get($colors, 'primary'), 500);
21}

Color Usage Guidelines

Light Colors (50-400)

50-100: Background colors, very subtle highlights
200-300: Subtle borders, dividers, disabled states
400: Placeholders, secondary text on light backgrounds

Dark Colors (500-950)

500-600: Primary actions, buttons, links
700-800: Headings, primary text
900-950: High contrast text, dark backgrounds

Accessibility Considerations

Important: When using colors, always ensure sufficient contrast ratios for accessibility:

Use darker tones (700+) for text on light backgrounds
Use lighter tones (50-200) for text on dark backgrounds
Test color combinations with accessibility tools
Provide alternative indicators beyond color alone

Complete Color Reference

The complete list of available color families includes:

primary

slate

gray

zinc

neutral

stone

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

Each color family includes 11 tones: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950