Foundation & Component Verification Harness
This harness verifies all shared UI components, typography rules, color tokens, form behaviors, accessibility focus states, and the consultation drawer before building page content.
1. Typography & Inline Links
Poppins font hierarchy with accessible underlined inline links.
Expert-Led Cloud & Productivity Transformation
Change what needs to change, without breaking what works.
Controlled, Phased Execution on Your Systems
Virtuous Cloud manages end-to-end technology transformations for Google Workspace and Microsoft 365. For security needs, visit our Security, Identity & Governance page to learn how we protect existing workflows.
2. Color Tokens
Mapped directly from Design System v1.2 §3.
3. Buttons & Action Variants
Testing all button variants in Light and Dark contexts.
4. Contextual Cards
Card backgrounds are always distinct from the section background.
Card on Paper
Uses `#F8FAFC` to create subtle separation against pure white `#FFFFFF` paper.
Card on Mist
Uses `#FFFFFF` to pop cleanly off the `#F3F4F6` mist background.
Card on Dark
Uses `#141414` with subtle border on high-impact dark sections.
5. Proof Statistics
Commercial proof indicators in light and dark presentations.
6. Form Controls & Validation States
Persistent labels, required indicators, 2px focus rings, inline errors.
Light Form State
Optional scoping comments
Dark Form State
7. Signature Motion: The Connector
Logo load moment, form success state, and section thread (DS §12a).
8. FAQ Accordion
Accessible collapsible accordion with smooth animated states.
We design, migrate, implement, and support — certified specialists lead every critical engagement, not just license sales.
Test Slide-Out Consultation Panel
Click the button below to test the right-side slide-over panel on desktop or full-screen modal on mobile.