Energiamärgis | Clean Process Steps Redesign
A clean, professional corporate design system with a brutalist-lite aesthetic, characterized by sharp edges, high-contrast typography, and a distinct green accent. Ideal for sustainability services, real estate, energy management, and modern fintech. Features include sharp drop shadows, top-accented card layouts, and dynamic entry animations using Inter typography. The layout emphasizes clarity with a minimalist color palette of white, gray, and deep emerald green, utilizing grid-based structures and bold numeric indicators for process steps.
Summary
A modern, high-trust design system utilizing the Inter font family, sharp-cornered UI elements, and a vibrant emerald green primary color. It combines technical precision with approachable modernism through subtle animations and structured information hierarchy.
Style
The style is built on a foundation of 'Sharp Minimalism'. It uses the Inter font family (weights 300 to 900) with tight letter-spacing for headings. The color palette is strictly controlled: Primary Green (#007e30), Secondary Green (#00973a), and a light mint accent (#9ce89a). UI elements feature 0px border-radius (sharp corners), 1px borders, and custom 'sharp' shadows that use solid color offsets rather than soft blurs. Animations are sophisticated, utilizing custom cubic-bezier curves (0.34, 1.56, 0.64, 1) for icon bounciness and 'view-timeline' for scroll-triggered section reveals.
Layout & Structure
Grid-based landing page layout with clear section transitions. It moves from a high-impact split-screen hero to a 4-column feature grid, a 3-column benefits grid with sharp shadows, and a unique 12-column process section with top-bordered step cards.
Navigation
Hero Section
Feature Grid
Process Section
CTA Banner
Components
Step Card Redesign
Modern process card with top-weighted hierarchy.
Sharp Shadow Benefit Card
Brutalist shadow card with floating interaction.
Special Notes
MUST: Maintain perfectly sharp corners (border-radius: 0) on all elements. MUST: Use the green top-border accent on process cards as the primary identifier. MUST NOT: Use soft blurs for shadows; keep them sharp and offset. MUST: Include the rhythmic reveal animations on scroll to maintain engagement.