Reds10 Brand

Secondary (accents only — never use as primary palette)

Red tones (infographics/data viz only): #de134d → #ec868d → #f6c7c6 → #fbe4e3 Chalk tones: #e3ded2 → #bfbcb2 Charcoal tones: #40404c → #535b66 → #a7a3aa → #d1ced2

Colour usage rules:

• Red, Chalk, Charcoal are the three core colours — always default to these
• Teal may be used as a single accent (e.g. one card category, one chart series) — never use Teal as text colour on dark backgrounds or as a subtitle colour on section slides
• Never use Teal as a substitute for Chalk on dark/red backgrounds — text on dark backgrounds must be Chalk
• Never combine Teal and Sky Blue in the same design

Typography

Primary: Söhne — headlines, subheadings, body text in designed materials Weights: Leicht (light), Kraftig (medium), Halbfett (semibold), Fett (bold) Font files at /mnt/user-data/uploads/: Solhne_Leicht, SolhneSchmal_Buch, SolhneSchmal_Leicht, Solhne_Halbfett, Solhne_Kraftig (all .otf)

Secondary: Acumin Pro ExtraCondensed — display titles only, used sparingly

System font (Microsoft Office): Arial — always use Arial in Word/PowerPoint. Do NOT embed Söhne unless explicitly requested.

• Arial Bold for headings
• Arial Regular for body text, 10–11pt in Word, 10–14pt in PowerPoint

Logo Rules

• NEVER recreate the logo in SVG or text — always use the actual PNG/EPS files
• On red or dark backgrounds → Chalk logo (chalk mark + wordmark)
• On white/light backgrounds → Charcoal logo (charcoal mark + wordmark)
• Minimum clear space: 12mm all around
• Never rotate, distort, apply gradients or shadows, place over busy backgrounds

Logo files (repo root, all true RGBA PNGs with transparent backgrounds):

Logo usage rules:

• All logos are 766×208 RGBA PNGs converted from the official EPS vector sources at 300dpi
• On red backgrounds: use chalk primary (preferred) or charcoal primary
• On white backgrounds: use charcoal primary
• On chalk backgrounds: use charcoal primary
• On charcoal backgrounds: use chalk primary or white primary
• In Word/PowerPoint docx-js: always use type: "png" in ImageRun
• Never use the old JPEG source files — they have no transparency

Important — charcoal logo colour consistency: The EPS-to-PNG conversion can produce slightly different shades in the mark vs text. If visible, recolour all pixels to a single target (the text colour) while preserving the alpha channel.

For Word/PowerPoint: use the PNG directly (white/chalk background slides — charcoal logo; red/dark slides — chalk logo).

Word Documents (.docx) — Critical Layout Rules

General:

• Arial Bold for headings, Arial Regular for body text (10–11pt)
• Charcoal 40404C for body text, headings
• Chalk E3DED2 for callout box backgrounds, label column backgrounds
• Red DE134D header band at top, Charcoal 40404C footer band at bottom
• Footer: Reds10 address left, page number right, both Chalk text on Charcoal

docx-js layout rules (learned from QA):

1. Header-to-content gap — first content element after header: spacing: { before: 40, after: 0 }. Never use 160+ — creates a large ugly gap.

2. Section headings must be table-based — NEVER use a Paragraph with border-left + indent for section headings. The indent breaks left-edge alignment with adjacent tables. Always implement as a single-cell Table (width = content width) with borders: { left: { style: SINGLE, size: 20, color: 'DE134D' } } and margins: { left: 160 } on the cell. This guarantees the left edge aligns with all other tables.

3. Body text — no indent — all body paragraphs must have zero left indent so they align flush with the page margin and tables above. Never add stray indent to body paragraphs.

4. Content width = 9746 DXA — A4 page (11906 DXA) with 1080 DXA margins each side = 9746 DXA content width. Every body table must be exactly this width. Never use 9026 or any other value — mismatched widths cause right edges to mis-align visibly.

5. Column widths must sum exactly to content width — if content width is 9746, column widths must add up to 9746. Any mismatch causes rendering artefacts.

6. Label column width — make label columns wide enough to prevent word-wrap on the longest label. Minimum 2000 DXA for behaviour/label tables so "Straightforward" fits on one line at 19–20pt Arial Bold.

7. Spacing between heading and content — always add a spacer paragraph { spacing: { before: 140, after: 0 } } between a section heading and the first content item below it (the "spur").

8. Use ShadingType.CLEAR — never ShadingType.SOLID for table cell shading or it renders black.

