# Agilefreaks Design System

> High-contrast monochrome foundation punctuated by a singular, vibrant technical blue.

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

## TL;DR
Agilefreaks utilizes a "monochrome plus one" strategy, where a stark white canvas (`#ffffff`) and deep charcoal headings (`#111111`) provide a stable engineering-focused backdrop for a high-energy primary blue (`#4480f1`). The system relies on the **Cabin** typeface for structural authority in headings, paired with **Inter** or **Lato** for high-legibility body prose. Component geometry is predominantly soft, using 4px to 6px radii for interactive elements, while larger layout containers often remain sharp (`0px`). The interface balances dense technical information with generous 100px vertical section breathing room.

## Signature DNA
1. **The Technical Blue Accent** (`#4480f1`): Used exclusively for primary actions and key brand signals, creating a high-contrast focal point against the `#111111` and `#ffffff` base.
2. **Cabin Display Weight**: The use of Cabin at weight 700 for display headers (up to 62px) provides a friendly but precise geometric authority that defines the brand's "Agile" identity.
3. **Soft-Square Interaction**: A consistent 4px-6px border radius applied to buttons and surface containers, contrasting with the sharp-edged layout sections.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Page background and primary surfaces | 32 | 1 | `--body-bg-color` |
| `{color.ink.heading}` | `#111111` | Primary headings and secondary brand color | 20 | 1 | `--heading-text-color` |
| `{color.ink.body}` | `#666666` | Standard paragraph text | 63 | 1 | `--paragraph-text-color` |
| `{color.border.subtle}` | `#dddddd` | Default 1px component borders | 19 | 0.8 | Computed style |
| `{color.surface.muted}` | `#f7f6fe` | Subtle background for secondary cards | 3 | 0.6 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#4480f1` | CTA backgrounds, primary links, and active states | 22 | 1 | `--primary-color` |
| `{color.accent.blue}` | `#0d6efd` | Secondary interactive highlights | 3 | 1 | `--bs-primary` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| **Cabin** | 400, 600, 700 | Headings and Display | Cabin (Google Fonts) | OFL |
| **Inter** | 400 | Primary Body | Inter (Google Fonts) | OFL |
| **Lato** | 400 | Secondary Body/Links | Lato (Google Fonts) | OFL |
| **Montserrat** | 700 | Navigation/Labels | Montserrat (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 62px | 74px | normal | 700 | Hero H1 | `h1` |
| `{type.h2}` | 32px | 38.4px | normal | 700 | Section Headings | `h2` |
| `{type.h3}` | 28px | 33.6px | normal | 700 | Sub-section Headings | `h3.mb-3` |
| `{type.lead}` | 24px | 25px | normal | 600 | Intro paragraphs | `p:nth-of-type(1)` |
| `{type.nav}` | 22px | 28px | normal | 700 | Main navigation | `a` |
| `{type.body.lg}` | 18px | 28px | normal | 400 | Large body text | `p` |
| `{type.body.md}` | 17px | 25.7px | normal | 400 | Standard body | `section.home1-info` |
| `{type.button}` | 14px | 21px | normal | 400 | CTA Labels | `a.btn.btn-primary` |

### Principles
1. **Heading Authority**: All major headings must use Cabin at weight 700.
2. **Body Legibility**: Body text utilizes Inter or Lato with a line-height of ~1.5x for optimal reading flow.
3. **Contrast Ratio**: Primary text (`#111111`) on canvas (`#ffffff`) maintains a 19:1 ratio, exceeding accessibility standards.

## Spacing
**Base unit:** 5px (derived from common multiples)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 10px | 24 |
| `{space.sm}` | 25px | 21 |
| `{space.md}` | 35px | 16 |
| `{space.lg}` | 45px | 5 |
| `{space.section}` | 100px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Layout sections, sharp buttons | 70 occurrences |
| `{radius.sm}` | 4px | Primary buttons, standard cards | 23 occurrences |
| `{radius.md}` | 6px | Surface containers | 3 occurrences |
| `{radius.full}` | 50% | Avatars, icon backdrops | 19 occurrences |

## Elevation
Table: | Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All components observed | 0 shadow tokens in evidence |

## Components

### Tier 1: Foundational
#### Rounded Button
**Role:** Primary call to action.
**Pages observed:** https://agilefreaks.com
**Spec:** Background: `{color.primary}` (#4480f1) / Text: `#ffffff` / Radius: 4px / Padding: 6px 12px / Type: 14px Cabin.
**States observed:** Default | Hover: captured (darker blue) | Active: captured.

#### Surface Container
**Role:** Grouping related content or icons.
**Pages observed:** https://agilefreaks.com
**Spec:** Background: transparent / Border: 1px `#dddddd` / Radius: 4px / Padding: 25px.
**States observed:** Default: captured.

### Tier 2: Patterns
#### Content Card
**Role:** Feature or service descriptions.
**Pages observed:** https://agilefreaks.com
**Spec:** Background: `#ffffff` / Border: 0px / Radius: 5px / Padding: 35px 30px / Text: `#666666`.
**States observed:** Default: captured.

#### Text Button (Link)
**Role:** Secondary navigation or "Read More" actions.
**Pages observed:** https://agilefreaks.com
**Spec:** Background: transparent / Text: `{color.primary}` (#4480f1) / Radius: 0px / Padding: 0px 0px 12px / Type: 18px Cabin.
**States observed:** Default: captured.

### Tier 3: Surface-specific
#### Testimonial Card
**Role:** Client social proof.
**Pages observed:** https://agilefreaks.com
**Spec:** Background: `#ffffff` / Radius: 5px / Padding: 35px 30px / Font: 17px Inter.
**States observed:** Default: captured.

#### Icon Backdrop
**Role:** Circular housing for brand or client logos.
**Pages observed:** https://agilefreaks.com
**Spec:** Background: `{color.surface.muted}` (#f7f6fe) / Radius: 50% / Padding: 8px 14px.
**States observed:** Default: captured.

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1320px (standard Bootstrap container) |
| Section Padding (Vertical) | 100px |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | < 768px | Navigation collapses to hamburger; H1 reduces from 62px to ~40px. |
| Desktop | 1200px+ | 12-column grid active; 100px section spacing. |

## Imagery & decoration
- **Logo Grids**: Grayscale or low-saturation logos housed in simple white or transparent bordered boxes.
- **Photography**: High-quality, context-specific imagery (e.g., streaming service UI, code backgrounds) used as full-width hero backgrounds or card-adjacent assets.
- **Avoid**: Heavy drop shadows, complex gradients, or illustrative "blob" shapes.

## Do's
- Use `#4480f1` for all primary user intents.
- Set all page-level headings in **Cabin Bold**.
- Maintain exactly 100px of vertical space between major content sections.
- Use 4px border radius for interactive elements to maintain a "soft-tech" feel.
- Ensure body text is `#666666` on white for optimal readability.

## Don'ts
- **Wrong:** Using `#0d6efd` as the primary button color. **Right:** Use `#4480f1`. **Reason:** `#4480f1` is the specific brand primary; `#0d6efd` is a fallback utility color.
- **Wrong:** Applying shadows to cards. **Right:** Use 1px borders (`#dddddd`) or background shifts. **Reason:** The system is strictly flat/monochrome.
- **Wrong:** Mixing Serif fonts into the hierarchy. **Right:** Stick to Cabin (Sans) and Inter (Sans). **Reason:** The brand identity is built on geometric sans-serif precision.
- Do not use radii larger than 6px for non-circular elements.
- Do not use saturated colors for background sections; stick to `#ffffff` or `#f7f6fe`.

## Similar brands
- DigitalOcean (Technical blue + clean sans-serif)
- Vercel (Monochrome foundation + high-contrast type)
- Postman (Clean documentation-first aesthetic)

## Quick start

```css
/* CSS Variables */
:root {
  --primary-color: #4480f1;
  --heading-text-color: #111111;
  --paragraph-text-color: #666666;
  --body-bg-color: #ffffff;
  --border-color: #dddddd;
  --radius-sm: 4px;
  --font-heading: 'Cabin', sans-serif;
  --font-body: 'Inter', sans-serif;
}
```

## Agent prompt examples
- "Create a primary CTA button using #4480f1 background, white text, 4px border radius, and 14px Cabin font."
- "Design a feature card with a white background, no shadow, a 1px #dddddd border, and 35px padding."
- "Generate a section header using Cabin Bold at 32px with #111111 color and 40px bottom margin."

## Known gaps
- **Shadows**: No shadow tokens were captured; the system appears entirely flat.
- **Success/Error States**: Form validation colors were not present in the analyzed homepage.
- **Dark Mode**: No dark mode tokens were declared in the source.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://agilefreaks.com | 1440px / 390px | 2026-06-06 |