name	plantix-frontend-designer
description	Create production-grade web interfaces, dashboards, and data visualizations using Plantix brand guidelines. Use this skill when the user asks to build webpages, landing pages, dashboards, charts, or any visual interface. Generates polished, on-brand designs that follow Plantix's established visual identity and style principles.

Plantix Frontend Design

Create distinctive, production-grade frontend interfaces and data visualizations that embody the Plantix brand identity. This skill provides specialized guidance for building web components, pages, applications, and quick data visualizations with consistent Plantix styling.

Overview

This skill transforms Claude into a Plantix-specialized frontend designer with deep knowledge of:

Plantix brand colors, typography, and visual language
Design principles for agricultural technology interfaces
Asset integration (logos, icons, brand elements)
Responsive layouts optimized for farmer-facing and B2B contexts
Data visualization with Plantix styling

Use this skill when building:

Landing pages and marketing websites
Product dashboards and web applications
Data visualizations (charts, graphs, maps)
Interactive prototypes and demos
Email templates and presentations (HTML-based)

Design Thinking

Before coding, understand the context and commit to an aesthetic direction aligned with Plantix's brand:

Purpose: What problem does this interface solve? Who is the audience (farmers, agronomists, business users, researchers)?
Tone: Plantix balances professionalism with approachability - technical but not cold, data-driven but human-centered
Constraints: Technical requirements (framework, performance, accessibility, mobile-first)
Plantix Identity: Every design should feel unmistakably Plantix through consistent use of brand colors, typography, and visual principles

Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:

Production-grade and functional
On-brand with Plantix visual identity
Optimized for agricultural/agtech contexts
Accessible and mobile-responsive

Plantix Brand Guidelines

Color Palette

Primary Brand Color:

Plantix Green: #009688 - Use generously for accents, CTAs, highlights, and interactive elements

Text Colors:

Plantix Black: #1C1C1C (NOT default black #000000)
Dark Gray: #7A8286 - Use sparingly for secondary text

Accent Colors (for highlights and visual interest):

Plum Purple: #724E91
Tropical Pink: #E54F6D
Golden Yellow: #FEC011

Background:

Light Green: rgba(0, 150, 136, 0.1) - Ideal for section backgrounds

CSS Variables (recommended):

:root {
  --plantix-green: #009688;
  --plantix-black: #1c1c1c;
  --plantix-gray: #7a8286;
  --plantix-purple: #724e91;
  --plantix-pink: #e54f6d;
  --plantix-yellow: #fec011;
  --plantix-light-green: rgba(0, 150, 136, 0.1);
}

Typography

Font Families: Load from Google Fonts:

<link
  href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Noto+Sans:wght@400&display=swap"
  rel="stylesheet"
/>

Font Usage:

Poppins Semibold (600): All headings and titles (H1-H4)
Poppins Medium (500): Subtle subtitle variations
Noto Sans Regular (400): Body text ONLY

Typography Scale:

Display/Hero: 52px Poppins Semibold
H1: 36px Poppins Semibold
H2: 24px Poppins Semibold
H3: 16px Poppins Semibold
H4: 13-15px Poppins Semibold/Medium
Body: 11px Noto Sans Regular

Brand Assets

Logo and Icons: Available in assets/ directory:

plantix-icon.png - Full horizontal logo with icon and wordmark
leaf-icon.png - Standalone circular leaf icon (for favicons, app icons)

Logo Usage:

<link rel="icon" type="image/png" href="path/to/leaf-icon.png" />
<img src="path/to/plantix-icon.png" alt="Plantix" class="logo" />

Logo guidelines:

Maintain clear space around logo
Do not alter logo colors
Use on white or light backgrounds for best visibility
Leaf icon works best on light backgrounds (has transparent areas)

Design Principles

Color Usage:

