bachko/msds-tds
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
5a11166ce8
msds-tds/references/brand-guide.md

16 KiB
Raw Blame History

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)

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