getXplain.ai — Brand Identity

Brand Identity · Version 1.1 · 2026

getXplain.ai

Brand Identity Guidelines

Where Curious Kids
Become Super Learners

getXplain.ai turns any topic into a fun, personalised adventure powered by AI. From Space to Science, Math to Art. Free to start. Safe for kids.

01 / 12

Name Concept

explain

Xplain.ai

Xplain = explain

The name Xplain is a deliberate twist on the word "explain" — the "ex" is replaced by "X", the most curious letter in the alphabet.

"X" stands for the unknown, the extraordinary, and the AI-powered magic that transforms any question into a crystal-clear answer.

"plain" grounds it — we make the complex simple, safe, and joyful for every child.

02 / 12

ex

Dropped

→

get

Action

+

X

The Unknown

+

plain

Simplicity

+

.ai

AI-Powered

=

getXplain.ai

X

The Unknown & Extraordinary

X marks what every child wonders about — the unsolved, the mysterious, the endlessly curious. It's the spark before every great discovery.

plain

Simple & Crystal Clear

Every concept — no matter how complex — deserves a clear, age-appropriate, step-by-step explanation that actually clicks.

.ai

Powered by Artificial Intelligence

The ".ai" suffix signals the engine beneath — adaptive AI that personalises every explanation to the individual child's pace and style.

get

An Invitation to Learn

"get" is a call to action — get the explanation, get smarter, get curious. It makes the brand feel alive, accessible, and immediate.

01 — Brand Foundation

Brand Overview

getXplain.ai is an AI-powered educational platform that makes learning magical for children. Our brand communicates wonder, intelligence, and trust through a cosmic visual language.

Brand Personality

Magical & Curious — We spark wonder and make learning feel like an adventure worth embarking on.
Intelligent & Trustworthy — AI-powered precision that parents and educators can trust fully.
Friendly & Approachable — Rounded shapes, warm accents, and a playful mascot kids love.
Modern & Premium — Clean layouts, glass effects, and a polished cosmic aesthetic.
Safe & Inclusive — COPPA compliant, no ads, available in 10+ languages. Learning for every child.

Taglines

Primary — Hero & App Store

"Where Curious Kids
Become Super Learners"

Secondary — Social & Compact

"AI-Powered Learning for Kids"

Our voice is warm, curious, and encouraging — never condescending. We celebrate every step of the learning journey, big or small.

50+

Subjects

1K+

Lessons

4.9★

App Rating

100%

Kid-Safe

03 / 12

02 — Identity System

Logo Usage

Always give the logo sufficient clear space — at least 50% of its width on all sides. Never stretch, rotate, or alter the logo's colours or proportions.

On Dark (Primary)

On Light

On Brand Gradient

Brand Name Colour Rendering

Segment	Display	Colour	Weight
get	get	White #FFFFFF	Nunito Black 900
X	X	Purple #7B4DFF → #a78bfa	Nunito Black 900, glow
plain	plain	White #FFFFFF	Nunito Black 900
.	.	Orange #F5A623	Nunito Black 900
ai	ai	Orange/Gold #F5A623 → #FFD700	Nunito Black 900

Wordmark — Transparent PNG

On Dark — right-click → Save

Surface — Deep Navy #1a0c52 — right-click → Save

Right-click any wordmark above and choose Save image as… to download the transparent PNG. Use the dark-background version for most digital contexts.

✓ Do

Use on dark or neutral backgrounds with ample clear space.
Maintain original proportions and full-colour version at all times.
Minimum logo height: 32px digital, 8mm print.
Prefer PNG with transparency on digital assets.

✕ Don't

Never use on busy or low-contrast backgrounds.
No drop shadows, outlines, rotation, or colour changes.
Never rearrange the logo and wordmark relationship.
Never apply the logo at less than minimum size.

04 / 12

02b — Identity System

App Icon Variations

One mark, four production variants. The bold colour-block X — flanked by an open book, a graduation cap, a chat bubble, a pencil and a gold star — sits directly on a plum-to-navy gradient lit by soft pink, violet and amber blobs. Each platform gets the format it needs: full-bleed art for the stores, two composited layers for Android adaptive, an alpha-only silhouette for themed icons and notifications, and crisp PWA assets for the web.

iOS

App Store Master

1024 × 1024
RGB · no alpha

Android

Play Store / Legacy

512 × 512
+ mipmap-mdpi → xxxhdpi

Adaptive

Foreground + Background

432 / 1024
Android 8.0+ (API 26)

Monochrome

Themed & Notification

Alpha-only silhouette
Android 13+ themed icons

Web · PWA

Favicon & Manifest

16 → 512
favicon.ico + manifest

