CarbonActive

Overview

CarbonActive is a precision irrigation control platform designed for professional indoor cultivation facilities. The brand embodies "Technical Precision Minimalism"—a design philosophy that strips away visual noise to expose the essential data and controls needed for crop steering, nutrient delivery, and remote facility management. The UI evokes a sense of calm control: dark, high-contrast surfaces with a vibrant electric-blue accent (#2D69FF) that signals actionable moments and system status. The emotional response is one of confidence and mastery—users feel they are operating sophisticated, trustworthy hardware backed by intelligent software.

The brand voice is direct, technical, and reassuring. Vocabulary emphasizes precision, automation, and control: "Precisely dosed," "Automatic fuel tank system," "Remote-capable HMI." The tone avoids marketing hyperbole; instead, it speaks in the language of facility operators and agronomists. Example sentence in brand voice: "Watering 2.0 delivers fertilizer and water with millisecond accuracy, so your crop receives exactly what it needs, when it needs it."

Colors

The color system is built on a near-black canvas (#000000) with a carefully curated accent palette. Primary (#2D69FF) is the electric-blue signature accent used exclusively for CTAs, active states, focus rings, and key interactive elements—it commands attention without overwhelming the dark interface. Secondary (#3EE5A5) is a vibrant teal-green reserved for success states, confirmations, and positive feedback; it appears sparingly to signal system health. Tertiary (#6FD8FF) is a cyan accent for informational highlights and secondary interactive states. The surface stack ranges from pure black (#000000) at the base through carefully calibrated mid-tones (#1E2230, #262B3A, #333A4D) to create depth without introducing gray. Text on dark surfaces uses #C8CCDA (on-surface) for body copy and #FF

Typography

The type system uses DM Sans exclusively—a geometric sans-serif with excellent readability at small sizes and a modern, technical character that aligns with the brand's precision focus. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and major page titles; Headline-lg (48px, 700 weight) anchors section introductions; Headline-md (32px, 600 weight) breaks up content hierarchically. Body-lg (18px, 400 weight, 28px line-height) is used for feature descriptions and longer-form content, while Body-md (16px, 400 weight, 24px line-height) serves as the default paragraph text. Label-md (14px, 600 weight, 0.02em tracking) is applied to button text and form labels to ensure crisp, scannable UI text. All type uses a consistent 0.01em to 0.03em letter-spacing to enhance leg

Layout

The layout follows a 12-column grid with a max-width of 1200px, centered on the viewport. The design uses a fluid approach on mobile (single column) that progressively reveals multi-column layouts at tablet (6 columns) and desktop (12 columns). Spacing is semantic: the 24px gutter is used for section separation and card padding; 40px (lg spacing) separates major content blocks; 64px (xl spacing) creates breathing room between hero and body sections. Container max-width is enforced at 1200px to prevent text lines from becoming too long on ultra-wide displays. White-space is generous—the dark background makes content feel less cramped, so padding and margins are slightly larger than typical light-theme systems. The spacing scale (4px, 12px, 24px, 40px, 64px) is strictly adhered to; no arbitr

Elevation & Depth

Depth is conveyed through layered backgrounds and subtle shadows rather than dramatic drop-shadows. The elevation system defines three levels: Level 1 (Base) is the pure black background (#000000) with no shadow; Level 2 (Standard Card) uses surface-container (#1E2230) with a 1px border at #3A4058 and a soft shadow (0 2px 8px rgba(0, 0, 0, 0.3)) to separate from the base; Level 3 (Elevated/Modal) uses surface-container-high (#262B3A) with a 1px border at #4A506A and a deeper shadow (0 8px 24px rgba(0, 0, 0, 0.4)). Interactive elements like buttons and inputs sit at Level 2, while modals and ov

Shapes

The shape philosophy is "Technical Precision"—minimal, functional, and consistent. Border-radius values are small and deliberate: sm (3px) is used for subtle rounding on small interactive elements like badges and tight form controls; DEFAULT (5px) is the standard radius for buttons and input fields, providing a soft edge without appearing organic; md (8px) is applied to cards and larger containers; lg (10px) is reserved for prominent cards and modals; xl (12px) is used for large hero sections and full-width containers. The full (9999px) radius is applied only to pill-shaped badges and avatar c

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses #2D69FF background with white text, 12px vertical padding, 30px horizontal padding, and a 2px solid border matching the background. On hover, the background inverts to white with #2D69FF text, creating a clear visual feedback loop with a 0.2s ease transition. Button-secondary uses a transparent background with white text and a 2px white border; on hover, it fills with #2D69FF and white text. Both variants use label-md typography (14px, 600 weight) and a 10px border-radius. The focus state for both is a 3px inset ring at rgba(45, 105, 255, 0.2).

Containers & Surfaces Cards (card-dark) use surface-container-low (#151821) as the background with a 1px border at #3A4058 and 24px padding. On

Do's and Don'ts

**Do**

• Do use #2D69FF (primary) exclusively for CTAs, focus states, and active navigation items—it is the only accent color that should appear frequently.
• Do maintain the dark background (#000000) as the canvas; never introduce light gray or off-white backgrounds that dilute the high-contrast aesthetic.
• Do apply 24px padding and 40px section spacing consistently; the rhythm of white-space is as important as the content itself.
• Do use DM Sans at 14px+ for all UI text; never fall below 12px without explicit accessibility justification.
• Do apply the 3px focus ring (rgba(45, 105, 255, 0.2)) to all interactive elements for keyboard navigation and accessibility.

**Don't**

• Don't use secondary (#3EE5A5) or tertiary (#6FD8FF) as primary accent colors; reserve them for status indicators and secondary feedback only.
• Don't introduce shadows larger than 0 8px 24px rgba(0, 0, 0, 0.4); the system relies on color and border definition, not depth blur.
• Don't apply border-radius larger than 12px on standard components; the technical aesthetic demands sharp, controlled edges.
• Don't mix typefaces; DM Sans is the only font family used across the entire system—no serif, monospace, or system fonts in body copy.
• Don't reduce padding below 12px or increase line-height above 1.5 in body text; readability in dark mode depends on generous spacing.