Imagine a rocket launch. The countdown hits zero, a shower of sparks ignites the boosters, and the enormous potential locked in the fuel releases all at once, hurtling a spacecraft into space at over 25,000 miles per hour. At Ignite, we harness that same explosive power to launch retailers into the future.
The system that launches retail into orbit.
One design language for every screen in the Ignite portal, from the loyalty dashboard a store owner reads at 6am to the Mission Control canvas where they build the next campaign. Bold where it inspires, calm where the work happens.
The spark and the wordmark
Ignite means to start up with tremendous energy. Our mark is a four-point spark caught mid-ignition: purple structure, orange fuel, a yellow core. The gradient lockup is preferred. Use solid, black, or white only when the gradient can't reproduce.
SPARK · reversed
STACKED · preferred
HORIZONTAL
ON LIGHTOur portal carries dense work: fuel pricing, accounting ledgers, BI reports, campaign builders. A loud space theme over a data grid makes it unusable. A plain grid with no brand wastes who we are.
So we split the difference on purpose.
- Loud shell. Brand energy lives in login, marketing, page headers, empty states, and the Mission Control canvas.
- Calm core. Tables, ledgers, forms, and reports stay high-contrast and neutral, with one orange accent for the primary action.
- Starlight and gradients never sit behind data.
✕ Don't
- Stretch or recolor the spark
- Put Starlight behind a table
- Set body copy in all-caps Kallisto
✕ Don't
- Use three brand colors in one button
- Add drop shadows to the flat mark
- Rotate the spark off its axis
✓ Do
- Give the mark clear space equal to its core
- Lead with purple, accent with orange
- Save yellow for a single highlight
Fuel, structure, and a spark of yellow
Purple is the structure and the brand. Orange is energy and action. Yellow is the highlight you use once. Click any swatch to copy its hex.
We name status the way a launch team does: GO (healthy), HOLD (needs attention), SCRUB (failed or blocked), INFO (neutral).
Three gradients, from dawn to deep space
Straight from the brand palette. Use them on hero surfaces, the login, and the spark — never behind text you need to read at a glance. Click to copy the CSS.
Kallisto up front, Eurostile in reserve
Kallisto is our voice: tech-savvy, bold, a little fun. It sets headlines and carries body copy in its lighter weights. Eurostile is the sanctioned stand-in when Kallisto can't load. A monospace layer handles labels and data.
Headlines, stat numerals, buttons
Paragraphs, UI copy
Labels, tokens, data
A 4px grid and soft corners
Everything sits on a 4px base. Radii stay gentle so the portal feels modern without going pill-shaped everywhere.
Shadow for depth, glow for ignition
Surfaces lift with soft, space-tinted shadows. The one exception is the primary action, which carries an orange ignition glow instead of a drop shadow.
Quick, eased, and never in the way
Interface motion is fast and confident. Ambient motion (Starlight, Launch Trails) is slow and quiet, and it stops entirely under reduced-motion. Hover a card to see the easing.
Starlight
Layered stars drift behind the dark interface while warm ignition embers rise slowly through them, echoing the sparks that light the boosters. It sets a quiet sense of exploration behind the work, and it always stays behind the content.
Three layers rotate slowly at 180s, 300s, and 420s per revolution, twinkling at 3s, 5s, and 7s. Ambient movement, no task meaning.
Warm ignition embers rise through the stars, the sparks that light the boosters. That is the part that is ours.
Runs page-wide in dark mode, always in the background. Off in light mode and reduced-motion, paused when the tab is hidden. The opaque surfaces keep it off your data.
/* 3 layers · rotate 180 / 300 / 420s · twinkle 3 / 5 / 7s */ .star-layer { animation: star-rotate 180s linear infinite, twinkle 3s ease-in-out infinite; } .star-layer:nth-child(2) { animation-duration: 300s,5s; animation-delay: 0s,1s; } .star-layer:nth-child(3) { animation-duration: 420s,7s; animation-delay: 0s,2s; } @keyframes star-rotate { to { transform: rotate(360deg); } } @keyframes twinkle { 0%,100%{opacity:.35} 50%{opacity:1} } /* Ignition embers rise through the layers. Restraint below. */ :root[data-theme="light"] .starfield-global { display: none; } @media (prefers-reduced-motion: reduce) { .star-layer, .ember { animation: none } }
Launch Trails in Mission Control
Mission Control is where a store builds a mission — what ecommerce would call a journey. Launch Trails are the animated connections between nodes on that dark canvas. Warm orange particles travel along cool violet paths, so your eye follows the flow of energy through the workflow.
Violet #8B5CF6, fading 80% → 60% along the path. Rounded dashes expand and contract over 2.5s.
Three orange #F97316 pulses per trail on 3s loops, staggered. They fade in, brighten, and fade out.
A lavender #A78BFA ring with a lighter #C4B5FD core marks the destination.
The path gives structure. The warm particles against cool violet give energy, and draw the eye along the flow.
The building blocks
Core parts of the Ignite portal. Each one pulls from the token system and works in light and dark. This is the calm core: restrained color, one accent for the primary action.
Underline-active tabs organize a mission's setup without stealing attention from the canvas.
| Mission | Audience | Status | Sent | Redeemed |
|---|---|---|---|---|
| Free coffee after 5 fill-ups | Rewards members | GO | 18,204 | 3,910 |
| Summer road-trip bonus | Premium fuel | GO | 9,551 | 2,077 |
| Win-back — lapsed 60 days | Inactive | HOLD | 0 | 0 |
| Car wash upsell | All stores | DRAFT | — | — |
No missions yet
Prepare for liftoff. Build your first mission and launch it to every store in minutes.
Where the brand shows up, and where it steps back
The login and the marketing edge run full brand. The working screens keep it quiet. Same system, two volumes.
Welcome back, crew.
Sign in to Command Center.
| Store | Region | Gallons | In-store | Loyalty % |
|---|---|---|---|---|
| Cosmos Fuel #114 | Southwest | 42,110 | $88,204 | 64% |
| Orbit Mart #22 | Gulf Coast | 38,970 | $76,551 | 59% |
| Nova Stop #7 | Mountain | 31,204 | $71,880 | 62% |
KickBack PointsThank you, crew. Prepare for liftoff.
A store owner or support rep searches a transaction and pulls up the digital receipt to reconcile a shift or resend it to a member. The receipt carries a light brand touch. The tools around it stay calm.
Fun, intelligent, filtered through space
We write like a smart crew that loves the work. Plain English first, space metaphor second. We use launch language where it lifts a moment, and we get out of the way when someone is reading a number.
✓ Write it like this
- "All systems are GO — your mission is live across 114 stores."
- "Prepare for liftoff. Build your first mission."
- "Two stores are missing fuel pricing. Fix those to launch."
✕ Not like this
- Piling on metaphors: "Ignite your journey to the stratosphere of retail excellence."
- Em-dash showers and hype in a data label.
- Space words on a screen someone uses to reconcile accounts.
A store owner sets up a mission (a campaign) in Mission Control, points it at an audience of people fueling up, and hits Ignition. That's the whole story, in our words.
The portal runs on react-admin
The Ignite portal is a react-admin app, so the design system ships as a Material UI theme. Brand energy lives in the Layout, Login, and the custom Mission Control view. The resource lists and edit forms — react-admin's Datagrid and inputs — stay in the calm core.
import { defaultTheme } from 'react-admin'; import { deepmerge } from '@mui/utils'; // Orange = action, Purple = brand. See the token table below. export const igniteTheme = deepmerge(defaultTheme, { palette: { mode: 'light', primary: { main: '#d9700f' }, // action orange (AA on white) secondary: { main: '#5e398a' }, // brand purple success: { main: '#1f9d6b' }, // GO warning: { main: '#e5a83b' }, // HOLD error: { main: '#d1462f' }, // SCRUB }, typography: { fontFamily: '"kallisto", system-ui, sans-serif', h1: { fontFamily: '"kallisto"', letterSpacing: '-0.02em' }, }, shape: { borderRadius: 12 }, components: { RaDatagrid: { /* keep neutral — calm core, no gradients */ }, MuiButton: { defaultProps: { disableElevation: true } }, }, });
Load Kallisto and Eurostile through the Adobe Fonts kit (use.typekit.net/twu7ucm.css) in index.html, then reference the families by name in the theme.
Copy the tokens, ship the brand
The full CSS custom-property layer. Raw brand values feed semantic tokens that flip between light and dark from one attribute. Components only ever touch the semantic tokens.
/* Raw brand palette — from the Ignite brand bible */ --ig-purple: #5e398a; --ig-orange: #fd8d1a; --ig-yellow: #fedb00; --ig-purple-light: #a14aa0; --ig-mars: #9e2b16; --ig-gold: #d38210; /* Brand gradients */ --grad-purple-space: linear-gradient(135deg,#a14aa0,#5e398a); --grad-sunshine: linear-gradient(135deg,#fedb00,#d38210); --grad-firelight: linear-gradient(135deg,#fd8d1a,#9e2b16); /* Semantic — DARK (base) */ --bg: #0b0812; --surface: #120d1d; --text: #ece8f2; --accent: var(--ig-orange); --brand: var(--ig-purple-light); /* Semantic — LIGHT ( :root[data-theme="light"] ) */ --bg: #f7f6fa; --surface: #ffffff; --text: #241d2f; --accent: #d9700f; --brand: var(--ig-purple); /* Status — mission readouts */ --go: #1f9d6b; --hold: #e5a83b; --scrub: #d1462f;
The full file, plus the Starlight and Launch Trails code, lives in styles.css and app.js in this project.