# How agently.dev is designed

[Open the live Fudge conversation](https://design.withfudge.com/share/agently.dev-design)

Last updated: 2026-07-28

## Design character

Agently markets an agent platform with a **dark, product-forward SaaS** look: deep black/charcoal grounds, large bold white headlines, compact 12px UI labels, and rounded cards that showcase product UI. It reads modern developer/startup—high contrast type, restrained accent color, and feature sections that alternate between hero claims and interface previews.

What should survive:

- Dark marketing shell with bold ~52px headlines.
- Soft-rounded cards (8–24px) for product shots and feature tiles.
- Sparse top nav and clear primary CTA.
- UI previews as proof, not abstract illustration only.

## Foundations

### Color

- **Ground**: near-black.
- **Primary text**: white / off-white.
- **Secondary**: muted gray labels (~12–16px).
- **Accent**: used sparingly on CTAs and highlights (screenshot-dependent; keep saturated accents few).
- **Surfaces**: elevated dark cards slightly lighter than the page void.

### Typography

- **Hero**: ~40–52px weight 700, short multi-line claims.
- **Body**: ~15–18px regular.
- **Micro UI**: 12px labels common in chrome and badges.
- Families not declared.

### Spacing and layout

- Vertical marketing stack; 12–24px component gaps; larger section breaks (~40–160px).
- Radii cluster at 8, 10, 16, 24px; pills near 100px on some controls.
- Centered heroes with product mock below or beside copy.

## Visual language

- Dark glass/card elevations, soft shadows occasionally.
- Product screenshots in rounded frames.
- Minimal illustration noise; focus on UI realism.

## Components and states

1. **Marketing nav** — logo, few links, signup.
2. **Hero** — bold claim + supporting line + CTA + product visual.
3. **Feature rows** — icon/title/body or screenshot cards.
4. **Social proof / logos** — quiet strips when present.
5. **Footer** — standard dark SaaS footer.

## Responsive behavior

Multiple home widths from ~1072–1712. Hero type stays large; cards reflow from multi-column toward stacked. Detailed mobile nav not fully captured.

## Practical guidance

**Preserve** dark high-contrast marketing, bold heads, rounded product cards.  
**Avoid** light generic Bootstrap look or rainbow gradients.  
**Adapt** by keeping one accent and letting screenshots carry credibility.

## Scope note

Eight home captures at varied widths. Color role hexes were sparse; type sizes and radii are measured. Font families unknown.

## Captured pages

[![Home — hero and product](https://pin.fontofweb.com/6671?format=jpg)](https://design.withfudge.com/share/pin-6671)

[Home — hero and product](https://design.withfudge.com/share/pin-6671)

[![Home — mid width](https://pin.fontofweb.com/6670?format=jpg)](https://design.withfudge.com/share/pin-6670)

[Home — mid width](https://design.withfudge.com/share/pin-6670)

[![Home — wide marketing](https://pin.fontofweb.com/6666?format=jpg)](https://design.withfudge.com/share/pin-6666)

[Home — wide marketing](https://design.withfudge.com/share/pin-6666)

[![Home — desktop tall](https://pin.fontofweb.com/6667?format=jpg)](https://design.withfudge.com/share/pin-6667)

[Home — desktop tall](https://design.withfudge.com/share/pin-6667)