ValiData Design SystemLegacy format
Precise operational design system for pharmacy expiration-date control. Clean, technical, trustworthy visual language with vivid blue actions, neutral surfaces, and clear operational copy.
Color Palette
Light Theme
Dark Theme
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 4pxPrecise operational design system for pharmacy expiration-date control. Clean, technical, trustworthy visual language with vivid blue actions, neutral surfaces, and clear operational copy.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Inputs
Elevation & Depth
Do's & Don'ts
Do
Don't
Layout
### Mobile
Single-column. Bottom navigation. Cards and grouped lists. Bottom sheets for decisions. Primary actions near thumb. Scanner and OCR flows must remain interruption-safe. No dense dashboards or tables.
### Tablet
Two-column where useful. Task list and detail side by side. Side panels for product/action detail. Keep touch targets large. Do not simply scale mobile cards.
### Desktop
Sidebar or structured top navigation. Use dashboards, filters, tables, detail panels, batch actions, audit history, and constrained forms. Do not stretch mobile screens. Keep management density readable.
### Breakpoints
Compact below 600px. Medium from 600px to 904px. Expanded from 904px to 1240px. Large desktop above 1240px. Compact uses cards and bottom navigation. Expanded uses sidebar, panels, tables, and split views.
---
States
### Default
Calm surface-container cards, readable text, restrained blue accents.
### Hover
Desktop only. Border tint, subtle background tint, or -2px lift with shadow-hover. Mobile must not depend on hover.
### Pressed
Immediate feedback through tint, opacity, or slight scale. Avoid exaggerated motion.
### Focus
Visible primary focus ring. Keyboard users must navigate all controls. Focus order follows visual order.
### Selected
Primary-container or secondary-container fill, clear label, icon, or state marker.
### Disabled
Lower emphasis but readable. Explain unavailable critical actions when the reason is not obvious.
### Loading
Skeletons for structure, spinners for actions, progress for import/sync/OCR. Avoid blank screens.
### Empty
Explain what is missing and provide the next action when possible.
### Error
Explain what failed, why it matters, and how to recover.
### Success
Confirm completion and help the user continue the workflow quickly.
### Warning
Show risk, deadline or mismatch, and recommended next step.
### Offline
Preserve captured work locally when possible and show sync status clearly.
---
Motion
Default transitions: 150ms to 200ms. Bottom sheets: 200ms to 250ms. Scanner feedback: immediate. Progress changes: 200ms to 300ms. Respect reduced motion. Do not use long decorative animation in operational flows.
---
Accessibility
Minimum touch target is 44px x 44px; prefer 48px x 48px on mobile. Text must meet contrast requirements against its background. Status must not rely on color alone. Inputs need visible labels. Error messages must be connected to the field. Icon buttons need accessible names. Bottom sheets and dialogs trap focus while open and restore focus on close. Tables need meaningful headers. Charts need labels, legends, and non-color interpretation.
---
UX Writing
Tone is direct, calm, and operational. Use short sentences, verbs for actions, specific product/date information, clear consequences, and practical recovery instructions.
Preferred labels: Start PVPS, Resume cycle, Scan product, Confirm date, Edit date, Add lot, Mark as discounted, Mark as transferred, Mark as discarded, Negotiate with vendor, Review action, Report mismatch.
Do not use vague labels like OK, Confirm, Continue, or Done when the action is risky. Name the real action.
---
Use with MCP
Don't have the MCP? Install it here