Skip to content

DESIGN.md

Latest commit

 

History

History
147 lines (101 loc) · 3.16 KB

DESIGN.md

File metadata and controls

147 lines (101 loc) · 3.16 KB
Raw

Overall Vibe Summary

“Modern Enterprise Control Center” Think financial SaaS + mission-critical ops dashboard, not startup toy UI.

Core feelings it evokes:

  • Authority (admin feels powerful, not cluttered)
  • Clarity under load (lots of data, but readable)
  • Live system awareness (health indicators, activity feeds, timelines)
  • Role intelligence (UI adapts to who you are, not just what page you’re on)

This is the same design philosophy used by:

  • Bloomberg terminals (simplified)
  • Stripe / Plaid internal dashboards
  • Modern gov-tech & fintech tender platforms

1. Visual Language & Aesthetic Pillars

🎨 Color System

Admin – Control Center

  • Dark navy base → seriousness, trust, authority
  • Dark slate surfaces → depth without harsh contrast
  • Gold / amber accents → decision power (create, award, alerts)
  • Emerald / blue status pills → calm system states

Vendor / Bidder – Adaptive Experience

  • Vendor → Teal / cyan → discovery, growth, onboarding

  • Bidder → Indigo / blue → execution, deadlines, action

  • This is subtle psychology:

    • Vendors are building readiness
    • Bidders are racing timelines

👉 Reusable rule:

Exploration = Teal / Cyan Execution = Indigo / Blue Authority = Navy + Gold

2. Layout Philosophy

🧱 Two-Zone Mental Model

Primary Work Zone (Left / Center)

  • Stats
  • Cards
  • Tables
  • Primary CTAs

Secondary Awareness Zone (Right Sidebar)

  • Activity feed
  • System health
  • Alerts
  • Timeline updates
  • Sticky activity feed

3. Component Hierarchy

🔝 Clear Vertical Rhythm

  1. Command Header

    • Page title
    • Role badge
    • System health pill (live)
    • Primary CTA (gold / amber)

  2. Executive Metrics

    • 3–5 high-level KPIs
    • Big numbers
    • Minimal decoration
    • Optional progress bars

  3. Operational Cards

    • Actionable lists
    • Timelines
    • Tender cards
    • Status-aware sorting

  4. Contextual Alerts

    • Only show when relevant
    • Color-coded urgency
    • Never always-on noise

4. Role-Based Rendering

Keeping Vendor + Bidder in the same file but rendering different experiences was the right architectural decision.

Why this works:

  • Same route = same mental model
  • Role defines intent, not navigation
  • Reduces duplication
  • Enables shared layout + divergent content

Vendor View (Discovery-Oriented)

  • Profile readiness
  • Completion bars
  • Soft CTAs
  • Marketplace discovery
  • “You’re preparing”

Bidder View (Action-Oriented)

  • Timelines
  • Deadlines
  • Alerts
  • Resume / track CTAs
  • “You’re executing”

👉 Design principle you can reuse:

Same skeleton, different organs

5. Micro-Interactions & Details That Elevate It

These are subtle but important:

  • Pill badges everywhere → status is glanceable, not text-heavy
  • Progress bars instead of numbers alone → direction > precision
  • Days-remaining chips (red / amber / green) → instant urgency parsing
  • Empty states with SVGs → feels intentional, not broken
  • Glassmorphism cards (light blur + shadow) → depth without clutter