# Agaveis Design System

> High-contrast technical infrastructure aesthetics defined by deep obsidian canvases, vibrant agave green accents, and industrial-grade Changa typography.

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

## TL;DR
Agaveis employs a "Dark Mode by Default" architecture, utilizing a foundation of Obsidian (`#0a0a0a`) and Surface Elevated (`#212529`) to establish a technical, infrastructure-focused atmosphere. The brand's primary voltage is carried by Agave Green (`#88c425`), used for decorative accents and surface backgrounds, while Agave Orange (`#f7931e`) serves as the high-priority action color for CTAs and critical text. Typography is exclusively **Changa**, ranging from heavy 700-weight display headers to light 300-weight subheadings, creating a rhythmic, geometric feel. Layouts are structured around an 8px base unit with sharp (`0px`) or control-level (`8px`) corner radii.

## Signature DNA
1. **Infrastructure Dark Canvas** (The use of `#0a0a0a` background paired with `#212529` cards creates a layered, technical depth characteristic of developer tools and data systems.)
2. **The Agave Contrast Pair** (The juxtaposition of Agave Green `#88c425` and Agave Orange `#f7931e` against a monochrome base provides immediate visual hierarchy for technical vs. actionable content.)
3. **Geometric Sans Display** (Changa at weight 700 for all major headings provides a rigid, industrial silhouette that reinforces the "Full-Stack" and "Infrastructure" brand positioning.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{colors.background}` | `#0a0a0a` | Primary page floor | — | 1 | `css_variable` |
| `{colors.surface-elevated}` | `#212529` | Card backgrounds, section offsets | 31 | 1 | `computed_style` |
| `{colors.text-primary}` | `#ffffff` | Primary body and heading text | 122 | 1 | `css_variable` |
| `{colors.white}` | `#ffffff` | Button text, icon fills | 122 | 1 | `foundation` |
| `{colors.black}` | `#000000` | Absolute shadows and deep voids | — | 1 | `css_variable` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{colors.agave-orange}` | `#f7931e` | Primary CTA background, phone links | 3 | 1 | `css_variable` |
| `{colors.agave-green}` | `#88c425` | Decorative surfaces, brand accents | 2 | 1 | `decorative_only` |
| `{colors.agave-dark-green}` | `#68a405` | Decorative borders, hover states | 1 | 1 | `decorative_only` |
| `{colors.text-secondary}` | `#d1d5db` | Muted descriptions, breadcrumbs | — | 1 | `css_variable` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|------------------------|---------|
| Changa | 300, 400, 500, 600, 700 | All roles (Heading, Body, UI) | Changa (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{typography.display}` | 48px | 48px | normal | 700 | Hero H1/H2 | `h2.text-4xl.md:text-5xl` |
| `{typography.h2}` | 36px | 40px | normal | 700 | Section titles | `h2.text-4xl.font-bold` |
| `{typography.h3}` | 30px | 36px | normal | 700 | Subsection titles | `h3.text-3xl.font-bold` |
| `{typography.h4}` | 24px | 32px | normal | 700 | Card titles | `h4.text-2xl.font-bold` |
| `{typography.body-lg}` | 20px | 28px | normal | 400 | Lead paragraphs | `p.text-xl.text-gray-800` |
| `{typography.body}` | 18px | 28px | normal | 400 | Standard prose | `p.text-lg.text-gray-800` |
| `{typography.subheading}` | 18px | 28px | normal | 300 | Deemphasized labels | `h5.text-lg.text-gray-500` |
| `{typography.body-sm}` | 14px | 20px | normal | 600 | UI labels, badges | `span.text-sm.font-semibold` |

### Principles
1. **Weight as Hierarchy:** Use 700 weight for all structural headings to maintain industrial character.
2. **Prose Comfort:** Body text is set at a generous 18px (`{typography.body}`) to ensure legibility against dark backgrounds.
3. **Light Subheadings:** Use 300 weight exclusively for secondary descriptors or "About" section sub-labels to create contrast with heavy headers.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{spacing.1}` | 8px | 21 |
| `{spacing.1.5}` | 12px | 6 |
| `{spacing.2}` | 16px | 39 |
| `{spacing.3}` | 24px | 11 |
| `{spacing.4}` | 32px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers, primary surfaces | `radius: 0px` |
| `{radius.md}` | 8px | Content cards, feature blocks | `radius: 8px` |
| `{radius.pill}` | 9999px | Icon containers, specific badges | `radius: 9999px` |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{elevation.flat}` | `none` | Default state for most cards | `shadow: none` |
| `{elevation.base}` | `rgba(0, 0, 0, 0) 0px 0px...` | Transparent/Zeroed shadow for layout | `shadows[0]` |

## Components
### Tier 1: Foundational
#### Surface
**Role:** Primary content container for brand sections.
**Pages observed:** https://agaveis.com, https://agaveis.com/about
**Spec:** Background `{colors.agave-green}` (#88c425) / Text `{colors.white}` (#ffffff) / Radius `{radius.none}` (0px) / Font `{typography.body}` (16px).
**States observed:** Default: captured | Hover: not captured.

### Tier 2: Patterns
#### Content Card
**Role:** Feature display and service descriptions.
**Pages observed:** https://agaveis.com
**Spec:** Background `{colors.surface-elevated}` (#212529) / Text `{colors.white}` (#ffffff) / Border 1px / Radius `{radius.md}` (8px) / Padding 16px or 24px.
**States observed:** Default: captured | Hover: not captured.

#### Action Button (Orange)
**Role:** Primary CTA for consultations and contact.
**Pages observed:** https://agaveis.com/about
**Spec:** Background `{colors.agave-orange}` (#f7931e) / Text `{colors.white}` (#ffffff) / Radius `{radius.md}` (8px) / Typography `{typography.body-sm}` (14px/600).
**States observed:** Default: captured | Hover: not captured.

### Tier 3: Surface-specific
#### Tech Stack Badge
**Role:** Displaying technology logos and labels.
**Pages observed:** https://agaveis.com
**Spec:** Background transparent / Text `{colors.white}` (#ffffff) / Radius `{radius.md}` (8px) / Padding 8px.
**States observed:** Default: captured.

## Layout
| Property | Value |
|------|-------|
| Max Content Width | 1280px (approx) |
| Section Padding | 64px - 96px (vertical) |
| Grid Gaps | 24px - 32px |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Single column cards, H1 scales to 32px-36px |
| Desktop | 1440px | Multi-column grids (3-up or 5-up for tech stack) |

## Imagery & decoration
- **Network Graphics:** Uses abstract node-and-line network visualizations in hero backgrounds to signal "Data Infrastructure."
- **Monochrome Icons:** Technology logos are presented in their native colors but framed within consistent dark grid cells.
- **Avoidance:** Avoids soft gradients, rounded "bubbly" UI, or light-mode canvases.

## Do's
- Use `#212529` for all card surfaces to maintain depth hierarchy.
- Set all primary headings in **Changa Bold (700)**.
- Use `#f7931e` (Agave Orange) for the final "Schedule" or "Contact" action.
- Maintain sharp `0px` corners for full-width section bands.
- Ensure body text uses 18px size for optimal readability on dark surfaces.

## Don'ts
- Do not use Agave Green (`#88c425`) for primary text; it is for decorative surfaces only.
- Do not mix font families; Changa is the sole typeface for all roles.
- Do not apply heavy drop shadows; depth is achieved through color shifts (`#0a0a0a` to `#212529`).
- Do not use light backgrounds for content sections.

## Similar brands
- HashiCorp
- DigitalOcean
- Grafana
- MongoDB

## Quick start

### CSS Custom Properties
```css
:root {
  --color-background: #0a0a0a;
  --color-surface-elevated: #212529;
  --color-agave-green: #88c425;
  --color-agave-orange: #f7931e;
  --color-text-primary: #ffffff;
  --font-main: 'Changa', sans-serif;
  --radius-md: 8px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-agave-green: #88c425;
  --color-agave-orange: #f7931e;
  --color-surface-elevated: #212529;
  --font-changa: "Changa";
}
```

## Agent prompt examples
- "Create a feature card using background #212529, a 1px border, and 8px border radius. Title should be Changa 700 at 24px."
- "Generate a primary CTA button with background #f7931e, white text, and 8px radius."
- "Design a section header with a small Agave Green (#88c425) accent bar (4px height) above a Changa 700 heading."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed style evidence.
- Form input styles (text fields, checkboxes) were not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-----|----------|--------------|
| Homepage | https://agaveis.com | 1440px | 2026-06-06 |
| About Page | https://agaveis.com/about | 1440px | 2026-06-06 |
| Mobile Home | https://agaveis.com | 390px | 2026-06-06 |