Skip to content
Browse
Library

VOLDOG Food. Lime ribbon over a butcher’s apron.

  • Commerce
  • Light theme
  • 11 colors
  • 1 typeface

VOLDOG Food is a Greek raw-food (B.A.R.F) pet shop that wraps a WooCommerce catalogue in a playful, rounded, sticker-like system. A white canvas alternates with Oat Canvas #f4f1eb bands joined by big curved dividers, while every word is set in deep Butcher Green #204e4a rather than black. Acid Lime Zest #e1e53f carries the conversion pills, the species toggle, a text ribbon that snakes across the page and hand-drawn underlines; Paprika Price #c1452e is kept for prices. Typography is a single round, friendly Peridot PE family, with 38.4px section headings that switch from weight 500 to 700 mid-sentence to stress the key words. Corners are generous (30px cards, 88px hero frame, pill buttons) and depth comes from very faint 34px blurs.

Visit voldogfood.com
Screenshot of VOLDOG Food
Captured from voldogfood.com on October 18, 2026

VOLDOG Food design system

VOLDOG Food

Brand1

  • Wordmark, all headings and body copy, button labels, icons, footer field — a deep pine green that replaces black so even the text feels like food packaging

Accent4

  • Primary arrow pills, SHOP ONLINE, active species tab, the snaking text ribbon and hand-drawn underlines — the one loud colour on the page

  • Product prices and price ranges under every card — a warm butcher-counter red used only for money

  • Hand-drawn arrows, squiggles and spark marks beside headings — a doodle colour, never a fill or text colour

  • Overlay on the closing dog photo that melts the image into the green footer

Neutrals6

  • Main page canvas, sticky header, review and benefit cards, the 35px frame around the hero

  • Alternate section bands for the B.A.R.F benefits and customer reviews, entered through wide curved edges

  • Product and treat card fills, secondary pill buttons and FAQ plus discs — a cool gray that lets packshots float

  • FAQ row separators and fine card outlines, measured as rgba(32, 78, 74, 0.11) — Butcher Green at low strength

  • Footer links, addresses and legal text on Butcher Green, measured as white at 66% opacity

  • Review-widget body text and default theme copy, the only neutral gray text on the page

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Paper on Butcher Green

9.33 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.