Energiamärgis | Clean Process Steps Redesign
A clean, industrial-professional design system emphasizing sustainability and architectural precision. Featuring a forest green and mint palette, sharp corners (no border-radius), and high-contrast typography. Optimized for ESG reporting, green energy SaaS, construction services, and professional consultancy. Notable for its use of hard shadows, scroll-triggered animations, and a distinct top-border visual hierarchy for informational cards.
Summary
A minimalist, high-impact architectural design system using a 'Forest & Mint' color scheme (#007E30, #9CE89A), strictly sharp edges, and sophisticated Inter-based typography. The design focuses on clarity and trust through structured grids, hard-offset shadows, and smooth scroll-triggered micro-animations.
Style
The style is defined by its 'Brutalist-Light' aesthetic—retaining the sharp edges and hard shadows of brutalism but softening them with clean white space and an eco-conscious color palette. It uses the Inter font family with tight tracking (-0.02em) and a mix of light and bold weights to create hierarchy. Animations are purposeful, utilizing view-transitions and cubic-bezier curves for a premium feel.
Layout & Structure
A vertical-scrolling landing page structure with fixed navigation, wide-margin sections (max-width 1280px), and a balance between text-heavy informational blocks and large-scale imagery.
Navigation
Hero Section
Feature Grid
Process Step Cards
CTA Section
Components
Sharp Shadow Card
A card component that uses a hard-coded shadow instead of a soft blur.
Top-Border Step Card
Informational card with primary accent on the top edge.
Special Notes
MUST: Maintain zero border-radius on all elements including buttons, images, and cards. MUST: Use specific forest green (#007E30) for primary actions. MUST: Use -0.02em tracking on large headings. DO NOT: Use rounded corners or soft blurs for shadows (keep them sharp and offset).