The Design System.
A single source of truth for the refreshed vitaltears.org. Every component, divider, and color you see below is exactly what the homepage, Patients hub, and Providers hub will be built from. Approve this and the pages assemble themselves.
Color tokens
Pulled directly from the brand SVGs and the March 2025 Style Guide. These are the only colors that ship.
--vt-indigo for headings, --vt-slate (#3d4260) for body, --vt-slate-muted (#6b7194) for secondary.Typography
Poppins, weights 300 – 800. No secondary typeface ships with the brand.
Serum tears made simple.
Serum tears made simple.
The Vital Tears Process
Aseptically Processed
Vital Tears can provide your patients with hassle-free, rapid access to serum tears.
Autologous serum tears are customized eye drops made from a patient’s own blood serum according to the specifications ordered by their eye care provider.
Eyebrow + rule
The signature brand pattern — a small uppercase eyebrow followed by a short rounded rule. Used above every section heading.
Royal eyebrow · Gold rule (default)
Sky eyebrow · Sky rule
Gold eyebrow · Royal rule
Buttons
Three variants, two modifiers. Primary for patient navigation and default actions. Gold for provider sign-up, downloads, and premium asks. Ghost for secondary actions. --sm for compact size; --on-dark recolors any variant for indigo backgrounds. Every label stays on one line.
Small modifier
On indigo · use the --on-dark modifier
.vt-become in the header has its own dedicated pill style — not part of the general button family.Shadow scale
Four tokens. Two neutral steps cover every elevation need; two colored glows are reserved for brand CTAs. Most surfaces should use no shadow at all.
Page header
The header at the top of this page is the production header. Two rows, sticky, glass background. The For Patients and For Providers nav items open the mega menu showcased in §07.
- Utility bar — About Us, Contact & Support, Provider Portal (external; carries the small external-link glyph).
- Main row — Logo on the left, primary nav center-right (the For Patients / For Providers triggers are plain
<a>links that navigate to the section landing page; hover or keyboard focus opens the mega panel beside them), Become a Provider as the rightmost element with its own pill style. - Mobile (
<1024px): fixed bottom tab bar (Home, Patients, Providers, More) with a slide-up sheet; persona sections are collapsed until the user picks one. No anchor-only links in the sheet.
Hover over For Patients or For Providers in the header above to open the live mega menu. The static preview in §07 shows both panels side by side without the hover requirement.
Mega menu
A two-column dropdown panel. Left column is a list of links rendered as gold accent mark + title + supporting line (a small chevron appears on hover); right column is a single featured CTA card with its own colored panel. Each nav group gets one. The trigger label is a plain link that navigates to the section landing page; the panel opens on hover, on keyboard focus, or via a small chevron caret button beside the label on touch / no-hover devices.
For Patients now lists four items: What are Vital Tears? → patients.html, How do I order Vital Tears? → patients.html#order, Find a Provider → find-a-provider.html, and Patient Resources → patient-resources.html. For Providers lists three items: How the program works → providers.html, Start prescribing → portal registration, and Provider Resources → provider-resources.html (now local rather than external). The patients featured CTA also points to the new local find-a-provider.html; the providers featured CTA stays external because it links to the PDF download. The canonical block lives in _build.py — edit there and re-run the script to sync every page.
.vt-nav-group-wrap:hover / :focus-within. The trigger and panel share an invisible 16px hover bridge so the panel stays open when moving between them. Clicking the trigger label navigates to the section landing page (patients.html / providers.html) — it never just toggles the panel. The small chevron caret button beside the label is the disclosure control for touch / no-hover users; a tiny inline script toggles .is-open on the wrap, with click-outside and Esc to close. Both panels are anchored to .vt-header-main with left:50%;transform:translateX(-50%) and a fixed width:min(880px,calc(100vw-40px)), so For Patients and For Providers always open at exactly the same horizontal position with the same width. On mobile (<1024px) the panel collapses into the document flow as a single-column stack inside the nav drawer.
Section bottom waves
The brand curve is baked into the bottom of the previous section, filled with the next section’s color. The previous section’s own paint (gradient, photo, solid — anything) shows above the curve because it IS the section’s background. No separate divider element sits between sections, so the “above the curve” color always matches perfectly — even when the previous section is a gradient.
.vt-wave-bottom .vt-wave-bottom--to-{indigo|cream|white|page} to any section, then drop a <svg class="vt-wave-bottom__svg" viewBox="0 0 184.66 44.96" preserveAspectRatio="none"><use href="#vt-wave-fill"/></svg> as the last child. The next section starts immediately below in the markup — no spacer element required. Because the curve is part of the section itself, the color above the curve is always whatever the section actually paints (gradient, photo, solid). The previous standalone .vt-wave-divider approach with separate color-pair helpers (e.g. .vt-wave--cream-to-indigo) is deprecated and kept only to render this demo — it produces visible color seams against gradient sections like the indigo statement band, which is exactly the bug this pattern fixes.
Mini wave accent
A one-off brand mark — never a repeating element. Reserved for a single decorative beat per page, usually under a hero eyebrow or above a closing CTA. Do not use it as a bullet, list marker, or as a footer on every card.
.vt-wave-accent--gold, --royal, --cobalt) but only one per page.Pillars
No card box, no border, no glass. The brand icon does the visual work; a strong indigo headline carries the message; a short colored stripe at the bottom marks the pillar's identity. Hover lifts the whole pillar 4px — that's all.
Icon-led · for product attributes
Preservative
Free
Vital Tears are formulated without preservatives.
Customized
Formulated to your doctor’s exact specifications.
Aseptically Processed
Processed in a medical laboratory by trained technicians.
Microfiltered
Advanced filtration removes pathogens.
Numeral-led · for processes & ordered lists
Consult Your Eye Care Provider
Begin by consulting with your ophthalmologist or optometrist.
Receive Your Prescription
Your provider determines the right serum tear formulation.
Visit a Collection Facility
Schedule your blood draw at one of 400+ partner facilities.
Tears at Your Door
Your Vital Tears ship directly to your home in as little as 48 hours.
Pillars · dark variant
Same editorial pillar — no card chrome, no glass panel — recolored for indigo backgrounds. Brand icons invert to white, the colored bottom-stripe stays.
Fast
Turnaround
As little as 48 hours from blood draw.
Convenient
Access
Over 400 blood collection facilities nationwide.
Affordable
Payments
Flexible payment options with low prices.
Exceptional
Service
Hassle-free support through the entire process.
Step blocks
For numbered processes (e.g. “How do I order Vital Tears?”). The final step uses a gold numeral.
Talk to Your Eye Care Provider
Begin by consulting with your ophthalmologist or optometrist.
Blood Collection
Schedule your blood draw at one of our contracted facilities.
Delivery
Your Vital Tears are shipped directly to your home in as little as 48 hours.
Stat tiles
A bento-style number badge for headline stats. Three color variants.
Accent block
A left-border treatment for lead paragraphs — pulls attention without resorting to colored backgrounds.
Sky · default
Vital Tears has become the leader in autologous serum eye tears.
Royal · clinical
Our serum drops are derived from the patient’s own blood creating more effective results.
Gold · patient-first
Our attention to service is manifested in everything our brand represents.
Audience tiles
Two confident colored panels. No borders, no card-on-cream. Each tile is a full-bleed brand color block that does the visual work on its own.
Customized
serum tears,
accessible.
Learn how we make autologous serum tears available to patients across the country.
Explore For ProvidersAn end-to-end
serum tears program
for your clinic.
Discover how we make it easy for you to offer serum tears to your patients.
ExploreVariant · gold (premium ask)
Download the
Provider Information
Packet.
Everything your practice needs to start prescribing — clinical evidence, ordering workflow, and patient materials.
Get the packet Patient ResourcesFind a
Vital Tears provider
near you.
Find a trained ophthalmologist or optometrist in our nationwide network.
Find a providerCTA band
A soft sky→indigo wash for mid-page conversion breaks. No border — a single shadow-lg provides the lift.
Indigo closing CTA · .vt-partner-band .vt-indigo-cta
Start prescribing Vital Tears.
Register for the portal or download the provider packet.
Form elements
Baseline inputs for any contact / lead form. Sky focus ring with soft halo.
Icon set
A small Feather-style line icon set. Stroke width 2, round caps. Sized via currentColor.
Person card
Leadership, advisors, and team grids. Circular photo, indigo name, slate title — no box chrome. Pairs with .vt-grid-4 for executives or .vt-grid-3 for smaller groups. Add .vt-person__role-tag in gold-deep to mark advisors or call out a non-standard role.
Rajan Shukla
President
Joseph Tauber, MD
Chief Medical Officer
Lynn Forest-Smith
VP Business Relations & Patient Services
Rusty Kelly
Senior Advisor
AdvisorJob row list
Lightweight list of open opportunities (or any “title + meta + action” pattern). Sits inside a .vt-glass panel. Hover slides the arrow right and tints the title royal.
Contact info list
Icon · label · value rows for phone, email, address, hours. Sky-tinted icon tile, all-caps slate label, bold indigo value. Use beside a form rather than inside a card.
-
Phone (800) 360-9592
-
Email info@vitaltears.org
-
Vital Tears, LLC 10560 N. Ambassador Dr., Suite 210 Kansas City, MO 64153
-
Customer Service Hours Monday – Friday, 7am – 7pm CT
Bio modal — click-to-expand advisor card
Built on the native <dialog> element so the browser handles focus trap, Esc-to-close, and an inert background automatically. The trigger is a <button class="vt-person vt-person--clickable" data-bio="bio-x"> rendered identically to the existing .vt-person card — the only added affordance is a small “Read bio →” chip (.vt-person__expand) so users know the card is clickable. Each dialog re-uses .vt-rule for the gold rule under the name and .vt-body for the bio prose, so typography stays in sync with the rest of the site. Mobile (<560px) goes full-screen. A tiny inline script wires open-on-click, close-on-X, and close-on-backdrop; Esc + Tab focus trap are inherited from the dialog element.
Click the card above to preview the dialog. Press Esc, click the ×, or click outside to close.