Styling Guide

Styling Approach

The application uses Tailwind CSS v4 with CSS variables for theming, combining Syngenta’s brand identity with Apple’s minimalist design philosophy.

The design system uses CSS variables defined in globals.css for easy theming and dark mode support.

Tailwind CSS v4

The project uses the latest Tailwind CSS v4 with native PostCSS integration:

app/globals.css

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

@custom-variant dark (&:is(.dark *));

Key Features

Native PostCSS - No separate config file needed
CSS imports - Import Tailwind directly in CSS
Custom variants - Define custom dark mode variants
Built-in animations - tw-animate-css integration

Syngenta Brand Colors

The design system uses Syngenta’s official brand colors:

Primary

#702F8ASyngenta Purple/Magenta

Secondary

#00A04ASyngenta Green

Accent

#E20074Vibrant Magenta

Neutral Colors (Apple-Inspired)

Neutral Light: #F5F5F7 - Apple-inspired light gray
Neutral Dark: #1D1D1F - Apple-inspired dark gray
Text Primary: #1D1D1F
Text Secondary: #6E6E73

CSS Variables

All colors are defined as CSS variables using OKLCH color space for better perceptual uniformity:

app/globals.css

:root {
  /* Syngenta Brand Colors - Light Mode */
  --background: oklch(0.98 0.002 264);        /* #F5F5F7 */
  --foreground: oklch(0.2 0 0);               /* #1D1D1F */
  --primary: oklch(0.45 0.18 305);            /* #702F8A - Syngenta Purple */
  --secondary: oklch(0.58 0.15 155);          /* #00A04A - Syngenta Green */
  --accent: oklch(0.55 0.25 345);             /* #E20074 - Vibrant Magenta */
  --muted-foreground: oklch(0.5 0.01 264);    /* #6E6E73 */
  --radius: 0.75rem;                          /* Apple-inspired rounded corners */
}

Dark Mode Colors

app/globals.css

.dark {
  /* Syngenta Brand Colors - Dark Mode */
  --background: oklch(0.15 0 0);              /* #1D1D1F */
  --foreground: oklch(0.98 0.002 264);        /* Light text */
  --primary: oklch(0.55 0.20 305);            /* Lighter purple */
  --secondary: oklch(0.65 0.16 155);          /* Lighter green */
  --accent: oklch(0.65 0.25 345);             /* Lighter magenta */
}

Using Colors in Components

Tailwind Classes

Use semantic color classes that automatically adapt to light/dark mode:

// Background colors
<div className="bg-background">         {/* Page background */}
<div className="bg-card">               {/* Card background */}
<div className="bg-muted">              {/* Muted background */}

// Text colors
<p className="text-foreground">         {/* Primary text */}
<p className="text-muted-foreground">   {/* Secondary text */}

// Brand colors
<Button className="bg-primary">         {/* Syngenta Purple */}
<Button className="bg-secondary">       {/* Syngenta Green */}
<Button className="bg-accent">          {/* Vibrant Magenta */}

// Borders
<div className="border-border">         {/* Standard border */}
<input className="border-input">        {/* Input border */}

Custom CSS

Reference CSS variables directly in custom styles:

.custom-component {
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: var(--radius);
}

Design Principles

The design follows Apple’s minimalist aesthetic:

Simplicity

Clean interfaces with generous whitespace. Every element serves a purpose.

// Good: Clean, spacious layout
<div className="space-y-6 p-8">
  <h1 className="text-3xl font-semibold">Title</h1>
  <p className="text-muted-foreground">Description</p>
</div>

Clarity

Clear typography hierarchy with proper font sizes and weights.

<h1 className="text-4xl font-bold">Heading 1</h1>
<h2 className="text-3xl font-semibold">Heading 2</h2>
<h3 className="text-2xl font-medium">Heading 3</h3>
<p className="text-base">Body text</p>
<p className="text-sm text-muted-foreground">Small text</p>

Depth

Subtle shadows and layering create visual hierarchy.

<Card className="shadow-sm hover:shadow-md transition-shadow">
  Content with subtle elevation
</Card>

Focus

One primary action per screen, clear visual focus.

<div className="flex justify-end gap-3">
  <Button variant="outline">Cancel</Button>
  <Button>Save Changes</Button>  {/* Primary action */}
</div>

Typography

The application uses Google Fonts with Next.js font optimization:

app/layout.tsx

import { Inter, Geist_Mono } from "next/font/google"

const inter = Inter({ 
  subsets: ['latin'], 
  variable: '--font-sans' 
})

const fontMono = Geist_Mono({ 
  subsets: ["latin"], 
  variable: "--font-mono" 
})

Font Usage

// Sans-serif (default)
<p className="font-sans">Body text in Inter</p>

// Monospace
<code className="font-mono">const code = true</code>

// Font weights
<p className="font-light">Light (300)</p>
<p className="font-normal">Normal (400)</p>
<p className="font-medium">Medium (500)</p>
<p className="font-semibold">Semibold (600)</p>
<p className="font-bold">Bold (700)</p>

Spacing Scale

Maintain consistent spacing using Tailwind’s scale:

// Consistent spacing (4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px)
<div className="space-y-1">   {/* 4px */}
<div className="space-y-2">   {/* 8px */}
<div className="space-y-3">   {/* 12px */}
<div className="space-y-4">   {/* 16px */}
<div className="space-y-6">   {/* 24px */}
<div className="space-y-8">   {/* 32px */}
<div className="space-y-12">  {/* 48px */}
<div className="space-y-16">  {/* 64px */}

Border Radius

Rounded corners follow Apple’s aesthetic:

:root {
  --radius: 0.75rem;                     /* Base radius (12px) */
  --radius-sm: calc(var(--radius) * 0.6);  /* 7.2px */
  --radius-md: calc(var(--radius) * 0.8);  /* 9.6px */
  --radius-lg: var(--radius);              /* 12px */
  --radius-xl: calc(var(--radius) * 1.4);  /* 16.8px */
  --radius-2xl: calc(var(--radius) * 1.8); /* 21.6px */
  --radius-3xl: calc(var(--radius) * 2.2); /* 26.4px */
  --radius-4xl: calc(var(--radius) * 2.6); /* 31.2px */
}

Usage

<Button className="rounded-4xl">      {/* Extra rounded buttons */}
<Card className="rounded-lg">         {/* Standard card radius */}
<input className="rounded-md">        {/* Input field radius */}

Animations & Transitions

Smooth, subtle animations enhance the user experience:

// Hover transitions
<Button className="transition-colors hover:bg-primary/80">
  Hover me
</Button>

// Active states
<Button className="active:translate-y-px active:scale-[0.98]">
  Click me
</Button>

// Loading states
<div className="animate-pulse bg-muted h-4 rounded" />

// Fade in
<div className="animate-in fade-in duration-300">
  Content
</div>

Responsive Design

Use Tailwind’s responsive utilities:

<div className="
  px-4 sm:px-6 lg:px-8          /* Responsive padding */
  grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3  /* Responsive grid */
  text-sm md:text-base           /* Responsive text size */
">
  Content
</div>

Breakpoints

sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px

Global Styles

Base styles are applied in the @layer base directive:

app/globals.css

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  
  body {
    @apply bg-background text-foreground antialiased;
  }
  
  html {
    @apply font-sans;
    scroll-behavior: smooth;
  }
}

Best Practices

Use semantic color classes

Always use semantic classes like bg-primary instead of hard-coded colors like bg-purple-600. This ensures consistent theming and dark mode support.

Maintain spacing consistency

Use the standard spacing scale (4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px) to maintain visual rhythm.

Leverage the cn() utility

Use the cn() helper to merge classes conditionally:

<div className={cn("base-classes", isActive && "active-classes")} />

Test dark mode

Always test components in both light and dark modes. Press d to toggle theme during development.

Follow accessibility guidelines

Ensure sufficient color contrast (WCAG AA minimum) and provide focus indicators for interactive elements.

Accessibility

The design system includes built-in accessibility features:

// Focus rings
<Button className="focus-visible:ring-2 focus-visible:ring-ring">
  Accessible button
</Button>

// Aria attributes
<button aria-label="Close dialog" aria-expanded={isOpen}>
  <CloseIcon />
</button>

// Color contrast
/* All text colors meet WCAG AA standards */
--foreground: oklch(0.2 0 0);           /* High contrast */
--muted-foreground: oklch(0.5 0.01 264); /* Medium contrast */

Overview

Core Features

User Guide

Development

Styling Approach

Tailwind CSS v4

Key Features

Syngenta Brand Colors

Primary

Secondary

Accent

Neutral Colors (Apple-Inspired)

CSS Variables

Dark Mode Colors

Using Colors in Components

Tailwind Classes

Custom CSS

Design Principles

Typography

Font Usage

Spacing Scale

Border Radius

Usage

Animations & Transitions

Responsive Design

Breakpoints

Global Styles

Best Practices

Accessibility

Next Steps

Components

Tailwind CSS Docs

Build docs developers (and LLMs) love

Overview

Core Features

User Guide

Development

​Styling Approach

​Tailwind CSS v4

​Key Features

​Syngenta Brand Colors

Primary

Secondary

Accent

​Neutral Colors (Apple-Inspired)

​CSS Variables

​Dark Mode Colors

​Using Colors in Components

​Tailwind Classes

​Custom CSS

​Design Principles

​Typography

​Font Usage

​Spacing Scale

​Border Radius

​Usage

​Animations & Transitions

​Responsive Design

​Breakpoints

​Global Styles

​Best Practices

​Accessibility

​Next Steps

Components

Tailwind CSS Docs

Build docs developers (and LLMs) love

Styling Approach

Tailwind CSS v4

Key Features

Syngenta Brand Colors

Neutral Colors (Apple-Inspired)

CSS Variables

Dark Mode Colors

Using Colors in Components

Tailwind Classes

Custom CSS

Design Principles

Typography

Font Usage

Spacing Scale

Border Radius

Usage

Animations & Transitions

Responsive Design

Breakpoints

Global Styles

Best Practices

Accessibility

Next Steps