# Rainmaker Design System

> Industrial weather-modification hardware meets editorial elegance through sharp 0px geometries, deep forest greens, and high-visibility yellow accents.

**Source:** https://rainmaker.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Rainmaker balances the utilitarian severity of an engineering firm with the editorial pacing of a high-end publication. The system is grounded in an off-white canvas (`#f5f5f1`) and deep, atmospheric greens (`#1c2c26`, `#103d1d`). Structural geometry is strictly sharp, utilizing `0px` border radii almost exclusively to enforce a precise, manufactured feel. Typography pairs a classical display serif (`__flecha_df5a44`) pulled tight at large sizes with a clean, light sans-serif (`__founders_1daea9`). The brand's primary voltage comes from stark, high-visibility yellow (`#e5ff42`) used sparingly against dark surfaces.

## Signature DNA
1. **Utilitarian High-Vis Contrast:** The use of `--hi-vis` (`#e5ff42`) against `--forest` (`#1c2c26`) creates an industrial, control-panel aesthetic that immediately signals technical operation rather than typical SaaS.
2. **Engineered Geometry:** A near-absolute reliance on `0px` border radii (761 occurrences) for surfaces and cards. The only exception is a `9999px` pill radius reserved strictly for primary interactive nodes.
3. **Editorial Display Tracking:** The primary display serif (`__flecha_df5a44`) is set at 72px with an aggressive `-1.44px` letter spacing, creating classical tension that contrasts with the technical subject matter.

## Family Map
Not applicable (no sub-brands captured).

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--obsidian` | `#000000` | Primary text, dark surface backgrounds | 667 | 1.0 | `css_variable` |
| (untokend) | `#716d6a` | Default structural borders | 600 | 0.8 | `computed_style` |
| `--mist` | `#f5f5f1` | Primary page background, light surface | 30 | 1.0 | `css_variable` |
| `--forest` | `#1c2c26` | Dark section backgrounds | 19 | 1.0 | `css_variable` |
| `--cloud` | `#e0ded7` | Secondary light surface | 10 | 1.0 | `css_variable` |
| `--tw-ring-offset-color` | `#ffffff` | Focus offsets, stark borders | 8 | 1.0 | `css_variable` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--sage` | `#628c7d` | Primary brand accent, text, borders | 34 | 1.0 | `css_variable` |
| `--canopy` / `--grassland` | `#275f4b` | Secondary green accent, text | 15 | 1.0 | `css_variable` |
| `--pine` | `#103d1d` | Deep green surface accent | 10 | 1.0 | `css_variable` |
| `--hi-vis` | `#e5ff42` | High-visibility CTA and highlight text | 8 | 1.0 | `css_variable` |
| `--wheat` | `#daba89` | Warm accent text | 4 | 1.0 | `css_variable` |

### Semantic
Not captured in source.

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| `__flecha_df5a44` | 400 | Display, primary headings | Libre Baskerville | Commercial |
| `__founders_1daea9` | 300, 400, 500 | Body, small headings, UI | Inter | Commercial |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `display-lg` | 72px | 69.984px | -1.44px | 400 | Primary hero headings | `h2.text-[50px].md:text-[72px]` |
| `display-md` | 63px | 65.52px | -1.26px | 400 | Secondary hero headings | `h2.text-[50px].md:text-[72px]` |
| `heading-lg` | 33px | 49.5px | normal | 400 | Section titles (uppercase) | `div.font-display.uppercase` |
| `heading-sm` | 24px | 28px | normal | 300 | Large body / intro text | `a.text-[22px].leading-[24px]` |
| `heading-xs` | 20px | 21px | -0.2px | 300 | Eyebrows, subheadings | `p.standard-type-eyebrow` |
| `body-lg` | 18px | 18px | normal | 300 | Lead paragraphs | `p.flex-1.text-left` |
| `body-md` | 16px | 24px | normal | 400 | Default running text | `div.relative.z-10` |
| `body-sm` | 16px | 16.8px | 0.16px | 300 | Captions, light UI text | `p.font-sans.font-light` |

