Teacher in Treble — Brand Hub

Palette

Colour system

The brand palette is built on a deep teal primary, a warm cream accent, and a light powder-blue mid tone. Never use pure white — always use the off-white background.

Usage rule: Primary dark (#2F4858) is for headings, buttons, and navbars. Primary light (#9FC7DA) is for interactive highlights, badges, and mid-text. Accent warm (#F5EBDD) is for section backgrounds and highlights. Off-white (#F7F5F2) is always the page background — never pure #fff.

Typeface

Typography

Poppins is the sole typeface across all TRBL products. Magnolia Script is used for decorative headings only — never for body text.

Display / H1

clamp(2.2rem,5vw,3.25rem) · 600 · −0.02em

Explore, Create, Grow

Section / H2

clamp(1.6rem,3vw,2.2rem) · 600 · −0.015em

Resources for every classroom

Body

16px · 400 · 1.7 leading

Clear, practical educational resources that support children to explore, create, and grow. Inclusive and accessible — ready to use in any educational setting.

Label / UI

13–14px · 500–600 · uppercase for tags

Section heading EYEBROW LABEL Badge

Magnolia Script

Decorative headings only

Teacher in Treble

Identity mark

Logo

Upload your logo files via the Edit panel (founder access only). The tiles below show usage variants — click any tile to download when files are uploaded.

Clear space: Always maintain a minimum clear space equal to the height of the capital "T" in the wordmark on all sides. Never rotate, distort, recolour, or apply effects to the logo.

Primary
Upload via Edit

Primary logo

Reversed
Upload via Edit

Reversed logo

On accent
Warm cream bg

On accent background

Icon only
Upload via Edit

Icon / favicon

Don’ts

Do not recolour

Do not stretch or distort

Do not add drop shadows

Do not use on busy backgrounds

Icon system

Icons

All icons across Teacher in Treble products use Remix Icons. Never use emojis in any interface — use Remix icon classes instead. Line variants are preferred; fill variants for active/selected states.

Rule: Always use ri-[name]-line for default states and ri-[name]-fill for active/selected states. Size icons at 1rem–1.5rem in body contexts, 1.25rem–2rem in headings.

ri-home-4-line

ri-music-2-line

ri-book-open-line

ri-shopping-bag-line

ri-calendar-line

ri-user-line

ri-checkbox-circle-line

ri-download-line

Full icon library at remixicon.com

Voice

Tone of voice

Teacher in Treble communicates in a way that is warm, direct, and professional — never corporate or patronising.

Clear

Plain language. No jargon. Say what you mean in as few words as possible.

Warm

We speak to educators as capable professionals. Human, never robotic.

Practical

Every sentence earns its place. Focus on the teacher's task, not our achievement.

Inclusive

Every setting, every child. Avoid assumptions about school type, resource level, or ability.

Style guide

Writing rules

Rule	Correct	Avoid
Name shorthand	Teacher in Treble, or TRBL in informal/code contexts	TiT, TeachTreble, T in T
Internal team	Team, team members	Staff, employees, workers
Sentence case	Product names, section titles	Title Case For Everything
Apostrophes	It's, don't, we'll	Unnecessary: the team's resources exist
Buttons	Download resource / Book a call	Click here / Submit / Go
Dates	12 June 2025 (day month year, no ordinals)	12th June / June 12, 2025
Currency	£4.99 (no space)	£ 4.99 / GBP 4.99
Emojis	Never in product interfaces — use Remix icons	✅ 🎸 👋 in UI

Sub-brand

TrebleTrack

The internal management platform. Used by the team only — not public-facing. Dark navy sidebar, teal accents, data-dense layout.

TrebleTrack

trebletrack.teacherintreble.co.uk — team access only

Sub-brand

Web Apps Hub

Interactive classroom tools. School licence access. Light, child-accessible interface.

Web Apps Hub

apps.teacherintreble.co.uk — school licence required

Sub-brand

Member Portal

Parent and ensemble member portal. Simplified, mobile-first interface.

Member Portal

portal.teacherintreble.co.uk — member access

Downloads

Brand assets

Upload logo and asset files via the Edit panel. Download links appear here once files are available.

Logo — primary (SVG)

Primary wordmark for digital use

Logo — reversed (SVG)

White/reversed variant for dark backgrounds

Logo — icon / favicon (PNG)

Square icon for app icons, favicons, badges

Brand colours — swatch file (ASE)

Adobe Swatch Exchange for Illustrator/Photoshop

Files

Templates

Standard document templates for the team. Edit panel allows the founder to update template links.

Email signature template

HTML email signature for all team members

Google Slides brand deck

Presentation template with brand colours and fonts