A1−92%
Cursor Pro
popularBuild software with AI.
$17.19$240
1 leftai code editor
vendo.
A vending machine for pro software. Pick a slot, pay once, get a key.
a store that feels like a good app
vendo sells pro plans the way a vending machine sells snacks. Every product sits in a numbered slot with one clear price, and there's exactly one of each. The store looks and behaves like the software its buyers already love: quiet surfaces, fast search, keyboard shortcuts, and real product icons.
A1
storefront first
Products are always one scroll away. The hero sells the store, then gets out of the way.
B2
one of each
Slot codes and "1 left" are true. They're the signature detail, and we never fake scarcity.
C3
quiet, then bright
Paper and ink everywhere, so vendo blue and the product icons can carry the color.
D4
say it plainly
Lowercase headlines, short sentences, real numbers. No hype and no countdown timers.
meet vee
The mark is a tiny blue vending machine with feet. Its eyes are two coin slots and its mouth is the slot your coin drops into. It's one solid shape with three white cut-outs, so it reads at 16 pixels and still has a personality. The wordmark is just the name, set bold, with a blue full stop.
vee · the mark
app icon · favicon · avatars
- the bodyA 48 × 46 rounded box on a 64 grid with a 17-unit radius, the same soft square as an app icon. Two 10-unit feet make it a character instead of a button.
- the blueThe body is vendo blue
#2563ff(#3d77ffin dark mode), the same blue as the buttons and the dot in the wordmark. The eyes and mouth are white. - the slotA 12 × 4.5 slot for a mouth. It's where the coin goes, so vee is literally smiling at your money.
vendo.
on papervendo.
on inkvendo.
one color on bluevee · the mark
Always vendo blue with a white face, on light and dark.
app icon
White vee on an ink tile. Favicon, social avatars, emails. The corner radius is 18 on 64.
one color
Receipts, stamps and embossing. Eyes and mouth become cut-outs.
vee's faces · use in empty and quiet states only
hellodefault
winkfaq, success
lookingno results
hungryempty cart
wordmark · clear space & sizes
vendo.
The wordmark is Unbounded SemiBold at −4% tracking, used for the name and nothing else, always lowercase, and always ends with a blue full stop. Keep half of vee's width clear on every side. vee works down to 16px; the lockup needs at least 80px of width.
don't
- drop the blue dot or change its color
- capitalize the wordmark. It's vendo, never Vendo or VENDO
- give vee arms, a hat, or a gradient. One shape, three cut-outs
- recolor vee in anything but vendo blue
- put vee on photos without the ink app tile behind it
paper, ink, one blue and a coin
A calm neutral base with a hint of warmth. vendo blue is reserved for the one action that moves money. The same blue is the brand accent: vee, the full stop after the name and the hero headline, and the lights in the footer machine. The product icons bring the rest of the color. Dark mode has its own selected values, so it isn't a simple inversion.
paper 62
card 18
ink 12
blue 6
--vend
--coin
--ok
--sale
--paper
--card
--paper-2
--ink
--ink-2
--line-2
A · ai coding
B · create & design
C · productivity
D · build & ship
E · business
one family: inter
Unbounded is reserved for the name. Inter does everything else you read: medium weight with tight tracking for headlines, regular for subheads and body, all lowercase like a Mac menu bar. Geist Mono is only for codes, receipts and the terminal.
the keys to pro software.
$22.92$17.19$240Granola BusinessThe AI notepad for people in back-to-back meetings.
A1C2⌘K↵order #0412 · saved 449.06
| wordmark | 18 → 132px | vendo. |
| --t-3xl | 44 → 92px | hero headline |
| --t-2xl | 28 → 40px | section title |
| sub | 16 → 19px | the line under a headline |
| --t-lg | 18px | lead paragraph |
| --t-md | 15px | body · product names at 16px semibold |
| --t-sm | 13.5px | descriptions, filters, buttons |
| --t-xs | 12px | meta, captions, labels |
the parts of the store
These are the live components from the store, rendered from the same CSS. Controls feel like a classic Mac: glossy Aqua pills with dark text and a crisp edge, and cards that are little windows with traffic lights and a filename.
buttons
Blue moves money. Dark adds in bulk. Ghost navigates. Green means done.
chips & labels
A1−93%newlimitedpopular⌘K
product icons
Each brand's own icon, taken from its website and shown on a white plate like an app icon. Icons identify the product; they never suggest vendo is the brand's official store, so the "not affiliated" line stays in the footer.
search & feedback
Cursor Pro added
Cursor Pro added
product card anatomy
| part | rule |
|---|---|
| slot window | well color with the product icon centered at 60px |
| slot code | top left, mono. The row letter is the category and the number is the position in that row |
| discount pill | top right in sale red, rounded down so it's never overstated |
| title + badge | 16px semibold with at most one badge: new, limited or popular |
| meta + description | plan length and seats, then the description clamped to two lines |
| price row | price in ink, list value struck through, add button on the right |
| stock line | dashed divider, green dot, "1 left" or "reserved in your cart" |
the grid underneath
Everything sits on a 4px base. All values live in assets/tokens.css, and components only reference tokens.
spacing
4
8
12
16
24
32
48
64
96
radius
xs 6
sm 10
md 14
lg 20
xl 28
icon 26%
elevation
sh-1 · rest
sh-2 · hover
sh-3 · overlay
breakpoints
| max width | 1280px, gutter 16 → 32px |
| ≥ 1180 | floating product icons and the receipt in the hero |
| ≥ 1020 | 236px filter sidebar + auto-fill grid of 260px cards |
| < 1020 | category chip row + filters in a bottom sheet |
| < 560 | one card per row, toolbar wraps |
small, springy, rare
Motion confirms what happened. Icons drift gently in the hero, cards lift on hover, the cart slides in from the right, and a toast pops up when something is added. Everything stops for prefers-reduced-motion.
| token | value | used for |
|---|---|---|
| --d-fast | 120ms | hover color, button press |
| --d-mid | 220ms | card lift, dialog pop, toast |
| --d-slow | 360ms | cart drawer slide |
| --ease | cubic-bezier(.2,.7,.2,1) | default for everything |
| --spring | cubic-bezier(.34,1.4,.64,1) | icon hover and the toast only |
| bob | 6–8s alternate | hero icons, staggered |
a friendly machine that tells the truth
Lowercase for headlines, labels and buttons. Sentence case for anything longer than a phrase. Real numbers over adjectives, and no fake countdowns: scarcity is real here, one key per slot.
write it like this
yespick a slot. pay once. get a key.
noUnlock UNBEATABLE deals on premium SaaS today!!
yesMost plans only activate on a new account. Check before you buy.
noWorks for everyone, guaranteed.
yes1 left
noHurry! Only 2 minutes left!
empty states
your cart is emptynothing in that slot
vee shows up when there's nothing else to look at. Never as decoration next to products.
icons · 24px grid, 1.8 to 2px stroke, round caps