Brand Guidelines

Plan less. Teach more.
Aligned to the product theme in packages/ui/src/theme.css. Version 1.1  ·  qlixapp.com  ·  2026
01 - Brand Essence

Who Qlix is for

Qlix is the teaching workspace with built-in AI that remembers your timetable, your classes, and what worked last lesson - so teachers stop replanning from scratch every Sunday.

Mission

Give teachers their evenings back. Keep the timetable, lesson plans, resources, and AI in one memory, so every lesson picks up where the last one left off.

Positioning

Not another tab, and not a generic chatbot that forgets your classes by Monday. Qlix is a single workspace - built by teachers, used in schools from the UK to New Zealand, and made for both school departments and private tutors.

Brand pillars

Built by teachers

Every decision comes from real classroom experience, not a product roadmap in the abstract.

One memory

Diary, plans, and AI share the same context. Nothing is re-entered, re-uploaded, or re-explained.

Teacher in control

The AI assists; the teacher decides. You review everything before you teach it - no black box.

Time reclaimed

The measure of success is a Sunday spent with family, not a laptop.

03 - Colour

Semantic palette

Each hue has one job in the product. Teal means action and selection; blue means information; rose–magenta means sharing; purple means AI. Mixing those roles makes the UI feel noisy.

Source of truth: packages/ui/src/theme.css and docs/DESIGN_SYSTEM.md. Hex values below are the light-mode approximations used in marketing and print. In product UI prefer Tailwind tokens (bg-primary, text-ai, …) over hard-coded hex.
Core brand & text
PRIMARY
Qlix Teal
#00786F · rgb(0,120,111)
--primary · bg-primary
Brand colour, CTAs, logo, links, selection, focus rings, toggles ON. Also aliased as --success.
DEEP
Teal Deep
#005C54
Derived hover (not a theme token)
Hover/active depth on solid teal surfaces and gradients.
INK
Text Heading
#111A2C
--text-heading · text-text-heading
Headings and primary body (also --foreground).
MUTED
Text Muted
#4C5564
--text-muted · text-muted-foreground
Captions, labels, helper copy. Product sets weight 300 on muted text.
Feature hues - one job each
AI
AI Purple
#A064DB
--ai · bg-ai
AI assistant, suggestions, generated content only.
SHARE
Share Magenta
#A95997
--share · bg-share
Sharing and collaboration CTAs - never selection or info.
INFO
Info Blue
#3C7EBE
--info · bg-info
Informational banners and solid info buttons. Never “selected”.
TIMETABLE
Timetable Cyan
#006C84
--timetable · bg-timetable
Timetable / diary chrome between primary and info.
Soft blues & status
SECONDARY
Sky Soft
#D7EAFF
--secondary · bg-secondary
Soft chips and chrome (subjects). Not a second brand green; not share.
MUTED
Sky Mist
#EBF7FF
--secondary-muted · bg-secondary-muted
Quieter blue fills for chips and callouts.
WARN
Warning Amber
#E3B33E
--warning · text-warning
Cautions and non-blocking warnings.
ERROR
Destructive
#E7000B
--destructive · bg-destructive
Errors and destructive actions only.
Neutrals & surfaces
SELECT
Selection Subtle
≈ #F0F9F8
--selection-subtle · bg-selection-subtle
Whisper-green selected cards and rows - tinted, not solid green.
MUTED
Muted Surface
#F9FAFB
--muted · bg-muted
Subtle panels, inactive chrome.
ACCENT
Accent Grey
#F3F4F6
--accent · bg-accent
Ghost / draft / neutral hover fills.
BASE
White
#FFFFFF
--background · bg-background
Primary background. Border / input: #E5E7EB (--border).

Usage rules

Lead with white and ink for a calm feel; teal is the one colour that should mean “act” or “this matters.” Blue never means selected. Green never means shared. Purple is reserved for AI. Qlix Teal on white and white on Qlix Teal both pass WCAG AA for standard text. Never set muted text on teal, or accents as long body copy.

