Almo Nature

Overview

Almo Nature is an activist-first pet care brand and 100% subsidiary of Fondazione Capellino, operating under the Reintegration Economy model to restore biodiversity value through transparent sourcing and environmental stewardship. The design aesthetic is "Warm Naturalism"—a grounded, optimistic visual language that balances the earnestness of environmental activism with the approachability of a trusted consumer brand. The UI employs a warm, earthy color palette anchored by a vibrant golden-orange accent (#ffa600) against clean white surfaces and soft greens, creating an inviting, human-centered experience that feels both professional and deeply connected to nature. The brand voice is direct, evidence-based, and conversational—never preachy, always actionable. Example: "Our soft-texture litter is made from sustainably harvested wood fiber, reducing landfill impact by 40% compared to clay alternatives."

Colors

The color system is rooted in natural, high-contrast principles that prioritize clarity and trust. Primary (#ffa600) is the warm, energetic accent used exclusively on call-to-action buttons, key interactive elements, and brand highlights—it signals action and optimism without aggression. Secondary (#83a542) and Tertiary (#73ab43) are nature-inspired greens that reinforce the environmental mission and appear in badges, supporting CTAs, and accent elements. The surface stack (white #ffffff through soft grays #f1f1f1 to #e9ecef) provides a clean, minimal canvas that lets content and product imagery breathe. On-surface text (#262626) is a warm near-black that reduces eye strain compared to pure black. Error (#ec422b) is reserved for validation states and warnings. All interactive states use th

Typography

The type system uses Poppins exclusively, a geometric sans-serif that conveys friendliness and modernity while maintaining strong legibility at all sizes. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements; Headline-lg (40px, 600 weight) structures page sections; Headline-md (28px, 600 weight) breaks up content hierarchically. Body-lg (18px, 400 weight) and Body-md (16px, 400 weight) form the reading layer, with 24px and 28px line-heights ensuring comfortable scanning. Label-md (14px, 600 weight, 0.01em tracking) and Label-sm (12px, 500 weight, 0.05em tracking) handle UI labels, button text, and metadata. When small labels appear over busy product photography, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) to ensure legibility. Poppins' generous x-h

Layout

The layout follows a 12-column fluid grid with a max-width of 1200px, centered on viewport. Section containers use 20px horizontal padding (gutter) on mobile, scaling to 40px on desktop. Vertical rhythm is maintained through the spacing scale: section separation uses lg spacing (40px), component grouping uses md spacing (24px), and internal element spacing uses sm (12px) or xs (4px). Hero sections span full-width with background imagery, while content sections constrain to the container max-width for optimal reading. The design favors generous white space—no section should feel cramped. Cards and modules use 20px internal padding with 10px rounded corners, creating a soft, approachable aesthetic. Container max-widths vary by section (850px for narrow content, 980px for medium, 1200px for f

Elevation & Depth

Depth is achieved through subtle, naturalistic shadows rather than aggressive layering. Level 1 (Base): flat surfaces with no shadow, used for primary content areas and the page background. Level 2 (Raised Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, modals, and interactive containers—this creates a gentle lift without visual heaviness. Level 3 (Floating/Hover): box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12), used on hover states and elevated modals to signal interactivity. No element uses shadows darker than rgba(0, 0, 0, 0.15) to maintain the light, airy aesthetic. Transi

Shapes

The shape philosophy is "Soft Geometric"—rounded corners are used consistently to soften the interface and evoke approachability, but never so rounded as to feel childish or imprecise. Buttons use 10px border-radius (1rem), creating a friendly, modern appearance while maintaining clear clickability. Cards and containers use 10px radius for consistency. Input fields use 4px radius (0.5rem) for a more technical, form-like appearance that signals data entry. Badges and pills use 50% border-radius (full) for maximum softness. The rationale: larger radii (10px) on primary interactive elements (butt

Components

Action Elements Buttons are the primary interaction mechanism and use consistent sizing: 48px height with 12px vertical and 24px horizontal padding. Primary buttons (#ffa600 background, #262626 text, 600 weight label-md) are used for main CTAs like "Discover" or "Learn More." Hover state transitions to #ffd06f over 200ms, providing clear feedback. Secondary buttons use a transparent background with a 2px #ffa600 border, ideal for alternative actions. Ghost buttons (transparent, 1px outline-variant border) are used for tertiary actions. All buttons use 10px border-radius and apply a subtle transition: `transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out;` to ensure smooth state changes.

Containers & Surfaces Cards are the primary content container, using

Do's and Don'ts

**Do**

• Do use the primary orange (#ffa600) exclusively on CTAs and key interactive moments—it's the brand's signature accent and should never be diluted or overused.
• Do maintain 20px+ padding inside cards and containers; generous white space reinforces the premium, nature-first positioning.
• Do apply 200ms ease-in-out transitions to all interactive state changes (hover, focus, active) to create a cohesive, responsive feel.
• Do use Poppins 600 weight for all labels and button text; the geometric letterforms enhance readability and brand consistency.
• Do constrain content to the 1200px max-width container and use the gutter spacing scale (20px mobile, 40px desktop) for consistent rhythm.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds—always use the defined surface and on-surface tokens (#262626 and #fcfcfc) to maintain warmth and reduce eye strain.
• Don't apply shadows darker than rgba(0, 0, 0, 0.15) or use multiple layered shadows; the aesthetic is light and airy, not heavy or dramatic.
• Don't mix rounded corner sizes arbitrarily—stick to 4px for inputs, 10px for buttons/cards, and 50% for badges to maintain visual consistency.
• Don't override the primary color (#ffa600) with secondary greens on CTAs; the orange is the brand's most distinctive token and should remain reserved for primary actions.
• Don't use transitions longer than 200ms or easing functions other than ease-in-out; faster, consistent motion feels responsive and professional.