Idea Status Colors

A Simple UL with colored status badges

HTML

<ul>
  <li><a class="status created">created</a></li>
  <li><a class="status acknowledged">acknowledged</a></li>
  <li><a class="status referred">referred</a></li>
  <li><a class="status under_review">under review</a></li>
  <li><a class="status not_planned">not planned</a></li>
  <li><a class="status planned">planned</a></li>
  <li><a class="status in_progress">in progress</a></li>
  <li><a class="status completed">completed</a></li>
  <li><a class="status resolved">resolved</a></li>
  <li><a class="status duplicate">duplicate</a></li>
  <li><a class="status flagged">flagged</a></li>
  <li><a class="status rejected">rejected</a></li>
  <li><a class="status deleted">deleted</a></li>
</ul>

CSS

ul {list-style:none;padding:0;margin:0;}

a.status {
    font-family:'Helvetica', Arial, san-serif;
    margin:0 0 2px 0;
    padding:3px 5px;
    line-height:18px;
    color:#404040;
    font-size:11px;
    font-weight:bold;
    cursor:pointer;
    width:90px;
    display:block;
    text-align:center;
    box-sizing: border-box;
}
a.status.created {background-color:#FFF;border:1px solid #404040;}
a.status.acknowledged {background-color:#ddf4fd;}
a.status.referred {background-color:#53c9f4;}
a.status.under_review {background-color:#28a2d5;color:#FFF;font-weight:normal;letter-spacing:1px;}
a.status.not_planned {background-color:#76777a;color:#FFF;font-weight:normal;letter-spacing:1px;}
a.status.planned {background-color:#64c578;}
a.status.in_progress {background-color:#3db656;color:#FFF;font-weight:normal;letter-spacing:1px;}
a.status.completed {background-color:#925ba6;color:#FFF;font-weight:normal;letter-spacing:1px;}
a.status.resolved {background-color:#be4291;color:#FFF;font-weight:normal;letter-spacing:1px;}
a.status.duplicate {background-color:#ff9600;color:#FFF;font-weight:normal;letter-spacing:1px;}
a.status.flagged {background-color:#b63b3b;color:#FFF;font-weight:normal;letter-spacing:1px;}
a.status.rejected {background-color:#404040;color:#FFF;font-weight:normal;letter-spacing:1px;}
a.status.deleted {background-color:#000;color:#FFF;font-weight:normal;letter-spacing:1px;}