Ethio Telecom Colors

Official Ethio Telecom Design Tokens package providing brand colors as CSS variables and TypeScript helpers, ready for Next.js, React, Tailwind CSS, or Vanilla JavaScript projects.

This package serves as a single source of truth for Ethio Telecom brand colors, ensuring consistent styling across all applications.

✨ Features

• 🎨 Complete Ethio Telecom color palette
• 🧩 Semantic color aliases (primary, success, danger, warning, info, secondary)
• 🌗 Automatic light & dark mode support
• ⚡ Compatible with Next.js (App Router & Pages Router)
• 🧱 Framework-agnostic: React, Vanilla JS, Tailwind
• 📦 Tree-shake safe & production-ready
• 🏢 Enterprise-ready structure for shared component libraries

📦 Installation

npm install ethio-telecom-colors

or

yarn add ethio-telecom-colors

🎨 Usage Scenarios

1️⃣ Vanilla CSS

Import the core CSS variables:

@import "ethio-telecom-colors/css/colors.css";

Example:

.button-primary {
  background-color: var(--primary);
  color: var(--eth-black-950);
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

.button-primary:hover {
  background-color: var(--eth-lime-600);
}

2️⃣ React / Next.js (Inline Styles)

Use semantic colors or specific shades:

"use client";

import { ethColors, ethSemantic } from "ethio-telecom-colors";

export default function Home() {
  return (
    <div className="p-10 space-y-6">
      {/* Semantic color (defaults to 500) */}
      <div style={{ backgroundColor: ethSemantic.primary }} className="text-white p-4 rounded">
        Primary
      </div>

      {/* Specific shade */}
      <div style={{ backgroundColor: ethColors.Red[700] }} className="text-white p-4 rounded">
        Red
      </div>

      {/* Semantic with deep shade */}
      <button style={{ backgroundColor: ethSemantic.success[600] }} className="text-white px-6 py-3 rounded">
        Success Button
      </button>
    </div>
  );
}

3️⃣ Next.js + Tailwind CSS

Import the Tailwind theme file in globals.css:

@import "tailwindcss";
@import "ethio-telecom-colors/css/next.css";

Example Tailwind usage:

<div className="bg-ethLime-500 text-ethBlack-950 p-4 rounded">
  Ethio Telecom
</div>

4️⃣ TypeScript / Programmatic Access

Use JS/TS helpers for dynamic or programmatic colors:

import { ethColors, ethSemantic } from "ethio-telecom-colors";

// Access raw palette
console.log(ethColors.Lime[500]);      // #8DC63F
console.log(ethColors.Red[700]);       // #920C10

// Access semantic aliases
console.log(ethSemantic.primary + ""); // #8DC63F
console.log(ethSemantic.success[600]); // #008A3E

ethColors → full palette (use exact shades) ethSemantic → business-friendly aliases (primary, success, etc.), defaults to 500 if used as string.

🎨 Full Color Palette & Usage

| Color | 50 | 100 | 200 | 300 | 400 | 500 (Default) | 600 | 700 | 800 | 900 | 950 | Usage / Purpose | | -------------- | ------- | ------- | ------- | ------- | ------- | ------------- | ------- | ------- | ------- | ------- | ------- | ------------------------------------------------------ | | Light Blue | #E0F5FF | #C2EBFF | #8AD8FF | #4DC3FF | #0FAFFF | #008FD5 | #0070A8 | #005580 | #003A57 | #001B29 | #000E14 | UI highlights, informational alerts, secondary buttons | | Deep Blue | #E0F3FF | #BDE4FF | #80CCFF | #3DB1FF | #0099FF | #0072BC | #005C99 | #004370 | #002E4D | #001524 | #000C14 | Branding, headers, links, primary backgrounds | | Red | #FDE7E8 | #FBD0D1 | #F8A5A8 | #F4767A | #F14B51 | #ED1C24 | #C61016 | #920C10 | #63080B | #2F0405 | #180203 | Errors, danger actions, destructive buttons | | Green | #DBFFEB | #BDFFDB | #75FFB3 | #33FF8F | #00F06C | #00AB4E | #008A3E | #00662E | #00421E | #002410 | #000F07 | Success messages, confirmations, positive indicators | | Lime | #F3F9EB | #E8F3D8 | #D1E8B0 | #BCDD8D | #A5D166 | #8DC63F | #72A130 | #567A24 | #384F17 | #1C270C | #0E1406 | Primary brand color, call-to-action buttons | | Yellow | #FFF9E5 | #FFF4D1 | #FFE79E | #FFDB70 | #FFCF3D | #FFC20E | #D6A100 | #A37A00 | #6B5000 | #382A00 | #191300 | Warnings, notifications, subtle accents | | Gray | #FCFCFC | #FCFCFC | #F7F7F7 | #F5F5F5 | #F2F2F2 | #EEEEEE | #BFBFBF | #8F8F8F | #5E5E5E | #303030 | #171717 | Backgrounds, borders, dividers, disabled states | | Black | #EBEBEB | #D6D6D6 | #ADADAD | #858585 | #5C5C5C | #333333 | #292929 | #1F1F1F | #141414 | #0A0A0A | #050505 | Main text, headings, high contrast elements |

Tip: Use 50–400 shades for backgrounds, 500–600 for main actions, and 700–950 for text, hover, or emphasis.

🧩 Semantic Aliases

| Semantic | Default Shade | Usage | | ------------- | -------------- | ----------------------------------- | | primary | Lime 500 | Brand buttons, highlights | | secondary | Deep Blue 500 | Secondary actions, headers | | success | Green 500 | Success messages, confirmations | | danger | Red 500 | Error messages, destructive actions | | warning | Yellow 500 | Warnings, notifications | | info | Light Blue 500 | Informational messages, badges |

Semantic aliases are recommended for business logic and UI consistency.

🌗 Dark Mode

Dark mode is automatically supported using:

@media (prefers-color-scheme: dark) { ... }

Variables can also be overridden dynamically at runtime if needed.

🏢 Design Philosophy

• CSS variables first – maximum compatibility
• Semantic tokens – use meaningful names rather than raw colors
• Single source of truth – no duplicated palettes
• Framework-agnostic – works everywhere

Perfect for enterprise-scale applications and shared component libraries.

🚀 Versioning & Stability

• Follows semantic versioning
• Non-breaking changes only in minor/patch releases
• Safe for long-term enterprise use

Detail Color Palette

Light Blue – Informational / links / messages

• 50: #E0F5FF – Very light info background
• 100: #C2EBFF – Light info background
• 200: #8AD8FF – Info cards / badges
• 300: #4DC3FF – Info buttons / highlights
• 400: #0FAFFF – Medium info emphasis
• 500: #008FD5 – Default info color
• 600: #0070A8 – Darker info for hover states
• 700: #005580 – Info text on light backgrounds
• 800: #003A57 – Deep info accents / borders
• 900: #001B29 – Darkest info shade for typography
• 950: #000E14 – Near-black info for high contrast

Deep Blue – Secondary / headers / links / secondary actions

• 50: #E0F3FF – Very light header background
• 100: #BDE4FF – Light header / secondary panel
• 200: #80CCFF – Secondary buttons / highlights
• 300: #3DB1FF – Accent elements / hover states
• 400: #0099FF – Medium secondary emphasis
• 500: #0072BC – Default secondary color
• 600: #005C99 – Hover / focus
• 700: #004370 – Deep accents / sidebar backgrounds
• 800: #002E4D – Borders / dividers
• 900: #001524 – Text on light backgrounds
• 950: #000C14 – Darkest for high contrast

Red – Danger / error / alerts

• 50: #FDE7E8 – Very light error background
• 100: #FBD0D1 – Light error cards / banners
• 200: #F8A5A8 – Error badges / highlights
• 300: #F4767A – Buttons / icons for warnings
• 400: #F14B51 – Medium emphasis for errors
• 500: #ED1C24 – Default danger color
• 600: #C61016 – Darker red for hover / focus
• 700: #920C10 – Strong red for text / labels
• 800: #63080B – Dark red accents / borders
• 900: #2F0405 – Deep red for typography
• 950: #180203 – Darkest red for high contrast

Green – Success / confirmations / positive feedback

• 50: #DBFFEB – Very light success background
• 100: #BDFFDB – Light cards / banners
• 200: #75FFB3 – Success badges
• 300: #33FF8F – Highlight success buttons
• 400: #00F06C – Medium emphasis for success
• 500: #00AB4E – Default success color
• 600: #008A3E – Hover / focus
• 700: #00662E – Text on light backgrounds
• 800: #00421E – Borders / deep accents
• 900: #002410 – Darkest success typography
• 950: #000F07 – Near-black success for high contrast

Lime – Primary brand color / CTAs / highlights

• 50: #F3F9EB – Very light CTA background
• 100: #E8F3D8 – Light panels / highlights
• 200: #D1E8B0 – Secondary buttons / hover
• 300: #BCDD8D – Accent for cards / banners
• 400: #A5D166 – Medium CTA emphasis
• 500: #8DC63F – Default primary brand color
• 600: #72A130 – Hover / focus for primary buttons
• 700: #567A24 – Deep accents / sidebar
• 800: #384F17 – Borders / subtle highlights
• 900: #1C270C – Typography on light background
• 950: #0E1406 – Darkest shade for contrast / logos

Yellow – Warning / attention / alerts

• 50: #FFF9E5 – Very light warning background
• 100: #FFF4D1 – Light cards / banners
• 200: #FFE79E – Warning badges / labels
• 300: #FFDB70 – Highlight warning buttons
• 400: #FFCF3D – Medium emphasis for warnings
• 500: #FFC20E – Default warning color
• 600: #D6A100 – Darker warning hover
• 700: #A37A00 – Strong yellow accents
• 800: #6B5000 – Borders / deep highlights
• 900: #382A00 – Typography / dark warning text
• 950: #191300 – Darkest shade for high contrast

Gray – Neutral / backgrounds / borders

• 50: #FCFCFC – Very light background / subtle panels
• 100: #FCFCFC – Light cards / sections
• 200: #F7F7F7 – Panels / surfaces
• 300: #F5F5F5 – Backgrounds / subtle divisions
• 400: #F2F2F2 – Medium backgrounds
• 500: #EEEEEE – Default neutral color
• 600: #BFBFBF – Borders / secondary elements
• 700: #8F8F8F – Text on light backgrounds
• 800: #5E5E5E – Deep text / icons
• 900: #303030 – Typography / headings
• 950: #171717 – Darkest gray for high contrast

Black – Text / high-contrast / emphasis

• 50: #EBEBEB – Very light text / subtle elements
• 500: #333333 – Default text color
• 950: #050505 – Highest contrast typography

📄 License

In‑House Solution Development © Ethio Telecom

👤 Author

Yonas – In‑House Solution Development, Ethio Telecom