Viteo, in pieces.

Three themes on one set of components. Aqua is crisp and graphic: navy ink on pastel blocks. Grove is fresh and botanical: a mint page, a leaf-green accent and a characterful grotesque. Peach is warm and editorial: a peach bento with periwinkle and apricot-gold blocks on navy ink, set in a soft serif. Each has dark and light modes, and every sample below is the real component.

Showing Aqua in dark mode · Plus Jakarta Sans + Inter. Switch themes and modes from the header.

Brand

Two capsules meeting in a V, in the theme's accent and ink, with a lowercase wordmark. The mark is printed on every box, and the box carries the customer's name once they've taken the quiz.

Logo

Wordmark in the display font, lowercase, tight tracking. On panels the ink and accent re-colour themselves.

Mark

Two capsules: one in the theme's accent gradient, one in ink. Hover it: each capsule spins a full turn around its own centre and settles back into the V.

The printed pack
viteoCyril'sMorning pack30 daily packs
Personalized daily vitamins

The mark in the top corner, a vertical wordmark, and the customer's name above the pack name. The same artwork is printed onto the 3D carton.

Color

One accent on a calm base, defined once per theme and mode as tokens. Accent is for actions; Accent text is the only accent used for text, so it stays readable. Every text pair passes WCAG AA in every theme and mode. Values below update with the switcher.

  • Accent · --dl-sunPrimary actions, highlights, the brand mark
  • Accent text · --dl-sun-deepAccent text and links (AA on the background)
  • Ink · --dl-inkText, icons, secondary buttons
  • Ink soft · --dl-ink-2Supporting text and metadata
  • Background · --dl-creamPage background
  • Paper · --dl-paperCards and inputs
  • Line · --dl-lineBorders and dividers
  • Sage · --dl-sageSuccess, savings, reasons
  • Butter · --dl-butterNotes and gentle emphasis

Type

Aqua pairs Plus Jakarta Sans and Inter, Grove pairs Outfit and Figtree, and Peach pairs Fraunces and DM Sans. Same scale in all three; highlighted display words take the theme's display accent.

  • Display · display font

    Made for your days.

  • Heading 2 · display font

    Three steps, no guesswork.

  • Heading 3 · body font 600

    Delivery frequency

  • Lede · body font 18/28

    Every item comes with a plain reason it's there.

  • Body · body font 16/26

    Skip, pause or swap from your account in a tap.

  • Meta · body font 14

    2,000 IU · softgel · $5/mo

  • Label · body font 13 caps (card labels)

    Personalized daily vitamins

Buttons

Primary for the one main action on a screen; secondary and ghost for everything else. 48px tall, 44px minimum touch target at small size. The arrow loops on hover.

Call-to-action pill

Take the 2-minute quiz

Icon buttons

One square spec for every icon-only button: 52px, 18px corners, a 22px icon on a 24px grid. The border and hover tint come from the text colour, so they're white-based on dark surfaces and ink-based on light or coloured ones. Hover adds a faint tint and darkens the border.

On the page
On the main bento
On a colour block
On a dark panel

Floating and header buttons

Back to top: the same spec over a light frost, since it floats over every section.
Menu, on tablets and phones: 48px, so it lines up with back to top.

Forms

Labels always visible above the field; errors in plain language right under it. Control boundaries are at least 3:1 against their surface.

Surfaces

A bento of panels on one full-bleed background. Each panel re-points the ink, accent and paper tokens, so any component inside it stays readable. Glass is a clear, blurred pane over the page's ambient light.

Panel 1 · main bento

Text, labels and buttons re-colour themselves to suit.

Panel 2 · colour block

Text, labels and buttons re-colour themselves to suit.

Panel 3 · soft block

Text, labels and buttons re-colour themselves to suit.

Dark panel

Text, labels and buttons re-colour themselves to suit.

Paper card

Text, labels and buttons re-colour themselves to suit.

Glass

Blurred and translucent; the light behind it shows through.

Pills

Modelled in 3D from each product's color and form, live in the hero and close-ups, and baked into images everywhere else by a script, so a new product needs no new artwork.

  • Vitamin D3
    softgel
  • Vitamin B12
    tablet
  • Omega-3 (algae)
    softgel
  • Magnesium Glycinate
    capsule
  • Vitamin C
    tablet
  • Zinc
    tablet
  • Probiotic Blend
    capsule
  • Biotin
    tablet
  • L-Theanine
    capsule

