for designers who build with their agent.
pay once
includes 12 months of updatesno subscription
$24 for another year of updates, if you ever want it.
free for 15 days, no card.
everything in sidealong
yours to keep, updates for a year
use it on 2 macs, with every update for a year.
after that, the app is still yours. another year of updates is $24, if you ever want it.
shipped so far
aug 25 to oct 15127 changes and 1,439 commits. something new landed on 49 of the last 52 days. see what's new
hi, i'm apri. i'm a designer, and i built sidealong with claude code, inside sidealong. every square above is a day of it. i use it all day, so the small stuff gets fixed fast.
you only pay when the new work is worth it. fair both ways.
questions
why isn't this a subscription?
you already pay monthly for your agent. this is the panel around it, so you buy it once, like your other tools. updates for a year come with it, and you can add another year later if you like.
what happens when my year of updates ends?
the app stays yours. it just stops getting new versions. if i ship something you want later, renew for $24 and you get the next year.
will the price go up?
yes, once it's grown up. it's $49 while it's early and $69 from february. if you buy before then, your renewals stay at $24.
can i try it before i buy?
yes. download it and use everything free for 15 days, no card. if it earns a spot in your flow, buy it right in the app.
do i need to know how to code?
no. you say what you want in plain words, and your agent writes the code. all you need is a mac on macOS 15 or later and a claude or chatgpt plan.
i already use an agent app. why this too?
keep it. sidealong is the panel that opens over your design when you want to ask something, so you never leave paper or figma to do it.
does it use my own plan?
yes. it runs the official claude code and codex, the same ones you'd run in your terminal, on the claude or chatgpt plan you already pay for.
do my skills and MCPs come with me?
yes. your skills, your MCPs like figma and paper, and your CLAUDE.md or AGENTS.md all load, because underneath it is the same claude code or codex.
will my engineer be okay with my PRs?
your work lands as a normal branch and pull request, so they review it like any other change.
what if i stop using it?
nothing's locked in. every chat is a normal claude code or codex session, so you can pick it up in the terminal any time.
why isn't it open source?
because it's my art project :) i want to keep shaping every detail myself. your chats, skills and code stay yours either way.
in use
campaign · the mark as a window
campaign · the mark as a window
design work.
faster loop.
outdoor
from the frame you see to a working change.
link preview · 1200 × 630
profile · tile cropped round
apparel · one-colour mark
stickers · die-cut
tote bag
The terminal is fine. It was just never designed for designers. So this one is.
no round trip
It shows up when you call it and it's gone when you look away.
your hands are fast
The only slow thing is the agent, so nothing should make you wait on it.
the space between
The name lives in the space between what you see and the change you want.
bring what you have
There's no account to make and nothing sits in the middle.
your design, and the agent beside it
The mark is built from four squares.
- the canvas
- the frame you're designing. always at full strength.
- the gap
- read the space between them. it draws an s, for sidealong.
- the panel
- your coding agent, right beside it. set back at 57%, so the design leads.
built from one square
To use it, take the files from the kit.
one shape, four grounds
Blue and white are the primary pairings. Paper and ink cover print and partner placements. Where a process can't reproduce transparency, like embroidery, foil or a single-ink stamp, use the one-colour version in the second row.
the mark leads, the word follows
The wordmark is set in Funnel Display 500, lowercase, tracked to -0.03em. The mark stands 1.4 times the height of the d and settles slightly below the baseline.
one blue, with quiet around it
sidealong blue is the product's own accent, the colour of focus.
a warm grotesk, a clean reader, and a mono for detail
Funnel Display carries the name and every headline, headlines at 450, set tight: 0.95 for the hero, 0.99 for a section's head. Inter Display sets everything you read, at 350, 20 px on the site. JetBrains Mono is the terminal's own face, so it handles the small things too, labels, shortcuts and numbers.
context 42k · 5h 18%
plain words, said once
sidealong talks the way you'd talk to a friend who builds things.
your agent, right beside your canvas.
the terminal for a faster design loop.
the tagline leads. the descriptor sits under it, in the bio and the link preview.talk across
Assume the person reading is already good at this. Cheer them on, and never sell at them or make them feel behind.
say it once
One idea gets one sentence. If the screen already shows it, the words can go.
one set of words, any agent
The panel says model, effort, resume and turn, whichever agent you bring. Words only one agent knows stay with that agent.
leave the rough edges
lowercase heads, short paragraphs, the odd fragment. No em dashes, and no colons halfway through a sentence.
what a chat says while it wakes.
a keycap stands for its verb, so the word can go.
say what it means for you. the log keeps the details.
the fewest words that still get you there.
plain words over big ones.
flat, from 1024 down to 16
The mark fills 58% of the tile and sits slightly low and right, so its visual weight lands at the centre.
the icon, in glass
Every appearance below comes from one source file, sidealong.icon, rendered by the system in each look a person can choose. The panel stays set back at 57% in all of them.
default
dark
white tile
white tile, dark
clear, on white
clear, on blue
clear, on black
tinted, light
tinted, dark
one pen for every glyph
Yeah, it's lucide. We just love it at a different weight, a 1.7 line instead of the 2 it ships with, so every icon sits level with the text beside it.
icons from lucide.dev, ISC licence.
nothing teleports
When one thing turns into another, you watch the same object change. Things come in from the edge they belong to and leave the same way.
And a single press lands at once. Motion is for distance, so the move you make a hundred times an hour never makes you wait.
A card grows out of the key that opened it.
A step lifts the next segment where it is. A jump slides the light across, through every segment on the way.
The footer widget changes in place.
the panel wears your theme
The colours that mean something stay ours. Waiting is still mint and a merged pull request is still purple, moved lighter or darker only where a theme would swallow them.
a face for what the agent is doing
The mark is the logo. The eyes are the character who lives inside the app, and they never stand in for the mark on a site, a sticker or a post.
small sounds, right under your keys
The panel makes tiny sounds as you move through it, so a key press feels like it landed. They all sit at one quiet level, and one switch in settings turns them off.
the small places
sidealongApplicationIn the menu bar the mark is a template image, so it adapts to light and dark.
sidealongyour agent,
right beside your canvas.
press one shortcut over your frame. your note goes to your agent with the canvas in view, and the answer shows up beside it.
sidealongyour agent, right beside your canvas.
the terminal for a faster design loop.
Repository header.
FOR MAC
your agent, right beside your canvas.
the terminal for a faster design loop.
FOR MAC
press one shortcut. it's right there.
real places, quiet light
When a photo shows up, it's a real place or a real thing, shot in natural light and a little quiet. Every photo is credited to the person who took it.
not thisStock smiles at a laptop, gradients pretending to be photos, AI images. If it didn't happen in front of a camera, it doesn't go in.
one box around the thing you mean
When you snap something, sidealong draws a thin box around it, so your agent knows exactly what you're pointing at.
01 · x 967 y 425
02 · x 1014 y 411
not thisA HUD with every corner labelled, neon glow, two accents fighting for your eye, numbers nobody measured. If the box isn't around something real, leave it out.
keep it the way it is
Please use the files as supplied. In a campaign the mark can hold an image, like a window, but its shape never changes.
don't rotate itThe mark already leans. Rotating it knocks the panel off its line.
don't stretch itScale proportionally only.
don't recolour the panelThe panel always matches the canvas, only quieter.
don't outline itThe mark is two solid shapes.
don't add effectsNo shadows, bevels or gradients. On macOS, the system adds its own glass.
don't swap the strengthThe canvas always leads. A faded canvas with a full panel reads as a single small square.
the files
The SVGs are outlined, so no fonts need to be installed.
- start with
kit/brand.jsonfor colour, type and lockup rules - use
kit/logo/*.svgas supplied, never retype the word - build the app icon from
kit/icon/sidealong.icon
loading kit/brand.json