brewbuds design
Every cup, place, and reaction in the app is drawn by hand on the same 48-unit grid. This page is the grid.
palette
core
the core brand palette used for type, borders, dividers, surfaces, and states. this is what the mobile app code and web reach for, and it is the only palette allowed to move if the ui is ever rethemed.
illustration
colours baked directly into the svg artwork. on dark surfaces, artwork sits on a fixed milk panel rather than being inverted. places share one red, separated by lightness; silhouette carries the category.
citrus is the core brand orange. it appears on the logo and the reactions, and nowhere else. milk, dark roast, and citrus appear in both palettes. same colour doing different jobs.
the grid
the baseline case, the cup stands at y=42.
every icon is drawn on a 48-unit canvas with a 40-unit live area and four units of margin on every side. nothing draws outside it.
grounded icons (cups, buildings, etc) stand on a baseline at y=42. reactions are the exception; they float centred on the canvas.
size means importance. an espresso is not drawn smaller than a latte. proportion and detail carry the difference, not scale.
beverages
the hard five
cortado
macchiato
flat white
cappuccino
lattefive drinks that are the same object at small sizes. vessel silhouette and fill bands do the telling.
hover or tap a card for the three sizes the app actually renders: list, picker, detail.
americanolistpickerdetailcappuccinolistpickerdetail
chailistpickerdetail
coffeelistpickerdetailcortadolistpickerdetail
dirty chailistpickerdetail
espressolistpickerdetailflat whitelistpickerdetail
french presslistpickerdetaillattelistpickerdetail
london foglistpickerdetailmacchiatolistpickerdetail
matcha lattelistpickerdetail
pour overlistpickerdetail
tealistpickerdetail
yerba matelistpickerdetaillocations
cafe
home
workcolour here isn't category-coding. the office block's nine window frames put more dark outline against its fill than the house or the storefront do, so work takes the lightest value and home, mostly open roof, takes the darkest.
reactions
reactions float. they're the only illustrations that keep citrus. the brand orange they share with the logo.
rules of the set
one grid.
48 canvas, 40 live, nothing outside it.
one baseline.
grounded things stand at y=42; floating things center.
size is importance, not physics.
an espresso is not drawn smaller than a latte. proportion and detail carry the difference, not scale.
nine colours.
no additions without a palette review.
one mark per drink.
every beverage gets one distinguishing mark, never two.
logo & wordmark
the mark
60px = 0.5 × 120pxclear space is half the mark's height. it is never baked into the file. the file is edge-to-edge, the space belongs to whoever places it.
the lockup
the wordmark is live text. Inter Bold, lowercase, darkroast. the mark is 1.35 × the ascender tall, sits 0.55 × the ascender away, and centres on the optical middle of the x-height rather than the bounding box, so the b/d ascenders don't drag it upward.
two marks, two jobs
full mark · 1.43:1
small mark · 1.15:1the full mark is 1.43:1 and needs width. below 24px it loses its eyes, so small surfaces get the single-mug mark at 1.15:1. one cup, complete liquid, handle mirrored to the left so the mug faces into the frame.
at real size
96px
48px
32px
16px96px · 1×48px · 2×32px · 3×16px · 6×rounded corners are baked in at 24% radius, browsers do not mask favicons the way app platforms do. the top row is each file at its true pixel size, so what you see is what survives; on a retina screen those get smoothed, because a 96px file has no second pixel to give. the bottom row is the same files at whole-number zoom with smoothing off and every block is one real pixel.
the app icon
iOS squircleAndroid circleAndroid rounded squarethe icon is opaque. iOS rejects transparency, and a milk field is what makes the mugs read at 60px on a home screen. one image, three platform masks.
the logo uses citrus #ff572c, the same orange as the reactions. it previously used #ff663f, 24 RGB units away, close enough to read as a mistake rather than a choice.