Anima

Overview

Anima is a nature-inspired venture accelerator that transforms biomimetic research into scalable market solutions. The design system embodies "Organic Minimalism"—a philosophy that balances the complexity of natural systems with the clarity of modern interface design. The visual language combines soft, rounded geometric forms (inspired by organic growth patterns) with a restrained color palette anchored by a cool blue accent (#4199FD) that evokes trust and innovation. The aesthetic evokes a sense of calm sophistication: users feel they are engaging with a thoughtful, scientifically grounded partner rather than a typical corporate accelerator.

The brand voice is precise, approachable, and grounded in scientific rigor. Anima speaks with the confidence of domain experts but without jargon—sentences are direct and purposeful, often using active verbs and concrete outcomes. The tone avoids hype; instead, it emphasizes partnership, impact, and real-world application. Example sentence in brand voice: "We partner with researchers to de-risk their breakthrough ideas and accelerate them to market within 18 months."

Colors

The color system is built on a foundation of soft, neutral surfaces (#f5f6f6 as primary surface, #ffffff as bright surface) that provide visual rest and allow content to breathe. The primary accent is a vibrant, trust-inducing blue (#4199FD) used exclusively for interactive elements—call-to-action buttons, links, focus states, and form validation feedback. This blue is never used for passive text or backgrounds; it signals interactivity and user agency.

Secondary colors support specific use cases: a soft sage green (#a8d5ba, tertiary) appears in success states, badges, and nature-themed visual accents, reinforcing the brand's biomimetic mission. The error state uses a warm red (#f04438) for critical feedback. The surface stack progresses from #f9fafb (surface-container-lowest, for subtle

Typography

The type system uses two distinct families to create visual hierarchy and emotional resonance. Parabole (a geometric, light-weight sans-serif) is reserved for display and headline scales (113px, 48px, 36px at fontWeight 300), creating an elegant, forward-thinking impression that aligns with the brand's innovation focus. Helvetica Neue serves all body and label text (16px–24px at fontWeight 400, labels at fontWeight 600), providing clarity and accessibility for dense information. The display scale (113px, lineHeight 120px, letterSpacing -0.02em) is used only for hero statements; headline-lg (48px, lineHeight 56px) anchors section introductions; body-md (16px, lineHeight 24px) is the default for paragraph text. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) on small labels (label-sm, 12px)

Layout

The layout system uses a 12-column grid with a fixed container max-width of 1280px, providing a responsive yet controlled canvas. The gutter spacing is consistently 24px (md spacing), creating rhythm between columns and sections. Page sections are separated using lg spacing (40px) for major breaks and md spacing (24px) for minor groupings. The design favors generous white space—surfaces are never crowded; content breathing room is prioritized over information density. The grid is fluid on mobile (single column, 12px side padding) and expands to full 12 columns on desktop, with key content typically occupying 8–10 columns to maintain readability. Containers use the full 1280px width for hero sections and full-bleed imagery, but content cards and form fields are constrained to 600–800px for

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids heavy drop shadows in favor of subtle, directional lighting. The base elevation (sm) uses box-shadow: 0 1px 2px 0 rgba(18, 18, 23, 0.05)—barely perceptible, used for cards and subtle surface separation. The mid elevation (md) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), used for hovered cards, modals, and interactive overlays. The highest elevation (lg) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), reserved for floating action buttons and critical modals. Focus states on interactive elements use a 3px inset box-shadow: 0

Shapes

The shape philosophy is "Soft Geometry"—rounded corners are used consistently to soften the interface and evoke organic, natural forms without sacrificing clarity. Buttons and inputs use 8px (DEFAULT) border-radius, creating a friendly, approachable feel. Cards and larger containers use 16px (lg) border-radius for a more pronounced softness. Small UI elements (badges, tags) use 9999px (full) for perfect circles or pills, reinforcing the organic aesthetic. Form fields use 8px to align with button styling, creating visual cohesion. The rationale: sharp 90° corners feel corporate and rigid; soft

Components

Action Elements Buttons are the primary call-to-action mechanism. The button-primary component uses backgroundColor: {colors.primary} (#4199FD), textColor: white, padding: 8px 16px, height: 44px, and rounded: 8px. On hover, transition to button-primary-hover with backgroundColor: #3680d3 over 200ms (transition: background-color 0.2s ease-in-out). The button-secondary variant uses a transparent background with a 1px border in primary blue, allowing secondary actions to coexist without visual dominance. Focus states on all buttons apply a 3px box-shadow: 0px 0px 0px 3px rgba(65, 153, 253, 0.4) to indicate keyboard navigation.

Containers & Surfaces Cards are the primary content container. The card component uses backgroundColor: white, rounded: 16px, padding: 24px, and box-shadow: 0

Do's and Don'ts

**Do**

• Do use the primary blue (#4199FD) exclusively for interactive elements—buttons, links, focus states, and form validation. Never use it for passive backgrounds or body text.
• Do apply 8px border-radius to buttons and inputs, 16px to cards, and 9999px to badges to maintain the soft-geometry aesthetic across all components.
• Do use Parabole for display and headline scales (48px+) and Helvetica Neue for body and label text to create clear visual hierarchy and reinforce the brand's modern, approachable voice.
• Do maintain generous white space (24px–40px between sections) and avoid crowding content; the design system prioritizes breathing room over information density.
• Do use the shadow system consistently: sm (0 1px 2px) for base cards, md (0 3px 8px) for hover states, and lg (0 8px 24px) for elevated modals. Never mix shadow scales within a single component state.

**Don't**

• Don't use the primary blue for backgrounds, text, or passive elements; reserve it exclusively for interactive affordances like buttons and links.
• Don't apply sharp 90° corners (border-radius: 0) to any component; the brand identity depends on soft, rounded geometry to evoke organic, natural forms.
• Don't mix typefaces within a single component; use Parabole only for headlines (48px+) and Helvetica Neue for all body and label text.
• Don't use heavy drop shadows (box-shadow: 0 20px 40px or larger); the elevation system is intentionally subtle and refined—use only the three defined shadow scales (sm, md, lg).
• Don't apply color to text beyond the defined on-surface (#1d2939) and on-surface-variant (#667085) tokens; avoid custom text colors that bypass the color system.