AZURA

Pre-alpha
Github

Main Menu

  • Get Started
  • Breakpoints
  • Changelog
  • Framework Style

    • Grid
    • Flex
    • Colors
    • Typography
    • Round
    • Elevation
    • Backdrop
    • Buttons
    • Icons
    • Images
    • Cards
    • Form inputs and control
    • Text fields
    • Content panels
    • Carousel
    • Validation Form
    • Dialogs
    • Input controls
    • Lists
    • Textareas
    • Forms
    • File Inputs
    • Ajax
    • Viewport
    • Select
    • Scrollbar

Colors

Primary key colors

The primary key color is used to derive roles for key components across the UI, such as the FAB, prominent buttons, active states, as well as the tint of elevated surfaces.

bg-primary
bg-on-primary
Primary key color
On primary key color

Secondary key colors

The secondary key color is used for less prominent components in the UI such as filter chips, while expanding the opportunity for color expression.

bg-secondary
bg-on-secondary
Secondary key color
On secondary key color

Tertiary key colors

The tertiary key color is used to derive the roles of contrasting accents that can be used to balance primary and secondary colors or bring heightened attention to an element. The tertiary color role is left for teams to use at their discretion and is intended to support broader color expression in products.

bg-tertiary
bg-on-tertiary
Tertiary key color
On tertiary key color

Error key colors

In addition to the accent and neutral key color, the color system includes a semantic color role for error, again in the form of the error role itself, plus an on-error, error container, and on-error container role.

bg-error
bg-on-error
Error key color
On error key color

Neutral key colors

The neutral key color is used to derive the roles of surface and background, as well as high emphasis text and icons.

The neutral variant key color is used to derive medium emphasis text and icons, surface variants, and component outlines.

bg-background or bg-surface
bg-surface-variant
Neutral key color
Neutral variant key color

Primary palette

bg-primary-10
bg-primary-20
bg-primary-30
bg-primary-40
bg-primary-50
bg-primary-60
bg-primary-70
bg-primary-80
bg-primary-90
bg-primary-95
bg-primary-99

Primary 10
Primary 20
Primary 30
Primary 40
Primary 50
Primary 60
Primary 70
Primary 80
Primary 90
Primary 95
Primary 99

Secondary palette

bg-secondary-10
bg-secondary-20
bg-secondary-30
bg-secondary-40
bg-secondary-50
bg-secondary-60
bg-secondary-70
bg-secondary-80
bg-secondary-90
bg-secondary-95
bg-secondary-99

Secondary 10
Secondary 20
Secondary 30
Secondary 40
Secondary 50
Secondary 60
Secondary 70
Secondary 80
Secondary 90
Secondary 95
Secondary 99

Tertiary palette

bg-tertiary-10
bg-tertiary-20
bg-tertiary-30
bg-tertiary-40
bg-tertiary-50
bg-tertiary-60
bg-tertiary-70
bg-tertiary-80
bg-tertiary-90
bg-tertiary-95
bg-tertiary-99

Tertiary 10
Tertiary 20
Tertiary 30
Tertiary 40
Tertiary 50
Tertiary 60
Tertiary 70
Tertiary 80
Tertiary 90
Tertiary 95
Tertiary 99

Error palette

bg-error-10
bg-error-20
bg-error-30
bg-error-40
bg-error-50
bg-error-60
bg-error-70
bg-error-80
bg-error-90
bg-error-95
bg-error-99

Error 10
Error 20
Error 30
Error 40
Error 50
Error 60
Error 70
Error 80
Error 90
Error 95
Error 99

Neutral palette

bg-neutral-10
bg-neutral-20
bg-neutral-30
bg-neutral-40
bg-neutral-50
bg-neutral-60
bg-neutral-70
bg-neutral-80
bg-neutral-90
bg-neutral-95
bg-neutral-99

Neutral 10
Neutral 20
Neutral 30
Neutral 40
Neutral 50
Neutral 60
Neutral 70
Neutral 80
Neutral 90
Neutral 95
Neutral 99

Neutral Variant palette

bg-neutral-v-10
bg-neutral-v-20
bg-neutral-v-30
bg-neutral-v-40
bg-neutral-v-50
bg-neutral-v-60
bg-neutral-v-70
bg-neutral-v-80
bg-neutral-v-90
bg-neutral-v-95
bg-neutral-v-99

Neutral Variant 10
Neutral Variant 20
Neutral Variant 30
Neutral Variant 40
Neutral Variant 50
Neutral Variant 60
Neutral Variant 70
Neutral Variant 80
Neutral Variant 90
Neutral Variant 95
Neutral Variant 99

Contents

  • Primary
  • Secondary
  • Tertiary
  • Error
  • Neutral
  • Primary palette
  • Secondary palette
  • Tertiary palette
  • Error palette
  • Neutral palette
  • Neutral variant palette