---
version: alpha
name: "Boston Consulting Group"
description: "BCG combines strategic editorial authority with an applied-AI product layer: Henderson serif headlines, Henderson sans navigation, vivid green question and story actions, warm gray section bands, and image-led insight cards."
colors:
  bg: "#ffffff"
  surface: "#ffffff"
  surface-warm: "#f1eeea"
  surface-glass: "rgba(255, 255, 255, 0.70)"
  text: "#212427"
  text-muted: "#696969"
  text-on-image: "#ffffff"
  brand: "#96f878"
  brand-hover: "#78dc5d"
  accent: "#1d5f45"
  border: "#d9d7d3"
  on-brand: "#212427"
typography:
  display:
    fontFamily: "henderson-bcg-serif"
    fontSize: "72px"
    lineHeight: 1.55
    letterSpacing: "-0.025em"
  body:
    fontFamily: "henderson-bcg-sans"
    fontSize: "16px"
    lineHeight: 1.55
  mono:
    fontFamily: "SFMono-Regular"
rounded:
  button: "10px"
  card: "15px"
  pill: "9999px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "32px"
  xl: "64px"
---

## Overview

## Overview

BCG is light, editorial, and contemporary. Thin serif headlines establish strategic authority, while vivid green actions make AI and client-story pathways feel active and approachable.

## Colors

Use white and warm gray `#f1eeea` as the primary canvas. Vivid green `#96f878` is reserved for `Ask us a question` and key story actions; charcoal carries all reading text.

## Typography

Henderson BCG Serif is used at 40-64px with a light weight. Henderson BCG Sans handles uppercase labels, navigation, metadata, and body copy.

## Layout

Lead with one strategic position, follow with the AI question entry point, then move into client impact and current insights. Use full-width bands with constrained editorial grids.

Stack BCG Answer beneath the lead headline, then render client stories and insights in one clear stream. Maintain readable 40px mobile headings rather than shrinking the serif excessively.

## Elevation & Depth

Use translucent header and topic layers over imagery, with minimal shadow. Warm section backgrounds and image contrast should provide most of the depth.

## Shapes

Use 10px for topic chips and 15px for short actions. Keep article media and page sections square so the green controls remain distinctive.

## Components

Primary buttons are bright green with dark text and 15px corners. Image cards can use translucent black topic chips, while article titles remain outside heavy card frames.

Green actions can darken slightly on hover. Insight sliders require visible controls and pause behavior; reduced motion stops automatic changes and image zoom.

Dark text on green has strong contrast. Image chips need a sufficiently dark scrim, and AI question controls must expose purpose, loading, and answer status to assistive technology.

Use strategic but actionable language: clarity, applied AI, value creation, capabilities, client impact, and evidence. Headlines should identify a decision or consequence.

The primary reading system is light. Dark image cards and overlays provide contrast; a full dark theme should retain green action visibility and warm neutral distinctions.

BCG combines a consulting journal with a contemporary AI assistant. The vivid green layer makes direct inquiry feel native without diluting the editorial authority of the serif system.

## Do's and Don'ts

Do keep green actions selective, use real client imagery, and preserve article metadata. Do not turn every insight into a rounded card or use pale green as the entire page background.

Create a BCG-style consulting homepage with a white and warm-gray editorial canvas, light Henderson serif strategic headline, dark Henderson sans labels, vivid-green rounded `Ask us a question` action, client-impact imagery, and structured insight metadata.