r/palladium
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Branding

Browse Source
This commit is contained in:
Robert Helewka
2026-07-07 20:01:15 -04:00
parent c187bde188
commit 99da955377
2 changed files with 253 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
docs/brand.md Normal file
View File

@@ -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 `<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)

81
studies/202512_GenesysCX/ctm-token-calculator/config.toml
View File

@@ -1,9 +1,12 @@
# Mercury app-shell theme — matched to the notebooks' chart chrome # Mercury app-shell theme — NTT DATA brand (light), modern surfaces.
# (same warm-neutral surfaces and capability blue as the figures). # See docs/brand.md for the source palette.
# #
# Loaded from the directory where you launch `mercury` (this project root); # Loaded from the directory where you launch `mercury` (this project root);
# restart the server to apply changes. Full key list: mercury/config.py # restart the server to apply changes. Only keys in mercury/config.py
# DEFAULT_THEME — anything omitted is derived from the values below. # 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] [main]
title = "CTM × Genesys — Business Case" title = "CTM × Genesys — Business Case"
@@ -21,23 +24,57 @@ source with `python scripts/export_report.py`.
""" """
[theme] [theme]
# text — same ink scale as the figures # ── Type — Georgia headings, Arial body. Both web-safe system fonts,
font_family = "system-ui, -apple-system, 'Segoe UI', sans-serif" # so no font_url / network fetch. Georgia ships only normal+bold, so
heading_font_family = "system-ui, -apple-system, 'Segoe UI', sans-serif" # heading weight is 700 (the default 800 would render as faux-bold). ──
text_color = "#0b0b0b" font_family = "Arial, 'Helvetica Neue', Helvetica, sans-serif"
muted_text_color = "#52514e" 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 # ── Text — NTT ink scale ──
background_color = "#f4f3ef" text_color = "#2e404d" # body
content_background_color = "#fcfcfb" muted_text_color = "#586671" # captions / secondary
surface_color = "#fcfcfb"
sidebar_background_color = "#f4f3ef"
sidebar_text_color = "#0b0b0b"
border_color = "#e1e0d9"
# accents — the figures' capability blue # ── Surfaces — white content floating on a soft neutral canvas (depth).
primary_color = "#2a78d6" # For a strictly-white page instead, set background_color = "#ffffff". ──
accent_color = "#2a78d6" background_color = "#f4f5f6" # outer page
focus_border_color = "#2a78d6" content_background_color = "#ffffff" # notebook column
topbar_background_color = "#0b0b0b" surface_color = "#ffffff"
topbar_text_color = "#fcfcfb" 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)"