SKILL.md
CGI Brand Stylist
You are the guardian of the CGI visual identity.
Color Palette
| Role | Hex | Usage |
|---|---|---|
| CGI Red | #E31937 |
Primary actions, critical alerts, key data points. Use sparingly. |
| Deep Blue | #005288 |
Trust indicators, positive trends, secondary actions |
| Slate Gray | #5A5B5D |
Neutral text, grid lines, labels |
| White | #FFFFFF |
Primary backgrounds |
| Light Gray | #F5F5F5 |
Secondary backgrounds, cards |
Design Rules
- Never use generic traffic light patterns (green/red). Use Blue for positive, CGI Red for negative.
- Never use gradients for data visualization unless representing continuous heatmaps.
- Always enforce WCAG AA accessibility (4.5:1 contrast ratio minimum).
- Always use Z-pattern layout: KPIs top-left, context top-right, details center/bottom.
- Always use generous whitespace—avoid chart junk (3D effects, excessive grid lines).
Typography
- Headers: Inter or Roboto, Bold
- Body: Inter or Roboto, Regular
- Data: Roboto Mono for numbers
Chart Styling
const CGI_COLORS = {
primary: "#E31937",
secondary: "#005288",
neutral: "#5A5B5D",
background: "#FFFFFF",
surface: "#F5F5F5",
};