Brand kit

The Vitaminly identity

Everything here is derived from the app itself — the palette is lifted verbatim from VColors.swift, and the mark carries forward the bicolour capsule split from the original icon.

01

The mark

A capsule "V" — two rounded strokes with a hard horizontal split, echoing a two-tone pill, cradling a wellness plus in its negative space.

Vitaminly mark, full colour

Primary mark

logo-mark.svg

Monotone

logo-mark-mono.svg · inherits currentColor
Vitaminly horizontal lockup

Horizontal lockup

logo-lockup.svg · +light variant

02

App icon

Full-bleed 1024 × 1024 on Deep Midnight Purple with a violet bloom behind the mark. iOS applies its own squircle — the corners shown here are illustrative.

Vitaminly app icon at 180px
180 · @3x
Vitaminly app icon at 120px
120 · @2x
Vitaminly app icon at 87px
87 · settings
Vitaminly app icon at 60px
60 · spotlight
Vitaminly favicon
40 · favicon
Vitaminly favicon small
29 · notification

03

Colour

Every value below matches the app's VColors enum exactly.

Deep Midnight Purple#0D0B14background
Flat Dark Slate#1A1625surface
Electric Violet#A855F7primaryAccent
High-Contrast White#F9FAFBtextPrimary
Muted Grey#9CA3AFtextSecondary
Success#22C55Elogged · safe
Warning#FBBF24overlap · low stock
Danger#EF4444critical interaction
Violet 300#D8B4FEicon highlight
Violet 700#7C3AEDweb only · hover

04

Type

The app ships San Francisco. On the web, Plus Jakarta Sans carries display weight, Inter carries body, and JetBrains Mono handles the tracked uppercase labels that mirror VTypography.caption().

Display / H1 · 800Finally understood
Display / H2 · 800Take control of your shelf
Body / Inter · 400Point your camera at the shelf and Vitaminly identifies every bottle, matches it against published label records, and tells you what your stack is actually doing.
Label / Mono · 600Supplements taken · 4 of 6

05

Usage

Do

  • Keep clear space around the mark equal to the width of one stroke.
  • Use the monotone mark when the background is busy or single-colour.
  • Put the full-colour mark on white, Deep Midnight Purple, or a pastel tint.
  • Keep the plus centred in the V's negative space — it's part of the mark, not a badge.
  • Drop the plus below roughly 24 px, where it stops resolving. That's what the favicon does.

Don't

  • Recolour the mark outside the violet ramp, or apply a gradient across both arms.
  • Stretch, skew, outline or add a drop shadow to the mark.
  • Set the wordmark in anything other than Plus Jakarta Sans 800.
  • Place the full-colour mark on mid-tone violet, where the two arms stop separating.
  • Rebuild the split by hand — the gap is a fixed 8 units in a 512 grid.