# Taranis.ag Design System

> High-precision agricultural intelligence anchored by deep forest greens, technical Montserrat typography, and circular geometric motifs.

**Source:** https://taranis.ag | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Taranis.ag utilizes a "monochrome-plus" system where a foundational black and white palette is heavily augmented by a specific agricultural spectrum of greens. The system is anchored by `--darkgreen` (#38583d) for deep section backgrounds and `--lightgreen` (#99cc66) for primary interactive highlights. Typography is dominated by Montserrat, used at extreme weights (800) for display headers to convey industrial strength, paired with Open Sans for legible body prose. Visual depth is achieved through circular masking and diagonal "hatch" patterns rather than traditional drop shadows.

## Signature DNA
1. **The Heavy Display Header** (Montserrat at weight 800, 50px size, with 1px tracking creates a high-contrast, authoritative technical voice on the homepage hero).
2. **Circular Geometry** (The system uses 50% / 50px border-radii for primary feature cards and decorative image masks, reinforcing a "lens" or "target" motif consistent with crop intelligence).
3. **The Agricultural Gradient** (A transition from `--lightgreen` #99cc66 to `--blue` #31b0cd used in footer bands and decorative accents to signal the intersection of earth and technology).

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
| :--- | :--- | :--- | :--- | :--- |
| Taranis.ag (Parent) | #000000 | Circular masks, diagonal hatch | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--black` | `#000000` | Primary text, button labels | 113 | 1 | Computed Style |
| `--white` | `#ffffff` | Page background, hero text | 75 | 1 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--darkgreen` | `#38583d` | Section backgrounds, card surfaces | 22 | 1 | `--darkgreen` |
| `--lightgreen` | `#99cc66` | Primary CTA background, active borders | 19 | 1 | `--lightgreen` |
| `--orange` | `#e1904b` | Secondary CTA, warning/alert accents | 3 | 0.8 | `--orange` |
| `--blue` | `#31b0cd` | Footer gradient stop, decorative | 2 | 0.7 | `--blue` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Montserrat | 400, 500, 600, 700, 800 | Heading & UI | Montserrat (Google Fonts) | SIL Open Font |
| Open Sans | 400 | Body prose | Open Sans (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display}` | 50px | 54px | 1px | 800 | Hero H1 | `h1` |
| `{type.heading-lg}` | 36px | 41.76px | normal | 800 | Section titles | `h3.bold-title` |
| `{type.heading-md}` | 22px | 26.4px | 0.25px | 600 | Feature heads | `h4` |
| `{type.heading-sm}` | 22px | 24px | normal | 700 | Sub-section heads | `h5` |
| `{type.body-lg}` | 16px | 25.6px | 0.1px | 400 | Paragraph text | `p` |
| `{type.body-ui}` | 16px | 16px | normal | 400 | Nav / Header | `header.header` |
| `{type.button}` | 12px | 12px | 1px | 600 | CTA Labels | `a.btn` |
| `{type.caption}` | 12px | 20px | -0.4px | 400 | Footer links | `a` |

### Principles
1. **Weight as Hierarchy:** Use weight 800 for primary brand statements; drop to 600 for functional headings.
2. **Tight Display Leading:** Large headers use a tight 1.08x line-height ratio to maintain visual density.
3. **Technical Tracking:** Display text and buttons use 1px letter spacing to evoke a "monospaced" or technical feel despite using a geometric sans.

## Spacing
**Base unit:** 10px (derived from common 10px, 40px, 60px clusters)
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 10px | 17 |
| `{space.md}` | 40px | 17 |
| `{space.lg}` | 60px | 4 |
| `{space.section}` | 198px | 6 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.sharp}` | 0px | Default containers | 171 occurrences |
| `{radius.sm}` | 5px | Input fields, secondary buttons | 11 occurrences |
| `{radius.full}` | 50px / 50% | Feature cards, primary CTAs | 25 occurrences |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| Flat | none | All observed components | No shadows in source |

## Components

### Tier 1: Foundational

#### Primary Pill Button
**Role:** Main call to action (e.g., "Get a Demo")
**Pages observed:** https://taranis.ag
**Spec:** Background `#99cc66` / Text `#000000` / Border `1px solid #99cc66` / Radius `50%` / Typography `{type.button}`
**States observed:** Default captured.

#### Secondary Rounded Button
**Role:** Inline actions or ghost buttons
**Pages observed:** https://taranis.ag
**Spec:** Background `transparent` / Text `#ffffff` / Border `1px solid #ffffff` / Radius `5px` / Typography `12px Montserrat`
**States observed:** Default captured.

### Tier 2: Patterns

#### Feature Card (Circular)
**Role:** Highlighting specific value props or imagery
**Pages observed:** https://taranis.ag
**Spec:** Background `#38583d` / Text `#ffffff` / Radius `50%` / Padding `40px`
**States observed:** Default captured.

#### Diagonal Hatch Divider
**Role:** Section transition
**Pages observed:** https://taranis.ag
**Spec:** 1px lines at 45-degree angle using `#38583d` or `#ffffff`.

### Tier 3: Surface-specific

#### Hero Band
**Role:** Top-of-page impact
**Pages observed:** https://taranis.ag
**Spec:** Background `image` / Text `#ffffff` / Typography `{type.display}` / Padding-top `198px`

#### Footer Gradient Band
**Role:** Final page sign-off
**Pages observed:** https://taranis.ag
**Spec:** Background `linear-gradient(to right, #99cc66, #31b0cd)` / Text `#ffffff`

## Layout
| Property | Value |
| :--- | :--- |
| Max content width | 1200px |
| Section padding | 60px (vertical) |
| Grid | 3-column (desktop) / 1-column (mobile) |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Nav collapses to hamburger; H1 scales to ~32px; 3-up grids stack vertically. |

## Imagery & decoration
- **Masking:** Heavy use of 50% border-radius (circles) for both images and solid color blocks.
- **Overlays:** Dark green semi-transparent overlays on hero images to ensure white text legibility.
- **Patterns:** Diagonal "hatch" lines used as dividers between sections.

## Do's
- Use Montserrat 800 for all primary section headings.
- Apply `#99cc66` only to primary interactive elements.
- Use circular masks for feature-level imagery.
- Maintain white text on `#38583d` backgrounds for accessibility.
- Use 1px letter spacing on all uppercase button labels.

## Don'ts
- **Wrong:** Using `#99cc66` for body text. **Right:** Use `#000000` or `#ffffff`. **Reason:** Contrast and brand hierarchy.
- **Wrong:** Applying drop shadows to cards. **Right:** Use 1px borders or flat color changes. **Reason:** The brand uses a flat, technical aesthetic.
- **Wrong:** Using Montserrat for long-form body paragraphs. **Right:** Use Open Sans. **Reason:** Readability at scale.
- **Wrong:** Labeling `#e1904b` (Orange) as the primary brand color. **Right:** It is a secondary accent; `#99cc66` is the primary.

## Similar brands
- John Deere (Green/Yellow industrial palette)
- Trimble (Technical agriculture/GPS focus)
- Farmers Edge (Green-heavy ag-tech)

## Quick start

```css
/* CSS Variables */
:root {
  --darkgreen: #38583d;
  --lightgreen: #99cc66;
  --blue: #31b0cd;
  --orange: #e1904b;
  --black: #000000;
  --white: #ffffff;
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', sans-serif;
}
```

## Agent prompt examples
- "Create a hero section with a dark green #38583d background, an H1 in Montserrat 800 at 50px, and a circular pill button in #99cc66."
- "Design a 3-column feature grid where each image is masked in a 50% border-radius circle and headings use Montserrat 600."
- "Generate a footer using a linear gradient from #99cc66 to #31b0cd with white Montserrat 400 text."

## Known gaps
- Hover and Active states for buttons were not explicitly detailed in the CSS variable tokens, though inferred as brightness shifts.
- Tablet-specific breakpoints (768px-1024px) were not captured in the primary page analysis.
- Form validation semantic colors (Success/Error) were not present on the analyzed homepage.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://taranis.ag | 1440px | 2026-06-06 |
| Mobile View | https://taranis.ag | 390px | 2026-06-06 |