# 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 `` 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__bg` / `_fg` | `.badge- { background, color }` | Theme detection: the converter reads `` / `` 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)