Energiamärgis | Clean Process Steps Redesign

# Energiamärgis | Clean Process Steps Redesign

{
  "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": {
    "description": "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.",
    "prompt": "Create a design system using the following specs:\n\n**Color Palette:**\n- Primary: #007E30 (Forest Green)\n- Secondary: #00973A (Vibrant Green)\n- Accent: #9CE89A (Mint/Pale Green)\n- Neutrals: #FFFFFF (White), #F5F5F5 (Light Gray), #0A0A0A (Text Black)\n\n**Typography (Inter):**\n- Headings: Light weight (300) with Bold (700) and Italic accents. Tracking: -0.02em.\n- Hero H1: 72px, leading 1.1.\n- Section Headings: 48px, light weight.\n- Subheaders: Bold uppercase, tracking 0.3em, 12px.\n- Body: 16px-18px, leading 1.6, #4B5563.\n\n**Visual Elements:**\n- Corners: Zero border-radius (rounded-none).\n- Shadows: Hard offset 'Sharp Shadow' (10px 10px 0px 0px rgba(0, 126, 48, 0.1)).\n- Borders: Use top or left borders (4px width) in #007E30 for hierarchy.\n\n**Animations:**\n- Entrance: 0.8s cubic-bezier(0.4, 0, 0.2, 1) translateY(20px).\n- Hover: Float up (translateY(-8px)) and shadow increase.\n- Icons: Bounce-in effect using scaleBounce (0% to 110% to 100%)."
  },
  "layout_and_structure": {
    "description": "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.",
    "prompts": [
      {
        "part": "Navigation",
        "prompt": "Fixed header, 80px height. Logo on left (8x8 box icon #007E30 beside bold caps text). Navigation links centered with 40px gap. CTA button on right with no border radius, #007E30 background."
      },
      {
        "part": "Hero Section",
        "prompt": "Split layout. Left: Large typography (72px) with green italic emphasis. A 'pill' badge at the top with a pulsing green dot. Right: 4:5 aspect ratio image with sharp corners and a hard-offset background glow (#9CE89A/10). Bottom-left image overlay using glassmorphism (backdrop-blur-md, white/10)."
      },
      {
        "part": "Feature Grid",
        "prompt": "4-column grid. Each card is white, #FFFFFF, with a 4px left-border (#007E30) and no border-radius. Use large Lucide-style icons (40px) with a scale-up entrance animation."
      },
      {
        "part": "Process Step Cards",
        "prompt": "Grid of cards with #F5F5F5 background. CRITICAL: 4px border on the TOP edge (Forest Green). Large background numbers (72px, 10% opacity) in the top-left of each card. Hover state: Card scales 1.05x with a 25px hard shadow and reveals an arrow icon in the bottom-right."
      },
      {
        "part": "CTA Section",
        "prompt": "Full-width container with #007E30 background. Decorative skewed white/5 opacity stripes on the right. Split layout: Left has H2 (40px) with #9CE89A highlights; Right has two large square buttons (White/Solid and Transparent/Bordered)."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Sharp Shadow Card",
      "description": "A card component that uses a hard-coded shadow instead of a soft blur.",
      "prompt": "Component: div; Background: #FFFFFF; Border: 1px solid #F3F4F6; Shadow: box-shadow: 10px 10px 0px 0px rgba(0, 126, 48, 0.1); Transition: hover:box-shadow: 15px 15px 0px 0px rgba(0, 126, 48, 0.15), hover:translate-y(-4px)."
    },
    {
      "component": "Top-Border Step Card",
      "description": "Informational card with primary accent on the top edge.",
      "prompt": "Background: #F5F5F5; Top-Border: 4px solid #007E30; Padding: 40px; Elements: Large 10% opacity number (7xl font), Title (2xl), Body (base). Animation: On hover, scale(1.05) and increase shadow depth."
    }
  ],
  "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)."
}