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 — 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.
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)
