menu
searchType anywhere to search
logo

color

Pages color system
Getting started

Introducing pages adaptive color system.

Color is a core building block of any design system. Pages color system help create scalable color themes, ensures accessible text, and distinguishes UI elements and surfaces from one another.


Have an Improvement or a suggestion?
goto request box

Tints and shades

Pages color spectrum

Color should be used consistently in any product so that certain colors always mean the same thing. For example, Pages red is used to show alerts and warnings. The Pages color spectrum ensures all possible context for use of color is covered with each base color having its shades and tints generated automatically.

Pages color swatcher

Pages color swatches

Download pages dashboard compleate spectrum color palette for photoshop

Primary color - Pages purple

color-primary

0
-2
-1
1
2

Complete color - Pages blue

color-complete

0
-2
-1
1
2

Success color - Pages green

color-success

0
-2
-1
1
2

Warning color - Pages yellow

color-warning

0
-2
-1
1
2

Danger color - Pages red

color-danger

0
-2
-1
1
2

Info color - Pages gray

color-info

0
-2
-1
1
2

Menu color - Pages gray

color-menu

Neutral color spectrum

The neutral color palette is made with two contrasting colors on either side, usually white and black. The rest of the colors in the middle are auto-generated to be used for various UI elements and surfaces, for example, color-contrast-lower is used for background and color-contrast-high is used for regular paragraphs.

color-contrast-lowest

Background

color-contrast-lower

Background light

color-contrast-low

Borderds

color-contrast-medium

Muted/helper text

color-contrast-high

Regular paragraphs

color-contrast-higher

Headings

ACCESSABILITY

Legibility standards

We believe any user of diverse abilities should be able to navigate and understand and use UI, especially when the content a user is dealing with is sensitive and important. Making every text accessible from almost 17 million colors in the hexadecimal scale is a big challenge for anyone.

Pages color system automatically picks the best legible text color for a given background maintaining a AA contrast ration according to Web Content Accessibility Guidelines or WCAG.

text legibility
SYSTEM

Color calibration

Pages color system is equipped with a set of modifiers to give you the total control and freedom on how colors should apply and adapt accordingly. Color calibration helps to give flat shades and tints more vibrance while making sure we perceive the difference between the colors from shades to tints.

Hue shift takes a color's relative luminance into consideration in order to determine the direction of the hue rotation.

Pages purple - color-primary shades

Pages color calibration
Global color variables

$mix-percentage-lighter

20%

$mix-percentage-lighter

90%

$mix-percentage-dark

60%

$mix-percentage-darker

30%

$saturation-shift

14%

$hue-shift

8%

See documentation
close
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/20 chevron_right
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/20 chevron_right
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/20 chevron_right
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/20 chevron_right
21st april 2020 2:13am

Press enter to search

suggestions :

Pages Search Results:

ice cream on pages

via john smith

T
ice cream related topics

via pages

M
ice cream music

via pagesmix

facebook
ice cream on facebook

via facebook

twitter
Tweats on ice cream

via twitter

google_plus
Circles on ice cream

via google plus