Data

Charts only ever show whether the pack was taken, never health outcomes. Lines draw in when they scroll into view; a month still in progress is dashed and labelled so far, so it never reads as a drop.

Comparison · two series010203024 daysJanFebMarAprMayJun

This yearLast year

Tracker · month in progress01020306 so farMayJunJulAugSepOct

Days you took your pack

Delivery timeline

A marker, not a handle: the date moves with Skip and Pause, and the marker slides to it.

Week organizer

A pill drops into each day's compartment when it's checked off.

Disclosure & navigation

Accordions animate their height (instant where unsupported). The carousel is a native scroll-snap track with prev/next, mouse drag and position dots that follow the text colour like the icon buttons (white-based in dark mode, ink-based in light). The theme switcher saves the choice for the next visit.

Accordion

How does the quiz decide what goes in my pack?

Your answers map to a short list of everyday nutrients, and each pill shows the answer that put it there.

Can I change, skip or pause my deliveries?

Yes, from your account, any time. Changes apply to your next box.

Carousel

  • “The quiz took two minutes, and for once I know why every pill is in my pack.”

    Maya R. · Vegan · 4 items

  • “I travel a lot. Skipping a month is one tap, and that's why I've stayed.”

    Jordan T. · Every 2 months

  • “It flagged that I should check with my doctor about the medication I take. I appreciated that.”

    Priya S. · Morning pack

  • “I swapped one item for another in about ten seconds. No email thread, no phone call.”

    Daniel K. · Evening pack

  • “Seeing my name on the box sounds small, but it's the first routine I've actually kept up with.”

    Aisha M. · Every 3 months

  • “The reminder lands right when I'm making coffee, and checking the day off is weirdly satisfying.”

    Tomás L. · Morning pack · 5 items

  • “I moved apartments mid-subscription. Changing the address took a minute, and the next box just showed up.”

    Grace H. · Every 2 months

Steps, segments and theme

  1. ✓ Details
  2. 2 Delivery
  3. 3 Payment
  4. 4 Review

Overlays

Native dialogs: focus moves in and returns to the button that opened them; Esc, the backdrop and ✕ close them. On phones the ingredient close-up becomes a bottom sheet that closes when dragged down. Shown here in place.

Edit delivery address

Changes apply from your next box.

Modal · forms and confirmations

Capsule

Magnesium Glycinate

200 mg · $6/mo

Magnesium bound to glycine, a form known for being easy on the stomach.

Close-up · the card's pill morphs onto the stage

Labels & stamps

Labels never look like buttons: no pill shape, border or fill. Sample and preview content is stamped like a batch code, in the accent text colour.

Sample contentStamp · sample or preview content
Your routine trackerCard label
Next deliveryEyebrow · hero and card headers
Save 15% NextTags · status and savings

Feedback

Progress, notes and toasts. Toasts always offer Undo for anything that changes a delivery.

Already taking something? Check with your doctor or pharmacist first.
Skipped. Your next box is now Thu, Nov 20.

Vitamin D3 2,000 IU

Why it's here You spend most of the day indoors.

Foundations

Shared shape, spacing and motion. Every animation turns off for people who prefer reduced motion.

Radius

  • 12px
    Chips
  • 16px
    Menu button
  • 18px
    Icon buttons
  • 20px
    Cards
  • 28px
    Panels, dialogs
  • 999px
    Buttons, tags

Spacing

  • 4
  • 8
  • 12
  • 16
  • 20
  • 24
  • 32
  • 48
  • 64

Motion

Easing
cubic-bezier(0.2, 0.8, 0.2, 1): quick out, soft landing
Hover
0.2–0.35s: tints, borders, arrow loops
Dialogs
0.35–0.5s: modal rise, pill morph onto the stage
Pages
0.55s: view transitions, the printed pack glides between pages
Intro
~1.75s on each landing visit, a GSAP timeline: the carton, then each pill at its own speed, bounce and spin; any click, key or scroll skips it
Background
A WebGPU shader (WebGL2 fallback) a slow, pulsing ribbon of the theme's light behind the glass, ~30fps at low resolution; desktop only, off for reduced motion
Quiz finale
A GSAP timeline: pills fall into the pack one by one, the pack squashes to catch each, and the plan opens when the last lands
Reduced motion
Everything above is off; the content is all there at once