NuuVim Framework
Version 2.1
All tokens, components, and visual patterns observed from the live NuuVim Webflow site — gradients, image framing, button variants, pricing widget, FAQ, and calculator fully documented.
Color Tokens
Never stack two identical backgrounds. Alternate cream / white / dark to breathe.
#faf5ed — cream#ffffff — white#ffffff — white#faf5ed — cream#ffffff — white#faf5ed — cream--grad-section-green--grad-hero over image#faf5ed — creamGradients
Gradients are used for hero overlays, section backgrounds, product card photography backgrounds, and decorative blobs. They are always directional and desaturate toward transparency or a lighter stop — never loud or neon.
Doctor-Led Weight Loss.
Starting at $149/mo.
Skip the waiting room. GLP-1 treatments prescribed by licensed providers, delivered to your door.
See If You QualifyThe live site hero: green gradient overlay applied over a product/lifestyle image. Headline and CTA anchored left in the high-opacity region. Product photography sits right, partially revealed through the gradient fade.
Proven Weight Loss Solutions
Find the right GLP-1 medication with confidence that comes from knowing it is doctor-approved and budget-friendly.
| Gradient | Context | Never |
|---|---|---|
| --grad-hero | Hero section overlay only — on top of photography | Applied to a solid color background |
| --grad-hero-overlay | Dark photography hero alternate | On cream or card backgrounds |
| --grad-section-green | Full section background — product grids | Inside cards or containers |
| Product card bg | Image area of product cards + pricing widget | As a page section background |
| Radial blob | Decorative depth in dark containers (CTA, cover) | As primary background element |
Typography
| Variable | Family | Role | Weights |
|---|---|---|---|
--font-display | DM Serif Display | H1–H3, stat numbers, logo, pricing amounts | 400 only — never bold |
--font-body | Fustat | Body, buttons, labels, nav, UI, FAQ, widget | 300 / 400 / 500 / 600 / 700 |
Doctor-Led Weight Loss.
Starting at $149/mo.
H1 — Hero headline, as seen on live site. Never bold. Two-line structure standard.
We will fix your broken metabolism.
H2 — Section headlines. Live site uses italic DM Serif on highlight spans in some contexts. Use font-style: italic on .highlight-heading only for strong emotional hooks.
Semaglutide Injectable
H3 — Product card titles, feature headers. Used at 20px within product cards.
Traditional diets don't work because nearly 70% of weight is genetically determined. With medication, you will work with your body rather than against it.
Hero / section body. Bold used for two-tone emphasis: .highlight-body for green, inline font-weight:700; color: --color-heading for dark bold emphasis.
Want to reach your goal weight fast?
color: #66845b; font-weight: 400. Optional: italic for emotional H2 hooks.
Improving your metabolism and knocking out food cravings. It's not just weight loss; it's metabolic science.
color: #66845b; font-weight: 700.
Spacing & Layout
| Value | Context | Mobile (≤991px) |
|---|---|---|
16px | Button groups, icon + text pairs, pill rows | 16px |
20px | Card grid gaps (mobile) | — |
24px | Card grid gaps, container side padding | 20px side |
40px | Mobile stack gap; section header bottom margin (mobile) | — |
60px | Standard desktop flex gap; container padding | → 20px gap |
80px | Hero/split/CTA structural gap; CTA banner internal padding | → 36–40px |
100px | Section top/bottom padding (desktop) | → 50px |
| Rule | Desktop | ≤991px |
|---|---|---|
| Flex direction | row | column (always stack) |
| Element widths | flex / % | 100% |
| Section padding | 100px | 50px |
| Container padding | 60px | 30–40px |
| H2 font-size | up to 52px | 32px max |
| Body font-size | 17px | 16px |
| Hover transforms | on | off (transform: none) |
| Product grid | 3 or 4 columns | 1 column scroll or carousel |
Shadows & Radius
rgba(0,0,0,0.06)
rgba(0,0,0,0.10)
rgba(86,111,77,0.3)
rgba(0,0,0,0.10)
rgba(0,0,0,0.13)
rgba(86,111,77,0.12)
Buttons
The live site uses five button variants. The .btn-dark (near-black pill) is a key addition from the site — used on product cards, hero CTAs, and anywhere the green button would visually clash with a green background.
Background: #1a1a1a. Used on product cards and hero buttons. Letter-spacing: uppercase 0.06–0.1em optional. This is the dominant CTA style on product-level pages and card CTAs in the live site.
On the green gradient section bg, use .btn-dark as primary and .btn-white as secondary. Green buttons disappear against green backgrounds.
| Variant | Use on | Never use on |
|---|---|---|
| .btn (green) | White, cream, light container bg, hero (over dark overlay) | Green section bg |
| .btn-dark | Product cards, green section bg, light bg as alternate primary | Dark (#1a1a1a) backgrounds |
| .btn-outline | White / light bg as secondary | Dark or green bg |
| .btn-cream | White bg only as secondary | Cream backgrounds |
| .btn-white | Dark (#1a1a1a) bg, CTA banner, featured pricing card | Light backgrounds |
| .btn-ghost | Hero overlay, dark sections as tertiary | Light backgrounds |
Labels & Pills
| Label type | Font | Size | Weight | Color | Notes |
|---|---|---|---|---|---|
| Eyebrow pill | Fustat | 12px | 600 | --color-green | Bg: rgba(255,255,255,0.75), dot before |
| Section label (loose) | Fustat | 12px | 700 | --color-highlight | No bg, uppercase, 0.1em spacing |
| "COMPOUNDED" tag | Fustat | 10px | 700 | --color-body, 65% opacity | Positioned top-left of product card image |
| Price/promo line | Fustat | 12px | 600 | --color-highlight | "Starting at $88/mo | New GLP-1 Users" |
| Pricing tag pill | Fustat | 11px | 700 | --color-green | Bg: --color-cream, border: rgba(86,111,77,0.12) |
| Before/After label | Fustat | 10px | 700 | #fff | bg: rgba(0,0,0,0.5), pill, positioned bottom-center of image |
Image Framing
NuuVim uses four distinct image framing patterns across the live site. Each has specific border-radius, shadow, and positional rules.
Two portrait-ratio images overlapping. Front image has a white border to lift it from the back. Used in "We will fix your broken metabolism" section and other split-text layouts.
| Frame A (back) | 185×280px at desktop, border-radius: 16px |
| Frame B (front) | 165×240px, border-radius: 16px, border: 3px solid #fff, z-index: 3 |
| Both | box-shadow: --shadow-card-lg |
| Container | position: relative, no overflow hidden (frames extend beyond) |
Side-by-side in one card
Before/After frames are a single card split 50/50 horizontally. Each half has a BEFORE/AFTER pill label anchored bottom-center over a semi-transparent dark scrim.
| Card border-radius | --radius-card (20px) |
| Label style | 10px Fustat 700, white, rgba(0,0,0,0.5) bg, pill shape |
| Shadow | --shadow-card-lg |
| Aspect ratio | ~1:0.75 landscape |
The warm beige/tan background used behind every product vial photograph. Creates a studio-consistent look that works on any page section color.
| Background | linear-gradient(145deg, #e8e0d4, #d4c8bc) |
| Border-radius | 16px (inside card) / 20px (top corners of product card) |
| Shadow | --shadow-card-lg when standalone; none when inside card |
| COMPOUNDED tag | 10px Fustat 700 uppercase, top-left, 65% opacity |
Small label overlaid on imagery. Uses backdrop-filter: blur(6px) and rgba(255,255,255,0.7) for readability on any image content.
Product Cards
Semaglutide Injectable
Tirzepatide Injectable
| Property | Value |
|---|---|
| Card bg | linear-gradient(160deg, #f0ece4 0%, #e4ddd3 100%) — warm parchment |
| Border-radius | --radius-card (20px) |
| Shadow | --shadow-card-lg; hover → 0 24px 48px rgba(0,0,0,0.13) |
| Hover | translateY(-4px) |
| Image area | 200px tall, product photo background gradient, border-radius top only |
| COMPOUNDED tag | position: absolute, top-left, 10px Fustat 700, --color-body 65% |
| Price line | 12px Fustat 600, --color-highlight, above h3 |
| Title | DM Serif Display 20px 400 |
| Sub-label | Fustat 13px, --color-body |
| CTA | .btn.btn-dark.btn-full — dark pill, full width, uppercase 0.07em tracking |
| Section background | --grad-section-green behind the card grid |
Pricing Widget
The pricing widget appears on individual product pages — a self-contained card combining a product photo, tab switcher (New / Current user), price, features list, trust signals, and payment icons.
| Element | Spec |
|---|---|
| Container | bg: #fff, border-radius: --radius-container (30px), max-width: 440px, --shadow-card-lg |
| Photo area | 180px tall, product photography gradient |
| Tab switcher | Active: bg --color-green, white text, 100px radius. Inactive: transparent, --color-body |
| Price | "From" — Fustat 13px; Amount — DM Serif 48px; "/month" — Fustat 15px |
| Tagline | Fustat 13px 700, --color-heading, ALL / ONE / NO bolded |
| Feature icon | 32px sq, border-radius: 8px, bg: --color-card-bg |
| CTA | .btn-dark.btn-full |
| Stars | color: #c8a84b (muted gold) |
| Payment chips | Fustat Mono, 11px 700, border: 1.5px solid rgba(0,0,0,0.15), border-radius: 5px |
| Cancel | 12px, underlined, --color-body |
Stats Cards
Why are so many patients signing up for NuuVim?
It works.
| Card bg | --color-card-bg (#e6ebe5) |
| Border-radius | --radius-card (20px) |
| Number font | DM Serif Display 42px, --color-heading |
| Number highlight | .highlight-heading — color: #66845b |
| Unit suffix | DM Serif Display 22px, same color as number |
| Label | Fustat 13px 500, --color-body, margin-top: 8px |
| Section heading style | H2 with highlight-heading italic on "It works." |
FAQ Accordion
Have Questions?
| Section bg | #ffffff |
| Item separator | 1px solid rgba(86,111,77,0.1) |
| Question font | Fustat 600 16px, --color-heading |
| Answer font | Fustat 400 15px, --color-highlight (green tint for answers) |
| Toggle icon | 34px circle, bg: --color-green, white ›, rotates 90° when open |
| Open animation | max-height transition 0.4s ease |
| Max-width | 760px centered |
Calculator Widget
Used in split sections alongside a body copy column. The slider updates the "weight loss potential" number in real-time (calculated as ~23% of current weight, rounded to nearest lb).
| Widget bg | --color-card-bg (#e6ebe5) |
| Border-radius | --radius-container (30px) |
| Shadow | --shadow-card |
| Label font | Fustat 15px, --color-body |
| Value font | DM Serif Display 40px, --color-heading |
| Result value | Same font, color: --color-highlight (green) |
| Slider track | 4px, rgba(86,111,77,0.25) |
| Slider thumb | #fff, border: 3px solid --color-green, 18px circle |
| Divider | 1px solid rgba(86,111,77,0.12) above result row |
Section Headers
Proven Weight Loss Solutions
Find the right GLP-1 medication with confidence that comes from knowing it is doctor-approved and budget-friendly.
We will fix your broken metabolism.
Traditional diets don't work because nearly 70% of weight is genetically determined.
Real People, Real Results
Here's what our clients have to say about working with us and how we helped bring their vision to life.
Animation Protocol
opacity: 0;
transform: translateY(40px); /* or 60px for large sections */
/* Transition — cubic-bezier is mandatory */
transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1),
transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
/* Triggered by IntersectionObserver adding .is-visible */
.is-visible {
opacity: 1 !important;
transform: translateY(0) !important;
}
| Class | Delay | Usage |
|---|---|---|
.stagger-1 | 0.10s | 1st in sibling group |
.stagger-2 | 0.20s | 2nd |
.stagger-3 | 0.30s | 3rd |
.stagger-4 | 0.40s | 4th |
.stagger-5 | 0.50s | 5th |
.stagger-6 | 0.60s | 6th |
Usage Rules
- DM Serif Display weight: 400 always — never bold
- Use .btn-dark on green section backgrounds and product cards
- Alternate cream / white / gradient section backgrounds
- Apply IntersectionObserver to every .reveal element
- Use product photography gradient bg consistently across cards and widgets
- Use italic DM Serif on .highlight-heading for emotional H2 hooks
- Place COMPOUNDED tag top-left of product card image area
- Disable hover transforms at ≤991px
- Use .btn (green) on a green gradient section background
- Use .btn-cream on a cream background
- Stack two identical section backgrounds
- Bold DM Serif Display — ever
- Skip animation on any new component — nothing is static
- Use the gradient hero overlay on a solid color (no image) background
- Use Inter, Arial, Roboto, or system fonts anywhere
- Exceed 1200px max-width on any content container
- Color: Uses only the 7 defined CSS variable tokens
- Gradient: If a gradient is used, it maps to one of the 4 defined gradient tokens
- Typography: DM Serif 400 for display, Fustat for UI — no exceptions
- Button: Correct variant for background context — green never on green
- Image framing: Matches one of the 4 defined framing patterns
- Radius: Matches a defined token (6 / 14 / 16 / 18 / 20 / 30 / 100px)
- Animation: .reveal + IntersectionObserver applied
- Mobile: Tested at 991px — stacks, 100% widths, padding halved
- Hover: Disabled at mobile breakpoint