# Agentit.fi Design System

> High-contrast monochrome utility defined by absolute black ink on a stark white canvas.

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

## TL;DR
Agentit.fi operates on a strict monochrome system where visual hierarchy is established through scale and density rather than color. The interface utilizes a pure white background (#ffffff) as the primary surface, with all critical UI elements, typography, and iconography rendered in absolute black (#000000). This creates a high-contrast environment (21.0:1) that prioritizes legibility and functional clarity. The system avoids gradients, shadows, and decorative accents, relying instead on clean hairlines and structural whitespace to organize content.

## Signature DNA
1. **Achromatic Dominance** (The system uses a 100% black-on-white palette with no secondary or accent colors observed in the core brand layer.)
2. **High-Contrast Utility** (A 21.0:1 contrast ratio is maintained across all text-to-background relationships, ensuring maximum accessibility and a "blueprint" aesthetic.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|-----------|---------------|----------------|----------|-----------|
| None      | N/A           | N/A            | N/A      | N/A       |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background | High | 100% | Evidence |
| `{color.ink}` | `#000000` | Primary text, icons, and borders | High | 100% | Evidence |

### Accent
*Not captured in source.*

### Semantic
*Not captured in source.*

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Sans-serif (System) | 400, 700 | All UI and body text | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{text.h1}` | 32px | 1.2 | -0.02em | 700 | Main page headings | `h1` |
| `{text.h2}` | 24px | 1.3 | 0 | 700 | Section headers | `h2` |
| `{text.body.lg}` | 18px | 1.5 | 0 | 400 | Lead paragraphs | `p.lead` |
| `{text.body}` | 16px | 1.5 | 0 | 400 | Standard body copy | `body` |
| `{text.ui.bold}` | 16px | 1.0 | 0 | 700 | Buttons and Nav | `nav a` |
| `{text.body.sm}` | 14px | 1.4 | 0 | 400 | Captions and Footer | `footer` |
| `{text.label}` | 12px | 1.2 | 0.05em | 700 | Small labels | `label` |
| `{text.caption}` | 10px | 1.2 | 0 | 400 | Legal/Fine print | `.fineprint` |

### Principles
1. **Hierarchy through Weight:** Use weight 700 for all structural headings and interactive triggers.
2. **Standardized Line Heights:** Body text maintains a 1.5 ratio for optimal readability on white backgrounds.
3. **Zero Chromatic Interference:** No color is used to denote emphasis; use bolding or scale instead.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | Inline elements |
| `{space.sm}` | 16px | Internal component padding |
| `{space.md}` | 24px | Element grouping |
| `{space.lg}` | 48px | Section vertical rhythm |
| `{space.xl}` | 80px | Major page transitions |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Default for all containers and buttons | Observed on primary URL |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{elevation.flat}` | none | All surfaces sit on the same plane | Observed on primary URL |

## Components
### Tier 1: Foundational
#### Global Navigation
**Role:** Primary site navigation
**Pages observed:** https://agentit.fi
**Spec:** Background: #ffffff / Text: #000000 / Typography: 16px Bold / Height: 64px
**States observed:** Default | Hover: Underline | Focus: Not captured | Active: Not captured | Disabled: Not captured

#### Primary Button
**Role:** Main call to action
**Pages observed:** https://agentit.fi
**Spec:** Background: #000000 / Text: #ffffff / Radius: 0px / Padding: 12px 24px
**States observed:** Default | Hover: Opacity 0.8 | Focus: Not captured | Active: Not captured | Disabled: Not captured

### Tier 2: Patterns
#### Content Card
**Role:** Information grouping
**Pages observed:** https://agentit.fi
**Spec:** Border: 1px solid #000000 / Background: #ffffff / Padding: 24px
**States observed:** Default

#### Section Divider
**Role:** Visual separation of content
**Pages observed:** https://agentit.fi
**Spec:** Border-top: 1px solid #000000 / Width: 100%
**States observed:** Default

### Tier 3: Surface-specific
#### Footer
**Role:** Site-wide utility links
**Pages observed:** https://agentit.fi
**Spec:** Background: #ffffff / Border-top: 1px solid #000000 / Text: #000000
**States observed:** Default

#### Hero Block
**Role:** Primary entry point
**Pages observed:** https://agentit.fi
**Spec:** Padding: 80px 0 / Text-align: Left / Typography: {text.h1}
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1200px |
| Gutter | 24px |
| Columns | 12 |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | <768px | Stacked columns, 16px gutters |
| Desktop | >768px | 12-column grid, 24px gutters |

## Imagery & decoration
The brand uses high-contrast photography or technical illustrations. It avoids soft shadows, rounded corners, and any form of color gradients.

## Do's
- Use absolute black (#000000) for all text on white.
- Maintain a 0px border radius on all interactive elements.
- Use 1px solid black lines for structural dividers.
- Ensure 80px of vertical spacing between major content sections.
- Use weight 700 for all interactive labels.

## Don'ts
- **Wrong:** Using #333333 for body text. **Right:** Use #000000. **Reason:** The system is strictly monochrome.
- **Wrong:** Adding a 4px border radius to buttons. **Right:** Use 0px. **Reason:** The brand identity is sharp and architectural.
- **Wrong:** Using a sub-brand color (e.g., Blue) for a primary action. **Right:** Use #000000. **Reason:** The parent brand must remain achromatic.
- Do not use drop shadows to create depth.
- Do not use gray backgrounds for section alternating.

## Similar brands
- Minimalissimo
- Typewolf
- Standard Projects

## Quick start
```css
/* CSS Custom Properties */
:root {
  --color-canvas: #ffffff;
  --color-ink: #000000;
  --radius-none: 0px;
  --space-base: 8px;
}
```

```javascript
/* Tailwind v4 @theme */
@theme {
  --color-primary: #000000;
  --color-background: #ffffff;
  --border-radius-none: 0px;
}
```

## Agent prompt examples
- "Create a primary button using #000000 background, #ffffff text, and 0px border radius."
- "Generate a content card with a 1px solid #000000 border and 24px internal padding."
- "Design a header using weight 700 sans-serif text at 32px with -0.02em letter spacing."

## Known gaps
- Hover and Active states for secondary buttons were not captured.
- Mobile navigation menu behavior was not fully analyzed.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://agentit.fi | 1440x900 | 2026-06-06 |