### Principles
- **Aggressive Display Tracking:** Flecha at 72px must use `-1.44px` tracking. Do not let display serifs sit loose.
- **Light Body Weights:** Founders defaults to weight 300 or 400 for running text, avoiding heavy or bold weights to maintain an editorial feel.
- **Uppercase Contrast:** Small headings (33px Flecha, 16px Founders) frequently utilize uppercase to create structural hierarchy without relying on font weight.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `space-1` | 4px | 4 |
| `space-1.5` | 6px | 3 |
| `space-2` | 8px | 7 |
| `space-3` | 12px | 9 |
| `space-4` | 16px | 6 |
| `space-6` | 24px | 10 |
| `space-8` | 32px | 6 |
| `space-10` | 40px | 8 |
| `space-16` | 63px | 11 |
| `space-21` | 84px | 12 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `rounded-none` | 0px | All structural surfaces, cards, and containers | 761 occurrences |
| `rounded-pill` | 9999px | Primary CTAs and badges | 4 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `flat` | `none` | Default state for all standard surfaces | 600+ occurrences |
| `inset-glow` | `rgba(0, 0, 0, 0.15) 0px 0px 2px 1px inset, rgba(0, 0, 0, 0.1) 0px 0px 10px 4px inset, rgba(17, 17, 26, 0.05) 0px 4px 16px 0px...` | Specialized elevated surfaces | 6 occurrences |

## Components

### Tier 1: Foundational

#### Base Surface
**Role:** Standard container for content blocks.
**Pages observed:** `https://rainmaker.com`, `https://rainmaker.com/pricing`, `https://rainmaker.com/about`
**Spec:** Background `transparent` / Text `#000000` / Border `#716d6a` (1px) / Radius `0px` / Padding `0px`
**States observed:** Default | Hover: Not captured | Focus: Not captured | Active: Not captured | Disabled: Not captured

#### Pill CTA
**Role:** Primary high-visibility action button.
**Pages observed:** `https://rainmaker.com`, `https://rainmaker.com/about`
**Spec:** Background `#e5ff42` / Text `#000000` / Border `0px` / Radius `9999px` / Padding `0px 12px 0px 24px`
**States observed:** Default | Hover: Not captured | Focus: Not captured | Active: Not captured | Disabled: Not captured

### Tier 2: Patterns

#### Dark Surface
**Role:** Inverted container for dark-mode sections.
**Pages observed:** `https://rainmaker.com`, `https://rainmaker.com/about`
**Spec:** Background `#1c2c26` / Text `#000000` / Border `0px` / Radius `0px` / Padding `0px`
**States observed:** Default | Hover: Not captured | Focus: Not captured | Active: Not captured | Disabled: Not captured

#### Outlined Surface
**Role:** Ghost container for secondary content on complex backgrounds.
**Pages observed:** `https://rainmaker.com`, `https://rainmaker.com/pricing`, `https://rainmaker.com/about`
**Spec:** Background `transparent` / Text `#000000` / Border `rgba(255, 255, 255, 0.4)` (1px) / Radius `0px` / Padding `32px 40px`
**States observed:** Default | Hover: Not captured | Focus: Not captured | Active: Not captured | Disabled: Not captured

### Tier 3: Surface-specific

#### Highlight Banner
**Role:** High-contrast callout block.
**Pages observed:** `https://rainmaker.com`, `https://rainmaker.com/about`
**Spec:** Background `#1c2c26` / Text `#e5ff42` / Border `0px` / Radius `0px` / Padding `63px 84.075px`
**States observed:** Default | Hover: Not captured | Focus: Not captured | Active: Not captured | Disabled: Not captured

#### Elevated Surface
**Role:** Specialized floating container with complex depth.
**Pages observed:** `https://rainmaker.com`, `https://rainmaker.com/pricing`, `https://rainmaker.com/about`
**Spec:** Background `transparent` / Text `#000000` / Border `#000000` (0px) / Radius `0px` / Shadow `rgba(0, 0, 0, 0.15) 0px 0px 2px 1px inset...`
**States observed:** Default | Hover: Not captured | Focus: Not captured | Active: Not captured | Disabled: Not captured