Production Asset Reference

Platform	Primary file	Size	Use case
iOS App Store	ios/icon_AppStore_1024.png	1024 × 1024	App Store Connect submission · drop into Xcode AppIcon set; all other sizes auto-generated
iOS Home / Spotlight	ios/icon_180_iPhone_60pt_3x.png + siblings	29 → 180	Manual asset catalogue or legacy Xcode workflows
Android Play Store	android/playstore_512.png	512 × 512	Play Console "High-res icon" listing field
Android Legacy	android/legacy/mipmap-*/ic_launcher.png	48 → 192	res/ folders for pre-Android 8 launchers
Android Adaptive	android/adaptive/ic_launcher_foreground + background	432 + 1024	Android 8.0+ — two layers composited & masked by the OS
Android Monochrome	android/monochrome/ic_notification_themed_432.png	432 + densities	Themed icons (Android 13+) and status-bar notification
Web · Favicon	web/favicon.ico	16 / 32 / 48	Site root — browser tab, bookmarks, history
Web · PWA	web/icon-192.png · icon-512.png	72 → 512	site.webmanifest install icons, Android Chrome, iOS Safari add-to-home
Source	app-icons/README.md → render_master.py	2048 master	Single source of truth — tweak the Python render and regenerate the full pack

✓ Do

