Design System
Hoobie's design language is neobrutalism — specifically the warmer end sometimes called soft brutalism — with a twist we call meme UI: cartoonish, ridiculously bright, and unapologetically fun. Bold colors, thick borders, chunky buttons, drop shadows that make things feel tactile. The light theme is "Velvet Overground." The dark theme is "Cosmic Berry." Both feel like software that's having a good time.
Day Palette
Every color has a name. Day colors are always these values — they never get redefined in dark mode.
Flamingo
#FF1493
Primary accent
Dragonfruit
#CC1076
Headings, hover
Banana
#FFD700
Page background
Butter
#fae793
Card surfaces
Cream
#faf3d0
Subtle backgrounds
Almond Milk
#fffef6
Content cards
Barbie
#ff3fa7
Button hover
Beetjuice
#7a0042
Body text
Night Palette
The dark theme has its own named palette. Semantic aliases swap to these in dark mode.
Blackberry
#110d1f
Page background
Plum
#1a1530
Muted surfaces
Eggplant
#231d3a
Cards, panels
Fig
#2d2648
Inputs, elevated
Peony
#ff2d9b
Primary accent
Rosehip
#ff5cb8
Headings, hover
Orchid
#e4d8f4
Body text
Mulberry
#7c4dab
Borders, shadows
Status Colors
Todo
#9B6BCD / #b794e0
In Progress
#FF6347 / #ff8066
Done
#7EC850 / #90e868
Typography
Red Hat Display
Primary font — headings and body
Regular 400 — Supporting text
Semibold 600 — Body text (default)
Bold 700 — Labels, buttons, nav
Extrabold 800 — Page headings
Buttons
Bold buttons are cartoon skeuomorphic — they mimic physical press buttons with thick borders and colored drop shadows, depressing with an inset shadow on hover like a toy you'd actually push. Outline buttons are for secondary actions — they float up on hover with an expanding background.
Cards
Interactive Card
Depresses on hover with accent inset shadow
Content Card
Used for static content like this page (public-card)
Text Links
Inline links use the highlighted style — accent text on flamingo background, darkens on hover.
Form Inputs
3px flamingo border, rounded corners, focus ring
Brand Assets
Logo Lockup
Icon Lockup
Meme Icon Lockup
Design Principles
- Neobrutalist foundation — thick borders, saturated colors, visible shadows, no pretending to be flat
- Cartoon skeuomorphic interactions — buttons depress like toys, cards shift, things feel physical
- Meme UI energy — cartoonish, ridiculously bright, unapologetically fun
- Fun over corporate — this is a life goals app, not enterprise software
- Named colors — every palette color has a memorable name
- Two themes, one personality — Velvet Overground (light) and Night Rave (dark) feel like the same app