# NTT DATA Brand Specification — Light Theme

> **You are generating for the LIGHT theme.** The body background MUST be
> white (`#ffffff`). Pair the generated HTML with the `NTTDATA_LIGHT.pptx`
> template (the template paints the slide background). If you need a dark
> deck instead, use [brand_dark.md](brand_dark.md) — do not mix themes.
>
> Belt-and-braces: set `<body data-theme="light">` so the converter cannot
> misclassify the theme.

Use these colors for all HTML document and slide generation.

## What the converter extracts from your CSS

The converter reads specific CSS selectors to populate its internal color
palette. Anything it cannot find falls back to the light-theme default.
**If you want a token to appear in the output, put it in the CSS under the
selector listed here** — do not rely on the defaults.

| Token | Read from selector |
|-------|---------------------|
| `surface_bg` | `body { background }` (also used for theme detection) |
| `body_fg` | `body { color }`, `p { color }` |
| `heading_primary_fg` | `h1 { color }`, `h2 { color }` |
| `heading_secondary_fg` | `h3 { color }` |
| `heading_section_fg` | `h4 { color }` |
| `secondary_fg` | `.subtitle { color }`, `.caption { color }` |
| `light_fg` | `.footnote { color }`, `footer { color }` |
| `border_fg` | `hr { border-color }`, `.divider { background }` |
| `gridline_fg` | `.chart-grid { stroke }` |
| `accent_primary` | `:root { --accent-primary }` or `.accent { color }` |
| `accent_navy` | `:root { --accent-navy }` |
| `card_bg` | `.card { background }` |
| `card_title_fg` | `.card h4 { color }` or `.card-title { color }` |
| `card_body_fg` | `.card p { color }` |
| `card_list_fg` | `.card li { color }` |
| `table_header_bg` / `table_header_fg` | `table th { background, color }` |
| `table_altrow_bg` | `table tbody tr:nth-child(even) { background }` |
| `table_border_fg` | `table td { border-color }` |
| `row_highlight_bg` / `_fg` | `tr.row-highlight td { background, color }` |
| `row_subtotal_bg` / `_fg` / `_border` | `tr.row-subtotal td { background, color, border-top }` |
| `callout_default_bg` / `_fg` | `.callout { background, color }` |
| `callout_success_bg` / `_fg` | `.callout-success { background, color }` |
| `callout_warning_bg` / `_fg` | `.callout-warning { background, color }` |
| `badge_<variant>_bg` / `_fg` | `.badge-<variant> { background, color }` |

Theme detection: the converter reads `<html data-theme="…">` /
`<body data-theme="…">` first; if neither is present it measures the
luminance of `body { background }` and picks light (> 0.35) or dark.

## Typography

Font: Noto Sans
Weights: Light (300), Normal (400), Bold (700)
Line height: 1.1 for headings, 1.5 for everything else

### Sizes
| Element | Size |
|---------|------|
| h1 | 28pt |
| h2 | 22pt |
| h3 | 16pt |
| h4 | 13pt |
| Body | 11pt |
| Small / footnotes | 9pt |
| Badges | 8pt |

## Text Colors

| Role | Hex | Usage |
|------|-----|-------|
| Heading primary | #151d2c | h1, h2 |
| Heading secondary | #005b96 | h3, section accents |
| Heading section | #374956 | h4, card titles |
| Body | #2e404d | Paragraph text |
| Secondary | #586671 | Subtitles, captions |
| Light | #828c94 | Footnotes, fine print |
| Inverse | #ffffff | Text on dark backgrounds |
| Link | #0072bc | Hyperlinks |

## Accent Colors

| Role | Hex |
|------|-----|
| Primary | #0072bc |
| Navy / primary dark | #005b96 |
| Light blue | #19a3fc |

## Status Colors

| Role | Hex |
|------|-----|
| Success | #00cb5d |
| Warning | #ffc400 |
| Alert | #ff7a00 |
| Danger | #e42600 |
| Info | #19a3fc |

## Surface Colors

| Role | Hex | Text |
|------|-----|------|
| Page background | #ffffff | — |
| Card background | #f8f8f8 | — |
| Card border | #d5d9db | — |
| Table header | #005b96 | #ffffff |
| Table alt row | #f8f8f8 | — |
| Table border | #d5d9db | — |
| Callout (default) | #005b96 | #ffffff |
| Callout (success) | #00cb5d | #ffffff |
| Callout (warning) | #ffc400 | #2e404d |
| Divider | #d5d9db | — |

## Chart Series Colors (in order)

Use these for bar charts, line charts, donut segments, and stacked charts.
Assign in order: first data series gets series-1, second gets series-2, etc.

| Series | Hex | Name |
|--------|-----|------|
| series-1 | #005b96 | Smart Navy |
| series-2 | #0072bc | Future Blue |
| series-3 | #19a3fc | Light Blue |
| series-4 | #00cb5d | Success Green |
| series-5 | #ffc400 | Warning Amber |
| series-6 | #ff7a00 | Alert Orange |
| series-7 | #e42600 | Danger Red |
| series-8 | #828c94 | Gray (overflow) |

## Chart Special Colors

| Role | Hex |
|------|-----|
| Gridlines | #ececec |
| Axis lines | #828c94 |
| Axis labels | #586671 |
| Waterfall base | #586671 |
| Waterfall decrease | #00cb5d |
| Waterfall increase | #ffc400 |
| Waterfall total | #005b96 |

## Badges

All badges use transparent background with colored bold uppercase text.

| Badge class | Text color |
|-------------|------------|
| badge-blue | #0072bc |
| badge-navy | #005b96 |
| badge-green | #00cb5d |
| badge-gray | #828c94 |
| badge-warning | #ffc400 |
| badge-danger | #e42600 |

## Card Accents

Left-border color by card class:

| Class | Border color |
|-------|-------------|
| card (default) | #0072bc |
| accent-navy | #005b96 |
| accent-success | #00cb5d |
| accent-warning | #ffc400 |
| accent-danger | #e42600 |

## Stat Cards

| Element | Color |
|---------|-------|
| Value text | #151d2c |
| Label text | #586671 |
| Detail text | #828c94 |
| Border | #d5d9db |
| Background | #f8f8f8 |

## Scenario Colors

| Scenario | Color |
|----------|-------|
| Conservative | #005b96 |
| Moderate | #0072bc |
| Aggressive | #00cb5d |

## Table Row Special Classes

### row-subtotal
- Background: #f8f8f8
- Text: #151d2c (bold)
- Top border: 1pt #005b96

### row-highlight
- Background: #005b96
- Text: #ffffff (bold)