Semantic Naming in Web Design

In web design, using semantic naming for colors improves readability, consistency, and maintainability. Instead of using generic color names like black or gray, we assign names based on their function in the UI.

Key Concepts

1. Semantic Naming

Rather than naming colors after their appearance, we categorize them by purpose:

• Foreground (fg-) → Used for text and primary elements.
• Background (bg-) → Defines the main background colors.
• Border (border-) → Applied to outlines and separators.
• Accent (accent-) → Used for highlights or interactive elements.

2. Modifiers

Each color category can have different levels of importance:

• Primary (-primary) → The main color for a given category.
• Secondary (-secondary) → A supporting or alternative color.
• Base (-base) → The default background color.
• Elevated (-elevated) → A lighter background for elements that stand out.

Examples

Here’s how this system is applied:

Name	HSLA Value	Hex Code	Purpose
fg-primary	hsla(0,0,0,1.00)	#000000	Main text color (black)
fg-secondary	hsla(217,10,35,1.00)	#515863	Secondary text color (dark gray/blue)
bg-base	hsla(0,0,93,1.00)	#EDEDED	Default background color (light gray)
bg-elevated	hsla(0,0,100,1.00)	#FFFFFF	Elevated background (white)

How This Helps in Web Design

Using this approach provides several advantages:

• ✅ Easier maintenance → If you update a color, change it in one place (fg-primary) instead of multiple hex values.
• ✅ Better readability → Developers instantly understand what a color does.
• ✅ Consistent UI → Ensures colors are applied systematically.

Implementation in CSS

You can implement semantic color naming in CSS using variables:

:root {
  --fg-primary: #000000;
  --fg-secondary: #515863;
  --bg-base: #EDEDED;
  --bg-elevated: #FFFFFF;
}

body {
  background-color: var(--bg-base);
  color: var(--fg-primary);
}

h2 {
  color: var(--fg-secondary);
}

.card {
  background-color: var(--bg-elevated);
  border: 1px solid var(--fg-secondary);
}

This structured approach ensures scalability and clarity in your design system. 🚀