# Agilytics Design System

> Condensed typography and high-contrast achromatic foundations punctuated by vibrant orange structural borders.

**Source:** https://agilytics.com | **Captured:** 2026-06-06
**Brand layer:** parent | **Related brands:** None

## TL;DR
Agilytics employs a "monochrome-plus-one" strategy where a deep charcoal `#404047` and mid-tone slate `#8e8e9c` provide the structural canvas, while a high-energy orange `#f75c03` is reserved for critical UI boundaries and interactive text. The typographic system is highly specific, pairing the tall, architectural forms of **Oswald** (weight 300) for display headers with the utilitarian **Roboto Condensed** for data-heavy body copy. Layouts are characterized by generous vertical spacing (80px sections) and large-radius containers (30px to 50px) that soften the otherwise rigid, condensed type.

## Signature DNA
1. **Condensed Display Hierarchy:** The use of Oswald at weight 300 for primary headings creates a vertical, "tall" aesthetic that contrasts with the wide, rounded containers.
2. **Vibrant Perimeter Logic:** Orange `#f75c03` is rarely used as a solid fill; instead, it acts as a 1px structural "wireframe" for cards and callouts, defining the brand's interactive zones.
3. **Achromatic Depth:** The system avoids pure blacks, using `#404047` for primary readability and `#8e8e9c` for secondary surfaces, creating a softer professional atmosphere than standard high-contrast web UI.

## Family Map
Not captured in source (No sub-brands identified in topology).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.ink.primary}` | `#404047` | Primary text, headings | 23 | 0.8 | Computed Style |
| `{color.surface.slate}` | `#8e8e9c` | Secondary text, section backgrounds | 23 | 0.8 | Computed Style |
| `{color.surface.muted}` | `#bec3c7` | Tertiary text, soft backgrounds | 5 | 0.6 | Computed Style |
| `{color.surface.white}` | `#ffffff` | Primary card background | 4 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.accent.orange}` | `#f75c03` | Card borders, button text, emphasis | 12 | 0.8 | Computed Style |
| `{color.accent.blue-slate}` | `#6a859c` | Secondary text links | 12 | 0.8 | Computed Style |
| `{color.accent.blue}` | `#2e80b6` | Decorative text | 9 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Oswald | 300, 400 | Display Headings | Oswald (Google Fonts) | OFL |
| Roboto | 300, 400 | UI Labels, Subheadings | Roboto (Google Fonts) | Apache 2.0 |
| Roboto Condensed | 400 | Body Copy, Testimonials | Roboto Condensed | Apache 2.0 |
| Covered By Your Grace | 400 | Footer Links (Handwritten) | N/A | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display.lg}` | 40px | 50px | normal | 300 | Primary Hero | `div.heading-small` |
| `{type.heading.md}` | 20px | 32px | normal | 400 | Grid Titles | `div.grid-name` |
| `{type.body.lg}` | 20px | 24px | normal | 400 | Grid Body | `div.grid-text` |
| `{type.subheading.caps}` | 18px | 24px | 5px | 400 | Section Labels | `h4.gem-heading` |
| `{type.body.md}` | 18px | 20px | normal | 400 | List Items | `li:nth-of-type(1)` |
| `{type.body.condensed}` | 18px | 24px | normal | 400 | Testimonials | `p.testimonial-text-four` |
| `{type.nav.link}` | 14px | 20px | 0.25px | 400 | Navigation | `a.nav-link-2` |
| `{type.caption}` | 14px | 18px | normal | 300 | Menu Items | `div.menu-item` |

### Principles
1. **Weight 300 for Authority:** All major display type uses Oswald 300. Bold weights are avoided in headings to maintain an "airy" technical feel.
2. **Extreme Tracking for Labels:** Subheadings (`h4.gem-heading`) utilize 5px letter spacing to create horizontal anchors against condensed vertical type.
3. **Handwritten Accents:** The use of "Covered By Your Grace" in the footer provides a "human-in-the-loop" signal for a technical AI brand.

## Spacing
**Base unit:** 5px (derived)
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 5px | 7 |
| `{space.sm}` | 10px | 15 |
| `{space.md}` | 24px | 8 |
| `{space.lg}` | 40px | 4 |
| `{space.section}` | 80px | 3 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Buttons, default sections | 66 occurrences |
| `{radius.md}` | 30px | Feature Cards | `Card` component |
| `{radius.lg}` | 50px | Large callout panels | `radii` evidence |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| Flat | 0px | All cards and surfaces | No shadows observed in component array |

## Components

### Tier 1: Foundational

#### Surface
**Role:** Sectional background container
**Pages observed:** https://agilytics.com
**Spec:** Background: `rgba(247, 92, 3, 0.05)` (Soft Orange) | Text: `#6a859c` | Radius: `0px` | Padding: `40px 0px`
**States observed:** Default: captured | Hover: not captured

