Core Design Principles
Governing visual and architectural decisions across all Nettle Regenerative web properties.
1. Organic Architecture Meets Precision
Clean energy and permaculture feel natural, serene, and grounded. Hyper-precise digital metrics (fine gauges, crisp typography) balance with lush organic imagery and warm earthy undertones.
2. Luminous Contrast & Depth
Dramatic tonal shifts between deep immersive forest zones (`#113B27`) and tranquil light sage canvases (`#F7F9F6`), accented with frosted glassmorphism overlays that float organically over imagery.
3. Tactile Pill Geometry
Every primary interactive element employs a smooth pill form factor (`rounded-full`), while content modules use generous 28px–32px radii (`rounded-3xl`) to create an inviting, human-friendly aesthetic.
4. Micro-Metric Storytelling
Data points (kilowatts saved, seedling counts, hectares revitalized) are elevated to primary visual anchors through circular radial gauges, tabular numerals, and glowing solar-lime accents.
5. Restraint in Color Application
Brand colors serve strict functional roles. Deep Forest (`#113B27`) provides grounding authority; Solar Lime (`#84C135`) acts solely as an energetic pulse for action and feedback; Timber Bronze (`#654320`) anchors natural earth. Lime is never flooded carelessly across wide backgrounds.
Color Palette & Design Tokens
Click any swatch to copy its Hex, HSL, or Tailwind token directly to your clipboard.
Brand Primary: Deep Forest Pine (`#113B27`)
Brand Secondary: Vibrant Solar Lime (`#84C135`)
Brand Accent: Warm Timber Bronze (`#654320`)
Surfaces & Neutrals
Semantic & Feedback States
Positive metrics, successful submission alerts, active solar
Advisory notices, maintenance window, battery low
Validation errors, input failure, offline sensor alerts
Informative tips, explanatory tooltips, calculation notes
Typographic Scale & Hierarchy
Font pairings combine Plus Jakarta Sans for crisp display presence and Inter for high-comfort body reading.
Plus Jakarta Sans
--font-display
Inter / Geist Sans
--font-body
Geist Mono (tabular-nums)
--font-mono
| Level / Token | Desktop Size | Weight & Tracking | Live Preview Specimen |
|---|---|---|---|
display-hero Hero Main Title | 4.25rem (68px) | Bold 700 track: -0.025em | Regenerative Earth |
h1 Major Section Header | 3.25rem (52px) | Bold 700 track: -0.02em | Rooted in Community |
h2 Feature & Bento Title | 2.25rem (36px) | SemiBold 600 track: -0.015em | Eco-Futuristic Agriculture |
h3 Card & Widget Heading | 1.5rem (24px) | SemiBold 600 track: -0.01em | Kilifi Permaculture Hub |
h4 Sub-card & Item Title | 1.125rem (18px) | SemiBold 600 track: 0 | Micro-Climate Solar Inverters |
eyebrow Category Pre-title | 0.8125rem (13px) | SemiBold 600 track: +0.06em | BAOLALA • SUSTAINABILITY |
body-large Lead / Subtitle Copy | 1.1875rem (19px) | Regular 400 track: 0 | Restoring soil fertility through organic compost and indigenous tree nurseries. |
body Standard Body Copy | 1.0rem (16px) | Regular 400 track: 0 | Our farm combines traditional ecological wisdom with solar-powered precision irrigation. |
body-small Captions & Metadata | 0.875rem (14px) | Regular 400 track: +0.01em | Updated 12 mins ago • Kilifi County Sensor Network |
metric-stat Metric & Kilowatt Display | 1.75rem (28px) | Bold 700 track: -0.02em | 700 kW • 45,000+ |
Live Typeface Sandbox
8pt Foundational Spacing Scale
Rigorous 8pt spacing grid with 4pt micro-increments ensuring harmonious rhythm across widgets and layouts.
Spacing Increments
Container Boundaries
px-8 (32px); Tablet utilizes px-6 (24px); Mobile uses px-4 (16px).Border Radius & Elevation System
Soft organic geometry. Strict Rule: Never use square corners (`rounded-none`). Bento cards employ `rounded-3xl` (28–32px) and interactive elements employ `rounded-full`.
Ambient 4px subtle elevation for light canvases.
Deep 20px dynamic elevation with upward translation.
Deep dark scrim shadow for floating telemetry cards.
Energetic glow aura for primary CTAs and active nodes.
Status Indicators & Metadata Pills
Clean pill badges with micro-indicators for sensor states, active nodes, and category taxonomy.
Interactive Circular Gauges & Real-time Meters
Directly inspired by the reference “Saving 610 kW” gauge. Adjust the sliders below to see the animated SVG arc and counter respond in real-time.
Baolala Solar Node
Permaculture biomass regeneration pace
Floating Telemetry Widgets
Frosted glass overlays (backdrop-blur-xl) designed to float seamlessly over high-contrast nature photography.
Atmospheric Overlay Environment
Nettle Solar Grid
Indigenous & Fruit Saplings ready for planting
Local farmers trained in organic soil renewal
Bento Architecture & Modular Cards
The four core card archetypes established in the Nettle Regenerative landing experience.
Clean Surface Bento
Pure white surface with soft 1px border and circular icon pod. Used for core pillars and value propositions.
Dark Metric Bento
Deep forest gradient scrim with circular kilowatt arc meter docked at the bottom.
Kilifi Native Flora
Resilient Baobab and Moringa tree nurseries restoring ecological balance.
Soil Microbiome Rejuvenation
Zero-chemical biochar enrichment restoring biological diversity within 180 days.
Inputs & Newsletter Pill Capsule
The signature footer element embeds the circular submit trigger directly within the pill-shaped input capsule.
Embedded Newsletter Pill Capsule
Seamless capsule (rounded-full) containing email input and a nested circular action button.
Standard Form Elements
Alert Banners & Interactive Modal
Clear system communications with rounded-2xl geometry and accessible color contrast.
Interactive Dialog Demo
Click to launch the modal dialog with backdrop blur and organic 32px rounded corners.
Visual Do’s and Don’ts
Guarding the aesthetic integrity of Nettle Regenerative.
All primary buttons, tags, search fields, and newsletter capsules must strictly use full pill curvature.
Sharp 90-degree industrial edges violate the organic, human-friendly atmosphere.
Main layout bento containers require generous modern corner radii and subtle ambient borders.
#84C135 (Solar Lime) is an energetic accent for feedback and gauges, never a background wash.
Developer Implementation Tokens
Ready-to-use Tailwind CSS v4 @theme and CSS variables directly copied from design.md.
@theme inline {
/* Brand Core Colors */
--color-brand-primary: #113B27;
--color-brand-primary-hover: #174A32;
--color-brand-primary-deep: #091E14;
--color-brand-secondary: #84C135;
--color-brand-secondary-hover: #6BA327;
--color-brand-secondary-light: #EBF7D9;
--color-brand-accent: #654320;
--color-brand-accent-hover: #7F562B;
/* Surfaces & Typography */
--color-canvas: #F7F9F6;
--font-sans: var(--font-geist-sans), "Inter", sans-serif;
--font-mono: var(--font-geist-mono), monospace;
/* Geometry */
--radius-3xl: 28px;
}