agently.dev website design: fonts, colors and UI patterns

4 featured captures from agently.dev, with sourced design evidence from Fudge.

How is agently.dev designed? Show me the visual system I can use as a reference.

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