# Agentc.com.au Design System

> Minimalist typographic utility: stark black Helvetica against a white void, punctuated by a single high-contrast ochre accent.

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

## TL;DR
Agentc.com.au operates on a "monochrome-plus" logic, where the interface is almost entirely devoid of chrome, borders, or shadows. The system relies on a pure white background (#ffffff) and dark charcoal text (#333333) to establish a brutalist, information-first hierarchy. A singular accent color, Ochre (#dc8100), is reserved exclusively for the primary call-to-action (email link) and brand signature. Typography is restricted to Helvetica, using bold 700 weights for headlines and 400 for body, with a notable absence of rounded corners or elevation depth.

## Signature DNA
1. **The Ochre Punctuation** (The use of #dc8100 as the only non-achromatic color on the page, specifically for the "letstalk@" anchor, creating a singular focal point against the #ffffff canvas.)
2. **Zero-Chrome Layout** (Total absence of cards, borders, or containers. Content floats in whitespace, using a 137px vertical rhythm to separate the brand mark from the value proposition.)
3. **Helvetica Bold Headers** (Display copy is set at 30px with a 700 weight, creating a stark, utilitarian contrast against the 20px body text.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Page background | 3 | 0.9 | computed_style |
| `{color.ink}` | `#333333` | Primary text, headings, and brand mark | 15 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.accent}` | `#dc8100` | Primary CTA (email link), brand signature | 3 | 0.6 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Helvetica | 400, 700 | All text | Inter or Arimo | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display}` | 30px | normal | normal | 700 | Main Hero H1 | `h1` |
| `{text.body.large}` | 20px | normal | normal | 400 | Intro copy / Lead | `article` |
| `{text.body}` | 16px | normal | normal | 400 | Standard body text | `p` |
| `{text.cta}` | 20px | normal | normal | 400 | Email link | `a` |
| `{text.label}` | 14px | normal | normal | 400 | Meta info | `span` |
| `{text.nav}` | 18px | normal | normal | 700 | Navigation links | `nav a` |
| `{text.footer}` | 12px | normal | normal | 400 | Copyright | `footer` |
| `{text.brand}` | 30px | normal | 2px | 400 | Wordmark | `.logo` |

### Principles
1. **Tight Leading:** Line heights are kept to "normal" (approx 1.2), maintaining a compact typographic block.
2. **Utilitarian Weighting:** Only two weights (400 and 700) are used to define hierarchy.
3. **No Serif usage:** The brand is strictly sans-serif to maintain a digital-agency aesthetic.

## Spacing
**Base unit:** 20px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.base}` | 20px | 12 |
| `{space.hero}` | 137px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | All elements (sharp) | 18 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{elevation.flat}` | none | All surfaces | No shadows captured |

## Components
### Tier 1: Foundational
#### Brand Mark
**Role:** Primary identity
**Pages observed:** All
**Spec:** Text #333333 / Typography 30px Helvetica / Letter-spacing 2px
**States observed:** Default

#### Text Link (Accent)
**Role:** Primary CTA
**Pages observed:** All
**Spec:** Text #dc8100 / Typography 20px / Decoration: none
**States observed:** Default | Hover: captured (opacity shift)

### Tier 2: Patterns
#### Hero Block
**Role:** Value proposition
**Pages observed:** All
**Spec:** Margin-top 137px / Text #333333 / H1 30px Bold
**States observed:** Default

#### Contact Line
**Role:** Footer-level CTA
**Pages observed:** All
**Spec:** Prefix "—" / Color #dc8100 / Margin-top 20px
**States observed:** Default

### Tier 3: Surface-specific
#### Pricing Card (Inherited Logic)
**Role:** Service tiers
**Pages observed:** /pricing
**Spec:** Background #ffffff / Border 1px #333333 (inferred) / Radius 0px
**States observed:** Default

#### Content Article
**Role:** Information delivery
**Pages observed:** /about
**Spec:** Text #333333 / Font-size 20px / Max-width 800px
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max content width | 1200px |
| Alignment | Left-aligned (flush left) |
| Gutter | 20px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Hero margin-top reduces to 60px; H1 wraps aggressively |
| Desktop | 1440px | 137px top margin for brand mark |

## Imagery & decoration
The brand avoids photography and icons. Decoration is limited to the em-dash ("—") used as a prefix for the primary email CTA.

## Do's
- Use `#ffffff` for all backgrounds.
- Set all headlines in Helvetica Bold (`700`).
- Reserve `#dc8100` for the final call to action on a page.
- Maintain 0px border radius on all UI elements.
- Use `137px` of whitespace to separate the logo from the main content.

## Don'ts
- **Wrong:** Using a rounded button for the CTA. **Right:** Using a text link with an em-dash prefix. **Reason:** The brand uses a 0px radius, sharp-edge system.
- **Wrong:** Using `#dc8100` for headings. **Right:** Using `#333333` for headings. **Reason:** The accent color is for interaction, not hierarchy.
- **Wrong:** Adding drop shadows to text or containers. **Right:** Flat placement on the canvas. **Reason:** The system is strictly 2D/monochrome-plus.

## Similar brands
- Huge Inc
- Athletics
- Pentagram (Digital)

## Quick start

```css
:root {
  --agentc-orange: #dc8100;
  --agentc-ink: #333333;
  --agentc-canvas: #ffffff;
  --font-main: "Helvetica", sans-serif;
}
```

## Agent prompt examples
- "Generate a hero section for Agentc with a 30px Helvetica Bold heading in #333333, followed by a 20px body paragraph, and an ochre #dc8100 text link prefixed with an em-dash."
- "Create a pricing list using only #333333 text on a #ffffff background, no borders, and 20px vertical spacing between items."

## Known gaps
- Hover states for navigation items were not explicitly captured in the token evidence.
- Secondary button styles (if any) were not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://agentc.com.au | 1440px | 2026-06-06 |
| Pricing | https://agentc.com.au/pricing | 1440px | 2026-06-06 |
| About | https://agentc.com.au/about | 390px | 2026-06-06 |