bachko/msds-tds
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add v1.0 brand guide from Claude — new color palette, Calibri font, layout grid, design tokens

Browse Source
This commit is contained in:
Hermes Agent 2026-07-06 10:21:48 +00:00
parent b53d831059
commit 5a11166ce8
2 changed files with 307 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

301
references/brand-guide.md Normal file
View File

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

10
references/branding-template-guide.md
View File

@ -1,7 +1,9 @@
# Synthesia Ltd. — MSDS/TDS Branding & Templates # Synthesia Ltd. — MSDS/TDS Branding & Templates
> Corporate identity for Safety Data Sheets (SDS) and Technical Data Sheets (TDS). > **⚠️ Updated brand guide available**
> Saved here for the MSDS/TDS compliance project only. > 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 ## Company Details
@ -12,8 +14,8 @@
| **Address** | Todor Radunchev 9, Krivina 1588, Bulgaria | | **Address** | Todor Radunchev 9, Krivina 1588, Bulgaria |
| **Phone** | +359 2 974 4968 | | **Phone** | +359 2 974 4968 |
| **Email** | office@synthesia.bg | | **Email** | office@synthesia.bg |
| **ISO certifications** | ISO 9001, ISO 14001, ISO 45001 | | **ISO certifications** | ISO 9001:2015, ISO 14001:2015, ISO 45001:2018 |
| Web | — | | **Certification body** | TÜV Rheinland, ID 9105074744 |
## Color Palette ## Color Palette