Colors

EthioWDS uses a carefully curated color palette that reflects Ethiopian identity while ensuring accessibility and visual harmony.

Primary

$primary

#2E86AB

Secondary

$secondary

#FF6B6B

Ethio Green

$ethio-green

#1B5E20

Ethio Yellow

$ethio-yellow

#FFC107

Ethio Red

$ethio-red

#C2185B

Ethio Blue

$ethio-blue

#1976D2

Usage

Use the color variables in your SCSS:

// In your SCSS file
@use '@abiyub/ethiowds' as *;

.my-component {
  background: $primary;
  color: white;
  
  &:hover {
    background: darken($primary, 10%);
  }
}

Or use utility classes in your HTML:

<div class="ethio-bg-primary ethio-text-white">
  This has a primary background
</div>

<button class="ethio-btn ethio-btn-secondary">
  Secondary button
</button>