System Requirements Document

1. Introduction

This System Requirements Document (SRD) defines the requirements for the complete redesign and elevation of the Ecolife website (https://ecolife.az) — an international architectural lighting manufacturer.

The project is not a generic website refresh. The redesigned experience must function as a digital flagship and a digital architectural lighting showroom, visually comparable to world-class architecture, lighting, industrial design, and high-end technology brands.

The governing creative principle for the entire project is: light itself is the interface. The website must not merely be about lighting — the visitor must experience light as a visual material throughout the interface. In place of decorative UI, the experience is built from composition, typography, photography, negative space, lighting, depth, geometry, and motion.

The redesign must preserve Ecolife's existing business logic — products, projects, catalog, company credibility, engineering capability, SEO visibility, and brand recognition — while completely reinventing its presentation.

2. System Overview

Ecolife is an architectural lighting manufacturer and engineering provider. The digital product is a public, content-led marketing and catalog website with immersive 3D and interactive lighting scenes. Its purpose is to:

• Communicate that Ecolife is an international architectural lighting company (engineering credibility, local manufacturing capability, architectural sophistication, premium quality, project expertise, modern technology, precision, innovation), not a conventional local LED retailer.
• Present products as an industrial-design catalog with technical depth.
• Present completed projects as architectural case studies.
• Communicate engineering and Dialux support as a premium differentiator.
• Communicate custom linear lighting manufacturing capability (design → engineering → manufacturing → installation).
• Convert architects, designers, engineers, and commercial clients into project conversations.

The experience is organized as a continuous visual system rather than a stack of unrelated blocks. It begins in darkness; light reveals material, material reveals architecture, architecture reveals products, products reveal engineering, and engineering reveals Ecolife.

The delivery includes actual implemented layouts, components, responsive states, animations, interactions, lighting effects, shaders, 3D scenes, product presentations, navigation, project layouts, and transitions — not only wireframes or design suggestions. Where the existing site relies on a CMS and API for content and catalog data, those systems are preserved and reused rather than unnecessarily rebuilt.

3. Functional Requirements

3.0 Source Content Inventory (Authoritative — https://ecolife.az)

The existing live Ecolife website is an authoritative content source. The following facts are the source-of-truth content to be preserved and carried into the redesign. They must not be replaced with generic category names or invented examples.

Brand and identity

• Brand name / logo: Ecolife (brand name/logo implied in the site header).
• Branding tagline: "İşıqla daha yaxşı həyat."
• Brand identity: Ecolife — premium architectural LED lighting brand; operated by GRANDTEK LLC under the Ecolife brand (inferred from external data).
• Visual language: professional, minimalist, architectural imagery, product-focused.

Hero copy

• Headline: LIGHTING ARCHITECTURE
• Subheadline: Məkanları İşıqlandırırıq.

Statistics

• Experience: 20+ illik təcrübə
• Completed projects: 500+ tamamlanmış layihə
• Products positioned: 1000+ məhsul mövqeyi
• Exports: 50+ ölkəyə ixrac

Value propositions

• High quality: Avropa standartlarına uyğun yüksək lümen çıxışı və CRI>95
• Custom solutions: Hər layihə üçün xüsusi ölçü, rəng temperaturu və montaj detallarının istehsalı
• Professional support: Layihələndirmə mərhələsindən tətbiqə qədər tam mühəndis və Dialux hesablama dəstəyi
• Warranty: 5 ilədək rəsmi zəmanət və servis xidməti

Calls to action

• Məhsullara Bax
• Bütün Kataloqa Bax
• Bütün Layihələrə Bax
• Layihəyə Bax
• Bizə Yazın

Featured projects

• SENSUM COFFEE & BAKERY — Bakı, Azərbaycan — Müasir minimalist kafe interyerində xüsusi qaranlıq reflektorlu xətti LED və isti 2700K vurğu işıqlandırması
• SAVTOUR OFİS — Bakı, Azərbaycan — DALI protokolu ilə idarə olunan, insan mərkəzli (Human-Centric) 4000K xətti asma işıqlandırma sistemi
• PAPA JOHN’S RESTORAN — Bakı, Azərbaycan — Brendin dinamik interyer üslubuna uyğunlaşdırılmış radial əyri xətti LED və künc profilləri

Contact

• Phone: +994 50 450 70 07
• Email: info@ecolife.az
• Address: Bakı ş., Nərimanov r., Əhməd Rəcəbli küç. 46B

Structure reference (existing site sections)

• Header with logo and main navigation (implied: Məhsullara, Layihələr, etc.)
• Hero section: LIGHTING ARCHITECTURE, key metrics, CTA buttons
• Value propositions/features list (Yüksək Keyfiyyət, Fərdi Həllər, Peşəkar Dəstək, Zəmanət)
• Featured Projects / Portfolio thumbnails with project detail links
• Prominent final CTA: "İşıqla daha yaxşı həyat." and contact information
• Footer containing contact details

Navigation reference

• Main CTAs: Məhsullara Bax, Bütün Kataloqa Bax, Bütün Layihələrə Bax
• Each featured project links to a detail page ("Layihəyə Bax")
• "Bizə Yazın" opens an inquiry or contact mechanism

Feature reference (existing capabilities)

• Custom LED lighting solutions per project dimension, color temperature and mounting
• Dialux engineering and photometric support from design to implementation
• Warranty and service up to 5 years for linear and profile systems
• Highlighting performance metrics: high lumen output, CRI > 95

Domain context

• Industry: architectural lighting and LED solutions
• Audience: architects, designers, professionals seeking premium and custom lighting
• Regional context: based in Baku, Azerbaijan, serving international markets (50+ countries)

The reference source is applied as content_source, domain_context, brand_source, structure_reference, and feature_reference with authoritative authority. Its content, domain facts, brand, and structure are preserved unless explicitly replaced. Facts not available from the source are marked unverified rather than invented.

3.1 Website Audit and Preservation

• As a project stakeholder, I want the entire existing live Ecolife website inspected before any design or code work begins, so decisions are grounded in what already exists.
• As a project stakeholder, I want the audit to cover the current homepage, navigation, typography, logo usage, colors, products, product categories, catalog, project portfolio, project detail pages, CTA structure, footer, existing photography, existing copy, mobile behavior, spacing system, and current components.
• As a project stakeholder, I want the audit to inspect the existing framework, components, dependencies, routing, CMS, API, asset structure, SEO, and existing design tokens.
• As a project stakeholder, I want valuable existing information, products, projects, SEO content, and brand recognition preserved, so nothing valuable is blindly replaced.
• As a project stakeholder, I want existing homepage business concepts preserved — architectural lighting, linear LED systems, premium/custom lighting solutions, company experience and statistics, engineering capabilities, product catalog, completed architectural projects, project consultation, and Dialux/engineering support — while their presentation is fully reinvented.
• As a project stakeholder, I want the audit to capture the existing site's exact content — brand name and logo usage, headline "LIGHTING ARCHITECTURE", subheadline "Məkanları İşıqlandırırıq.", the statistics (20+ illik təcrübə, 500+ tamamlanmış layihə, 1000+ məhsul mövqeyi, 50+ ölkəyə ixrac), the value propositions (Yüksək Keyfiyyət, Fərdi Həllər, Peşəkar Dəstək, Zəmanət), the CTA set (Məhsullara Bax, Bütün Kataloqa Bax, Bütün Layihələrə Bax, Layihəyə Bax, Bizə Yazın), the featured projects (SENSUM COFFEE & BAKERY, SAVTOUR OFİS, PAPA JOHN’S RESTORAN), the contact details (+994 50 450 70 07, info@ecolife.az, Bakı ş., Nərimanov r., Əhməd Rəcəbli küç. 46B), and the tagline "İşıqla daha yaxşı həyat." — so this content is preserved item-by-item rather than replaced with generic copy.

3.2 Core Design Principle — Light as Interface

• As a visitor, I want light to behave as a visual material throughout the interface, so the site feels like a digital architectural lighting showroom.
• As a visitor, I want the design language to use real illumination, light beams, glow falloff, reflections, shadows, volumetric light, illuminated edges, luminous architectural lines, subtle light trails, optical depth, reflections on metal, translucent surfaces, light temperature transitions, realistic material response, and the contrast of darkness versus illumination.
• As a visitor, I want the interface to establish hierarchy, depth, interaction, transition, focus, emotion, product understanding, and brand identity through light — not by decorating the site with light.

3.3 Hero Section

• As a visitor, I want the hero to present an immersive 3D lighting composition so I immediately understand that Ecolife is a lighting company without relying on a generic background image.
• As a visitor, I want the hero to load in a near-black architectural environment containing several precision linear light profiles suspended in space.
• As a visitor, I want the hero load sequence to: begin almost completely dark; gradually power on one linear LED; physically illuminate nearby materials; reveal additional architectural lines; show subtle reflections; let typography emerge from darkness; and move the camera very slightly through the environment.
• As a visitor, I want the hero effect to be elegant and realistic — resembling professional architectural visualization, not sci-fi, gaming, or neon cyberpunk.
• As a visitor, I want the hero typography to feel editorial and monumental.
• As a visitor, I want the hero content hierarchy to include a small label ("ARCHITECTURAL LIGHTING"), a primary headline ("LIGHT SHAPES SPACE." or preserved/adapted Ecolife messaging where appropriate), and supporting copy explaining Ecolife's architectural lighting and custom manufacturing capability.
• As a visitor, I want a primary "Explore Products" CTA and a secondary "View Projects" CTA in the hero.

3.4 Interactive Light Behavior

• As a visitor, I want hovering over a product to gently activate its light.
• As a visitor, I want scrolling to allow a thin beam to travel along an architectural path.
• As a visitor, I want entering a project to transition the image from slightly dimmed architectural ambience into its finished lighting state.
• As a visitor, I want hovering over color temperature options to change the environment realistically between 2700K, 3000K, 4000K, and 5000K.
• As a visitor, I want moving the pointer over certain 3D objects to produce very subtle reflection and illumination responses.
• As a visitor, I want these interactions to always reinforce the product and never become gimmicks.

3.5 3D System

• As a visitor, I want 3D used only where it meaningfully improves the experience.
• As a visitor, I want 3D assets that may include a linear LED profile, recessed linear system, magnetic track, pendant profile, architectural spotlight, and LED extrusion cross-section.
• As a visitor, I want product models rendered with physically believable materials — PBR materials, roughness, metallic response, emission maps, environmental reflections, realistic soft shadows, and physically correct lighting — never cheap glossy CGI.

3.6 Product Experience

• As a visitor, I want the product presentation to feel like an industrial-design catalog rather than ordinary e-commerce cards, using large editorial compositions.
• As a visitor, I want each product to be able to show a large product image or 3D object, product name, short category, installation type, light output, CRI, color temperature, dimensions, application, and technical data.
• As a visitor, I want desktop product compositions where technical/product information sits on one side and a large floating product visualization sits on the other (or vice versa).
• As a visitor, I want products to rotate subtly or react to scrolling.
• As a visitor, I want selected products to offer an interactive exploded view showing the aluminium profile, diffuser, LED module, driver, and mounting component, communicating engineering quality.

3.7 Product Light Simulation

• As a visitor, I want a visual simulator showing a small architectural environment where I can change color temperature — 2700K to a warmer environment, 3000K to balanced architectural warmth, and 4000K to neutral professional illumination — with minimal UI, so Ecolife's expertise is communicated visually rather than through paragraphs of text.

3.8 Project Portfolio

• As a visitor, I want projects presented as architectural case studies with large full-width imagery, editorial grids, asymmetric composition, controlled typography, and cinematic transitions.
• As a visitor, I want project presentations to avoid small cards with tiny images.
• As a visitor, I want large project titles, location, project category, and the lighting solution used displayed.
• As a visitor, I want scrolling through projects to transition images using controlled masking or architectural-line wipes.
• As a visitor, I want project cards to feel closer to an architecture magazine than a standard portfolio template.

3.9 Project Detail Page

• As a visitor, I want every major project to support a strong case-study structure headed by PROJECT NAME and its Location, Category, Year, and Lighting solution.
• As a visitor, I want the case study structured as 01 — Challenge, 02 — Lighting Concept, 03 — Engineering Solution, 04 — Products Used, and 05 — Result.
• As a visitor, I want project detail pages to include architectural photography, close-up lighting details, drawings where available, technical information, product references, and before/after imagery where relevant.
• As a visitor, I want sophisticated image compositions where photography is the hero and the page is not overloaded with decorative UI.

3.10 "Why Ecolife" Section

• As a visitor, I want the existing advantages — quality, custom solutions, professional support, warranty, and engineering expertise — retained but dramatically redesigned.
• As a visitor, I want these advantages presented as one continuous visual story rather than four ordinary icon cards, using a large 3D linear light system that travels horizontally across the section.
• As a visitor, I want each engineering benefit aligned to a structural point in that system, with different components illuminating as I scroll, turning technical information into visual storytelling.

3.11 Company Statistics

• As a visitor, I want Ecolife's credibility statistics presented as a bold typographic composition with large numbers, minimal labels, a strong grid, and subtle animation when entering the viewport.
• As a visitor, I want the statistics to feel like editorial typography rather than dashboard metrics, and not be presented as four generic boxes.

3.12 Engineering / Dialux Section

• As a visitor, I want a technical section inspired by architectural plans that presents Ecolife's professional lighting engineering and Dialux support as a premium differentiator.
• As a visitor, I want the section's visual language to use floor plan lines, photometric diagrams, lux distribution, architectural measurements, luminaire positioning, beam distribution, and minimal technical overlays.
• As a visitor, I want this section to look like real engineering documentation — not a futuristic HUD.

3.13 Custom Manufacturing Section

• As a visitor, I want a section explaining custom linear lighting manufacturing that visually tells the process: DESIGN → ENGINEERING → MANUFACTURING → INSTALLATION.
• As a visitor, I want imagery such as aluminium extrusion, profile cutting, LED assembly, diffuser installation, quality control, and finished architectural installation.
• As a visitor, I want this section to strongly communicate that Ecolife is not merely reselling products.

3.14 Typography

• As a visitor, I want typography to be one of the main visual elements, using no more than two primary typefaces that feel Swiss, architectural, contemporary, precise, and editorial.
• As a visitor, I want typography to use modern grotesk / neo-grotesk families and avoid decorative futuristic fonts.
• As a visitor, I want a combination of large display typography and precise technical micro typography.
• As a visitor, I want a hierarchy with hero type at 72–120px desktop where appropriate, large and confident section headings, highly readable body text, and small uppercase technical labels, all with excellent line-height and letter spacing.

3.15 Grid System

• As a visitor, I want a disciplined modern grid: a 12-column architectural grid on desktop, 8 columns on tablet, and 4 columns on mobile.
• As a visitor, I want certain visual elements to intentionally break the grid while generous negative space is maintained and not every empty area is filled.

3.16 Motion Design

• As a visitor, I want motion to feel physically connected to light, using slow light activation, masked reveals, subtle depth movement, controlled parallax, smooth typography entrances, image cropping transitions, architectural line drawing, soft illumination changes, and restrained camera movement.
• As a visitor, I want animation to feel premium and calm while avoiding constant floating, bouncing, elastic animations, excessive text splitting, random rotations, scroll hijacking, and excessive cursor effects.

3.17 Scroll Experience

• As a visitor, I want normal scrolling to be the foundation of navigation, with selected high-value scenes allowed to use sticky positioning.
• As a visitor, I want sticky moments such as a product remaining fixed while its features change as I scroll, and a dark architectural room remaining fixed while individual Ecolife lights gradually turn on.
• As a visitor, I want the entire website to never be one long scroll animation.

3.18 Cursor

• As a visitor, I want any custom cursor to be extremely minimal — the normal cursor most of the time, "VIEW" over project images, and "EXPLORE" over products — and I do not want large animated blobs following the mouse.

3.19 Navigation

• As a visitor, I want elegant and extremely clear navigation with the structure: Products, Projects, Solutions, About, Catalog, Contact.
• As a visitor, I want a clean desktop navigation that starts transparent over the hero and transforms into a subtle solid/blurred state after scrolling, with the Ecolife logo perfectly readable.
• As a visitor, I do not want an oversized complex mega-menu unless the product catalog genuinely requires it.

3.20 Mobile Design

• As a mobile visitor, I want mobile designed deliberately — not as compressed desktop — including a strong hero composition, readable typography, fast image loading, simplified 3D scenes where necessary, reduced shaders, reduced particle count, reduced motion, large touch targets, excellent vertical rhythm, and no horizontal overflow.
• As a visitor on a lower-powered device, I want expensive 3D sequences replaced with optimized video, image sequences, or static imagery where necessary.

3.21 Performance

• As a visitor, I want excellent Core Web Vitals, achieved through lazy loading, WebP/AVIF, responsive image sizes, compressed GLB/GLTF, Draco or Meshopt compression, texture compression, dynamic imports, code splitting, optimized fonts, GPU-conscious shaders, reduced motion preference, and intelligent loading states.
• As a visitor, I want imagery served in modern WebP and AVIF formats with responsive sizes so pages load quickly without sacrificing visual quality.
• As a visitor, I want compressed GLB/GLTF assets using Draco or Meshopt compression and compressed textures so 3D content loads efficiently.
• As a visitor, I want lazy loading, dynamic imports, code splitting, and optimized fonts so non-critical resources are deferred.
• As a visitor, I want GPU-conscious shaders and reduced-motion preference support so the experience stays smooth on capable hardware and respects user settings.
• As a visitor, I want intelligent loading states so the interface communicates progress during heavier scene loading.
• As a visitor, I want 3D assets to never block first contentful paint, so I see useful content immediately.

3.22 Accessibility

• As a visitor with accessibility needs, I want sufficient contrast, semantic headings, keyboard navigation, visible focus states, descriptive alt text, reduced-motion support, ARIA used only when appropriate, accessible menus, and readable body text — without usability being sacrificed for aesthetics.

3.23 Image Direction

• As a visitor, I want existing high-quality Ecolife project photography used, and future/new imagery to depict real architecture, daylight interiors, modern commercial interiors, offices, restaurants, retail, hospitality, premium residential projects, architectural close-ups, and realistic lighting.
• As a visitor, I want imagery to avoid impossible luxury mansions, fake black-marble interiors, generic CGI showrooms, overly dramatic orange lighting, and obvious AI-generated spaces, so the result is believable architecture.

3.24 Micro Details

• As a visitor, I want exceptional attention to small details — spacing, baseline alignment, image cropping, radius consistency, icon weight, typography rhythm, section transitions, button hover timing, borders, shadows, light falloff, image loading, menu animation, and responsive behavior — so nothing looks accidental.

3.25 Button System

• As a visitor, I want clean architectural controls instead of generic giant rounded SaaS buttons, in styles such as [ EXPLORE PRODUCTS → ] or EXPLORE PRODUCTS ↗.
• As a visitor, I want buttons to use subtle illuminated-line hover effects — for example, a minimal outline by default with a thin light traveling across the border on hover — kept sophisticated.

3.26 Section Transitions

• As a visitor, I want visual continuity between sections so the site feels like one continuous system rather than unrelated blocks.
• As a visitor, I want transitions such as a linear light from the hero continuing downward and transforming into the next section's grid line, a project image mask transitioning into the next section's geometry, and a technical drawing line turning into an architectural lighting profile.

3.27 Homepage Experience

• As a visitor, I want a homepage narrative ordered as: 01 Immersive Hero (experience begins in darkness and light reveals the brand); 02 Brand/Company Credibility (experience, completed projects, product range, exports); 03 Lighting Philosophy (how Ecolife shapes architectural space with light); 04 Featured Systems (large interactive product presentation); 05 Color Temperature / Light Simulation; 06 Engineering (Dialux, photometric calculation, project planning); 07 Featured Projects (large immersive architecture portfolio); 08 Custom Manufacturing (design-to-production workflow); 09 Why Ecolife (engineering, quality, support, warranty); 10 Project CTA (invite architects, designers, and companies to discuss a project); 11 Footer (minimal, elegant, complete).
• As a project stakeholder, I want this narrative followed unless a better information architecture becomes evident after auditing the real website.

3.28 Final CTA

• As a visitor, I want a memorable final CTA rather than a generic contact card — a completely dark architectural environment with centered typography reading "HAVE A SPACE IN MIND?", followed by a thin architectural lighting system gradually switching on and revealing "LET'S LIGHT IT.", with the CTA "START A PROJECT →".
• As a visitor, I want contact options shown elegantly, leaving a strong brand impression.

3.29 SEO

• As a search engine and visitor, I want the redesign to preserve and improve SEO using semantic HTML, correct heading structure, product schema where relevant, organization schema, project metadata, optimized titles, optimized descriptions, OpenGraph, structured URLs, a sitemap, robots configuration, and meaningful internal linking — so visual improvement does not destroy search visibility.

3.30 Component Architecture

• As a developer, I want reusable components including Navigation, HeroScene, SectionHeader, LightLine, ProductShowcase, ProductTechnicalData, ProjectCard, ProjectGallery, Statistics, TemperatureSimulator, EngineeringDiagram, ManufacturingProcess, CTA, and Footer.
• As a developer, I want colors, spacing, typography, breakpoints, animation timings, radii, and easing curves centralized as tokens, with no inconsistently hardcoded values.

3.31 Art Direction and Anti-Generic

• As a project stakeholder, I want the site to communicate "Architectural precision × Light engineering × Contemporary design × Technology" and avoid visual clichés associated with ordinary electrical stores or LED shops.
• As a visitor, I want the page to feel architectural, using composition, typography, photography, negative space, lighting, depth, geometry, and movement instead of excessive UI decoration.
• As a project stakeholder, I want to avoid generic AI web design patterns including: generic SaaS layouts, oversized gradient blobs, random purple gradients, excessive glassmorphism, giant floating rounded cards, dozens of pills, excessive border-radius, random glowing spheres, meaningless 3D shapes, generic Bento grids, dashboard-looking sections, repetitive card layouts, template-like hero sections, fake futuristic HUD interfaces, Freepik-style layouts, unusable Dribbble-style concepts, meaningless floating text, excessive neon, cyberpunk aesthetics, sci-fi gaming aesthetics, glossy plastic CGI, fake metallic gradients, and obvious AI-generated design patterns.
• As a project stakeholder, I want the page to not be a sequence of separate cards but an architectural composition.

3.32 Visual Rhythm and Contrast

• As a visitor, I want the whole website to not be uniformly dark, with intelligent contrast and rhythm between dark cinematic presentation areas, bright architectural spaces, clean white / soft-grey product areas, full-bleed project photography, and immersive 3D scenes.
• As a visitor, I want section treatments that match intent — Hero dark/cinematic; Product section light/highly editorial; Project section photography-led/immersive; Engineering section minimal technical white interface; Final CTA dramatic lighting environment — so the site feels editorial and alive.

3.33 Art Direction Base Materials and Accent

• As a visitor, I want the visual system built on architectural minimalism, cinematic lighting, physical materials, and digital precision — sophisticated rather than flashy.
• As a visitor, I want base materials such as deep graphite, architectural black, soft white, warm white, brushed aluminium, matte metal, translucent acrylic, smoked glass used sparingly, concrete, and natural architectural surfaces.
• As a visitor, I want the Ecolife brand color to remain recognizable but used strategically rather than on every component, with the strongest color often coming from actual light (2700K warm, 3000K architectural warm white, 4000K neutral white, subtle cool daylight, and controlled RGB only when demonstrating relevant products).

3.34 Development Quality

• As a developer, I want to first inspect framework, components, dependencies, routing, CMS, API, asset structure, SEO, and existing design tokens before modifying the existing codebase.
• As a developer, I want to inspect the existing CMS so I can understand how Ecolife's content (products, projects, copy, catalog) is authored and managed, and preserve CMS-managed content and structure rather than discarding it.
• As a developer, I want to inspect the existing API so I can understand how product, project, and catalog data are served, and reuse functioning API and data logic rather than unnecessarily rebuilding it.
• As a developer, I want to reuse functioning business logic — including existing CMS and API integrations — and refactor intelligently rather than unnecessarily rebuilding it.
• As a developer, I want to prefer a modern production-grade architecture if rebuilding is necessary, while adapting to the existing technology instead of forcing a new stack without reason.

3.35 Execution Process and Quality Bar

• As a project stakeholder, I want work executed in order: PHASE 1 Audit; PHASE 2 Art Direction (visual language, grid, typography, color, lighting behavior, motion language, 3D approach); PHASE 3 Design System (reusable tokens and components); PHASE 4 Homepage; PHASE 5 Products (browsing and product-detail); PHASE 6 Projects (portfolio and case studies); PHASE 7 Responsive (desktop, tablet, mobile independently); PHASE 8 Performance (imagery, animation, 3D); PHASE 9 Polish (typography, spacing, motion, lighting realism, visual consistency).
• As a project stakeholder, I want actual implemented work — layouts, components, responsive states, animations, interactions, lighting effects, shaders, 3D scenes, product presentations, navigation, project layouts, and transitions — rather than suggestions, wireframes, or descriptions of what could be done.
• As a project stakeholder, I want quality tested against: does it look like a $50 template; does it look like a generic AI-generated landing page; does it rely on gradients, glass cards and rounded rectangles instead of art direction; could the logo be swapped for any SaaS company and the design still work; does the interface visually communicate lighting before reading the text; does it feel credible for architects, interior designers, engineers and commercial clients — with any "yes/negative" failure triggering a redesign.
• As a project stakeholder, I want the result to reach the craftsmanship level of world-class architectural studios, premium architectural-lighting manufacturers, high-end industrial-design companies, Awwwards-level interactive experiences, premium automotive product websites, and contemporary Swiss editorial design — without copying another brand.
• As a visitor, I want the experience to be minimal but not empty, premium but not pretentious, technical but not cold, futuristic but not sci-fi, 3D but not CGI-looking, cinematic but still usable, and interactive but never gimmicky.

4. User Personas

4.1 Architect / Interior Designer

A design professional specifying lighting for architectural, commercial, hospitality, retail, or premium residential projects. They browse featured systems, evaluate products editorially and technically, review project case studies for credibility, and expect engineering credibility and premium product quality before initiating a project conversation.

4.2 Lighting Engineer / Technical Specifier

A technical user who needs photometric-level detail. They engage deeply with the engineering/Dialux section, technical drawings, luminaire positioning, beam distribution, lux distribution, product technical data (CRI, light output, color temperature, dimensions, installation type), and the product light simulation to validate specifications.

4.3 Commercial / Project Client

A business decision-maker (office, restaurant, retail, hospitality, or similar commercial space) seeking lighting solutions. They respond most strongly to the immersive brand experience, company credibility and statistics, featured project portfolio, "Why Ecolife" engineering advantages, and the final project CTA.

4.4 Ecolife Web / Development Team

The internal team responsible for auditing the existing site and codebase (including CMS, API, and asset structure), defining art direction, building the design system and components, implementing the homepage, products, and projects, perfecting responsive behavior, optimizing performance, ensuring SEO continuity, and polishing the final experience.

Integration and content systems (CMS, API, catalog data sources) are treated as system actors, not personas. Photography is treated as owned/existing asset content, not a persona.

5. Core User Flows

5.1 Architect / Interior Designer Flow

1. Land on the homepage; the immersive hero loads from darkness and light reveals the brand.
2. Read the monumental hero headline and supporting copy about architectural lighting and custom manufacturing.
3. Choose "Explore Products" or "View Projects" from the hero.
4. Scroll through Brand Credibility, Lighting Philosophy, and Featured Systems.
5. Inspect a featured product's editorial composition, 3D object, and technical data; trigger the exploded view for selected products.
6. Enter Featured Projects and view large full-width architectural imagery with masking/line-wipe transitions.
7. Open a project detail page and read the 01–05 case-study structure with architectural photography and product references.
8. Reach the final CTA and initiate a project conversation.

5.2 Lighting Engineer / Technical Specifier Flow

1. Land on the homepage; proceed to the Featured Systems or Products area.
2. Review product technical data: light output, CRI, color temperature, dimensions, installation type, application.
3. Use the color temperature / light simulation to compare 2700K, 3000K, 4000K environments.
4. Enter the Engineering / Dialux section to review photometric diagrams, lux distribution, luminaire positioning, and beam distribution.
5. Cross-reference products used within a project case study.
6. Reach the final CTA to discuss engineering/project planning.

5.3 Commercial / Project Client Flow

1. Land on the homepage and experience the immersive hero.
2. Continue into Brand/Company Credibility and Company Statistics (editorial typography) to assess trust and scale.
3. Browse Lighting Philosophy to understand how Ecolife shapes space with light.
4. Review Featured Projects for relevant project categories.
5. Read "Why Ecolife" (quality, custom solutions, professional support, warranty, engineering expertise) as one continuous visual story.
6. Read the Custom Manufacturing section to confirm Ecolife manufactures rather than only resells.
7. Reach the final CTA and start a project.

5.4 Ecolife Web / Development Team Flow

1. Audit the entire existing website and codebase (framework, components, dependencies, routing, CMS, API, asset structure, SEO, design tokens).
2. Define art direction: visual language, grid, typography, color, lighting behavior, motion language, 3D approach.
3. Build the design system: reusable tokens and components.
4. Build the redesigned homepage at production quality.
5. Redesign product browsing and product-detail experiences.
6. Redesign project portfolio and project case studies.
7. Perfect desktop, tablet, and mobile independently.
8. Optimize imagery, animation, and 3D for performance (WebP/AVIF, compressed GLB/GLTF, Draco/Meshopt, texture compression, dynamic imports, code splitting, optimized fonts).
9. Polish every section for typography, spacing, motion, lighting realism, and visual consistency; then apply the design quality tests.

6. Visuals, Colors, and Theme

The visual system is defined by architectural minimalism + cinematic lighting + physical materials + digital precision. It must be sophisticated rather than flashy.

Base materials / palette:

• Deep graphite, architectural black
• Soft white, warm white
• Brushed aluminium, matte metal
• Translucent acrylic, smoked glass (used sparingly)
• Concrete and natural architectural surfaces

Accent strategy:

• The Ecolife brand color remains recognizable but is used strategically — not applied to every component.
• The strongest color in the experience often comes from the actual light rather than the UI.

Light temperature palette:

• 2700K warm lighting
• 3000K architectural warm white
• 4000K neutral white
• Subtle cool daylight
• Controlled RGB only when demonstrating relevant products

Rhythm and contrast (not a uniformly dark site):

• Dark cinematic presentation areas (e.g., Hero)
• Bright architectural spaces
• Clean white / soft-grey product areas (Product section: light and highly editorial)
• Full-bleed project photography (Project section: photography-led and immersive)
• Immersive 3D scenes
• Minimal technical white interface (Engineering section)
• Dramatic lighting environment (Final CTA)

Buttons remain neutral and architectural, with thin illuminated-line hover treatments rather than saturated fills.

7. Signature Design Concept

"Light itself is the interface."

The website is not about lighting; it is an experience of light. Light functions as the primary visual material — establishing hierarchy, depth, interaction, transition, focus, emotion, product understanding, and brand identity.

The narrative arc of the experience:

• The interface starts with darkness.
• Light reveals material.
• Material reveals architecture.
• Architecture reveals products.
• Products reveal engineering.
• Engineering reveals Ecolife.

The signature expression is a continuous lighting system that runs through the experience — linear light profiles, illuminated architectural lines, travel of a thin beam along architectural paths, and light transforming between sections (a hero light line becoming the grid line of the next section; a technical drawing line becoming an architectural lighting profile).

Ecolife must never be confused with a generic template or an ordinary LED retailer. The visitor should immediately understand: Ecolife does not simply sell lights — Ecolife designs how spaces are experienced through light.

8. Interaction Model & Motion Direction

Interaction model:

• Hovering a product gently activates its light.
• Scrolling allows a thin beam to travel along an architectural path.
• Entering a project transitions the image from dimmed ambience to the finished lighting state.
• Hovering color temperature options realistically changes the environment across 2700K → 3000K → 4000K → 5000K.
• Pointer movement over certain 3D objects produces very subtle reflection and illumination responses.
• Selected products support an interactive exploded view.
• Product detail pages keep the UI minimal and let the product visualization/rotating model be the focus.
• Interactions are never gimmicks; they always reinforce the product.

Motion direction:

• Motion is physically connected to light: slow light activation, masked reveals, subtle depth movement, controlled parallax, smooth typography entrances, image cropping transitions, architectural line drawing, soft illumination changes, restrained camera movement.
• Animation is premium and calm. Avoid constant floating, bouncing, elastic animations, excessive text splitting, random rotations, scroll hijacking, and excessive cursor effects.
• Scrolling remains the foundation; sticky positioning is reserved for high-value moments only (e.g., a fixed product whose features change, or a fixed dark room whose lights turn on).
• The whole site is not one long scroll animation.
• A custom cursor, if used, is extremely minimal: normal cursor most of the time; "VIEW" on project images; "EXPLORE" on products; no large animated blobs.

9. Non-Functional Requirements

Performance

• Target excellent Core Web Vitals; do not sacrifice the site for visual effects.
• Lazy loading; WebP/AVIF; responsive image sizes.
• Compressed GLB/GLTF; Draco or Meshopt compression; texture compression.
• Dynamic imports; code splitting; optimized fonts; GPU-conscious shaders.
• Reduced motion preference support; intelligent loading states.
• 3D assets must not block First Contentful Paint; useful content must appear immediately.

Accessibility

• Sufficient contrast and readable body text.
• Semantic headings and structured content.
• Keyboard navigation with visible focus states.
• Descriptive alt text; ARIA only when appropriate; accessible menus.
• Reduced-motion support; usability never sacrificed for aesthetics.

Responsive Behavior

• Desktop (12-column grid), tablet (8 columns), and mobile (4 columns) designed independently.
• Mobile: strong hero composition, readable typography, fast image loading, simplified/reduced 3D, large touch targets, excellent vertical rhythm, no horizontal overflow.
• Lower-powered devices: replace expensive 3D with optimized video, image sequences, or static imagery.

SEO

• Preserve and improve SEO (semantic HTML, correct heading structure, product schema, organization schema, project metadata, optimized titles/descriptions, OpenGraph, structured URLs, sitemap, robots configuration, meaningful internal linking).
• Visual improvement must not destroy search visibility.

Quality and Craft

• Consistent spacing, baseline alignment, cropping, radius consistency, icon weight, typographic rhythm, transitions, hover timing, borders, shadows, light falloff, image loading, and menu animation.
• No element should look accidental.
• The final experience must pass the design quality tests and satisfy the anti-generic visual quality bar.

10. Tech Stack

Preferred stack (used where appropriate and adapted to the existing technology rather than forced):

Frontend Application

• Next.js
• React
• TypeScript

Styling & Tokens

• Tailwind CSS or well-structured CSS
• Centralized design tokens for colors, spacing, typography, breakpoints, animation timings, radii, and easing curves

3D & Rendering

• Three.js
• React Three Fiber
• Drei
• WebGL
• GLSL shaders where genuinely useful
• PBR materials, roughness, metallic response, emission maps, environmental reflections, realistic soft shadows, physically correct lighting

Motion

• GSAP
• Framer Motion / Motion
• Smooth scroll only if performance remains excellent

Asset Pipeline

• Optimized asset pipeline: WebP/AVIF imagery, responsive image sizes, compressed GLB/GLTF, Draco or Meshopt compression, texture compression

Content & Data Layers

• Existing CMS preserved and reused for Ecolife content (products, projects, copy, catalog)
• Existing API preserved and reused for product, project, and catalog data where present

Existing Layers

• Adapt to the existing framework, components, dependencies, routing, CMS, API, asset structure, SEO configuration, and existing design tokens where present; refactor intelligently instead of rebuilding functioning business logic.

No technologies outside the source material are introduced. The delivery shape is a content-led, 3D/interactive marketing and catalog website; only the layers the accepted product actually requires are included.

11. Assumptions and Constraints

• The project begins with a full audit of the live website and existing codebase; design and implementation decisions are grounded in that audit.
• Existing business logic, products, projects, catalog structure, CMS-managed content, API data, SEO content, and brand recognition are preserved; their presentation is entirely reinvented.
• The redesign may modify an existing codebase rather than build from scratch; a new stack is only adopted if rebuilding is genuinely necessary.
• Only two primary typefaces are used (modern grotesk / neo-grotesk), with no decorative futuristic fonts.
• The desktop grid is 12 columns, tablet 8, mobile 4, with intentional grid breaks permitted.
• The website must not be uniformly dark; contrast and rhythm between dark and light sections are required.
• 3D and shader work is used only where it meaningfully improves the experience and only where performance remains excellent.
• Sticky scroll scenes are used only at high-value moments; normal scrolling remains the foundation.
• Imagery must be believable architecture — no impossible mansions, fake black-marble interiors, generic CGI showrooms, overly dramatic orange lighting, or obvious AI-generated spaces.
• Modern image and 3D asset formats (WebP/AVIF, compressed GLB/GLTF with Draco or Meshopt) are required to meet the performance bar.

12. Glossary