Energiamärgis | Clean Process Steps Redesign

# Energiamärgis | Clean Process Steps Redesign

{
  "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": {
    "description": "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.",
    "prompt": "Create a design system with the following specs: Typography: Font family 'Inter', headings use letter-spacing -0.02em. Primary Heading (H1): 72px, font-weight 300 with bold/italic emphasis. Subheadings (H2): uppercase, tracking 0.3em, font-weight 700. Color Palette: Primary #007e30, Secondary #00973a, Light #9ce89a, BG #ffffff, Muted BG #f5f5f5. Layout Rules: 0px border-radius (perfectly sharp corners) for all buttons and cards. Shadow Style: Sharp offset shadow 'box-shadow: 10px 10px 0px 0px rgba(0, 126, 48, 0.1)'. Micro-interactions: Cards should scale by 1.05 and lift on hover; Icons should use a scale-bounce animation (cubic-bezier 0.34, 1.56, 0.64, 1). Transitions: 400ms ease-out for all hover states."
  },
  "layout_and_structure": {
    "description": "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.",
    "prompts": [
      {
        "part": "Navigation",
        "prompt": "Fixed top bar, height 80px, white background, 1px bottom border (#f3f4f6). Left side: square icon mark (32px) with zap icon and bold text logo. Right side: text links (font-size 14px, font-weight 500) with 40px spacing. Primary CTA button in navigation: background #007e30, white text, 0px border-radius."
      },
      {
        "part": "Hero Section",
        "prompt": "Split-screen layout (50/50). Left side: Badge with pulsing green dot, H1 heading (72px) using mixed weights (light and bold italic), and two action buttons (one solid green, one outlined gray). Right side: Large portrait aspect-ratio image (4:5) with 0px border-radius and a glassmorphism floating label at the bottom-left corner."
      },
      {
        "part": "Feature Grid",
        "prompt": "Four-column grid layout. Each card is white with a 4px solid left border (#007e30). Include a large bounce-animated icon at the top of each card, followed by a bold H4 and muted paragraph text."
      },
      {
        "part": "Process Section",
        "prompt": "Two-column container (4-span vs 8-span). The 4-span contains section intro text and a large 'average time' statistic card with a 4px left border. The 8-span contains a 2x2 grid of 'Step Cards'. Step Cards: background #f5f5f5, 4px solid top border (#007e30), large background numeric indicators (e.g., '01') in #007e30 at 10% opacity, and hidden-to-visible arrow icons on hover."
      },
      {
        "part": "CTA Banner",
        "prompt": "Full-width container with #007e30 background. Design features decorative white/mint translucent geometric overlays (skewed rectangles). Content: H2 white text and subtext on the left, two large action buttons (white solid and white outlined) on the right."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Step Card Redesign",
      "description": "Modern process card with top-weighted hierarchy.",
      "prompt": "Build a card component with: background #f5f5f5; border-top: 4px solid #007e30; padding: 40px; transition: transform 0.3s ease-out. Inside: A large background number (font-size 72px, black-weight, color #007e30 at 0.1 opacity), H4 title (24px, bold), and body text. Hover effect: transform scale(1.05), box-shadow 20px 20px 40px rgba(0,0,0,0.1), and reveal a secondary icon in the bottom-right corner."
    },
    {
      "component": "Sharp Shadow Benefit Card",
      "description": "Brutalist shadow card with floating interaction.",
      "prompt": "Container: white background, 1px border #f3f4f6. Shadow: 10px 10px 0px 0px rgba(0, 126, 48, 0.1). Hover: transform translateY(-8px) and increase shadow to 15px 15px 0px 0px rgba(0, 126, 48, 0.15). Inside: Square icon container (56px) that changes color from light green to solid primary green on card hover."
    }
  ],
  "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."
}