Unicorn · Living Design System

The language Unicorn
is built in.

A living reference for the colors, type, glass, and motion that make Unicorn feel like itself. Living because it updates as the product does, not after. It documents what is true in the build right now, so the app, the briefs, and the case story all speak the same visual language.

Updated 2026-07-12 Reviewed weekly Surface desktop app + briefs Open 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 Taste panel's Logo row. 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.
Unicorn desktop app icon
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.
02Core palette
Two signature colors carry everything: peach and lilac. Cream is the text; near-black is the void. Tomato is a rare accent for destructive or urgent moments only.
Peach
#E8956A
Lilac
#A78BDF
Cream
#F1ECE8
Void
#100F11
Peach dark
#D4724A
Lilac dark
#9478D0
Ink
#1A1616
Tomato
#FF5E71
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 / void, same edge language as the panels and the icon. The peach→lilac rides the stroke here, never a fill.
✷ Good afternoon, Ivy  ·  day 7  ☽ Full Moon
Banners (the welcome / greeting band + the experiment toasts) -- not glass. They are filled with the peach→lilac gradient, carry dark void text (#100F11), and have no corner fade. A saturated fill on a panel browned at the midpoint and read too heavy -- so the fill is reserved for these small, transient bands where it pops on purpose.
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 compounds Body · 14px · capture what your agent can't, then keep what's worth keeping. Meta · 10px · saved to disk
Ubuntu Sans Mono
Display · compose this quest's brief Body · ~/unicorn/briefs/2026-W22.html Meta · quest · taste · keep · activity
05Text hierarchy
Three levels of cream, 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
Panels are liquid glass: a translucent dark fill (rgba(22,22,22,0.78)) with a generous 26px backdrop blur and a soft drop shadow for depth (0 6px 16px rgba(0,0,0,0.35)). The edge is the signature peach→lilac gradient stroke that fades at the top-right and bottom-left corners -- the same edge as the icon and the window. A soft hairline still sits under each header. Radii: 18px for panels, 6px for chips and inputs.
Panel
Glass fill, 26px blur, 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
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 void fill with a peach→lilac gradient stroke, and on hover the whole pill fills with the gradient while the label goes void-dark (#100F11). Reserved for the two compose buttons -- composing a brief / telling the case story is making an artifact, so the click earns more than a tap (it even gets its own ascending arpeggio -- see Sound).
secondary quiet link
compose brief rest · void fill + gradient stroke
compose brief hover · gradient fill + void-dark label
On hover the whole pill fills with the peach→lilac gradient and the label + symbol go void-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
An experiment moves through a small set of states. Color, not labels, carries the signal: lilac is just starting, peach is in motion, a muted dot is paused (sleeping, doesn't count toward active work), and a closed loop goes quiet -- whisper label, no dot.
Starting Active Paused Complete
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
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 gates behind reduced-motion-friendly intent and only starts after a user gesture (browsers block autoplay), so the room stays quiet until you act.
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.
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.
Unicorn · git-ty up