Design system
Movyo UI
Design variables and UI components aligned with the Allanis — MOVYO prototype. Tokens live in src/design/tokens.ts and are mirrored in globals.css.
01 · Design variables
Color variables
Semantic color tokens with live swatches. Values match the prototype and CSS custom properties (e.g. --color-brand-primary).
Brand primary
--color-brand-primary
#C32E6D
Primary CTAs, accents, focus rings
Brand primary hover
--color-brand-primary-hover
#A8275C
Hover states (optional)
Text primary
--color-text-primary
#292929
Icons, strong body, trust bar
Text default
--color-foreground
#171717
Default body text (light theme)
Background
--color-background
#FFFFFF
Page and card surfaces
Surface muted
--color-surface-muted
#F9FAFB
Section backgrounds (gray-50)
Border default
--color-border-default
#E5E7EB
Cards, inputs (gray-200)
Prototype frame
--color-frame-dashed
#D8B4FE
Dashed dev / spec frames (purple-300)
02 · Design variables
Font & typography
Font stacks loaded in the root layout; use Tailwind font-sans / font-serif or the CSS variables below.
Font families
Sans — UI & body
--font-inter
Navigation, buttons, forms, paragraphs
Inter, system-ui, sans-serif
The quick brown fox jumps over the lazy dog. 0123456789
Serif — display
--font-instrument-serif
Wordmark “MOVYO”, editorial headings
Instrument Serif, Georgia, serif
Type scale (prototype samples)
| Style | Preview |
|---|---|
| Display / serif | Movyo Health |
| Heading 1 | Care that meets you where you are |
| Heading 2 | Section title |
| Heading 3 | Card title |
| Body | Body copy uses Inter at 16px with relaxed line height for readability on long pages. |
| Caption / label | Form label · metadata |
| CTA button | Get Started |
03 · Component library
UI components
Each block uses the Figma-style purple label (SpecFrame) so names map to the prototype. Layout is a responsive grid: full-width rows for marquees and carousels; pairs where space allows.
.0ltld_sazt8.y.png&w=32&q=75){kind=small}
Buttons
Input
We respond within one business day.
Card
Care plan
Personalized to your goals
Short supporting copy for layout reference.
Icons
Motion & patterns
Why Movyo — continuous horizontal text. Respects prefers-reduced-motion.
Movyo Community — testimonial carousel with arrows and dots; pauses on hover.
“The process was straightforward and I felt supported the whole way. Highly recommend Movyo.”