NOVA Design

Purposeful, inclusive, and sustainable design at the heart of every experience.

Design Philosophy

NOVA’s approach to design is rooted in three core values: user empowerment, clarity, and sustainability. We believe technology should be accessible and delightful, inspiring confidence in every click. Our platform’s design decisions—from color palettes to user flows—are purposeful, honest, and serve both digital inclusion and environmental responsibility.

User Experience Principles

  • Inclusive for All: Designed for a diverse Philippines—accommodating various devices, language preferences, and ability levels.
  • Clarity and Simplicity: Information hierarchy, spacing, and intuitive navigation ensure users get what they need, fast.
  • Consistency: Components, icons, and interactions are coherent across the site, building user trust and comfort.
  • Delightful Interactions: Subtle animations (like AOS scroll effects), micro-interactions, and clear feedback make interactions rewarding—never confusing.
  • Accessibility Standard: All pages adhere to WCAG AA accessibility, ensuring that everyone can transact and participate fully.
  • Sustainable Patterns: Green Seller and eco-badges are prominently displayed but never intrusive; visual cues make “planet-friendly” choices effortless.

UI System Overview

Colors & Typography

  • Primary Blue (#2141C6) for trust, anchors CTAs, and highlights critical actions.
  • Sustainability Green (#10B981) for badges, highlights, and positive notifications.
  • Neutrals (#F9FAFB, #505252) provide calm backgrounds and sufficient contrast for long reads.
  • Font: Inter (sans-serif; body), Montserrat (headings/accent); large headings and generous line heights for readability.

Spacing & Grids

  • 12-column responsive grid, optimum for both mobile-first and desktop layouts
  • Generous paddings—16px baseline, 32–64px for section PTB
  • Card-based containers for sections, with shadow and rounded corners for focus

Icons & Imagery

  • Straightforward, line-style icons, always with sufficient contrast against backgrounds
  • Product images: high-contrast, real usage, diverse people. Green-certified products display small leaf or badge overlays
  • Alert/status icons are paired with matching tone: blue for info, green for success, orange for warning

Button & CTA Patterns

  • Primary buttons: Solid blue (#2141C6), white label, moderate radius
  • Secondary buttons/links: Border-with-text, green highlight for green actions
  • Clear, descriptive labels (“Buy now”, “Apply for Green Tier”, not generic “Submit”)

Accessibility & Inclusion

NOVA adheres to strong digital citizenship and universal design. Accessibility is a baseline, not a bonus.

  • Alt text for all meaningful images
  • High color contrast (AA minimum for text/background)
  • Keyboard-friendly navigation and clear focus states
  • Section headings for screen-reader clarity
  • Readable font sizes (min 1rem for body, 1.25–2.5rem for headings)

We test all designs with real users and regularly review compliance with accessibility standards.

Sustainability in UI

Green Seller badges, sustainability banners, and eco-impact highlights are woven throughout the site—always easily discoverable, never overbearing. Our design guides shoppers toward environmentally conscious choices with iconography (leaf, energy star, carbon neutral) and tooltips that explain each green badge.

We believe tech shoppers want clarity and inspiration—not guilt—so our messaging is motivating and transparent.

Design System Resources

Our complete Figma design library, reusable UI components, and—soon—React/Vue code kits are available for team and partner use. Please consult our designers before rolling out interface changes to ensure consistency.

Download Design System

Contributing & Feedback

NOVA's design system is always evolving. We encourage feedback, bug reports, and contributions from the community. If you have suggestions for more inclusive, beautiful, or innovative interface patterns, please let us know.

Contact the design team: