5am.earth

Overview

5am.earth is a foundation-led platform that extracts verified agricultural insights for smallholder farmers, enabling them to build lasting wealth and resilience through data-driven decision-making. The brand embodies **Agricultural Authenticity**—a design philosophy that marries the earthy, grounded reality of farming with bold, confident visual language. The aesthetic draws from agricultural heritage (deep greens, natural textures, honest typography) while maintaining a contemporary, high-impact presence through full-bleed color blocks, geometric precision, and purposeful white space. The UI evokes trust, clarity, and actionable intelligence: a farmer standing in a field at dawn, ready to make informed decisions.

The brand voice is direct, grounded, and optimistic—never patronizing, never breathless. Vocabulary emphasizes verified insights, real wealth, lasting resilience, and open infrastructure. The tone is conversational yet authoritative, reflecting the expertise of agronomists and the pragmatism of farmers. Example sentence: "Your land holds insights. We help you see them."

Colors

The color system is built on three pillars: **Primary Green (#009a3d)** is the signature accent—used on CTAs, interactive states, and brand moments. It references agricultural vitality and growth, appearing on the primary button, pulse animations, and accent text. **Secondary Pink (#f5c9d6)** provides warmth and approachability, used for supporting surfaces, hover states, and secondary content blocks. **Tertiary Cream (#f6f3ec)** grounds the system as a neutral surface, evoking natural paper and agricultural soil. The full surface stack ranges from pure white (#ffffff) for primary content to cream (#f6f3ec) for secondary sections, with pink-soft (#fbe4eb) and pink (#f5c9d6) for tertiary emphasis. Deep green (#007a30) and green-ink (#00361a) provide depth for hover and active states. All te

Typography

The type system balances humanist warmth with geometric precision. **Display and Headline levels** use Delight (or Manrope 600 as fallback) with aggressive negative letter-spacing (-0.025em to -0.035em) and tight line-heights (0.92–0.98), creating a bold, confident presence. Display is 96px, Headline-lg is 88px, and Headline-md is 40px—all set at font-weight 600 with -0.02em to -0.035em letter-spacing. **Body text** uses Arial at 16–20px with normal letter-spacing and 1.45–1.5 line-height for readability. **Labels and eyebrows** are uppercase, 12–15px, with 0.22em letter-spacing and font-weight 600–700, creating visual hierarchy and scanability. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (12px) over busy backgrounds (e.g., hero video) to ensure legibility. Use text-wr

Layout

The page uses a fluid 6vw side margin (padding: 120px 6vw for sections, 140px 6vw for hero) with a max-width of 1200px for content. Sections are separated by 120px vertical padding (lg spacing), with hero and impact sections using 140–160px for emphasis. The grid system is 12-column, with components spanning full-width or using 2-column/3-column layouts (e.g., intro: grid-template-columns 1fr 2fr; pillars: repeat(3, 1fr); steps: repeat(5, 1fr)). White space is generous and intentional: 64px gap between major sections, 40px between subsections, 24px between elements. Borders (1px solid #111111) separate sections and create visual rhythm. The container max-width is 1200px, enforced on statement sections (max-width: 1200px; margin: 0 auto). Use 6vw for responsive side margins to maintain prop

Elevation & Depth

Depth is achieved through **color blocking and borders**, not shadows. The visual hierarchy is flat and graphic: full-bleed colored sections (green, pink, cream) create distinct layers, with 1px solid ink (#111111) borders separating them. Hover states use background-color transitions (transition: background 0.2s) to lift elements: cards shift from surface to surface-container-low, steps shift to pink-soft. The only shadow used is on small labels over busy backgrounds: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Interactive elements (buttons, inputs) use a 2px border (border: 2px solid) to defi

Shapes

The design system embraces **Geometric Minimalism with Agricultural Grounding**. Border-radius is minimal and purposeful: buttons and inputs use 0.5rem (8px) for subtle definition, cards use 0.5rem, and full-width elements have no radius (0px). The only exception is badges and pill-shaped elements, which use border-radius: 50% (full circle) or 9999px (full pill). This approach reflects agricultural precision (straight lines, grids, honest geometry) while maintaining approachability. Grid cells in the icon grid use 0px radius, creating a clean, modular appearance. Buttons use 2px borders (borde

Components

Action Elements **Button Primary** (background: {colors.primary} #009a3d, color: {colors.on-primary} #ffffff, padding: 16px 22px, border: 2px solid, border-radius: 0.5rem, font-weight: 700, font-size: 15px, transition: background 0.15s, color 0.15s) is the main CTA. On hover, shift to primary-container (#007a30) with the same text color. **Button Secondary** (background: transparent, color: {colors.on-surface} #111111, border: 2px solid #111111, padding: 16px 22px) provides a lower-priority alternative. On hover, apply background: {colors.surface-container-high} (#e9ecef). **Button Ghost** (background: transparent, border: 2px transparent, color: {colors.primary} #009a3d) is used for tertiary actions; on hover, add background: {colors.surface-container-low} (#f6f3ec).

Containers &

Do's and Don'ts

**Do**

• Do use primary green (#009a3d) exclusively on interactive elements (buttons, links, focus states) to maintain brand recognition and guide user attention.
• Do apply 1px solid ink (#111111) borders between sections and on cards to create visual separation and structure without relying on shadows.
• Do use Delight or Manrope 600 for all headlines with aggressive negative letter-spacing (-0.025em to -0.035em) and tight line-heights (0.92–0.98) to create bold, confident typography.
• Do maintain 6vw side margins and 120–140px vertical section padding to ensure generous white space and proportional rhythm across the page.
• Do use full-bleed color blocks (green, pink, cream) to create distinct visual sections and guide the user through the narrative.

**Don't**

• Don't use primary green (#009a3d) for body text or large content areas; reserve it exclusively for CTAs, accents, and interactive states.
• Don't apply drop shadows or blur effects; instead, use color blocking, borders, and background transitions to create visual hierarchy.
• Don't use border-radius greater than 0.5rem (8px) on buttons, cards, or inputs; keep shapes geometric and minimal to reflect agricultural precision.
• Don't mix font families within a single headline; use Delight/Manrope 600 consistently for all display and headline levels.
• Don't reduce side margins below 6vw or section padding below 120px; white space is a core design principle and should never be sacrificed for content density.