animaapp.com website design: fonts, colors and UI patterns

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.