Brand kit

Meet Shelly

Shelly is the Flip the Contract AI assistant — the one who works your leads, drafts your outreach, watches your deadlines and tells you what to do next. She is one robot everywhere she appears: same helmet, same faceplate, same chest badge, same proportions. Her expression changes what is inside her visor. Her pose changes her arms and what she is holding. Nothing else moves.

Asset manifestnpm run mascot

Mix and match

Any of the seven expressions works with any of the seven poses — 49 combinations, all from one component.

Expression

Pose

<ShellyMascot
  expression="happy"
  pose="wave"
  size={220}
/>

Seven expressions

Only the neon inside her visor changes. Pick by what the interface is actually doing, not by what looks nicest.

Happy / welcomingOnboarding, welcome screens, the coach bubble at restexpression="happy"SVG PNG

ThinkingWhile a request is in flight — AI chat, analysis, skip traceexpression="thinking"SVG PNG

ExcitedA new match, a good comp, a milestone unlockedexpression="excited"SVG PNG

Alert / warningOverdue tasks, a contract deadline, a failed sendexpression="alert"SVG PNG

Focused / workingWorking states — bulk actions, imports, background jobsexpression="focused"SVG PNG

Celebrating a closed dealA closed deal, an assignment signed, a paid invoiceexpression="celebrating"SVG PNG

Neutral assistantHer default face anywhere she is just presentexpression="neutral"SVG PNG

Seven poses

Only her limbs and the prop she holds change. She never changes size between poses — every pose is drawn on the same canvas, so a row of them lines up.

Standing idlepose="idle"SVG PNG

Wavingpose="wave"SVG PNG

Pointing to a dashboardpose="point"SVG PNG

Holding a clipboardpose="clipboard"SVG PNG

Looking at analyticspose="analytics"SVG PNG

Celebratingpose="celebrate"SVG PNG

Thumbs uppose="thumbsUp"SVG PNG

Sizes

Below about 32px her gradients and bloom render as mud, so there is a flat-shaded glyph with the same silhouette. Use ShellyAvatar from 32px up and ShellyGlyph below it.

Marketing heroFull figure, animated · 260px

Card / empty stateFull figure · 140px

Chat avatarShellyAvatar · 44px

Inline iconShellyGlyph · 22px

Palette

Exported as SHELLY_PALETTE so surfaces around her can match without hard-coding hexes.

navy#140d24

navyDeep#07040f

purple#a855f7

purpleLight#cba6ff

violet#7c3aed

magenta#ff4fd8

pink#ff5fa2

orange#ff7e5f

gold#ffb347

teal#35e0c0

Rules

Do

Import the component — ShellyMascot, ShellyAvatar, ShellyGlyph.
Use the files in /mascot for email, social and anywhere React cannot run.
Pick the expression that matches the system state, so she reads as informative rather than decorative.
Give her room — she is drawn with a soft aura that needs a little padding.
Pass title="" when she sits next to text that already says "Shelly".

Don't

Don't redraw her, recolour her armor, or restyle her faceplate frame.
Don't stretch her — set size and let the height follow.
Don't put the badge on a chest that isn't hers, or swap the "F" for anything else.
Don't screenshot her from this page — the exported SVGs are lossless.
Don't animate her over a busy background; pass glow={false} instead.