Design Landing Page & Layout & Define Color Palette and Typography

🎯 Description

We need to establish a consistent design foundation for the Gas Price Predictor platform by defining the color palette, typography, and creating the initial landing page design in Figma.

Tasks

• Define a clean and modern color palette consistent with the project’s purpose.

• Choose typography for headings, subheadings, and body text.

• Design a responsive landing page layout in that reflects the project’s vision — “Smart predictions. Real-time data. Powered by AI.”

📋 Tasks

• Create a new Figma file for the Gas Price Predictor UI.

• Define primary, secondary, and neutral colors.

• Include light and dark mode versions.

• Select font pairs (e.g., Inter, Poppins, or Manrope).

• Design landing page sections:

• Hero Section: Headline, subheadline, CTA (e.g., “Get Predictions”)

• Feature Highlights: Cards for AI prediction, live data, blockchain transparency

• Gas Price Chart / Visualization Placeholder

• Footer: Links, branding, and contact info

• Export style guide and layout assets.

• Upload Figma link and screenshots in the PR.

✅ Acceptance Criteria

• Figma file shared with View access link in PR.

• Defined color palette includes:

• At least 3 main brand colors

• Background and surface colors

• Success/error/warning states

• Font styles defined for:

• Headings (H1–H6)

• Body text

• Buttons/CTAs

• Landing page design visually represents:

• Modern AI-based theme

• Readable, accessible text contrast

• Responsive structure (desktop + mobile frames)

• Exported assets :

• /design/style-guide.png

• /design/landing-page.fig

• /design/typography.md