Brand board · v0.1 · Oct 2026
Small apps, crafted details.
Shift M is a small software studio. We make apps for regular people, charge a fair price, keep their data private, and have fun doing it. This board is the source of truth for how that looks.
hi, i'm the axolotl
01 / References
Where this came from
The Figma file set the base. Three sites showed us how far to push it. Each one gave us something specific, listed below.
Shift M Figma
- Axolotl red and Ink gray scales
- Switzer + JetBrains Mono
- Keycap logo with the pink under-shadow
- Pixel axolotl mascot
- Marker highlights and mono labels
Tines
- Illustration carries the personality, layout stays calm
- Tinted panels behind CTAs
- Faint grid and dot backdrops
- One accent color per section
heyclicky
- Product shots inside app-window chrome
- Tactile, pressable buttons
- Stickers and emoticons scattered on the canvas
- Casual voice that explains privacy plainly
Wild
- Pixel lettering and pixel confetti
- Stepped 8-bit corners on special elements
- Mono tags in bright pills
- Studio copy that sounds like people
02 / Identity
Logo, mascot and voice
Shift+M reads like a keyboard shortcut. Shortcuts save you time without asking for anything back, and that's the deal we want with our users.
- Grid. Built from 6px squares. Scale in whole multiples: 125, 188, 250px wide.
- Minimum size. 83 × 32px (mobile nav). Below that, use the M key alone.
- Clear space. 12px at 48px tall, so a quarter of the logo height on every side.
The axolotl
A 26 × 29 pixel sprite. Axolotls regrow what they lose, which is a decent description of shipping and iterating. It shows up at the moments we want to feel human: empty states, 404s, success screens, the careers page.
- Render at 26px multiples: 78, 156, 182, 312px wide.
- Never blur, stretch, outline or add gradients.
- One axolotl per screen. It's a guest, not wallpaper.
Voice
Plain, warm, a little cheeky. Say what the app does and what it costs. Never hide a catch.
- say
- "We don't sell your data. Ever."
- not
- "We leverage industry-leading privacy solutions."
- say
- "$4 a month. Cancel in two taps."
- not
- "Unlock premium value with flexible plans."
- say
- "That didn't save. Try again?"
- not
- "Error 0x83: operation failed."
value_01
Worth every cent
Fair prices, no dark patterns, no surprise renewals.
value_02
Private by default
We collect what the app needs to work. Nothing gets sold.
value_03
Care about the small stuff
The little things are what make an app nice to use.
value_04
Fun to make
Happy teams make better apps. We keep meetings rare and try the weird ideas.
03 / Color
Color palette
Two scales from the Figma file do almost all the work. Four accents add play, but only in tags, illustration and pixel confetti.
Axolotl red
primary-*50
#fcf7f8
100
#ffe3e6
200
#ffccd3
300
#ffa1af
400
#ff6b84
500
#f93a60
600
#e7174a
700
#c30d3d
800
#a30e3b
900
#8b1039
950
#4e031a
Ink
neutral-*50
#f5f6f6
100
#e5e7e8
200
#ced0d4
300
#aaafb6
400
#747b86
500
#646a76
600
#565a64
700
#4b4d54
800
#414349
900
#393b41
950
#232429
Accents
lemon · sky · mint · grape (100 / 500 / 700)Lemon
#fff4cc · #ffd23f · #8a6400
Sky
#dcebff · #3d8bff · #1456c4
Mint
#d4f7e8 · #1fbf86 · #0b7a52
Grape
#ece6ff · #8b6cff · #5b3fd1
Proportion
In use
Eyebrow · red-700 mono
Your notes stay on your phone.
Body in ink-950, secondary text in ink-500. Links use red-700 with an underline: read the privacy policy.
Dark section · red-400 eyebrow
We're hiring people who notice things.
Ink-950 background, ink-50 text, ink-300 for secondary. Pixel confetti uses the accents at 6px.
Saved. You can close this.
That didn't save. Try again?
Contrast pairs (WCAG 2.2)
Aa 6.10
white / red-700
AA ✓
Aa 4.55
white / red-600
AA ✓
Aa 3.62
white / red-500
24px+ only
Aa 5.63
red-700 / ink-50
AA ✓
Aa 4.20
red-600 / ink-50
large only
Aa 5.43
ink-500 / white
AA ✓
Aa 4.27
ink-400 / white
decorative only
Aa 10.94
ink-950 / red-200
AA ✓
Aa 5.67
red-400 / ink-950
AA ✓
Aa 10.73
lemon-500 / ink-950
AA ✓
04 / Typography
Typography system
Two families. Switzer does the talking, JetBrains Mono labels things. Sizes step by the golden ratio, the same 14 → 23 → 37 → 60 jump the Figma file uses.
font-sans · 400 500 600Aa Gg 07
Neo-grotesk from Indian Type Foundry, free on Fontshare. Tight tracking (-4%) gives headlines the dense, friendly look from the Figma hero.
font-mono · 400 500{ } 0O
The "made by engineers" signal. Use it for eyebrows, tags, metadata, prices in tables and "Learn more" links. Never for paragraphs.
title-xl
96 / 56px · Semibold 600
Hero statement, one per page
Shift happens.
title-lg
60 / 40px · Semibold 600
Page H1
Apps worth paying for
title-md
37 / 30px · Semibold 600
Section H2
Private by default
title-sm
23 / 20px · Medium 500
Card title, H3
Care about the small stuff
body-lg
18 / 17px · Regular 400
Lead paragraph
We make apps for regular people, and we charge a fair price for them.
body-md
16px · Regular 400
Default body
No ads, no tracking pixels, and no surprise renewals.
body-sm
14px · Regular 400
Card body, meta
Cancel in two taps from Settings.
body-xs · mono
12px · Medium 500
Eyebrows, labels, tags
Made in a tiny studio.
05 / Icons
Icon family
Material Symbols Rounded for interface work. It's the set the Figma file already uses, in the rounded cut to match our corners. Pixelarticons for playful moments that sit next to the axolotl.
UI · Material Symbols Rounded
weight 400 · 24px gridFun · Pixelarticons
24px · crisp- Sizes. 16, 20, 24px for UI. Pixel icons only at 24 or 48px so their grid stays crisp.
- Color. Icons inherit text color. Red icons only inside red components.
- Mixing. One family per component. Pixel icons never inside buttons or forms.
06 / Radii
Corner radii
Six steps, nothing in between. Nested corners shrink: a 12px card holds 8px buttons, which hold 6px tiles.
rounded-xs
2px · Marker highlight
rounded-sm
6px · Icon tiles, small inputs
rounded-md
8px · Buttons, inputs
rounded-lg
12px · Cards
rounded-xl
20px · Window frames, panels
rounded-full
999px · Tags, avatars
pixel-corners
6px steps · special only
07 / Effects
Effects and motion
Hard shadows for things you press, soft shadows for things that float. Everything else is flat.
Keycap shadow
0 4px 0, no blur. Drops to 2px on press. Click these.
shadow-key shadow-primary-300Float shadow + pixel grid
For windows over the canvas.
shadow-float · pixel-gridMarker highlight
Built with care, priced with respect.
Red-200 behind ink text. Two per block at most.
.markerPixel corners
From Wild. Speech bubbles and one hero element.
psst, it works offline
.pixel-corners [--px:4px]Pixel confetti
6px squares in accent colors. Celebrations, dark sections and the footer.
size-pixelMotion
- 150ms with
ease-snapfor presses and hovers. - Pixel things move in whole pixels and steps, never smooth easing:
animate-bob. - The axolotl idles like a game sprite: feet planted, body drops 1px, gills trail a frame, eyes blink.
- Everything respects reduced motion.
08 / Components
Putting it together
A sample feature row and a testimonial, built only from the tokens above.
Everything you need.
Budgets that don't snitch.
Your spending stays on your device. No bank logins, no ads, no "partners." Just a calm place to see where the money went.
- One-time price
- Works offline
- No account needed
"I paid once, two years ago, and it still gets updates. Who does that anymore?"
Privacy report
Every byte we store, listed in plain English.