Color Guideline

Introduction

The color system is designed to establish a cohesive visual identity for our FOSS UOK community. It ensures that all components across the website maintain consistency, accessibility, and usability. The palette includes primary, secondary, neutral, and alert colors, with defined variants for flexibility.

Color Palette

Primary Colors

These are the primary colors used to establish the visual identity and highlight important elements of the design.

• Background Dark Blue: #0f172a

  Used for the primary background of the website, providing a bold and immersive base.

• Text White: #ffffff

  Used for the main text and headings to ensure high contrast and readability against the dark background.

Secondary Colors

Secondary colors complement the primary palette, adding contrast and emphasis.

• Button Purple: #9333ea

  Used for primary action buttons to grab attention.

• Hover Purple: #7c25cc

  A slightly darker shade of purple for hover states on buttons to indicate interactivity.

Neutral Colors

Neutral colors are used for accents, inactive elements, and text.

• Light Gray: #bbc2cc

  Used for card surfaces or light backgrounds.

• Medium Gray: #6b6d72

  Used for secondary text, borders, or dividers.

• Dark Gray: #293041

  Used for inactive buttons or subtle text elements.

Alert Colors

Used for status indicators like success, warnings, or errors.

• Success Green: #27ae60

  Indicates success messages or confirmations.

• Warning Yellow: #f1c40f

  Highlights warnings or non-critical alerts.

• Error Red: #e74c3c

  Draws attention to critical errors or issues.