Use Plantix Green (#009688) to break up content and add visual interest
Most text should be Plantix Black (#1C1C1C), NOT default black
Light green backgrounds create visual breathing room
Accent colors (purple, pink, yellow) add pops of color for emphasis

Typography Hierarchy:

Poppins Semibold for ALL headers - creates strong visual hierarchy
Noto Sans Regular exclusively for body text - ensures readability
Maintain the specified type scale for consistency
Generous line-height (1.6+) for body text

Layout Principles:

White space: Ensure adequate breathing room in layouts
Visual hierarchy: Size, weight, and color create clear importance
Two-column layouts: Effective for organizing separate information blocks
Mobile-first: Design for small screens, enhance for desktop
Clean organization: Use bullet points and clear structure

Frontend Aesthetics Guidelines

Beyond brand compliance, apply these aesthetic principles to create polished, distinctive interfaces:

Typography: The Poppins + Noto Sans pairing is established for Plantix. Use weight and size contrast decisively - don't be timid with scale jumps.

Color & Theme: Plantix Green is the dominant color. Use it confidently with sharp accents from the secondary palette. Avoid timid, evenly-distributed color - commit to the green as the visual anchor.

Motion & Animation: Use CSS animations for:

Page load reveals with staggered animation-delay
Hover states on interactive elements
Smooth transitions on state changes
Scroll-triggered reveals for content sections

Spatial Composition:

Generous white space for premium feel
Asymmetric layouts when appropriate
Grid-breaking hero sections
Strategic use of Plantix Green to guide eye flow

Backgrounds:

Prefer light green backgrounds over pure white
Layer subtle gradients for depth
Use geometric patterns sparingly
Add shadows for elevation and hierarchy

Data Visualization: When creating charts or graphs:

Use Plantix Green as primary data color
Use accent colors (purple, pink, yellow) for categorical data
Maintain high contrast for readability
Label clearly with Poppins for titles, Noto Sans for labels
Keep designs clean and information-dense

Common Use Cases

Landing Pages & Websites

Hero sections with Plantix Green CTAs
Feature grids with icons and descriptions
Testimonial sections with proper typography hierarchy
Footer with Plantix branding

Dashboards & Applications

Navigation with Plantix Green highlights
Data cards with light green backgrounds
Interactive elements with hover states
Charts and visualizations with brand colors

Quick Data Visualizations

For requests like "create a bar chart showing crop yields":

Use Chart.js or similar library with Plantix color scheme
Poppins for chart titles
Noto Sans for labels and legends
Plantix Green for primary data series
Light green background for chart area

Email Templates

HTML email with inline CSS
Mobile-responsive tables
Plantix branding in header
Green CTAs that work across email clients

Technical Implementation

Starter Template:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Plantix - [Page Title]</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Noto+Sans:wght@400&display=swap"
      rel="stylesheet"
    />
    <link rel="icon" type="image/png" href="path/to/leaf-icon.png" />
    <style>
      :root {
        --plantix-green: #009688;
        --plantix-black: #1c1c1c;
        --plantix-gray: #7a8286;
        --plantix-purple: #724e91;
        --plantix-pink: #e54f6d;
        --plantix-yellow: #fec011;
        --plantix-light-green: rgba(0, 150, 136, 0.1);

        --font-heading: "Poppins", sans-serif;
        --font-body: "Noto Sans", sans-serif;
      }

      body {
        font-family: var(--font-body);
        font-size: 11px;
        color: var(--plantix-black);
        line-height: 1.6;
        margin: 0;
        padding: 0;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-family: var(--font-heading);
        font-weight: 600;
        color: var(--plantix-black);
      }

      h1 {
        font-size: 36px;
      }
      h2 {
        font-size: 24px;
      }
      h3 {
        font-size: 16px;
      }
      h4 {
        font-size: 13px;
      }

      .btn-primary {
        background-color: var(--plantix-green);
        color: white;
        padding: 12px 32px;
        font-family: var(--font-heading);
        font-weight: 600;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        text-decoration: none;
        display: inline-block;
      }

      .btn-primary:hover {
        background-color: #00796b;
      }
    </style>
  </head>
  <body>
    <!-- Your content here -->
  </body>
</html>

Component Patterns: Follow responsive, accessible patterns. Use semantic HTML. Ensure keyboard navigation. Test on mobile viewports.

Resources

references/

plantix-style-guide.md - Comprehensive brand guidelines extracted from official Plantix presentation template

Load this reference when you need detailed specifications about:

Exact color codes and usage guidelines
Complete typography scale and font weights
Detailed logo usage rules
CSS implementation examples
Web component patterns

assets/

plantix-icon.png - Full logo with icon and wordmark (PNG, transparent background)
leaf-icon.png - Standalone leaf icon for favicons and app icons (PNG, transparent background)

Copy these assets into your project and reference them in HTML. The logos are ready to use as-is with proper transparency and sizing.

scripts/

No scripts are included. This skill focuses on design guidance and asset provision rather than automated code generation.

Quick Start Examples

Request: "Create a landing page for the Plantix Growth Stage API" Approach:

Hero section with large Poppins heading, Plantix Green CTA
Feature grid with icons and H3 headings
Light green background sections for visual variety
Code example with syntax highlighting
Footer with Plantix logo

Request: "Make a bar chart showing rice growth stages by district" Approach:

Use Chart.js with Plantix color scheme
Plantix Green bars, light green background
Poppins Semibold title, Noto Sans labels
Responsive container with proper padding
Legend with brand colors

Request: "Build a dashboard to track crop disease predictions" Approach:

Navigation bar with Plantix logo and green highlights
Card-based layout with light green backgrounds
Data visualizations using brand colors
Interactive elements with smooth transitions
Mobile-responsive grid system

Remember: Every design should feel unmistakably Plantix. Consistency in color, typography, and visual language builds brand recognition and trust. When in doubt, use more Plantix Green, trust the Poppins/Noto Sans pairing, and keep layouts clean and purposeful.

plantix-frontend-designer

Install Skill

SKILL.md