hackett-brand-guidelines

## The Hackett Group® Brand Design System

### PRIMARY COLOR PALETTE
CSS variables to use consistently:
--hackett-dark-blue: #184389;    /* Darkest blue - headers, emphasis */
--hackett-blue: #235CE8;         /* Primary brand blue - key elements, Digital World Class® */
--hackett-cyan: #00A6FB;         /* Bright cyan - accents, Operational Excellence */
--hackett-sky-blue: #4B99F7;     /* Mid-tone blue - Business Value Leaders */
--hackett-light-sky-blue: #80BCF9; /* Light blue - backgrounds, secondary fills */

### ACCENT COLOR (use sparingly)
--hackett-orange: #F4900C;       /* Orange - CTAs, directional arrows, stars, intentional emphasis only */

### TEXT & SHADING COLORS
--hackett-black: #000000;        /* Body text */
--hackett-dark-gray: #3A4952;    /* Secondary text */
--hackett-gray: #586D78;         /* Tertiary text */
--hackett-medium-gray: #7A8E9E;  /* Subtle text */
--hackett-light-medium-gray: #A6B1BC; /* Icons, divider lines, dashed lines, bullet points */
--hackett-light-gray: #C2C8CE;   /* Borders */
--hackett-soft-gray: #EFEFF1;    /* Light backgrounds */
--hackett-lightest-gray: #F4F7F9; /* Lightest backgrounds */

### CHART COLOR PALETTE (for data visualizations, in order)
For 2-color charts: Aqua Blue (#00B4D8), Sky Blue (#4B99F7)
For 3-color charts: add Ice Blue (#BBDEF9)
For 4-color charts: add Light Cyan (#73C9F9)
For 5-color charts: add Blue (#235CE8)
For 6+ color charts: add Dark Blue (#184389)
Extended palette: Teal (#1C98B5), Dark Teal (#12709E), Lavender Blue (#7C93F7), Periwinkle (#5E66D6), Soft Lilac (#AFBBF9), Dark Periwinkle (#323DA0), Light Aqua (#90E0EF), Aqua Blue (#00B4D8)

### BENCHMARKING COLOR ASSIGNMENTS
- Digital World Class®: Blue (#235CE8)
- Peer Group: Ice Blue (#BBDEF9)
- Business Value Leaders: Sky Blue (#4B99F7)
- Operational Excellence Leaders: Cyan (#00A6FB)
- Company/Destination Star: Orange (#F4900C)

### TYPOGRAPHY
- Primary headlines/large titles: Manrope (Google Fonts), weight: 300 (Light), size: large
  - Import: <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500&display=swap" rel="stylesheet">
  - Use ONLY for large-scale titles and primary headlines. Never for body text.
- Body text, subheadings, body headings: Inter (Google Fonts), weight: 400 (Regular), 600 (Semibold), 700 (Bold)
  - Import: <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
  - Body headings: Inter Bold, ~13pt equivalent
  - Subheadings: Inter Bold, ~10pt equivalent
  - Body copy: Inter Regular, ~10pt equivalent
  - Word highlights within body: Inter Semibold
  - Source captions: Inter Regular, ~8pt equivalent
  - Bullet point color: Medium Gray (#7A8E9E)

### LINES AND ARROWS
- Connecting lines: solid, 1.5pt width, orange accent (#F4900C), open arrowhead style
- Divider lines: solid, 0.75pt width, Light Medium Gray (#A6B1BC)
- Dashed lines: dashed, 0.75pt width, Light Medium Gray (#A6B1BC)
- Arrows: 1.5pt width, orange accent (#F4900C), open arrowheads for larger sections

### ICONOGRAPHY
- Style: single-color line art, no fills, consistent 2pt line weight
- Default icon color: Light Medium Gray (#A6B1BC)
- Icons may use one color from the primary palette
- White icons on vibrant backgrounds are acceptable

### LOGO
- The Hackett Group® — always include ® symbol
- Tagline: "Enabling Digital World Class® Performance"
- Use logo with tagline by default; without tagline only when size makes tagline illegible
- White logo version for use over solid color backgrounds (maintain high contrast)
- Logo mark is a 2x2 grid of blue squares (Sky Blue top-left, Blue top-right, Light Sky Blue bottom-left, Cyan bottom-right) with diagonal slash lines
- Safe space: use the size of the mark itself as the ruler for clear space around logo

### VISUAL STYLE
- Clean, professional, corporate consulting aesthetic
- Navy/dark blue gradient headers with white text
- White content sections with blue headings
- Stat callouts: large bold Manrope numbers with blue underline accent
- Cards/sections: subtle shadows, rounded corners (4-8px)
- Generous white space
- Photography: simple, well-composed, authentic, diverse; blue-tinted tech imagery for abstract backgrounds
- Background patterns: blue geometric/abstract light patterns when needed

### FOOTER
- Always include: "© [year] The Hackett Group, Inc. All Rights Reserved."
- Style: small Inter Regular text, dark gray or white on dark background