Anima App Brand Identity

A complete profile of Anima App's visual system — colors, typography, components, and personality.

Quick Facts

Color Palette

• primary: #6D54CF
• secondary: #F2BFAF
• accent: #6D54CF
• background: #2B2B2B
• textPrimary: #2B2B2B
• link: #A898EC

Typography

• primary: Mulish — https://fonts.google.com/specimen/Mulish
• heading: Roslindale — https://fonts.google.com/specimen/Roslindale

Visual Assets

• Logo:
• Favicon:
• Social card (og:image):

UI Components

• input: background=transparent, textColor=#FFFFFF, borderColor=null, borderRadius=0px, shadow=none
• buttonPrimary: background=#6D54CF, textColor=#FFFFFF, borderRadius=6px, shadow=none
• buttonSecondary: background=#FFFFFF, textColor=#2D2D2D, borderColor=#FFFFFF, borderRadius=100px, shadow=none

Brand Personality

Tone: modern · Energy: high · Audience: designers and developers

Anima App Brand in the Wild

Real-world brand assets — ads, campaigns, marketing materials.

• Introducing Anima Frontier: The first AI Front end automation
  • Image:
  • Source: View Source
• Build a blog with Anima's code + Contentful's CMS | Anima Blog
  • Image:
  • Source: View Source
• Anima: Build Websites & Apps with AI | UX Design Agent | Figma to Code
  • Image:
  • Source: View Source
• code - Anima Blog
  • Image:
  • Source: View Source
• Anima Showcase
  • Image:
  • Source: View Source
• Anima Blog
  • Image:
  • Source: View Source

Working with these fonts

Not found on Google Fonts? You can follow this flow:

1. Open the company's homepage in a browser with DevTools open.
2. In the Network tab, filter by "Font".
3. Hard-reload the page and navigate around to capture the font URLs.
4. Save each font URL locally and copy the @font-face declarations from the CSS.

Machine-Readable Profile

{
 "colorScheme": "dark",
 "fonts": [
  {
   "family": "Mulish",
   "role": "body"
  },
  {
   "family": "Roslindale",
   "role": "heading"
  }
 ],
 "colors": {
  "primary": "#6D54CF",
  "secondary": "#F2BFAF",
  "accent": "#6D54CF",
  "background": "#2B2B2B",
  "textPrimary": "#2B2B2B",
  "link": "#A898EC"
 },
 "typography": {
  "fontFamilies": {
    "primary": "Mulish",
    "heading": "Roslindale"
  },
  "fontStacks": {
    "heading": ["Roslindale"],
    "body": ["Roslindale", "serif"],
    "paragraph": ["Mulish", "sans-serif"]
  },
  "fontSizes": {
    "h1": "76px",
    "h2": "76px",
    "body": "27px"
  }
 },
 "spacing": {
  "baseUnit": 4,
  "borderRadius": "100px"
 },
 "components": {
  "input": {
    "background": "transparent",
    "textColor": "#FFFFFF",
    "borderColor": null,
    "borderRadius": "0px",
    "shadow": "none"
  },
  "buttonPrimary": {
    "background": "#6D54CF",
    "textColor": "#FFFFFF",
    "borderRadius": "6px",
    "shadow": "none"
  },
  "buttonSecondary": {
    "background": "#FFFFFF",
    "textColor": "#2D2D2D",
    "borderColor": "#FFFFFF",
    "borderRadius": "100px",
    "shadow": "none"
  }
 },
 "images": {
  "logo": "https://a.storyblok.com/f/89137/x/e1adbda50a/anima-logo.svg",
  "favicon": "https://s3.amazonaws.com/projects4.animaapp.com/favicon.ico",
  "ogImage": "https://a.storyblok.com/f/89137/1840x1142/548f935261/anima-the-ux-design-agent.png"
 },
 "personality": {
  "tone": "modern",
  "energy": "high",
  "targetAudience": "designers and developers"
 },
 "designSystem": {
  "framework": "custom"
 },
 "confidence": {
  "buttons": 0.95,
  "colors": 0.9,
  "overall": 0.925
 }
}