From 5a11166ce8c22b60045f3da861b1fa4e2fda1ce8 Mon Sep 17 00:00:00 2001 From: Hermes Agent Date: Mon, 6 Jul 2026 10:21:48 +0000 Subject: [PATCH] =?UTF-8?q?add=20v1.0=20brand=20guide=20from=20Claude=20?= =?UTF-8?q?=E2=80=94=20new=20color=20palette,=20Calibri=20font,=20layout?= =?UTF-8?q?=20grid,=20design=20tokens?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- references/brand-guide.md | 301 ++++++++++++++++++++++++++ references/branding-template-guide.md | 10 +- 2 files changed, 307 insertions(+), 4 deletions(-) create mode 100644 references/brand-guide.md diff --git a/references/brand-guide.md b/references/brand-guide.md new file mode 100644 index 0000000..c06397b --- /dev/null +++ b/references/brand-guide.md @@ -0,0 +1,301 @@ +# Synthesia Ltd. — Corporate Document Brand Guide +### Version 1.0 · For SDS / TDS / Invoices / Letters document pipeline + +--- + +## 0. Audit of the Old Template + +For reference, here's what the current template actually contains (extracted from `old_blank.doc`): + +| Element | Old value | +|---|---| +| Font | Arial only, no weight/size system | +| Header | One wide logo image (2480×458px), dominant blue `#004C98` | +| Footer | A thin flat blue bar image (2482×43px), no page numbers, no company data | +| Body | Blank — no heading styles, no table styles, no defined margins beyond Word defaults | +| Colors | Just the logo blue; no defined palette | + +**Logo and its blue are kept exactly as-is** per your instructions — everything below is built to complement it, not replace it. + +--- + +## 1. Color Palette + +| Role | Name | Hex | Usage | +|---|---|---|---| +| Primary | Synthesia Blue | `#004C98` | Logo (unchanged), header rule, table header fill, H1 headings, links | +| Primary Dark | Deep Blue | `#00335F` | Footer bar, pressed/emphasis states, dense fills | +| Secondary | Slate | `#2B2E33` | Body text, H2/H3 headings | +| Muted Text | Steel Gray | `#5B6670` | Footer text, captions, doc metadata, page numbers | +| Accent | Certification Blue | `#0071B8` | Left accent bars on H2, dividers, icon tint — matched to the new TÜV Rheinland badge blue so both blues in the document feel intentional together | +| Highlight / Table Stripe | Ice Tint | `#F2F6FA` | Alternating table rows, callout box backgrounds | +| Border / Rule | Hairline Gray | `#D9E1E8` | Table borders, section dividers | +| Background | White | `#FFFFFF` | Page background | +| Warning (SDS hazard use only) | Safety Amber | `#C77700` | Hazard/precaution call-outs — kept separate from brand blue so it isn't confused with brand color | +| Danger (SDS hazard use only) | Safety Red | `#B3261E` | Critical hazard call-outs only | + +> Note: Amber/Red are reserved strictly for GHS/hazard signal words inside SDS content — never used decoratively — so hazard cues stay visually distinct from brand styling. + +--- + +## 2. Typography + +Calibri replaces Arial as the base family — a genuinely more modern, rounder sans-serif that still ships by default with Word and LibreOffice (as metrically-compatible "Carlito"), so there's zero font-embedding risk on a generation server. + +| Style | Font | Size | Weight | Color | Notes | +|---|---|---|---|---|---| +| Document Title (H1) | Calibri | 18pt | Bold | `#004C98` | All-caps optional for TDS/SDS titles | +| Section Heading (H2) | Calibri | 13pt | Bold | `#2B2E33` | Left accent bar, see §7 | +| Subsection (H3) | Calibri | 11pt | Bold | `#2B2E33` | Small-caps style via manual caps if needed | +| Body text | Calibri | 10pt | Regular | `#2B2E33` | Line spacing 1.15 | +| Table header text | Calibri | 9.5pt | Bold | `#FFFFFF` | On `#004C98` fill | +| Table body text | Calibri | 9.5pt | Regular | `#2B2E33` | | +| Footer text | Calibri | 7.5pt | Regular | `#5B6670` | | +| Caption / metadata (doc ref, rev, date) | Calibri | 8pt | Regular | `#5B6670` | | +| Emphasis | Calibri | inherit | Bold or Italic | inherit | Bold for key terms, italic for chemical/product names | + +> If the pipeline can guarantee font embedding on every generation target, a geometric sans like Montserrat (headings) paired with Lato (body) would push further into "modern" territory — but that adds embedding complexity and licensing checks. Calibri is the safe default; flag if you want the embedded-font route explored. + +--- + +## 3. Layout Grid (A4) + +``` +Page size: A4 — 210mm × 297mm +Margin top: 3.6 cm (clears the header logo + rule) +Margin bottom: 2.8 cm (clears the footer bar + text) +Margin left: 2.2 cm +Margin right: 2.2 cm +Header distance: 1.0 cm from top edge +Footer distance: 1.0 cm from bottom edge +Paragraph spacing: 6pt before / 6pt after +Line spacing: 1.15 +Gutter: 0 (single column body; tables may span full text width) +``` + +--- + +## 4. Header Design + +``` +┌──────────────────────────────────────────────────────────┐ +│ [LOGO — corrected crop, left] [ISO SEAL — right] │ +│ SDS-2026-014 · Rev 3 · 2026-07-04 │ +├──────────────────────────────────────────────────────────┤ ← 1pt rule, #004C98 +``` + +- Logo: left-aligned, scaled to **1.5 cm height**, correct full crop (hexagon mark fully intact + wordmark), locked aspect ratio, never stretched. +- ISO seal: right-aligned in the same row as the logo, scaled to **1.5 cm height** — the compact certified-seal icon only (triangle + "TÜVRheinland" + "CERTIFIED" banner), not the wider text panel. +- Below both: one slim right-aligned line — doc code · revision · date, muted gray, 8pt. No document-type label here anymore (it was redundant with the H1 title in the body), which keeps the header to just two lines total plus the rule. +- A single **1pt horizontal rule in `#004C98`** separates the header block from body content. + +--- + +## 5. Footer Design + +``` +├──────────────────────────────────────────────────────────┤ ← 1pt rule, #D9E1E8 +│ Synthesia Ltd. · VAT BG121306542 · Todor Radunchev 9, │ +│ Krivina 1588, Bulgaria · +359 2 974 4968 · office@synthesia.bg │ +│ Certified ISO 9001:2015 · ISO 14001:2015 · ISO 45001:2018 │ +│ — TÜV Rheinland, ID 9105074744 (italic) │ +│ SDS-2026-014 Page 1 of 6 │ +└──────────────────────────────────────────────────────────┘ + ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ← 3pt solid bar, #00335F +``` + +- Top line: full company legal + contact block, centered, 7.5pt, `#5B6670`. +- Second line: certification statement in small italic text, centered, 7pt, `#5B6670` — the visual seal lives in the header (see §4); this line keeps the compliance detail (cert numbers, TÜV ID) documented without repeating the graphic. +- Third line: document ref (left) and "Page X of Y" (right) on the **same line**, 8pt — merged into one row rather than stacked, to keep the footer from feeling bloated. +- Bottom: a slim **3pt solid brand-blue bar** (`#00335F`) as the page's visual anchor, drawn as a table/shape so it scales losslessly at any print resolution. + +> **Certification update:** the visual ISO seal moved from the footer up into the header (top-right, alongside the logo) — a cleaner, more prominent placement than buried at the page bottom. The certification details (ISO 9001:2015 / 14001:2015 / 45001:2018, TÜV Rheinland, ID 9105074744) stay as small text in the footer so nothing is lost, just de-emphasized relative to the header seal. + +--- + +## 6. Table Styles + +| Element | Style | +|---|---| +| Header row fill | `#004C98` | +| Header row text | White, bold, 9.5pt | +| Body row (odd) | White background | +| Body row (even) | `#F2F6FA` background | +| Borders | 0.5pt, `#D9E1E8`, all sides | +| Cell padding | 4pt top/bottom, 6pt left/right | +| First column (parameter/property names in SDS tables) | Bold, `#2B2E33` | +| Row height | Auto, minimum 0.6cm | + +--- + +## 7. Section Heading Styles + +- **H1 (Document Title):** 18pt bold, `#004C98`, followed by a 2pt bottom border in `#004C98`, 12pt space after. +- **H2 (Section, e.g. "3. Composition/Information on Ingredients"):** 13pt bold `#2B2E33`, preceded by a **4pt-wide vertical accent bar** in `#4A7FB5` (implemented as a left cell border or a thin colored table column), 10pt space before / 6pt after. +- **H3 (Subsection):** 11pt bold `#2B2E33`, no rule, 8pt space before / 4pt after. +- Numbering: keep GHS/SDS-mandated numbering (e.g. "3.1") in the same weight/color as the heading text — no separate numbering color. + +--- + +## 8. Design Tokens (for python-docx / pandoc implementation) + +```yaml +colors: + primary: "004C98" + primary_dark: "00335F" + secondary_text: "2B2E33" + muted_text: "5B6670" + accent: "0071B8" + highlight: "F2F6FA" + border: "D9E1E8" + background: "FFFFFF" + warning_amber: "C77700" # SDS hazard use only + danger_red: "B3261E" # SDS hazard use only + +fonts: + family: "Calibri" # falls back to metric-compatible "Carlito" on LibreOffice + sizes_pt: + h1: 18 + h2: 13 + h3: 11 + body: 10 + table_header: 9.5 + table_body: 9.5 + footer: 7.5 + caption: 8 + weights: + h1: bold + h2: bold + h3: bold + body: regular + +page: + size: A4 + width_mm: 210 + height_mm: 297 + margin_top_cm: 3.6 + margin_bottom_cm: 2.8 + margin_left_cm: 2.2 + margin_right_cm: 2.2 + header_distance_cm: 1.0 + footer_distance_cm: 1.0 + +rules: + header_rule_pt: 1 + header_rule_color: "004C98" + footer_rule_pt: 1 + footer_rule_color: "D9E1E8" + footer_bar_pt: 3 + footer_bar_color: "00335F" + h1_underline_pt: 2 + h1_underline_color: "004C98" + h2_accent_bar_pt: 4 + h2_accent_bar_color: "0071B8" + +table: + header_fill: "004C98" + header_text_color: "FFFFFF" + row_alt_fill: "F2F6FA" + border_pt: 0.5 + border_color: "D9E1E8" + cell_padding_pt: [4, 6, 4, 6] # top, right, bottom, left + +logo: + file: "corrected full logo crop (hexagon mark + wordmark, nothing cut off) — design/color unchanged" + height_cm: 1.5 + alignment: left + placement: header, top-left + aspect_ratio: locked + +iso_seal: + file: "TÜV Rheinland certified-seal icon only (triangle + wordmark + CERTIFIED banner), cropped from the full badge" + height_cm: 1.5 + alignment: right + placement: header, top-right (same row as logo) + aspect_ratio: locked + +certification_text: + content: "Certified ISO 9001:2015 · ISO 14001:2015 · ISO 45001:2018 — TÜV Rheinland, ID 9105074744" + placement: footer, small italic line + size_pt: 7 + +company: + legal_name: "Synthesia Ltd." + vat: "BG121306542" + address: "Todor Radunchev 9, Krivina 1588, Bulgaria" + phone: "+359 2 974 4968" + email: "office@synthesia.bg" + iso_certs: ["ISO 9001:2015", "ISO 14001:2015", "ISO 45001:2018"] + certification_body: "TÜV Rheinland" + certification_id: "9105074744" +``` + +```python +# python-docx quick reference +from docx.shared import Pt, Cm, RGBColor + +PRIMARY = RGBColor(0x00, 0x4C, 0x98) +PRIMARY_DARK = RGBColor(0x00, 0x33, 0x5F) +SECONDARY = RGBColor(0x2B, 0x2E, 0x33) +MUTED = RGBColor(0x5B, 0x66, 0x70) +ACCENT = RGBColor(0x00, 0x71, 0xB8) +HIGHLIGHT = RGBColor(0xF2, 0xF6, 0xFA) +BORDER = RGBColor(0xD9, 0xE1, 0xE8) + +section.top_margin = Cm(3.6) +section.bottom_margin = Cm(2.8) +section.left_margin = Cm(2.2) +section.right_margin = Cm(2.2) +``` + +For **pandoc**, drive the docx output through a `reference.docx` built once from this token set (Word "Styles" pane: Title/Heading 1/Heading 2/Normal/Table Grid mapped to the sizes/colors above) — pandoc will inherit all styling automatically from that reference file on every generation run. + +--- + +## 9. Sample Page Layout (ASCII mockup) + +``` +┌────────────────────────────────────────────────────────────┐ +│ [LOGO] [ISO SEAL] │ +│ SDS-2026-014 · Rev 3 · 2026-07-04 │ +├────────────────────────────────────────────────────────────┤ ← 1pt #004C98 +│ │ +│ SAFETY DATA SHEET │ H1, 18pt bold #004C98 +│ ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ ← 2pt underline +│ │ +│ ▍1. IDENTIFICATION │ H2, accent bar #0071B8 +│ Product name ................................ Product X │ body 10pt +│ Recommended use .............................. Industrial │ +│ │ +│ ┌────────────────────┬───────────────────────────────────┐ │ +│ │ PROPERTY │ VALUE │ ← header row #004C98/white +│ ├────────────────────┼───────────────────────────────────┤ │ +│ │ Appearance │ Clear liquid │ ← white row +│ ├────────────────────┼───────────────────────────────────┤ │ +│ │ pH │ 6.5 – 7.5 │ ← #F2F6FA row +│ └────────────────────┴───────────────────────────────────┘ │ +│ │ +│ ▍2. HAZARDS IDENTIFICATION │ +│ ⚠ WARNING — Causes skin irritation │ Amber #C77700, hazard use only +│ │ +├────────────────────────────────────────────────────────────┤ ← 1pt #D9E1E8 +│ Synthesia Ltd. · VAT BG121306542 · Todor Radunchev 9, │ footer text 7.5pt #5B6670 +│ Krivina 1588, Bulgaria · +359 2 974 4968 · office@synthesia.bg│ +│ Certified ISO 9001:2015 · 14001:2015 · 45001:2018 — TÜV ID... │ ← 7pt italic, text only +│ SDS-2026-014 Pg 1/6 │ ← merged one line +│ ██████████████████████████████████████████████████████████ │ ← 3pt bar #00335F +└────────────────────────────────────────────────────────────┘ +``` + +All headings/body text set in **Calibri**. + +--- + +## Notes for the Pipeline Team + +- Logo file and its blue are unchanged in design — only the crop was fixed (the earlier version accidentally clipped part of the mark; the corrected asset uses the full, correctly-proportioned logo). +- ISO badge updated to the current TÜV Rheinland combined-certification mark (ISO 9001:2015 / 14001:2015 / 45001:2018, `www.tuv.com`, ID 9105074744) — swap this one asset whenever certifications renew, without touching anything else. +- Logo and ISO badge are now separate image assets rather than baked into one banner image, specifically so either can be updated independently in the future. +- All rules/bars are drawn as vector shapes or table borders, not raster images — this removes the blurring/scaling issues in the old letterhead and keeps output crisp at any print DPI. +- Amber/Red are hard-scoped to GHS hazard content only, so automated hazard-statement rendering never accidentally inherits brand-blue styling meant for headings/tables. +- This single token set (§8) should back **every** document type (SDS, TDS, invoices, letters) — only the H1 title text and footer doc-ref prefix change per document type. diff --git a/references/branding-template-guide.md b/references/branding-template-guide.md index 6772247..e831d4e 100644 --- a/references/branding-template-guide.md +++ b/references/branding-template-guide.md @@ -1,7 +1,9 @@ # Synthesia Ltd. — MSDS/TDS Branding & Templates -> Corporate identity for Safety Data Sheets (SDS) and Technical Data Sheets (TDS). -> Saved here for the MSDS/TDS compliance project only. +> **⚠️ Updated brand guide available** +> See [`references/brand-guide.md`](brand-guide.md) for the **current v1.0 brand identity** (colors, fonts, layout, design tokens). +> +> This file is legacy — kept for reference but the brand guide is the source of truth. ## Company Details @@ -12,8 +14,8 @@ | **Address** | Todor Radunchev 9, Krivina 1588, Bulgaria | | **Phone** | +359 2 974 4968 | | **Email** | office@synthesia.bg | -| **ISO certifications** | ISO 9001, ISO 14001, ISO 45001 | -| Web | — | +| **ISO certifications** | ISO 9001:2015, ISO 14001:2015, ISO 45001:2018 | +| **Certification body** | TÜV Rheinland, ID 9105074744 | ## Color Palette