#### Nav Link
**Role:** Primary site navigation
**Pages observed:** https://agilytics.com
**Spec:** Typography: `Roboto 14px/20px` | Letter Spacing: `0.25px` | Color: `#404047`
**States observed:** Default | Active: captured

### Tier 2: Patterns

#### Card
**Role:** Feature highlight or testimonial
**Pages observed:** https://agilytics.com
**Spec:** Background: `#ffffff` | Border: `1px solid #f75c03` | Radius: `30px` | Typography: `Roboto 16px`
**States observed:** Default: captured | Hover: not captured

#### Callout Panel
**Role:** High-visibility messaging
**Pages observed:** https://agilytics.com
**Spec:** Background: `#ffffff` | Border: `1px solid #f75c03` | Radius: `50px` | Padding: `40px`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Grid Item
**Role:** Service or feature listing
**Pages observed:** https://agilytics.com
**Spec:** Title: `Roboto 20px` | Body: `Roboto Condensed 20px` | Color: `#8e8e9c`
**States observed:** Default: captured

#### Footer Link
**Role:** Secondary navigation
**Pages observed:** https://agilytics.com
**Spec:** Typography: `Covered By Your Grace 18px` | Color: `#404047`
**States observed:** Default: captured

## Layout
| Property | Value |
| :--- | :--- |
| Max content width | ~1100px |
| Section gap | 80px |
| Column count | 3-column (desktop) |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Stacked grid items, center-aligned text, hamburger menu |
| Desktop | 1440px | 3-up grid layout, horizontal navigation |

## Imagery & decoration
Agilytics uses high-saturation, metaphorical photography (e.g., the "birthday fingers" image) to contrast with the sterile, monochrome UI. Decorative elements include the orange "Agilytics" sunburst icon used as a center-aligned divider in callout panels.

## Do's
- Use **Oswald 300** for all primary headings.
- Apply `#f75c03` as a 1px border for white cards.
- Maintain **80px vertical spacing** between major content sections.
- Use **Roboto Condensed** for body text to maximize data density.
- Set feature card radii to exactly **30px**.

## Don'ts
- **Wrong:** Using `#f75c03` as a solid button background.
- **Right:** Using `#f75c03` for button text or 1px borders.
- **Reason:** The brand uses orange as a "wireframe" accent, not a mass-fill color.
- **Wrong:** Using Oswald for body copy.
- **Right:** Use Roboto Condensed for body copy.
- **Reason:** Oswald's verticality is illegible at small sizes in long-form text.
- **Wrong:** Adding drop shadows to cards.
- **Right:** Keep cards flat with 1px borders.
- **Reason:** The system is strictly flat/monochrome-plus-one.

## Similar brands
- IBM (Type-first, structured grids)
- H&M (Condensed display type, high-contrast)
- InVision (Legacy) (Orange accents on gray foundations)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --ag-color-primary: #404047;
  --ag-color-accent: #f75c03;
  --ag-color-slate: #8e8e9c;
  --ag-font-display: 'Oswald', sans-serif;
  --ag-font-body: 'Roboto Condensed', sans-serif;
  --ag-radius-card: 30px;
}
```

## Agent prompt examples
- "Generate a feature card using a 1px orange #f75c03 border, 30px border radius, and Oswald 300 for the title."
- "Create a section header with 5px letter spacing and Roboto 18px, centered above a 3-column grid."
- "Design a callout panel with a 50px border radius and a soft orange background at 5% opacity."

## Known gaps
- Hover and Active states for buttons were not fully captured in the automated run.
- Form input styling (text fields, selects) was not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://agilytics.com | 1440x900 | 2026-06-06 |
| Mobile Home | https://agilytics.com | 390x844 | 2026-06-06 |