Servizio Primo × DEFI Snacks LLC · v2.0 · All values live-extracted via browser JS audit
Design
System
Master Guide
System
Master Guide
Every color, font, size, radius, and button style confirmed by extracting computed CSS directly from the live Shopify store. Zero assumptions.
6
Errors Fixed from v1
4
Flavor SKUs
1
Site Font (Jost)
30px
All Button Radius
01
Foundation
COLOR SYSTEM
Primary Brand Colors ⚠ Pink corrected from #EC008C → #FF007E
DEFI Pink
#FF007E rgb(255, 0, 126)
All CTAs · Cart button fill · Announcement bars · Popup background · ACCOUNT button border/text · Himalayan Salt flavor · Hover accents
Near Black
#121212 rgb(18, 18, 18)
All body text · Product headings · Nav links · Footer background · SHOP NOW button fill · Note: NOT pure #000000
Flavor Accent Colors
Dark Chocolate
#6F2C91
Dark Choc SKU only
Milk Chocolate
#0080C6
Milk Choc SKU only
Peanut Butter
#EF8F31
PB Crunch SKU only
Himalayan Salt
#FF007E
Shares brand pink — intentional (hero SKU)
UI Neutrals
100
#F5F3F0
200
#DEDBD7
300
#C2BEB8
400
#938F89
500
#686360
600
#3C3936
Near Black
#121212
Usage Rules
CTA on white bg
Pink fill (#FF007E) · white text
Hero CTA on pink bg
White fill · pink text · 1px pink border
SHOP NOW on pink banner
Near-black fill (#121212) · white text
ACCOUNT button
Transparent bg · pink border · pink text
Logo color
Black on white · White on dark/pink · Never pink
Body text
#121212 everywhere — NOT #000000
02
Foundation
TYPOGRAPHY
⚠ CRITICAL CORRECTION from v1
The entire DEFI website uses a single font family: Jost (Google Fonts). All headings, body copy, nav items, buttons, prices — everything. Futura only appears in the third-party popup widget. Bebas Neue is not used anywhere on the site.
Site Font — All Elements
Jost
Google Fonts. Weights: 400, 500, 600, 700. Import: fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700
Futura (Packaging only)
FuturaStd-Heavy / FuturaStd-Medium
Physical packaging + third-party popup widget ONLY. Not the Shopify theme.
DEFI Dark Chocolate Crispy Superfood Bite
Style H1 — Product TitleFont Jost 700Size 42pxLine-height 1.2Color #121212
Ingredient Philosophy
Style H3 DisplayFont Jost 700Size 58pxColor #FFFFFF on black bg
Packed with 25g+ of protein DEFI is an indulgent snacking experience
Style H2 Section BannerFont Jost 700Size 42pxColor #FFFFFF on pink bg
Let us DEFI the odds, together.
Style H2 MidFont Jost 700Size 32pxColor #121212
Our Products
Style H2 SmallFont Jost 700Size 24pxColor #121212
DEFI™ stands for Delicious Energizing Fitness Indulgence and combines real decadent chocolate with functional ingredients like buckwheat and protein.
Style BodyFont Jost 400Size 17pxLine-height 1.65Color #121212
HOME · SHOP · ABOUT · CONTACT · NEWS
Style Nav ItemFont Jost 500Size 17pxCase UPPERCASE
$14.99 USD
Style PriceFont Jost 400Size ~28px on PDPNote Weight 400 (regular) — confirmed live
ADD TO CART
Style Button LabelFont Jost 500Size 19.125pxCase UPPERCASE
03
Foundation
SPACING & GRID
Spacing Scale
--s1
4px
Icon gaps, micro padding
--s2
8px
Button icon gap
--s3
12px
Small component padding
--s4
16px
Base unit
--s5
24px
Card padding
--s6
32px
Section inner spacing
--s7
48px
Section header → content gap
--s8
64px
Section padding (desktop)
--s9
96px
Large section padding
--s10
128px
Hero padding, max-scale
Grid Layouts
4-Column Product Grid — Homepage · Collections
1
2
3
4
Gap: 24px · Max-width: 1440px · Breaks to 2-col @768px · 1-col @480px
2-Column Content Block — Flavor Showcase · Ingredients
Image / Product Left
Text + CTA Right
50/50 · Alternates image side per SKU · Stacks on mobile
Border Radius ⚠ Buttons confirmed 30px — NOT pill 999px
sm
4px
md
8px
lg
16px
BUTTONS
30px
pill
999px
04
Foundation
MOTION
Button Hover Lift
All 30px-radius buttons lift 1px on hover with shadow. No scale transforms.
transition: all 0.18s cubic-bezier(0.4,0,0.2,1)
Announcement Bar Marquee
Continuous loop on pink bg. Speed: 10s linear.
Receive free shipping on orders $49 or more with code FREESHIP·Receive free shipping on orders $49 or more with code FREESHIP·Receive free shipping on orders $49 or more with code FREESHIP·Receive free shipping on orders $49 or more with code FREESHIP
animation: marquee 10s linear infinite
Popup Entry
Pink popup scales in + fades. 2–3s delay after load.
opacity 0→1 + scale 0.92→1 · 0.3s · cubic-bezier(0.34,1.56,0.64,1)
Tone Principle
Energetic but controlled. Max 400ms any element. CSS transitions preferred. No bouncy spring easing.
05
Brand
LOGO & MARK
defi
Primary — Near-Black on White
defi
Reversed — White on Pink
defi
Reversed — White on Dark
Inner Page Banner
INGREDIENTS
Wordmark
Custom lowercase Jost-style with ⚡ lightning bolt on the "i"
Lightning Bolt ⚡
Standalone submark · protein badge accent
Pack Tagline
SNACKING EVERYWHERE™ — below wordmark on all pouches
✕ Pink wordmark
Pink is for backgrounds and CTAs. Logo stays #121212 on light.
✕ Distort proportions
Never stretch, skew, or add drop shadow.
✕ Remove the bolt
The ⚡ bolt is integral to the wordmark.
06
Brand
FLAVOR SYSTEM
01
DARK
CHOCOLATE
CHOCOLATE
Crispy Superfood Bite
#6F2C91
26g
protein per bag
$14.99 USD
02
DARK CHOC
HIMALAYAN SALT
HIMALAYAN SALT
Crispy Superfood Bite
#FF007E
25g
protein per bag
$14.99 USD
03
MILK
CHOCOLATE
CHOCOLATE
Crispy Superfood Bite
#0080C6
26g
protein per bag
$14.99 USD
04
MILK CHOC
PEANUT BUTTER
PEANUT BUTTER
Crispy Superfood Bite
#EF8F31
26g
protein per bag
$14.99 USD
07
Brand
PACKAGING
26g
PROTEIN
PER BAG
PER BAG
defi
SNACKING EVERYWHERE™
MILK
CHOCOLATE
CHOCOLATE
Crispy Superfood Bite
GF
FI
NG
1
Logo + Tagline (top center)
defi™ wordmark + "SNACKING EVERYWHERE™". #121212 on white pouch.
2
Flavor Name Block (~40% of front)
ALL CAPS, bold. SKU accent color. 2-line max.
3
Protein Badge (top right)
Circular badge in SKU accent color. "25g/26g PROTEIN PER BAG."
4
Athlete Illustration
Female athlete running/sprinting. Dynamic pose. SKU accent color.
5
Claim Badges ×3
GLUTEN FREE · FIBER · NON-GMO. Black circular outlined badges.
6
Net Weight
NET WT. 4OZ (113G) — bottom of pouch.
08
Brand
PHOTOGRAPHY
🏋️
Fitness / Lifestyle
Active women in gym, CrossFit, yoga, running. Real environments. Motion over static poses. Racially diverse.
🍫
Product Hero
Pouches on #FF007E background. Products diagonal/fanned — never upright.
🌾
Ingredient Closeups
Macro shots: buckwheat, chocolate, salt, protein powder. White/neutral bg.
👥
Community / Mission
Women post-workout sharing product. Candid, never staged. Diverse casting.
🚫
What to Avoid
No AI imagery. No stock "gym girls." No before/after. No diet culture aesthetics.
09
Components
BUTTON SYSTEM
⚠ 3 corrections from v1: (1) Radius is 30px, not pill. (2) Hero CTA is white + pink outline. (3) ACCOUNT is pink border + pink text.
① ADD TO CART — Pink fill · White · 30px radius · Jost 500 · 19.125px (LIVE)
② HERO CTA — White bg · Pink text · 1px pink border · 30px radius (LIVE)
③ ACCOUNT — Transparent · Pink border · Pink text · 30px radius (LIVE)
④ CART — Pink fill · White · 30px radius (LIVE)
⑤ SHOP NOW on pink banner — Near-black fill · White · 30px radius
⑥ Shop Pay
| Button | Background | Text | Border | Radius | Font | Use |
|---|---|---|---|---|---|---|
| ADD TO CART | #FF007E | #FFFFFF | None | 30px | Jost 500 19.125px uppercase | All ATC buttons |
| Hero CTA | #FFFFFF | #FF007E | 1px solid #FF007E | 30px | Jost 500 19.125px uppercase | "SHOP THE DEFI FLAVORS" |
| ACCOUNT | Transparent | #FF007E | 1px solid #FF007E | 30px | Jost 500 17px uppercase | Header account |
| CART | #FF007E | #FFFFFF | None | 30px | Jost 500 17px | Header cart |
| SHOP NOW | #121212 | #FFFFFF | None | 30px | Jost 500 19.125px uppercase | Pink banner CTAs |
10
Components
UI COMPONENTS
Site Header — Full Structure (Live)
📘 📷 🔗
Winner of the Food & Beverage Magazine's Editor's Top Pick: 2025 Products to Watch(USD $) ▾Top strip: #FF007E bg · ACCOUNT = pink border + pink text, 30px radius · CART = pink fill, white, 30px radius
SMS / Email Popup
defi
Get 10% OFF your first order
#FF007E bg · 10% off offer · SMS: (833) 362-4837
Product Card — card--no-radius (Live)
defi
DEFI Dark Chocolate Crispy Superfood Bite
$14.99 USD
NO border-radius · NO border · NO box-shadow (class: card--no-radius)
Ingredient Strip — #121212 bg
🌾
Sprouted Buckwheat
🍫
Chocolate
💪
Protein Crisps
⚗️
Protein Powder
Quantity Selector (PDP) — 30px radius, #121212 border
1
Footer — #121212 bg
DEFI Snacks
f
ig
li
Our Products
DEFI Dark Chocolate
DEFI Himalayan Salt
DEFI Peanut Butter Crunch
DEFI Milk Chocolate
About Us
About
Ingredients
Store Locator
11
Components
BADGES & CLAIMS
25g+PROTEIN
25g+ Protein
GLUTEN
FREE
FREE
Gluten Free
FIBER
Fiber
GMO
FREE
FREE
GMO Free
Approved Claims
✓"25g+ protein per bag (6–7 grams per 2-piece serving)"
✓"Naturally gluten-free and grain-free"
✓"Single-origin non-GMO chocolate"
✓"EU-grade clean whey crisps + casein protein"
✓"No sucralose. No aspartame. No ace-K. No 'natural flavors' as a mystery dump. Clean label, full stop."
✓"Quality ingredients earn moderation. Deprivation does not."
✓"Less than 2% of VC funding goes to female founders."
12
Voice
VOICE & TONE
Archetype
Outlaw with a hint of Hero
Tone Triad
Edgy · Provocative · Strong
Forbidden Phrases
"Guilt-free" · "Sinful" · "Cheat day" · "Skinny"
✓ DO
✓Say what nobody else will say. Name fake ingredients on camera.
✓Talk about the label. The label is the receipt.
✓Lift other women up. Mention the mission and Tatyana's story.
✓Use: "Quality ingredients earn moderation. Deprivation does not."
✓Come for diet culture and bad ingredients — not the people eating them.
Example ✓
"If you have to put 14 ingredients in a snack to fake the taste of chocolate, you don't have chocolate. DEFI uses 4."
✕ DON'T
✕Use "guilt-free," "sinful," "cheat day," "skinny," "good/bad food."
✕Body-shame, name-call, or attack a competitor's customers.
✕Make medical or weight-loss claims.
✕Say "healthy" without qualifying with specifics.
✕Use AI-generated generic CPG brand copy voice.
Example ✕
"Indulge guilt-free with our healthy, clean snack that helps you stay on track with your diet goals!"
13
Voice
SOCIAL & HANDLES
Instagram
@defisnacks
instagram.com/DEFISnacks
Primary visual platform. Reels, Stories, Carousels.
TikTok
@defisnacks_
tiktok.com/@defisnacks_
Note underscore. TikTok Shop integration.
Facebook
@DEFISnacks
facebook.com/DEFISnacks
Meta Ads primary paid channel.
LinkedIn
defi-snacks
linkedin.com/company/defi-snacks
B2B / wholesale / investor.
Website
defisnacks.com
www.defi-snacks.com
SMS
(833) 362-4837
defisnacks.texttaponit.com
Founder / Creators
tatyana.jones@defi-snacks.com
Wholesale / Retail
customer@defi-snacks.com
Partnerships
partnerships@defi-snacks.com
Media
media@defi-snacks.com
14
Voice
HASHTAG SYSTEM
Required on All Branded Creator Content
#DEFI#DEFISnacks#SnackingEverywhere#RebelAgainstTraditionalSnacking#FueledByDEFI#StrongIsBeautiful#FemaleFoundedCPG
Supplementary
#ProteinSnack#CleanLabel#RealChocolate#FemaleFounder#GlutenFree#GrainFree#Buckwheat#WomenInBusiness#NoDietCulture
FTC Compliance
#ad must appear in the first line of caption or first 3 seconds of video. No exceptions.
DEFI™
Design System Master Guide · v2.0 · Live-Audited
All values extracted via browser getComputedStyle() on live Shopify store
Compiled by Servizio Primo for DEFI Snacks LLC · May 2026 · Internal use only
All values extracted via browser getComputedStyle() on live Shopify store
Compiled by Servizio Primo for DEFI Snacks LLC · May 2026 · Internal use only
tatyana.jones@defi-snacks.com
defisnacks.com · @defisnacks · @defisnacks_
defisnacks.com · @defisnacks · @defisnacks_