Fourmula.ai

Overview

Fourmula.ai represents a paradigm shift in e-commerce visual production through what we call 'Intelligent Minimalism'—a design philosophy that strips away complexity while amplifying the power of AI-generated assets. The brand serves product teams, fashion retailers, and e-commerce managers who need studio-quality photography at scale, without the overhead of traditional photoshoots. The aesthetic is clean, purposeful, and forward-looking: a bright, spacious interface (predominantly white surfaces with #ffffff backgrounds) punctuated by a vibrant orange accent (#f94a00) that signals action, speed, and transformation. The UI evokes confidence and precision—every element is intentional, every interaction feels responsive and immediate.

The voice is direct, energetic, and solution-oriented. Fourmula speaks in the language of efficiency and creative empowerment: 'Your catalog, instantly re-shot.' 'From idea to assets in four steps.' The tone avoids hype; instead, it emphasizes tangible outcomes and brand consistency. The vocabulary is action-driven (generate, transform, create, approve) and product-focused (assets, visuals, catalog, brand). Example sentence in brand voice: 'Upload your product, and we'll create on-brand lifestyle shots in minutes—no reshoots, no cropping, just ready-to-use assets.'

Colors

The color system is built on a foundation of clean, light surfaces (#ffffff primary surface, #f5f5f5 surface-dim) that provide maximum clarity for product imagery and UI controls. The primary accent is a bold, energetic orange (#f94a00), used exclusively for call-to-action buttons, interactive states, and brand-critical elements. This orange is the signature color that communicates speed and transformation—it appears on 'Generate,' 'Start,' and primary navigation triggers. A secondary blue (#146ef5) provides a supporting accent for secondary actions, links, and informational states, creating visual hierarchy without competing with the primary. The outline system uses a subtle dark gray (#2a2a30) for borders and dividers, maintaining legibility while staying subordinate to content. Surface

Typography

The type system pairs SF Pro Display (Apple's native system font) for headlines and UI labels with Arial/Helvetica Neue for body copy, creating a hierarchy that balances brand personality with accessibility. Display (64px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and major section titles, commanding attention with its scale and negative letter-spacing that tightens the letterforms. Headline-lg (40px, 600 weight) anchors feature sections and modal titles, while headline-md (28px, 600 weight) breaks up content into digestible chunks. Title-lg (20px, 600 weight) is used for card headers and subsection breaks. Body-lg (18px, 400 weight, 28px line-height) is the primary reading size for feature descriptions and longer-form content, with generous line-height (1.56x) ens

Layout

The layout system uses a 12-column responsive grid with a maximum container width of 1280px, ensuring content remains scannable on ultra-wide displays while maintaining focus on product imagery. The grid is fluid below 991px, stacking to single-column layouts on tablets and mobile. White-space is generous and intentional: the gutter spacing is 24px (md unit), with section separators using lg spacing (40px) to create visual breathing room between feature blocks. The hero section occupies full viewport height with centered content, using a 3-column layout on desktop that narrows to 1 column on mobile. Cards and content containers use md padding (24px) internally, with lg spacing (40px) between card groups. The spacing scale is semantic: xs (4px) for micro-interactions and icon spacing, sm (1

Elevation & Depth

Depth is conveyed through a subtle shadow system that avoids the heavy drop-shadows of older design trends. Level 1 (Base/Surface) uses no shadow—the white background (#ffffff) is the foundation. Level 2 (Standard Cards) applies a soft shadow of 0 1px 2px rgba(0, 0, 0, 0.06), creating minimal separation from the base while maintaining visual lightness. Level 3 (Elevated Cards/Hover States) uses 0 4px 12px rgba(0, 0, 0, 0.08), a slightly larger blur radius (12px) and offset (4px) that signals interactivity without overwhelming the interface. Level 4 (Modals/Overlays) uses 0 16px 40px rgba(0, 0,

Shapes

The shape philosophy is 'Functional Softness'—rounded corners are used strategically to soften the interface while maintaining clarity and precision. Buttons and primary interactive elements use full rounding (border-radius: 9999px), creating pill-shaped buttons that feel modern and approachable while remaining instantly recognizable as clickable. Cards and content containers use lg rounding (1rem / 16px), providing a gentle curve that softens the rectangular form without appearing overly organic. Input fields and form elements use DEFAULT rounding (0.5rem / 8px), a subtle curve that signals i

Components

Action Elements Buttons are the primary interaction mechanism and must be instantly recognizable. Button-primary uses a 44px height with 10px vertical and 18px horizontal padding, full rounding (9999px), and the primary orange background (#f94a00) with white text. The label-md typography (14px, 600 weight) ensures text is bold and legible at small sizes. On hover, the background transitions to primary-container (#fd7b03) with a 200ms ease timing—no scale transform, no shadow change, just a color shift. On active/pressed, the background darkens to #e63f00 to signal engagement. Button-secondary mirrors the primary button's dimensions but uses a transparent background with a 1px border in primary orange and orange text; on hover, it fills with surface-container-high (#e8e8e8) while mainta

Do's and Don'ts

**Do**

• Do use the primary orange (#f94a00) exclusively for primary CTAs and interactive states—it's the brand's signature and must remain distinctive.
• Do maintain generous white-space (lg spacing, 40px) between major sections to create visual breathing room and emphasize content hierarchy.
• Do apply the 200ms ease transition timing consistently across all interactive elements (buttons, cards, inputs) for a cohesive, polished feel.
• Do use SF Pro Display for all headlines and UI labels to reinforce brand personality; reserve Arial for body copy to maximize readability.
• Do enforce the 44px minimum height on all touch targets (buttons, inputs, list items) to meet accessibility standards and improve mobile usability.
• Do layer shadows subtly (max 0 16px 40px rgba(0,0,0,0.12)) to create depth without visual heaviness—avoid drop-shadows larger than 16px blur radius.

**Don't**

• Don't use the primary orange on large background areas (>120px × 120px); instead, use surface containers to avoid visual fatigue and maintain focus on product imagery.
• Don't mix SF Pro Display and Arial within a single headline or button label—choose one font per component to maintain visual clarity.
• Don't apply shadows to text, borders, or small UI elements; shadows are reserved for containers and surfaces to avoid visual clutter.
• Don't use sharp corners (0px border-radius) on interactive elements; all buttons, cards, and inputs must use at least DEFAULT rounding (0.5rem) to signal interactivity.
• Don't exceed 3 secondary interactive elements per page; too many competing accents dilute the primary orange's impact and confuse user focus.
• Don't use colored text on colored backgrounds; always pair on-primary text with primary backgrounds, on-secondary with secondary backgrounds, etc., to ensure WCAG AA contrast compliance.