diff --git a/docs/brand.md b/docs/brand.md new file mode 100644 index 0000000..ef4c912 --- /dev/null +++ b/docs/brand.md @@ -0,0 +1,194 @@ +# 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) \ No newline at end of file diff --git a/studies/202512_GenesysCX/ctm-token-calculator/config.toml b/studies/202512_GenesysCX/ctm-token-calculator/config.toml index 67631c7..d91c90c 100644 --- a/studies/202512_GenesysCX/ctm-token-calculator/config.toml +++ b/studies/202512_GenesysCX/ctm-token-calculator/config.toml @@ -1,9 +1,12 @@ -# Mercury app-shell theme — matched to the notebooks' chart chrome -# (same warm-neutral surfaces and capability blue as the figures). +# Mercury app-shell theme — NTT DATA brand (light), modern surfaces. +# See docs/brand.md for the source palette. # # Loaded from the directory where you launch `mercury` (this project root); -# restart the server to apply changes. Full key list: mercury/config.py -# DEFAULT_THEME — anything omitted is derived from the values below. +# restart the server to apply changes. Only keys in mercury/config.py +# CSS_VARIABLE_MAP emit a CSS variable — anything else in DEFAULT_THEME is +# either derived or component-baked (e.g. success/warning/danger, slider +# track, widget bg) and silently no-ops here. Omitted keys are derived +# from the ones below. [main] title = "CTM × Genesys — Business Case" @@ -21,23 +24,57 @@ source with `python scripts/export_report.py`. """ [theme] -# text — same ink scale as the figures -font_family = "system-ui, -apple-system, 'Segoe UI', sans-serif" -heading_font_family = "system-ui, -apple-system, 'Segoe UI', sans-serif" -text_color = "#0b0b0b" -muted_text_color = "#52514e" +# ── Type — Georgia headings, Arial body. Both web-safe system fonts, +# so no font_url / network fetch. Georgia ships only normal+bold, so +# heading weight is 700 (the default 800 would render as faux-bold). ── +font_family = "Arial, 'Helvetica Neue', Helvetica, sans-serif" +heading_font_family = "Georgia, 'Times New Roman', Times, serif" +font_size = "15px" +font_weight = "normal" +heading_font_weight = "700" -# surfaces — warm neutrals from the chart chrome -background_color = "#f4f3ef" -content_background_color = "#fcfcfb" -surface_color = "#fcfcfb" -sidebar_background_color = "#f4f3ef" -sidebar_text_color = "#0b0b0b" -border_color = "#e1e0d9" +# ── Text — NTT ink scale ── +text_color = "#2e404d" # body +muted_text_color = "#586671" # captions / secondary -# accents — the figures' capability blue -primary_color = "#2a78d6" -accent_color = "#2a78d6" -focus_border_color = "#2a78d6" -topbar_background_color = "#0b0b0b" -topbar_text_color = "#fcfcfb" +# ── Surfaces — white content floating on a soft neutral canvas (depth). +# For a strictly-white page instead, set background_color = "#ffffff". ── +background_color = "#f4f5f6" # outer page +content_background_color = "#ffffff" # notebook column +surface_color = "#ffffff" +card_background_color = "#f8f8f8" # brand card +border_color = "#d5d9db" # brand border +border_radius = "10px" # modern rounding + +# ── Accents — Future Blue. primary_color also drives the Run button + focus. ── +primary_color = "#0072bc" +accent_color = "#0072bc" +focus_border_color = "#0072bc" +hover_background_color = "#eef5fb" # light blue tint +selected_background_color = "#dcecfa" + +# ── Sidebar — clean white, hairline divider ── +sidebar_background_color = "#ffffff" +sidebar_text_color = "#2e404d" +sidebar_title_color = "#151d2c" +sidebar_shadow = "1px 0 0 #d5d9db" + +# ── Top bar — deep NTT navy (brand heading-primary) ── +topbar_background_color = "#151d2c" +topbar_text_color = "#ffffff" +topbar_border_color = "rgba(255,255,255,0.08)" + +# ── Footer ── +footer_background_color = "#ffffff" +footer_text_color = "#586671" +footer_border_color = "#d5d9db" + +# ── Run button — subtle brand-blue gradient (else derives from primary) ── +run_button_background = "linear-gradient(180deg, #0087dc 0%, #0072bc 100%)" +run_button_background_hover = "linear-gradient(180deg, #1a93e6 0%, #0079c8 100%)" +run_button_text_color = "#ffffff" + +# ── Depth — soft, navy-tinted shadows (modern) ── +shadow_sm = "0 1px 2px rgba(21,29,44,0.05)" +shadow_md = "0 6px 18px rgba(21,29,44,0.08)" +shadow_lg = "0 16px 40px rgba(21,29,44,0.10)"