Keep the plum-to-navy gradient (#4A1F5C → #160C2E) full-bleed on iOS — the OS applies its own mask.
Ship adaptive foreground + background on Android, plus the monochrome layer for themed icons.
Use the PNGs in app-icons/web/ as drop-in favicons at the site root.
Keep the soft outer glow on the X mark — it lifts the icon off dark launcher wallpapers.
Regenerate the full pack from render_master.py when colours, blobs or the X mark change.

✕ Don't

Never embed alpha in the iOS App Store master — the store rejects RGBA.
Never round corners in the source render — every platform applies its own shape mask.
Never let the X mark or its props (book, cap, pencil, chat bubble, star) cross the inner 66 % safe zone in the adaptive foreground.
Never reintroduce a white card behind the mark — the v4 design intentionally drops it for impact at small sizes.
Never upscale a small PNG — go back to the 2048 master and re-export.

05 / 12

03 — Visual Language

Primary Colour Palette

Our core palette draws from a cosmic theme — deep space background with vibrant, energetic accents. Each colour has a specific role. Consistency across all touchpoints is essential.

#0B0820

Background — Deep Space

Foundation of the brand. Primary background for website, app, marketing, social media, and decks.

#7B4DFF

Primary — Purple

Hero of the palette. Primary buttons, CTA gradients, active states, links, focus outlines, glows.

#F5A623

Secondary — Orange / Gold

Draws attention. Heading highlights, CTA gradients, statistics, store badges, phone frame accent.

#3B82F6

Informational — Blue

Trust and information. Secondary accents, wordmark gradient, card borders, orbit decorations.

#9C2C6B

Accent — Magenta

Used sparingly for depth. Conic gradient rings, orbit dots, subtle card tints. Never as primary action.

#FF4B5C

Error — Coral

Errors, incorrect answers, warnings. "Wrong answer" states, error badges, destructive indicators.

#10B981

Success — Emerald

Success, correct answers, completion. "Right answer" states, check marks, positive feedback chips.

#1a0c52

Surface — Deep Navy

Card and panel fill on dark backgrounds. Glassmorphism overlay with 5–10% opacity white border.

Hero Wordmark GradientHeadings · hero title · wordmark text fill

CTA / Action GradientButtons · links · stats · highlights

Purple → BlueDecorative backgrounds · card accents

06 / 12

04 — Extended System

Extended Colours & Light Mode

Supporting colours and light mode tokens complete the system. Light mode is the default across website and mobile.

#a78bfa

Light Purple

#C4B0FF

Lavender

#60a5fa

Light Blue

#FFD700

Gold

#FF8C42

Warm Orange

#F4F1FF

Light BG

#EDE8FF

Surface Lt

#110D2B

Deep Ink

#3D3760

Muted Violet

🌑 Dark Mode

Default when JS reads xplain-theme = dark

--bg#0B0820

--surfacergba(255,255,255,.05)

--text-primary#FFFFFF

--text-secondaryrgba(255,255,255,.80)

--card-borderrgba(255,255,255,.10)

bg-effectStarfield canvas

☀️ Light Mode

Default experience · Mirrors XplaneColors.light

--bg#F4F1FF

--surface#FFFFFF

--text-primary#110D2B

--text-secondary#3D3760

--card-borderrgba(123,77,255,.20)

bg-effectSparklescape (soft motes)

07 / 12

05 — Type System

Typography

Two typefaces balance friendliness with clarity. Nunito brings warmth to headings; Space Grotesk delivers clean, modern body text.

Nunito — Headings & Display

Learning Made Magical

AI-powered personalised education for every child

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

AaRegular 400

AaSemiBold 600

AaBold 700

AaExtraBold 800

AaBlack 900

Space Grotesk — Body & UI

Clean. Modern. Readable.

Designed for comfortable reading at any size — on screens and in print alike.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

AaRegular 400

AaMedium 500

AaSemiBold 600

AaBold 700

Headings

Font: Nunito
Weight: 700–900
Hero: 36–52px
Section: 24–32px
Card: 18–22px

Body & UI

Font: Space Grotesk
Weight: 400–500
Body: 14–16px
Labels: 12–13px
Captions: 10–11px

Colour on Dark

Primary: #FFFFFF
Secondary: 80% white
Tertiary: 45% white
Accent: #a78bfa
CTA: #F5A623

08 / 12

Character Design

Front

09 / 12

App Showcase

Three views.
One seamless
experience.

getXplain.ai is crafted with care on every angle. The app interface is designed to delight — from the welcoming front screen to the clean side navigation and the focused back view. Every pixel serves the learner.

Side

Back

The Mascot Character System

Every emotion.
Every learning
moment.

Our mascot is the friendly face of getXplain.ai — appearing throughout the app to guide, celebrate, encourage, and empathise with every child's learning journey.

No Ads

COPPA Safe

4.9 Rating

50+ Subjects

10+ Languages

Happy

Learning streaks & completed lessons

Celebrating

Badge earned & quiz passed

Curious

Exploring new topics & subjects

Questioning

Asking the AI tutor anything

Confused

Needs help — AI steps in instantly

Ready

Neutral state — idle & ready to learn

10 / 12

06 — Application

Usage & Social Media

Apply the brand consistently across all channels to keep getXplain.ai instantly recognisable. Every touchpoint should feel like an extension of the cosmic learning universe.

Social Media Posts

Background: Always #0B0820 or space mesh gradient
Headlines: Nunito ExtraBold 800–900, white or purple→blue gradient fill
Body: Space Grotesk Regular/Medium, white at 70–85% opacity
CTA: Orange→gold gradient for buttons and action text
Glow: Subtle radial purple glow behind key visuals
Logo: Bottom-right or top-left corner, min 32px height

Posters & Banners

Hierarchy: Background → Purple (primary) → Orange (CTA) → semantic
Gradients over flat: Prefer gradients to maintain cosmic feel
Glass cards: 5–10% fill, 10–15% white border, backdrop blur
Starfield: Optional for atmosphere — never compete with text
Spacing: Generous padding, breathing room in all layouts
Corners: Rounded — 12–24px border-radius consistently

Website & App Assets

Icons: currentColor SVGs, stroke-based, 1.5–2px weight
Screenshots: Phone mock frame gradient #18182c → #28284a
Store badges: Official Apple/Google; orange gradient containers
Theme toggle: Fixed bottom-right, 52px circular, purple border
Animations: Ease-out, 200–400ms; subtle float/pulse only
Glassmorphism: backdrop-filter blur 12–20px on all cards

Colour Accessibility

11 / 12

07 — Quick Reference

Token Reference

Complete design token table for engineers and designers. All tokens are available as CSS custom properties and matched in the Flutter XplaneColors class.

Token	Dark Value	Light Value	Role
--bg	#0B0820	#F4F1FF	Page background
--surface	rgba(255,255,255,.05)	#FFFFFF	Cards, panels, modals
--text-primary	#FFFFFF	#110D2B	Headings, titles
--text-secondary	rgba(255,255,255,.80)	#3D3760	Body, labels
--purple	#7B4DFF		Primary actions, links, glows
--purple-lt	#a78bfa		Gradient text, chip fills, soft accents
--orange	#F5A623		CTAs, highlights, energy, wordmark .ai
--gold	#FFD700		CTA gradient pair, badges, achievements
--blue	#3B82F6		Info, trust, secondary accent
--magenta	#9C2C6B		Decorative depth, sparingly
--coral	#FF4B5C		Errors, wrong states
--green	#10B981		Success, correct states

Glassmorphism Opacity Patterns

5–10%

Card fills, frosted borders

25–45%

Dividers, inset highlights

60–80%

Secondary text hierarchy

100%

Primary text, CTA labels

12 / 12

getXplain.ai

Where Curious Kids Become Super Learners

Brand Identity Guidelines · Version 1.1 · April 2026

Every emotion. Every learning moment.

Every emotion.
Every learning
moment.