04 - Typography

Typefaces & scale

Two typefaces do all the work: Manrope for headlines and Inter for everything you read. Product UI uses a semantic type scale - prefer role tokens over arbitrary pixel sizes.

Display & Headings - Manrope · font-heading
Plan less. Teach more.
Product weights: 600 SemiBold (titles), 700 Bold (page/section). Marketing may use 800 for hero display.
Body & UI - Inter · font-sans
Qlix keeps your timetable, lesson plans, and resources in one place - with AI that already knows which class you're teaching and what you covered last lesson.
Weights: 300 Light (muted), 400 Regular (default UI), 500 Medium (active chrome), 600–700 sparingly.

Product type scale

text-page · 32px / 700Page title
text-section · 24px / 700Section heading
text-title · 18px / 600Card / lesson title
text-ui · 14px / 400Menus, buttons, inputs
text-label · 12px / 500Form labels, badges
text-micro · 10px / 300Sidebar group labels
Marketing lead · 18pxMarketing lead paragraph (site only)

Set headings tight (letter-spacing around −0.02em to −0.03em) and body at a comfortable line height. Keep marketing line length to roughly 60–75 characters.

05 - Voice & Tone

How Qlix sounds

Qlix speaks teacher-to-teacher: warm, direct, and grounded in the real week. It respects the reader's time and intelligence, and never oversells.

Empathetic

We know the Sunday-night dread. We name the problem before the product.

Plain-spoken

Short sentences, real classroom words. British spelling - "colourful", "markbook".

Specific

"Your 9B from your 10A," not "personalised learning at scale."

Reassuring

The teacher stays in control. Work is safe, backed up, and exportable.

We say / We don't

We say We don't
"Spend Sunday with your family, not your laptop." "Maximise your productivity metrics."
"AI that knows your 9B from your 10A." "Cutting-edge AI-powered EdTech solution."
"You stay in control - review everything before you teach it." "Fully automated lesson generation."
"Built by teachers." "Disrupting the education industry."

Tone words

WarmPracticalConfidentDown-to-earthHumanEncouragingUnhypedTrustworthy

"You didn't become a teacher to fight your planner."

Signature line - empathy first, product second.
06 - Messaging

Taglines & key messages

A consistent set of lines that carry the promise across the site, apps, and marketing.

Primary tagline

Plan less. Teach more.

AI that knows your classes.

Core messages

Stop replanning from scratch every week
One workspace remembers your timetable, plans, and what worked - so Monday picks up where Friday left off.
AI that opens inside the lesson
Not a blank chatbot. The assistant already sees the plan, the class, and last week's feedback.
From scores to insights
Homework, exit tickets, and quizzes feed one Learning Record that flows straight into next week's plan.
Safe for a career's worth of plans
Daily backups, export anytime, move schools without losing a decade of lessons.

Proof & reassurance

Built by teachersHelping teachers plan since 2017UK to New Zealand7-day free trial · No credit cardYou stay in control

Calls to action

Start for freeSee how AI worksBook a callExplore for schoolsExplore for tutors
07 - Imagery & Iconography

Visual style

Qlix uses friendly, flat vector illustrations of teachers and learners - approachable, human, and never corporate stock photography.

Illustration

Soft, rounded flat-vector scenes showing planning, teaching, and progress. Favour illustrations that use teal and the feature accents (AI purple, soft sky) so they sit naturally alongside the palette; avoid clashing primary reds or heavy shadows.

Iconography

Simple, consistent line/flat icons at a single weight. Icons support labels - they never replace clear words. Country flags and light spot icons signal global reach (UK, Australia, US, Canada, New Zealand).

Layout principles

Calm & roomy

Generous white space. One clear action per screen. The interface should feel like a tidy desk.

Rounded & soft

Rounded corners on cards and buttons echo the friendly, non-intimidating tone. Product radius: --radius 0.5rem.

Teal means action

Colour is used with restraint so the single teal CTA always stands out. Feature hues stay in their lanes.