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.

Feb 28, 2025 - 13:44

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.