A creative OS for designers who work in the terminal.
Unicorn sits next to Claude Code. It tracks your quests and experiments; its Story panel keeps the taste, the Figma canvas and the weekly story behind every build. This page holds its colors, type, corners and components, token for token with the app.
Created 2026-05-28Updated 2026-10-25Reviewed weeklySurface desktop app + briefsOpen in Figma ↗
01The mark
The unicorn is built from terminal block glyphs, not an illustration. The exact same pixel sprite -- horn, mane, and tail in lilac, body in peach -- is the single logo across every surface: the terminal hook that prints at the start of each Claude Code session, the desktop app icon, the preloader, and the Logo row in Mirror › Taste. It is rendered as text or solid pixels, never as a smooth vector, so it always reads as made of pixels.
▐▖▟█▙▗████▝█ ▐▌
The pixel unicorn. Lilac horn + mane + tail, peach body. Born in the terminal banner, it carries through every surface as the one consistent character. Hand-made, never scraped, never smoothed.
The desktop app icon. The same pixel unicorn on a transparent squircle, wrapped in the signature gradient stroke that fades to nothing at the top-right and bottom-left corners. The mark and the chrome speak one language.
The family. Every unicorn is named after a color in the design system. Same size, same ground line, each a little different.
PeachThe mascotLilacHis girlfriendNoriSeaweed dark, a green-gold sheen in the maneDaikonCream, a radish-top mane, a pink horn tipWatermelonA twin: pink flesh, dark seeds, a striped rindTomatoThe other twin: glossy red, a leafy calyx
The agent. Peach shows what your agents are doing, in the Quest panel and on the roaming layer. The rare state is Lilac’s visit.
WorkingWorkingHe gallops while any agent works. Line 2 names the experiment.WaitingWaiting · Thinking About YouAn agent needs you. The sparkle twinkles around his horn.RestingNo agent runningNothing running. He lies down; his tail swishes now and then.LoveStops for loveRare: Lilac visits. He stops and a small heart rises.The KissLilac’s visitOn the roaming layer: nose to nose, three pixel hearts float up.
02Core palette
Two signature colors carry everything: peach and lilac. Daikon is the text; Nori Dark, the near-black, is the ground, and Nori is the softer dark. Tomato is a rare accent for destructive or urgent moments only; Watermelon is its calmer twin, the delete × at rest, deepening to tomato on hover.
Peach
#E8956A
Lilac
#A78BDF
Daikon
#F1ECE8
Nori Dark
#100F11
Peach dark
#D4724A
Lilac dark
#9478D0
Nori
#1A1616
Tomato
#FF5E71
Watermelon
#FB7185
03The signature move · two gradient strokes
Peach to lilac is the one gesture that signals Unicorn, and it shows up as a 1px gradient stroke in two forms, matched to scale. Both are drawn with the same mask-composite technique so the gradient sits on the edge, not the fill -- light does the work, fills are avoided.
Even stroke
① Even -- peach→lilac runs the full perimeter at even weight, no corner fade. On the small UI: buttons, chips, labels, tabs, filters.
Faded corners
② Faded corners -- the gradient runs bottom-left→top-right and whispers off to transparent at the top-right + bottom-left tips. On the large chrome: panels, the window's glass edge, the preloader, and the two compose CTAs.
Gradient text
Where each form lands. The signature shows up two ways depending on the surface -- and the banners break from both: they are filled, not stroked.
Preloader card · window edge
Preloader card + the app window edge -- the faded-corner gradient stroke over the glass / Nori Dark, same edge language as the panels and the icon. The peach→lilac rides the stroke here, never a fill.
Mill Valley · 58° · 🌓 First Quarter · 3 hr 12 min of daylight left
Welcome banner (place · temperature · moon phase · daylight left) -- filled with the peach→lilac gradient, Nori Dark text (#100F11), no corner fade: a small, transient band where the fill pops on purpose. Toasts (Deleted Hover sounds, an experiment shipped) -- the panels' glass with a faded gradient edge, 12px corners, mute verb then the item in Daikon with a little extra air between them, and a filled Undo when the action can be undone.
04Typography
Two families. Ubuntu Sans for body and reading; Ubuntu Sans Mono for display, labels, and anything that should feel like the terminal. Three sizes only: meta, body, display. Restraint over a type ramp.
Ubuntu Sans
Display · 22px · the work compoundsBody · 14px · capture what your agent can't, then keep what's worth keeping.Meta · 10px · saved to disk
Three levels of Daikon, by opacity. Loud enough to read, quiet enough to layer over the desktop.
Text · primary content you readrgba .94
Mute · supporting, secondary linesrgba .56
Whisper · labels, timestamps, hintsrgba .40
06Glass & geometry
On the desktop the glass is painted, not sampled: a near-opaque base (rgba(21,20,25,0.99)) under two crossing gradients -- a soft top-left light sheen and a faint lilac→peach wash from the bottom-right -- so panels stay legible over a busy terminal. The web preview uses the translucent fill (rgba(22,22,22,0.78)) with a 26px backdrop blur. Both carry a soft drop shadow (0 6px 16px rgba(0,0,0,0.35)) and the signature peach→lilac stroke that fades at the top-right and bottom-left corners. Only two lines survive inside a panel: the 2px peach→lilac hairline under each title (it ends on lilac, no fade) and the quest progress fill. Recessed wells (the Currently card, the archived pill, Completed chips) sink with rgba(0,0,0,0.18), never a white wash. Radii: 18px for panels, 6px for chips and inputs.
Panel
Painted glass, soft drop shadow, 18px radius. The gradient stroke wraps the edge and fades at the top-right + bottom-left corners. On the desktop app these panels float on a transparent window over the real desktop.
radius 18px · panel chrome
radius 6px · chip / input
07Buttons & the compose CTA
Agent strip + minimized Quest: minimized, the Quest panel is titled with the quest's own name. Line 1 is the status (Working / Waiting for You / No agent running); line 2 is what it's on (the started experiment, else the quest) or, while waiting, what it needs (Your reply, Permission: Run a command); on hover line 2 becomes Open Session / Open Terminal. Commits: Fewer · More left, the count centered, Sound On / Off right, all 11px (Sound medium). Month pager: carets at rest; while the panel is hovered (when the min/max caret appears) each caret grows into an arrow -- the head slides out and the line draws in behind it, one solid stroke so nothing overlaps. Faint at rest, bright on hover, never a fill.
Chips (Paper · Design · Week, Quest · Story) are one size app-wide: Ubuntu Sans Medium 12px, 6px × 8px padding, 6px corners. The selected chip is the filled gradient with a Nori Dark label and does not change on hover; the others lift to a soft gray. Quiet links (Directory, Show in Finder) share the 12px size, mute at rest and Daikon on hover; Show in Finder appears only on hover, and mid-drop the same spot shows the destination path in lilac.
Neutral buttons stay calm: a background tint shifts on hover, with no border-color swap. The primary action -- the compose CTA is the showpiece: it rests as a Nori Dark fill with a peach→lilac gradient stroke, and on hover the whole pill fills with the gradient while the label goes Nori-dark (#100F11). Reserved for the two compose buttons, Compose weekly brief and Tell the case story -- making an artifact earns more than a tap (it even gets its own ascending arpeggio -- see Sound). The label stands alone, no symbol in front. Padding runs on a three-tier scale: 9px pills, 10px buttons, 11px CTAs.
SecondaryQuiet link
Compose weekly briefrest · Nori Dark fill + gradient stroke
Compose weekly briefhover · gradient fill + Nori Dark label
On hover the whole pill fills with the peach→lilac gradient and the label goes Nori-dark (#100F11). Hover the left CTA to watch the fill bloom in; the right one is pinned to its hover state for reference.
08Experiment status
Each experiment row is [chip] name ... ×: the status chip sits hard left in a fixed slot, the × in a reserved slot on the right, so nothing moves under the cursor. The chip is the only action -- click to cycle. Color carries the signal: lilac is just starting, peach is in motion, muted is paused (doesn't count toward active work). Live states are drawn in light (a faded-corner stroke in their own hue); a closed loop is drawn in shadow -- Completed, whisper label in a recessed well. Reopening one arms first (Reopen?), the same two-click confirm as Delete quest.
StartingActivePausedCompletedReopen?
09The brief
Unicorn composes a creative brief, not a recap. Structured as Direction (where the quest is heading), Signal (the tools, themes, and links your work revealed), and Work (the kept moments, experiments, and commits). It opens with a one-line read of what you're becoming and closes on a gradient line: Make something this week. Self-contained HTML, shareable.
✺ Make something this week.
10Motion principles
No AI lift. Photos and cards don't scale or brighten on hover. Static is the goal; the lift is the tell.
Delicate arrival, decisive exit. Hover effects ease in slower than they ease out, so nothing lingers.
Ramp both ways. Nothing pops in or cuts out. Everything fades, with generous easing.
Depth from light + edge. Surface comes from gradient, blur, and glass; the only line is the signature peach→lilac gradient stroke. No flat outlines.
The macOS grow-out. The preview terminal genie-opens from its bottom-center -- a small scale with a touch of back-ease overshoot -- so it reads like a real window waking up, then holds open and auto-types.
Respect reduced-motion. Every animation gates behind the OS preference.
11Sound · a first-class material
Sound is designed, not decorated. A single warm steel-pan voice (Tone.js AMSynth, a sine through chorus + reverb) speaks for the whole app, so every cue feels like one instrument in one room. Each gesture earns its own phrase -- never a generic system beep.
The voice
Warm steel-pan AMSynth, sine oscillator, pulled-in envelope so a tap blooms and rings briefly instead of sustaining. The same voice that plays the Commits calendar's ambient music powers the UI.
The phrases
A soft tap on clicks. A launch bloom -- a slow ascending pentatonic run -- as the preloader wakes. A celebratory ascending arpeggio flourish on the compose CTAs. Rising / falling single notes on panel float in / out. A victory run on closing a loop. And the steel-pan soundtrack under the commit calendar.
Every cue only starts after a user gesture (browsers block autoplay), so the room stays quiet until you act. After 20 seconds of silence the audio engine sleeps, and the next note wakes it.
12Desktop treatment
In the Electron app the window is transparent: panels float on your real desktop, beside the terminal. HUD mode keeps Unicorn on top and lets clicks pass through the gaps to the terminal underneath, so Claude Code and Unicorn are usable at once. The preloader, panels, and greeting all soften so the desktop stays visible. Unicorn draws its own traffic lights in tomato / peach / lilac, wearing the panels' peach→lilac ring as their edge. The menubar carries two controls: ⊞ Panels (show or hide Quest · Mirror · Keep · Commits · Activity · Settings, ⌘1-5 / ⌘,) and ⊹ Float (on top, ⌥U). Hold ⌥ and drag anywhere to move the window.
13Voice · git-ty up
The rally cry is "git-ty up" -- a mash of git + giddy up -- the one phrase that carries Unicorn's personality. It prints beside the mark in the terminal hook (✺ Unicorn · git-ty up) and surfaces when you close a loop (✺ git-ty up — closed ...). Used sparingly, as a signature delight, never a slogan plastered everywhere. Voice notes that ride alongside it: Ships at midnight Pacific.