DESIGN SYSTEM / PORTAL FOUNDATION • PHASE 1

Connected systems.
Calm, precise interfaces.

A reusable visual language for energy continuity, business autonomy and the complete IONET Energy Ecosystem. Engineered for approximately 2,500 PDA associates, Approving Authorities, and Super Admins.

Colour system

Exact palette implemented from design reference

Deep Green
#003F39
Ink
#182D3D
Continuity
#65C96B
Ecosystem
#398B70
Pale Green
#ECF7F1
Pale Blue
#EEF5FA
Soft Green
#E8F5EF
White
#FFFFFF
Muted
#687E78
Border
#D3E0DA
Interruption
#D29A60
Critical
#BD514D

Typography

Manrope: Modern, geometric, accessible sans-serif

MANROPE • REGULAR / MEDIUM / BOLD

Towards Energy Independence.

Complete lifecycle thinking.

Use clear hierarchy, compact headings and generous line spacing. Keep technical explanations calm and readable, with one principal idea in each section or card.

Production Manrope ConfiguredStrict 8px Rhythm1320px Max Grid
Hero / Display60–82px • Bold • 1.02 line height
Section title28–36px • Bold • 1.05
Card title20–30px • Bold • 1.18
Body14–16px • Regular • 1.7
Eyebrow8–10px • Bold • Uppercase

Interface elements

Primitives engineered according to design reference specifications

BUTTONS • STATUS • INPUTS • CARDS

CONTROL PRIMITIVES

Actions

Predictable states for primary progression, secondary operations, and dark brand emphasis.

OPERATIONAL STATES

Status and fields

Accessible status indicators with explicit text; crisp input fields with semantic focus states.

NeutralActiveContinuousInterrupted

01 / ENERGY LIFECYCLE

One clear capability.

Cards explain one function, task or decision with concise supporting information.

PDA eligibility is strictly checked before unlocking optional Committee Membership workflows.

Diagram language

High-contrast structural container representing ecosystem architecture

CENTRE • FUNCTIONS • FLOW • OUTCOME
CONNECTED ENERGY LIFECYCLE

Make relationships visible.

IONET
ENERGY
ECOSYSTEM
Generation
Transmission
Distribution
Conversion
Storage
24•7 Consumption
Connected flow
Interrupted state
PHASE 1 FOUNDATION COMPLETE

Architecture Specifications & Development Conventions

Strict TypeScript & Next.js 15 Ready

All architectural guidelines, confirmed integrations (MSG91 SMS, manual UPI QR & NEFT/RTGS payments, Super Admin configurable fees), and deferred decisions (video hosting, object storage, payment gateway activation) are documented in the specification files.

Product Spec
docs/PRODUCT_SPEC.md
Architecture
docs/ARCHITECTURE.md
Design System
docs/DESIGN_SYSTEM.md
Security Guide
docs/SECURITY.md
Development
docs/DEVELOPMENT.md