302 lines
16 KiB
Markdown
302 lines
16 KiB
Markdown
# 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: "assets/logo-synthesia.png" # 118×57px, hexagon mark + wordmark
|
||
height_cm: 1.5
|
||
alignment: left
|
||
placement: header, top-left
|
||
aspect_ratio: locked
|
||
|
||
iso_seal:
|
||
file: "assets/iso-seal-tuv-rheinland.png" # 56×57px, triangle + wordmark + CERTIFIED banner
|
||
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: `assets/logo-synthesia.png` (118×57px) — hexagon mark + wordmark, design/color unchanged from original.
|
||
- ISO seal: `assets/iso-seal-tuv-rheinland.png` (56×57px) — TÜV Rheinland combined-certification mark (ISO 9001:2015 / 14001:2015 / 45001:2018, 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.
|