# How animaapp.com is designed

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

Last updated: 2026-07-28

## Design character

Anima’s marketing site is **dark, polished AI-design theater**: charcoal background, a thin pink promo bar, a high-contrast serif display headline (“AI with an Eye for Design”), and a centered prompt-like input card with a soft purple rim light. Template previews sit in a horizontal row of product thumbnails. It sells tasteful generation—more design studio than hacker terminal.

What should survive adaptation:
- Dark charcoal stage and restrained purple/pink accents
- Serif display + sans UI pairing
- Prompt/composer card as the hero interaction
- Rounded outline and solid pill buttons (Contact sales vs Signup)

## Foundations

### Color

No stable measured palette roles were retained across these pages; rely on the visual description. Visual anchors: near-black page, white headline type, muted gray body, pink top banner, purple glow/border on the composer and Accept cookie CTA, white solid primary signup. Keep accents limited so template screenshots can be colorful without fighting the shell.

### Typography

Observed text styles:
- **text**: unknown, weight 400, 76px, lh 91.2px
- **text**: unknown, weight 400, 16px, lh 16px
- **text**: unknown, weight 400, 14px, lh 21px
- **text**: unknown, weight 400, 27px, lh 40.5px
- **text**: unknown, weight 400, 14px, lh 21px
- **text**: unknown, weight 400, 16px, lh 24px
- **text**: unknown, weight 400, 16px, lh 24px
- **text**: unknown, weight 400, 14px, lh 18px
- **text**: unknown, weight 500, 14px
- **text**: unknown, weight 500, 14px
- **text**: unknown, weight 400, 76px, lh 91.2px
- **text**: unknown, weight 400, 14px, lh 21px

Display serif for the manifesto line; clean sans for nav, body, and UI chrome. Template captions stay small and neutral. Avoid comic or techno display faces.

### Spacing and layout

Recurring spacing measurements include 8px, 12px, 24px, 25px, 32px, 80px. Centered hero stack, then a contained preview rail, then logo wall. Generous vertical padding between bands. Observed corner radii include 6px, 8px, 12px, 100px.

## Visual language

Soft glows, large radii on composer cards, pill buttons, subtle borders on dark elevated surfaces. Cookie bar is a dark strip with purple primary. Imagery is UI screenshots with colorful internal designs framed by the dark shell.

## Components and states

- Promo top bar
- Transparent header: logo, nav dropdowns, outline Contact, text Login, solid Signup
- Hero: serif H1, subcopy, composer card (Import Figma / Clone website + arrow submit)
- Template preview cards with labels
- Logo trust row
- Cookie consent with Accept / Reject

## Responsive behavior

Captures are wide desktop marketing views. On smaller screens stack the template rail, keep the composer full width, and collapse nav into a menu while retaining the dark field and serif hero.

## Practical guidance

**Preserve** serif/sans contrast, dark shell, purple accent sparingly, composer-as-hero.  
**Avoid** turning the page pure white startup-generic, or overloading mint/neon that conflicts with Anima’s softer AI glow.

## Scope note

Studied 2 page captures on paths /. Some structural families were incomplete on these pages. Home marketing captures only; app editor chrome is out of scope.

## Captured pages

[![Anima: the UX Design Agent](https://pin.fontofweb.com/5953?format=jpg)](https://design.withfudge.com/share/pin-5953)

[Anima: the UX Design Agent](https://design.withfudge.com/share/pin-5953)

[![Anima: the UX Design Agent](https://pin.fontofweb.com/5951?format=jpg)](https://design.withfudge.com/share/pin-5951)

[Anima: the UX Design Agent](https://design.withfudge.com/share/pin-5951)