Color System Guide

Single source of truth for color decisions across all my software projects. Organized by semantic role with live component demos and copy-paste CSS.

CSS Variables

Drop into any project's root stylesheet. Reference these roles everywhere — never hardcode hex values in components.

:root {
  /* Primary */
  --color-primary:         #0087be;
  --color-primary-light:   #00aadc;
  --color-primary-lighter: #78dcfa;
  --color-primary-dark:    #005082;

  /* Neutral */
  --color-text:            #324155;
  --color-text-muted:      #6b80a0;
  --color-border:          #d2dee6;
  --color-bg-subtle:       #e8f0f5;
  --color-bg:              #f4f8fa;

  /* Accent */
  --color-accent:          #f0821e;
  --color-accent-dark:     #d54e21;

  /* Semantic */
  --color-success:         #4cb420;
  --color-warning:         #ffba00;
  --color-danger:          #dd3d36;
  --color-info:            #00aadc;
}

Semantic Color Map

Full Palette

Blue — Primary family

Gray — Neutrals, backgrounds, text

Accent — Warm highlights, featured items

Semantic — Status and feedback

UI Components

Buttons

.btn-primary   { background: #0087be; color: white; }
.btn-secondary { background: #324155; color: white; }
.btn-success   { background: #4cb420; color: white; }
.btn-warning   { background: #ffba00; color: #324155; }  /* dark text — contrast */
.btn-danger    { background: #dd3d36; color: white; }
.btn-info      { background: #00aadc; color: white; }
.btn-accent    { background: #f0821e; color: white; }
.btn-outline   { background: transparent; color: #0087be; border: 2px solid #0087be; }
.btn-ghost     { background: transparent; color: #324155; border: 2px solid #d2dee6; }

Alerts / Banners

.alert { padding: 0.85em 1.1em; border-radius: 2px; border-left: 4px solid; }

/* Light mode */
.alert-success { background: #f0fae8; border-color: #4cb420; color: #2d6b12; }
.alert-warning { background: #fff8e1; border-color: #ffba00; color: #7a5800; }
.alert-danger  { background: #fdf0ef; border-color: #dd3d36; color: #8b1c18; }
.alert-info    { background: #e8f7fd; border-color: #00aadc; color: #005a7a; }

/* Dark mode */
html[data-theme='dark'] .alert-success { background: rgba(76,180,32,0.12);  color: #7ed957; }
html[data-theme='dark'] .alert-warning { background: rgba(255,186,0,0.12);  color: #ffd55c; }
html[data-theme='dark'] .alert-danger  { background: rgba(221,61,54,0.12);  color: #ff7b76; }
html[data-theme='dark'] .alert-info    { background: rgba(0,170,220,0.12);  color: #78dcfa; }

Badges / Tags

.badge { display: inline-block; padding: 0.2em 0.6em; border-radius: 3px;
         font-size: 0.75em; font-weight: 700; text-transform: uppercase; }

.badge-primary   { background: #0087be; color: white; }
.badge-secondary { background: #324155; color: white; }
.badge-success   { background: #4cb420; color: white; }
.badge-warning   { background: #ffba00; color: #324155; }
.badge-danger    { background: #dd3d36; color: white; }
.badge-info      { background: #00aadc; color: white; }
.badge-accent    { background: #f0821e; color: white; }
.badge-neutral   { background: #d2dee6; color: #324155; }

Form States

.form-input         { border: 1.5px solid #d2dee6; background: white; color: #324155; }
.form-input:focus   { border-color: #0087be; box-shadow: 0 0 0 3px rgba(0,135,190,0.18); }
.form-input.error   { border-color: #dd3d36; box-shadow: 0 0 0 3px rgba(221,61,54,0.15); }
.form-input.success { border-color: #4cb420; box-shadow: 0 0 0 3px rgba(76,180,32,0.15); }

/* Dark mode */
html[data-theme='dark'] .form-input { background: #272A35; border-color: #353840; color: #BCBEC4; }

.hint-error   { color: #dd3d36; }
.hint-success { color: #4cb420; }
.hint-muted   { color: #6b80a0; }

Status Indicators

.status-dot { width: 0.6em; height: 0.6em; border-radius: 50%; display: inline-block; }
.dot-success { background: #4cb420; }
.dot-warning { background: #ffba00; }
.dot-danger  { background: #dd3d36; }
.dot-info    { background: #00aadc; }
.dot-neutral { background: #d2dee6; }

Typography

/* Text roles */
--color-text:        #324155;   /* headings + body */
--color-text-muted:  #6b80a0;   /* captions, meta, placeholders */

/* Links */
a           { color: #0087be; }   /* primary */
a.accent    { color: #f0821e; }   /* warm accent */

/* Feedback text */
.text-danger   { color: #dd3d36; }
.text-success  { color: #4cb420; }
.text-warning  { color: #7a5800; }   /* darkened — #ffba00 fails on white bg */
.text-muted    { color: #6b80a0; }

/* Dark mode adjustments */
html[data-theme='dark'] .text-danger  { color: #ff7b76; }
html[data-theme='dark'] .text-success { color: #7ed957; }
html[data-theme='dark'] .text-warning { color: #ffd55c; }
html[data-theme='dark'] .text-muted   { color: #85888F; }

Usage Rules

Contrast rules

White text safe on: #0087be, #005082, #00aadc, #324155, #dd3d36, #4cb420, #f0821e, #d54e21

Dark text required on: #ffba00, #78dcfa, #f4f8fa, #e8f0f5, #d2dee6 — always use #324155

Warning text on white: never use #ffba00 as text color — use #7a5800 instead (dark mode: #ffd55c)

Accent sparingly: orange (#f0821e, #d54e21) grabs attention fast — reserve for featured badges, highlights, marketing emphasis; not for standard UI feedback states