reds10-brand

name

reds10-brand

description

Apply Reds10 Group brand guidelines to any output — documents, presentations, web components, or written content. Use this skill whenever producing ANY output for Reds10 that should look or sound on-brand: Word docs, PowerPoint decks, HTML, React components, reports, proposals, SOPs, marketing copy, or any other deliverable. Trigger whenever the user mentions "Reds10", "branded", "brand guidelines", or is clearly producing internal/external Reds10 content.

Reds10 Brand Guidelines Skill

Apply these rules to ALL Reds10 outputs. Read the relevant reference file for document-type-specific guidance.

Reference Files

• references/colours.md — full colour palette with hex/RGB/CMYK values
• references/typography.md — font usage rules and fallbacks
• references/voice-and-messaging.md — tone of voice and sector messaging

---

Quick Reference: Core Brand Colours

Primary

Name	Hex	RGB
Red (primary)	#de134d / DE134D	R222 G19 B77
Chalk	#e3ded2 / E3DED2	R227 G222 B210
Charcoal	#40404c / 40404C	R64 G64 B76

Secondary (accents only — never use as primary palette)

Name	Hex
Teal	#69c0b0 / 69C0B0
Sky Blue	#0099cc / 0099CC

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):

File	Colour	Use on
logo-chalk-primary.png	Chalk (#E3DED2) mark + text	Red backgrounds, Charcoal backgrounds
logo-charcoal-primary.png	Charcoal (#40404C) mark + text	White backgrounds, Chalk backgrounds, Red backgrounds
logo-white-primary.png	White mark + text	Red backgrounds, Charcoal 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

Do	Don't
Use Red, Chalk, Charcoal as the three core colours	Use Teal as a text colour on dark backgrounds
Use Chalk for all text on red/dark backgrounds	Use Teal as a subtitle colour on section slides
Use table-based section headings in Word (docx-js)	Use paragraph + indent for section headings — breaks alignment
Set all body tables to exact content width (9746 DXA in A4)	Use 9026 or other partial widths — causes right-edge misalignment
Draw the red strip last on section slides so it covers the footer	Draw the red strip first — footer will cover the bottom
Use pt=3 minimum for arrow lines in PowerPoint	Use pt=1 arrows — invisible at normal viewing distance
Verify card widths and gaps sum exactly to available slide width	Eyeball spacing — causes unequal gaps&�
Ensure last content element clears footer (y ≤ 5.20")	Let content overflow into the footer band
Use the actual logo PNG files	Recreate the logo in SVG or text approximations
Use Chalk logo (transparent PNG) on red/dark backgrounds	Use the chalk logo JPG/PNG with black background on coloured slides

---

Contact for brand queries: Nicola Insley, Marketing Lead — [e-mail]