194 lines
5.7 KiB
Markdown
194 lines
5.7 KiB
Markdown
# 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) |