What melon.tips is
A small, opinionated, single-operator site: half practical produce-section advice, half hobbyist research lab. Icebox watermelons, Northeast growing, smart picking, and a nerdy π DB of logged melons (photos, audio, acoustic metrics, Brix, cut results).
The motif
One idea, reused everywhere: the cross-section of a watermelon β red flesh, white rind, dark-green skin. It's the logo, the favicon, the hero stripes, and the score ladder.
The feel
A newspaper that loads fast. Utilitarian system type, warm off-white paper, near-zero motion. It deliberately doesn't want to look "designed."
The one emoji
π is load-bearing punctuation β in nav, buttons, headings, empty states, and the 1β10 score ladder. It is the icon system. No other decorative emoji, ever.
Voice & copy
Writes like someone who loves watermelons enough to be a little embarrassed about it β and commits to the bit completely.
House style
- Lowercase brand always β
melon.tips, even at the start of a sentence. - Sentence case for titles, headings, and buttons.
- Second person. "you," not "we at melon.tips."
- TLDR-first. Long guides open with a
TLDR:list, then go deep. - Numeric & specific β "around $100", "0β20 Brix", "Score: 8.42".
- Hedged & honest β "first, the honest disclaimerβ¦". Never overclaims.
Straight from the site
"A watermelon site should feel like a watermelon site."
melon.tips π watermelon everything β the global footer
"first, the honest disclaimer: there is no single foolproof external test for sweetness."
"No π melons π match π your π filters." β DB empty state
Do
- Blend shopper advice with refractometer math
- Qualify claims; refuse false certainty
- Use π mid-sentence as punctuation
- Stay specific, numeric, personal
Don't
- Corporate hedging β "at melon.tips, we believeβ¦"
- Synthetic hype β "the perfect melon awaits!"
- Title Case Headings
- FOMO / urgency / "limited time" β it's a research log, not a store
- Decorative emoji other than π
Color
A deliberately narrow palette: rind greens do the work, warm off-whites are the paper, and watermelon red is a garnish β never a load-bearing UI color.
Brand greens
Red & tints
Surfaces, text & lines
The hero gradient β watermelon-rind stripes
Type
System sans only β Arial, Helvetica, sans-serif. No webfonts load; the utilitarian read is the point. Mono is Consolas, Monaco, monospace for code.
Spacing, radii & shadows
Pills for interactive things, soft rounded rectangles for surfaces, and four tiers of warm low-alpha shadow. No inner shadows, no neumorphism, no glow.
Radii
--r-sm 6--r-md 10--r-xl 18--r-2xl 22--r-pillShadows
card-smcardbandheroSpacing scale (px)
Page gutter 24 (mobile 14). Section rhythm 28. Card padding 18.
4 Β· 8 Β· 12 Β· 16 Β· 18 Β· 24 Β· 28 Β· 34
Components
Buttons are always pills with a 1-pixel hover lift β no color change, no focus ring (a known gap). Cards are presentational, not interactive.
Buttons on dark hero
Primary: white fill, dark-green text. Secondary: 13% white fill, 28% border. Hover: translateY(-1px).
Buttons on light
Solid --accent green, white text. Red is never a button color.
Chips (status)
Verbatim lower_snake_case DB strings.
Callout system
What that means
Tap sound is measurable vibration, not intuition.
Score ladder
π.repeat(score) β 1 to 10 melons from final_score.
Topbar
Iconography
There is no icon system. There's the π emoji, the melon-gem mark, and a handful of unicode glyphs. That's the whole vocabulary.
π the emoji
Nav, buttons, headings, empty states, favicon fallback, score ladder. When you'd reach for an icon, the answer is π.
the melon-gem mark
unicode affordances
No Lucide/Heroicons/Feather. Lucide is a flagged fallback only if a design truly needs more glyphs β document it.
Hard rules
The non-negotiables. If an agent breaks one of these, it's off-brand.
Copy-paste brief for AI agents
Drop this straight into an agent's context, or just hand it the URL of this page. It's the whole system, condensed.
β¦ brief loads here β¦