IXL Brand System

Design principles

Five rules that settle arguments. When a token, layout or component choice is ambiguous, the principle higher on this list wins.

Logo

Two marks do 95% of the work: the IXL monogram for product surfaces and the IXL Learning lockup for corporate and marketing. Sub-brand lockups (Live, LevelUp, Takeoff) live in the logo library and are not re-drawn locally.

Monogram Product headers, app icons, favicons, anywhere below 96px wide.

Corporate lockup Marketing, print guides, decks, careers. Minimum width 132px so “LEARNING” stays legible.

Logo colors

#FFCA05 · PMS 116C

#00AEEF · PMS 2191C

#E7B809 · overlap

#545454 · wordmark

Backgrounds

Full color on white and on tints up to Neutral 100. On Blue 700 and darker use the all-white knockout. On Yellow or Green the mark loses its own yellow — set it in a white container instead of placing it directly.

#FFFFFF · preferred

Neutral 100 · ok

Blue 900 · knockout file

Yellow 500 · white container

Product family

The IXL Learning family. In a family lineup all marks sit on one optical baseline at equal visual weight — match cap height, not bounding box — and all render one-color when shown together.

Color system

Four brand colors anchor the palette. Everything else is a ramp built off them: 100 for surfaces, 300 for borders and charts, 500 for brand moments, 700 for text and interaction, 900 for high-contrast type.

Brand colors

Library swatches

The 2022 design-library sheet reproduced as-is: four working primaries, their paired background tints, the two text neutrals and the softer icon hues. Everything below resolves into a ramp step or a token in the next sections — this page is the reference for matching legacy files.

Base ramps

Step 500 is the brand or library value sampled from the kit; 100/300/700/900 are the derived tints and shades. 700 and 900 are the only steps cleared for text on white.

Audience accents

Carried over from the library: two three-stop gradients that signal who a surface belongs to. Use on hero bands, guide covers and section dividers — never behind body copy.

Extended chart palette

The secondary rows from the 2022 sheet, kept for data visualization and subject coding. Use in listed order so charts stay consistent across reports.

Color tokens

Three tiers. Designers and engineers only ever reference semantic and component tokens; base values change in exactly one place.

Typography

Roboto Slab for headings, Open Sans for everything else. Verdana is the legacy print/email fallback named in the kit — keep it in the stack, never as a first choice.

Grid & breakpoints

One fluid 12-column grid; column count drops at the two lower breakpoints. Max content width 1200px so tables stay scannable on classroom projectors.

Spacing system

A 4pt base with an 8pt rhythm for layout. Inside components use 4–12; between components use 16–32; between sections use 48–96.

Corner radius

Rounding carries the warmth. Small elements get small radii; nothing between 16 and full.

Elevation & effects

Shadows are cool-neutral and low-opacity — never black at full strength. Default to a 1px border; add elevation only when something genuinely floats.

Icon set

Two tiers. Brand icons are the supplied line-art set — 2px stroke, rounded caps, one brand hue per icon, with a 20%-opacity fill of the same hue for weight. UI icons are monochrome on a 24px grid and inherit text color.

Brand icons — values

Used on culture, careers and company pages. 64px minimum, never recolored outside their assigned hue.

Authentic

#F88F52

Passionate

#52B700

Tenacious

#FFCA05

Learn

#00C6D2

Inspire

#FF9D66

Empower

#52B700

Stroke 2px · rounded cap & join Fill same hue at 20% opacity Canvas ~64–96px, artwork bleeds to edge

Editorial icon set

58 essentials, deduped from the 134-icon master sheet — one icon per concept, no near-twins. All outline, no fills, uniform stroke, each normalized to the same square box so a row of them reads at one weight and one size.

Product UI icons

44 navigation and control icons, drawn to match the editorial set: 24px box, 1.5px stroke to sit at the same visual weight, round caps and joins, no fills. Shipped as SVG so the stroke takes the text color of whatever it sits in.

Semantic color

Default Neutral 700; status icons take the matching semantic text color. Never two colors in one icon.

Stroke stays 1.5px

Redraw at 16px rather than scaling down — thin the detail, keep the stroke.

In context

New class

Search skills

18px inside buttons and inputs, 8px gap to the label.

Illustration

Flat vector, no outlines, no texture. Shapes are rounded and organic — rolling hills, cloud clusters, hot-air balloons — with soft two- or three-stop gradients standing in for shading. Figures are diverse, mid-detail, and always doing something: practicing at a laptop, reading, presenting. One warm accent per scene keeps the palette from going cold.

Scene · full-bleed · hills and sky; horizon at ⅔

Spot marks · 73 individual assets, 24–64px each

Spot · 32–96px · foliage, subject glyphs, section markers

UI screenshot
annotated, 2× export

Screenshot · 8px radius, 1px #E4E6E8 frame

Illustration gradients

foliage · BBDB92 → 00A775

sky · D6F0FC → 51C5F1

warm accent · FEE68F → F9A233

Sampled from the illustration masters. Gradients belong to illustration only — UI surfaces stay flat.

Scale & density

24 · inline

40 · list row

64 · card

96 · empty state

One mark per block below 64px. At 96px and above the mark becomes the focal point — drop the surrounding icon and give it its own row.

Never scale a spot mark past 128px; move to a scene illustration instead.

Spot illustration library

68 flat vector objects covering subjects, tools, science, wayfinding and reward moments. Every one is built from the same shape language — no outlines, no gradients inside the object, one highlight tone per fill. Place at 40–120px; pair at most two per block.

Doodle mark library

The master doodle sheet, split into 73 individual assets so each mark can be placed on its own. Use one per card or list row, sized 24–64px; never combine more than three in a single block.

Page furniture

Header bands and footer scenes are full-bleed and fixed-height — stretch horizontally, never vertically, and never crop the horizon. One band and one scene per page; pick the pair that matches the audience gradient.

Header bands

All bands are one height — 36pt in print, 48px on screen — and always run edge to edge. Never inset, never stacked.

{{ band.label }}{{ band.use }}

Footer scenes

{{ scene.label }}

Step markers

1

2

3

Chevrons run Blue 400 #209DD8 → Teal 500 #32BCAD → Purple 500 #7467AE and reset at step 4. Numerals are Roboto Slab Light in Blue 50, left-aligned in the flag body, never centered on the point.

Inline step dots

1 2 3

Circles are the compact form — use inside body copy and on screenshots; chevrons head a full step section.

Tip callout

Note and tip boxes use Blue 50 at radius 8, bold blue lead-in, and sit inline with the step they belong to — never in a margin.

Component set

Every component is built from the tokens above — no local hex values, no one-off spacing.

Product header

Learning Diagnostic Analytics

64px tall · logo left · one active tab · avatar right

Footer

AboutHelp centerPrivacyTerms

© 2026 IXL Learning. All rights reserved.

Footer rules and micro-legal use Neutral 500 (#CBCBCB) on Neutral 900, per the kit.

Print & guide components

The implementation guides, upload instructions and quick-starts share one kit: a color header band, numbered steps, and a rule-plus-logo footer. Three- and four-step variants only.

Implementation guide

Getting started with IXL

1Set up your class. Add students by roster upload or class code.

2Run the Diagnostic. 45 minutes of practice unlocks a full snapshot.

3Assign a skill plan. Personalized recommendations per student.

ixl.com/help · 1-855-255-6676

Step marker variants

Three steps by default; four when a verification step is required. Longer copy switches to the stacked layout.

1 2 3 4

Header band options

All options share one thickness and run the full page width. Solid Blue for product and neutral docs; Admin gradient for district material; Parents & Teachers gradient for school-facing guides.

Governance