Below is a quick‑reference brand style sheet plus the exact snippets you (or a VA) can drop into WordPress, Google Docs/Sheets, and Canva/Figma so every new asset—PDFs, landing pages, or the Campus Tools Selector workbook—matches the TeachOnline / TrainingSites look.
1 | Core Brand Palette 🎨
| Swatch | Hex | Usage Hints |
|---|---|---|
| #0B4F6C (Dark Blue) | Primary brand color; headings, nav bar, CTA buttons (default state). | |
| #20BF55 (Green) | Success states, accent buttons, check‑marks, badge fills. | |
| #6EC1E4 (Light Blue) | Highlights, links, info banners, hover states. | |
| #FFFFFF (White) | Canvas/background. | |
| #333333 (Dark Gray) | Body text on white. |
(Add a 10 % tint of Dark Blue for table row shading if needed.)
2 | Typography 🔤
| Element | Font | Weight / Size Suggestion |
|---|---|---|
| H1–H6 | Comfortaa (Google Fonts) | H1 700/40 px, H2 700/32 px, H3 600/26 px, H4 600/22 px |
| Body | Roboto 400 | 16 px; line‑height 1.5 |
| Buttons / Labels | Roboto 500 | Upper‑case letter‑spacing 0.5 px |
| Monospace (code snippets) | Roboto Mono 400 | 14 px |
3 | Quick‑Insert Snippets
a) WordPress (Add to “Additional CSS” or theme customizer)
/* 1. Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600;700&family=Roboto:wght@400;500&display=swap');
/* 2. Global font stack */
body { font-family: 'Roboto', sans-serif; color: #333333; }
h1, h2, h3, h4, h5, h6 {
font-family: 'Comfortaa', cursive;
color: #0b4f6c;
line-height: 1.2;
}
/* 3. Brand buttons */
.btn-primary, .wp-block-button__link {
background: #0b4f6c;
color: #ffffff;
border-radius: 6px;
padding: 0.6em 1.4em;
transition: background 0.2s;
}
.btn-primary:hover { background: #20bf55; } /* green hover */
a { color: #6ec1e4; }
a:hover { color: #20bf55; }
/* 4. Table row highlight */
.table-striped tbody tr:nth-child(even) { background: rgba(11,79,108,0.05); }b) Google Docs / Slides
- File ▸ Document Settings ▸ Fonts Heading: Comfortaa › Apply to H1–H6 Normal text: Roboto 11 pt
- Set page color to white; manually color headings #0B4F6C.
c) Google Sheets (workbook)
Format ▸ Theme ▸ Custom:
- Font: Roboto
- Accent color #1: #0B4F6C
- Chart palette: Dark Blue, Green, Light Blue. Then select rows 1–1 (headers) → Comfortaa 12 pt, Dark Blue.
d) Canva / Figma
- Upload Comfortaa & Roboto as brand fonts.
- Add three brand colors to “Brand Kit.”
- Save a Heading style (Comfortaa 700, 40 px, Dark Blue) and Body style (Roboto 400, 16 px, #333).
4 | Applying to the PDFs & Workbook
| Asset | Quick fix |
|---|---|
| LaunchPad Canvas / Tools Selector PDFs | Re‑export from Google Slides or Canva using the brand fonts & colors. Replace black section titles with #0B4F6C; use Light Blue boxes and Green check‑marks. |
| Campus Tools Selector Workbook | Already .xlsx — after importing to Sheets, switch theme to Roboto, set header row fill #0B4F6C with white text, alternating rows tinted 10 % Dark Blue. |
| Future slide decks | Apply custom theme: Comfortaa headings, Dark Blue title bar, Light Blue accent shapes. |
Need the PDF templates rebuilt with these styles?
I can re‑generate the LaunchPad Canvas or Tools Selector PDFs in brand colors and Comfortaa/Roboto fonts—just let me know which asset to refresh first.