## Layout
| Property | Value |
|---|---|
| Padding | Large section padding uses `63px` vertical and `84px` horizontal. |
| Grid | Not captured in source. |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| `md` | Not captured | Display text scales up to 72px (`md:text-[72px]`). |

## Imagery & decoration
The brand relies heavily on moody, desaturated atmospheric photography (clouds, landscapes, radar imagery). This is overlaid with technical motifs: fine grid lines and art-deco/technical corner brackets. The system avoids flat illustrations or vibrant, saturated lifestyle photography, maintaining a serious, industrial tone.

## Do's
- Do use `0px` border radii for all structural cards and surfaces to maintain the engineered aesthetic.
- Do use `--hi-vis` (`#e5ff42`) strictly for primary CTAs and critical highlights.
- Do apply tight negative tracking (`-1.44px`) to `__flecha_df5a44` at display sizes (72px).
- Do utilize `--forest` (`#1c2c26`) as the primary dark background, rather than pure black.
- Do pair the serif display font with the sans-serif body font to balance classical authority with modern utility.

## Don'ts
- **Wrong:** Applying an 8px border radius to a feature card. **Right:** Using a 0px border radius. **Reason:** Soft corners break the strict, manufactured geometry of the brand.
- **Wrong:** Using `#3b82f6` (Tailwind default blue) as a primary accent. **Right:** Using `--sage` (`#628c7d`). **Reason:** The pipeline caught `--tw-ring-color` as blue, but this is a framework default, not the brand's resolved primary.
- **Wrong:** Setting 72px display text with `normal` letter spacing. **Right:** Setting it with `-1.44px` tracking. **Reason:** Loose display text loses the editorial tension required by the brand.
- **Wrong:** Using `--hi-vis` (`#e5ff42`) for large background surfaces. **Right:** Reserving it for pills and text highlights. **Reason:** Overuse of high-vis yellow destroys its effectiveness as a focal point.

## Similar brands
- Palantir (Technical, severe, data-driven)
- Anduril (Industrial, defense-oriented, sharp geometry)
- Vercel (Monochrome foundation with stark, high-contrast accents)

## Quick start

**CSS Variables:**
```css
:root {
  --obsidian: #000000;
  --mist: #f5f5f1;
  --forest: #1c2c26;
  --cloud: #e0ded7;
  --sage: #628c7d;
  --canopy: #275f4b;
  --pine: #103d1d;
  --hi-vis: #e5ff42;
  --wheat: #daba89;
}
```

**Tailwind v4 @theme:**
```css
@theme {
  --color-obsidian: #000000;
  --color-mist: #f5f5f1;
  --color-forest: #1c2c26;
  --color-cloud: #e0ded7;
  --color-sage: #628c7d;
  --color-canopy: #275f4b;
  --color-pine: #103d1d;
  --color-hi-vis: #e5ff42;
  --color-wheat: #daba89;
  
  --font-display: '__flecha_df5a44', serif;
  --font-sans: '__founders_1daea9', sans-serif;
}
```

## Agent prompt examples
- "Create a hero section using `--mist` as the background. Set the main heading in `__flecha_df5a44` at 72px with `-1.44px` tracking. Add a primary CTA pill using `--hi-vis` background and `9999px` border radius."
- "Build a dark feature grid. Use `--forest` for the background. Cards should have `0px` border radius, a 1px `rgba(255, 255, 255, 0.4)` border, and 32px padding."
- "Generate a highlight banner with a `--forest` background and `--hi-vis` text. Apply 63px vertical and 84px horizontal padding."

## Known gaps
Hover, focus, and active states for interactive components were not captured in the source data. Semantic colors (success, error, warning) are missing, likely because the analyzed pages are marketing surfaces rather than application UI.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | `https://rainmaker.com` | Desktop | 2026-06-06T05:00:51.392Z |
| About | `https://rainmaker.com/about` | Desktop | 2026-06-06T05:00:51.392Z |
| Pricing | `https://rainmaker.com/pricing` | Desktop | 2026-06-06T05:00:51.392Z |