style.melon.tips 🍉

one shared set of tokens, type, and components. every host imports this. if a value is wrong here, production already knows.

visit melon.tips jump to tokens
color

palette 🍉

narrow on purpose. red is a garnish, never a button.

type

type scale

system sans only: arial, helvetica, sans-serif. no webfonts.

display 🍉

heading 1 — sentence case always

heading 2 — never title case

heading 3

lead paragraph, muted, 18px.

body copy at 15px / 1.55. numeric and specific: around $100, 0–20 brix, score: 8.42.

meta 13px · micro 12px

mono: Consolas, Monaco, monospace

components

buttons

always pills. hover lifts 1px, no color change. red is never a button.

primary on light secondary
primary on dark secondary on dark

cards, chips, callouts

card

white 0.94 + 1px line + soft shadow + backdrop-blur. presentational.

chips

wholeanalyzed_pre_cutcutarchived

verbatim lower_snake_case db strings.

score ladder

8.4🍉🍉🍉🍉🍉🍉🍉🍉
tldr — guide-box is a soft panel; guide-highlight is the green left-border tldr marker.

hedge confidently. know watermelons, refuse to overclaim.

assets

photography

real photos, not illustrations, per the hard rules. two treatments: a photo hero band, and a photo card for melon DB-style entries.

variant

hero--photo

same hero shell, a photo background instead of the gradient. gradient overlay keeps text readable.

cut watermelon, cross-section

photo in a card

the one card in this system that's interactive: it lifts on hover, standing in for a clickable melon DB entry.

presentational, for comparison

this card has no hover state, on purpose: not everything on the page is a link.

rules

hard rules

  1. lowercase brand mark always.
  2. system arial only. flag any font swap.
  3. no invented cta color — pills, white-on-dark / green-on-light. red ≠ button.
  4. don't replace 🍉 with generic icons.
  5. no new svg illustrations — use the mark, photos, or placeholders.
  6. hedge confidently.