9. Cover page footer — use a proper Word Footer element on the cover section (not a table pushed down with a spacer paragraph). Set cover section bottom margin to 500 DXA, footer bar height 500 DXA (matching content pages), font size 16pt Chalk on Charcoal. This pins the bar to the page bottom regardless of content length.

10. Bullet lists — always use LevelFormat.BULLET with numbering config. Never use unicode bullet characters (•) — they create double bullets in Word.

PowerPoint (.pptx) — Critical Layout Rules

Slide structure:

• Title slide: Full red DE134D background, chalk logo top-left, large Chalk title, Chalk subtitle — no teal text anywhere
• Section divider slides: Full charcoal 40404C background, red left strip (full slide height), chalk logo top-right, large red number, Chalk title, Chalk subtitle (NOT teal — all text on dark slides must be Chalk or Red only)
• Content slides: White background, charcoal header bar (h=0.75") with red left accent strip, charcoal footer bar (h=0.275") with chalk text
• Chalk logo in header area on content slides; Chalk logo top-right on dark/section slides

Colour rules for PowerPoint (learned from QA):

• On all dark (charcoal) slides — subtitle and body text must be Chalk, never Teal
• Teal may be used only as an accent: icon badge backgrounds, a single card category header, a chart series — never as running text colour
• On content slides, Teal may appear as one accent colour alongside Red and Charcoal, but never for text on dark backgrounds

Red strip on section slides:

• Draw the red strip last (after footer) so it renders on top of the footer band and runs full slide height
• Width: 0.22", height: 5.625" (full slide height), x=0, y=0
• This ensures the strip is visually continuous from top to bottom with no gap at the footer

Layout and alignment (learned from QA):

1. Equal card gaps — when placing N cards across a slide, calculate mathematically: cardW = (totalWidth - leftMargin*2) / N - gap*(N-1)/N. Always verify cards + gaps sum exactly to available width. Never eyeball spacing.

2. Content must not overflow into footer — footer sits at y=5.35". Last content element bottom edge must be at or above y=5.20" to allow breathing room. For tall content, reduce card height or font size rather than let it clip.

3. Alert/callout bars align to card margins — the left and right edges of any full-width callout bar must match the left and right margins of the cards above it, not float independently.

4. Arrows between steps — use pres.shapes.LINE with line: { color: 'DE134D', pt: 3, endArrowType: 'arrow' }. Size pt=3 minimum for visibility. Thin lines (pt=1) are invisible at normal viewing distance. Centre arrows vertically with the step circles, not with the cards.

5. Number circles centred over cards — when using numbered circles above cards, calculate circX = cardX + (cardW - circleW) / 2 to ensure the circle is horizontally centred over its card.

6. Text box width on title slide — ensure title and subtitle text boxes are wide enough (at least 7.0") to avoid text being clipped. The decorative right panel overlaps the right portion of the slide.

7. Never use # with hex colours in pptxgenjs — color: "DE134D" is correct; color: "#DE134D" corrupts the file.

8. Never reuse option objects — pptxgenjs mutates objects in-place. Always use fresh objects for shadow, line, fill options: const makeShadow = () => ({ ... }).

HTML / React Components

:root {
  --r10-red: #de134d;
  --r10-chalk: #e3ded2;
  --r10-charcoal: #40404c;
  --r10-teal: #69c0b0;
  --r10-sky: #0099cc;
  --r10-font-primary: 'Söhne', Arial, sans-serif;
}

• Dark UI: Charcoal background, Chalk text
• Light UI: White background, Charcoal text, Red for CTAs and accents
• Use logo-chalk-transparent.png (base64) on red/dark backgrounds
• Teal as a single accent only — never as body text colour

Written Content

• Strapline: "Let's create amazing spaces"
• Vision: "To be the leader in industrialised delivery, revolutionising construction"
• Purpose: "To help everyone live, learn and thrive in amazing spaces"
• Always write Reds10 (capital R, no space) — never REDS10 in body copy
• Tone: confident, purposeful, expert, human — not corporate-jargon-heavy

Sector language:

• Defence: trusted partner, operational resilience, lived experience
• Education: DfE MMC framework, quality benchmarks, learning environments
• Healthcare: patient/staff experience, flexible, future-proof
• Justice: Category D expertise, rehabilitation, compliance
• Residential/Housing: sustainable, community, social value

Brand Dos and Don'ts

Contact for brand queries: Nicola Insley, Marketing Lead — [email protected]