Color

Color provides the foundation for visual consistency in Amazium. A defined palette of brand, semantic, accent, and neutral colors is used to guide interactions, communicate status, and support UI elements such as buttons, forms, and alerts, with each color group serving a specific role within the system.

Brand

Brand colors provide the core visual identity and establish a consistent foundation across all products and experiences.

  1. color-brand-100
  2. color-brand-200
  3. color-brand-300
  4. color-brand-400
  5. color-brand-500 /
    --color-primary
  6. color-brand-600
  7. color-brand-700
  8. color-brand-800
  9. color-brand-900

Accent

Accent colors are used to highlight key elements and secondary actions without overpowering the primary brand.

  1. color-accent-100
  2. color-accent-300
  3. color-accent-500 /
    --color-secondary
  4. color-accent-700
  5. color-accent-800

Neutral / UI

Neutral colors are used for backgrounds, borders, and text to provide structure, clarity, and visual balance.

  1. --color-ui-0 /
    --color-snow
  2. --color-ui-100 /
    --color-haze
  3. --color-ui-200
  4. --color-ui-300
  5. --color-ui-400 /
    --color-mist
  6. --color-ui-500
  7. --color-ui-600
  8. --color-ui-700
  9. --color-ui-800
  10. --color-ui-900 /
    --color-black

Information

Information colors are used for interactive elements such as buttons, links, and inputs to guide user interactions.

  1. color-info-100
  2. color-info-300
  3. color-info-500
  4. color-info-700
  5. color-info-800

Positive

Positive colors are used to indicate successful actions, confirmations, or upward trends.

  1. color-positive-100
  2. color-positive-300
  3. color-positive-500
  4. color-positive-700
  5. color-positive-800

Negative

Negative colors are used to represent errors, destructive actions, or critical states requiring attention.

  1. color-negative-100
  2. color-negative-300
  3. color-negative-500
  4. color-negative-700
  5. color-negative-800

Warning

Warning colors are used to highlight cautionary actions, pending states, or prompts that require user attention.

  1. color-warning-100
  2. color-warning-300
  3. color-warning-500
  4. color-warning-700
  5. color-warning-800
  1. Foundations: BEM methology
  2. Foundations: Iconography