Brand

The single source of truth for the DietStyler visual identity — logo, color, and type. Pull assets from here for any surface or repo. For the full design spec (component recipes, accessibility rules), see DESIGN.md in the repo.

Logo

A monochrome leaf mark with a single green accent vein, paired with the monochrome wordmark. The mark tile stays near-black on every background; only the wordmark color changes.

DietStylerLockup — on light

DietStylerLockup — on dark

Mark — favicon, avatars

Mark — on muted

Lockup (SVG)Lockup on dark (SVG)Mark (SVG)

Logo do & don’t

✅ Keep clear space around the lockup (≈ the mark’s height).
✅ Use the SVGs above; let them scale.
✅ Switch to the on-dark wordmark over zinc-900 / zinc-950.

❌ Don’t recolor the wordmark or the leaf vein.
❌ Don’t add gradients, shadows, or outlines.
❌ Don’t reintroduce the old burger/barbell logo or any script font.

Color

Monochrome by default: neutral zinc carries the UI. A single restrained accent — brand green — appears only on the primary CTA, links, the logo vein, and small highlights. Use green-700for any green text or links on white (it’s the accessible step, 5.76:1).

Neutrals — zinc

white

#ffffff

Primary surface

zinc-50

#fafafa

Muted section bg

zinc-100

#f4f4f5

Subtle fills

zinc-200

#e4e4e7

Hairline borders

zinc-300

#d4d4d8

Button borders

zinc-500

#71717a

Muted text

zinc-600

#52525b

Body text

zinc-900

#18181b

Ink / dark bands

zinc-950

#09090b

Footer

Accent — brand green

green-50

#f3f9e8

green-100

#e3f1c8

green-200

#c9e69b

green-300

#a9d76a

green-400

#8bc63f

Accent on dark

green-500

#6cb000

Logo vein

green-600

#559200

Small accents, dots

green-700

#437200

PRIMARY — CTA, links

green-800

#34590a

green-900

#2c4a11

Typography

Geist across the board. Headings are font-semibold tracking-tight, UI labels font-medium, body font-normal.

Aa — Hero, text-5xl

Section heading — text-3xl

Card heading — text-lg

Body copy — text-base, zinc-600. The quick brown fox jumps over the lazy dog.

Supporting / muted — text-sm, zinc-500.

Mono — Geist Mono, for tokens & code.

Iconography

Icons come from lucide-react. They’re monochrome (text-zinc-700) — never colored with the accent — and decorative icons are aria-hidden. The standard icon tile is a hairline-bordered square: h-10 w-10 rounded-lg border border-zinc-200 bg-zinc-50.

Voice

Clinical-calm and trustworthy — this is software RDs trust with client health data. Honest and plain: no fabricated stats, no overpromising. Restraint over decoration.