Agritech Arabia 2025

Overview

Agritech Arabia 2025 is a premier institutional event platform designed to unlock opportunities across the Arab agricultural value chain through strategic partnerships, sectoral significance, and innovation. The design system embodies 'Agricultural Modernism'—a visual language that merges the vitality of growth (vibrant greens and teals) with institutional authority (clean typography, structured layouts). The brand personality is forward-thinking yet grounded: professional without being austere, optimistic about technology's role in regional food security. The UI prioritizes clarity and confidence, using generous whitespace, a restrained color palette anchored by a signature lime-green primary, and typography that feels contemporary yet accessible across Arabic and English contexts. Voice: authoritative yet approachable, data-driven yet human. Example sentence: 'Join 500+ agri leaders reshaping the region's future—September 27–29, Riyadh.'

Colors

The color system is rooted in agricultural vitality and institutional trust. Primary (#74c265, a vibrant sage-green) is deployed on all CTAs ('Get in Touch', 'Register Now'), interactive states, and accent highlights—it signals growth, sustainability, and actionable opportunity. Secondary (#0ab3b2, a teal-cyan) anchors the hero patronage section and supporting callouts, evoking water, technology, and regional identity. Tertiary (#9f997b, a warm taupe) provides grounding for secondary content and typography accents. The surface stack is anchored in a soft cream (#f1f7ed) that reduces eye strain and evokes paper—a nod to institutional formality—while on-surface text (#2c451d, a deep forest-green) ensures 7:1+ contrast. Outline tokens (#777f71, #b2baad) define subtle borders and dividers. Err

Typography

The type system uses Overused Grotesk exclusively, a contemporary sans-serif that balances geometric precision with humanist warmth—critical for bilingual (Arabic/English) legibility. Display (60px, 300 weight, -0.02em tracking) anchors hero statements and major section breaks; Headline-lg (48px, 300 weight) is used for the main hero copy ('Unlock New Opportunities…'), creating a light, aspirational tone. Headline-md (36px, 400 weight) and Title-lg (24px, 500 weight) structure subsections and card headers. Body-lg (18px, 300 weight, 28px line-height) and Body-md (16px, 300 weight, 24px line-height) handle descriptive copy and form labels, with generous line-height (1.5–1.75) to support readability in both scripts. Label-md (14px, 500 weight, 0.02em tracking) and Label-sm (12px, 500 weight,

Layout

The layout follows a 12-column grid with a max-width of 1280px, centered with 24px gutters on desktop, scaling to 12px on tablet and 8px on mobile. The hero section spans full-width with 80px vertical padding and a 500px minimum height, establishing visual dominance. Section rhythm is enforced via lg spacing (40px) between major blocks, md spacing (24px) between cards and subsections. The page uses a 'card-and-flow' model: hero dominates, followed by stacked sections (patronage, offerings, venue) that each occupy 60–80% of viewport height. Whitespace is generous—no section is denser than 70% coverage—allowing the eye to rest and the content to breathe. Container max-widths vary by section (1170px for content, 1060px for imagery) to create subtle visual rhythm. Mobile breakpoints at 800px a

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle layering rather than dramatic drop-shadows. Level 1 (Base): flat surfaces with no shadow, using outline borders (1px solid #b2baad) to define edges. Level 2 (Cards, inputs): 0 1px 2px rgba(44, 69, 29, 0.06)—a soft, barely-perceptible lift that suggests interactivity without visual noise. Level 3 (Modals, popovers, hover states): 0 4px 12px rgba(44, 69, 29, 0.08)—a more pronounced shadow that clearly separates the element from the background. The patronage card (featuring the minister) uses a gradient overlay (rgba(10, 179, 178, 0.

Shapes

The shape philosophy is 'Institutional Geometry'—sharp enough to convey professionalism, rounded enough to feel approachable. Buttons use full radius (9999px), creating pill-shaped affordances that feel modern and clickable. Cards and input fields use lg radius (1rem / 16px), balancing structure with softness. The hero section uses a 48px border-radius on the right edge (visible in the screenshot), creating a subtle organic curve that breaks the grid's rigidity. Smaller UI elements (badges, tags) use full radius for consistency. The patronage card uses a 48px radius on all corners, emphasizing

Components

Action Elements Buttons are the primary interaction driver. The primary button (bg: #74c265, text: #f0eef8, 48px height, 12px 32px padding, 9999px radius) uses label-md typography (14px, 500 weight) and transitions to primary-fixed-dim (#98b63c) on hover with a 0.2s ease-in-out curve. Secondary buttons (transparent bg, 2px #74c265 border, same padding/height) invert on hover to a filled state. The 'Get in Touch' CTA in the header uses this primary style; 'Register Now' in the hero uses the same. All buttons have a minimum touch target of 48px height and 44px width to meet accessibility standards.

Containers & Surfaces Cards (bg: #eff3eb, 1px solid #b2baad border, 1rem radius, 24px padding) use the sm elevation shadow (0 1px 2px rgba(44, 69, 29, 0.06)) and transition to surface-con

Do's and Don'ts

**Do**

• Do use the primary green (#74c265) exclusively for CTAs and interactive affordances—it's the brand's signature accent and must remain visually distinct.
• Do maintain 24px gutters on desktop and scale proportionally on mobile (12px tablet, 8px mobile) to preserve the generous whitespace philosophy.
• Do apply 0.2s ease-in-out transitions to all interactive state changes (hover, focus, active) to create a cohesive, responsive feel.
• Do use Overused Grotesk at 300 weight for body copy and headlines to maintain the refined, contemporary aesthetic across both Arabic and English.
• Do layer depth through subtle shadows (sm/md/lg elevation tokens) and transparency overlays rather than aggressive drop-shadows.
• Do use full radius (9999px) exclusively for buttons and interactive pills to signal affordance; reserve lg radius (1rem) for cards and containers.

**Don't**

• Don't use secondary (#0ab3b2) or tertiary (#9f997b) as primary CTA colors—they dilute the brand's visual hierarchy and confuse interaction intent.
• Don't apply shadows darker than rgba(44, 69, 29, 0.12) or blur more than 8px on standard cards; the aesthetic is refined, not heavy.
• Don't mix typefaces—Overused Grotesk is the sole font family; avoid Georgia, system-ui, or serif fallbacks in component styles.
• Don't reduce padding below 8px on mobile or gutters below 8px; the whitespace is intentional and supports cognitive load reduction.
• Don't use border-radius values outside the defined scale (sm/DEFAULT/md/lg/xl/full); custom radii fragment the design system.
• Don't apply color overlays or gradients with opacity above 0.25 on interactive elements; maintain clarity and contrast ratios above 7:1 for WCAG AA compliance.