Anyflow Labs

Overview

Anyflow Labs operates at the intersection of motion design and strategic web development, serving brands that refuse to settle for static digital experiences. The aesthetic is "Motion-Forward Minimalism"—a design philosophy that pairs aggressive, high-contrast typography (Bebas Neue at 51.2px, 600 weight) with a vibrant lime-green accent (#9de500) that commands attention without apology. The brand personality is direct, confident, and unapologetically technical: the UI celebrates speed, clarity, and the physics of interaction. Every animation, every color choice, every button state is engineered to guide users toward action. The emotional response is one of energy tempered by precision—users feel the brand's expertise through the sharpness of the interface, not through ornament. Voice example: "We don't build websites. We build experiences that convert."

Colors

The color system is built on a high-contrast, light-dominant foundation with a single, unmissable accent. Primary (#9de500, lab(83.7876% -45.0447 88.4738)) is the brand's signature lime-green—used exclusively on CTAs, interactive states, and key focal points. It appears on the "Let's Talk" button (8px 16px padding, 4px border-radius) and throughout the interface as the visual anchor. On-primary is pure black (#1b1b1b) for maximum contrast and legibility. The surface stack ranges from #f4f4f5 (surface-dim) to #ffffff (surface-bright), with container layers stepping through #e9ecef, #dcdcdc, and #c8c8c8 to create subtle depth without darkness. Secondary (#f99c00, amber) and tertiary (#fb2c36, red) are reserved for status indicators, alerts, and accent moments—never competing with primary. Th

Typography

The type system is a two-font pairing: Bebas Neue (400 weight, 600 weight) for display and headlines, and Inter Tight / Plus Jakarta Sans for body and labels. Bebas Neue's geometric, all-caps character dominates the visual hierarchy—used at 51.2px for display (h1), 40px for headline-lg, and 32px for headline-md, all with -0.02em to -0.01em letter-spacing to tighten the aggressive letterforms. Body copy uses Plus Jakarta Sans at 18px (body-lg) and 16px (body-md) with 400 weight and 0em letter-spacing for neutral readability. Labels use Bebas Neue at 14px with 0.05em tracking to maintain the brand's uppercase, spaced-out voice. All type is rendered in #1b1b1b (on-surface) against light backgrounds. Apply text-shadow: 0 2px 4px rgba(0,0,0,0.08) on small labels (12px) when layered over texture

Layout

The page uses a fluid, viewport-relative grid with a 1280px container max-width and 12-column structure. Horizontal padding is set to 3vw on desktop, 6vw on mobile, creating responsive gutters that scale with the viewport. Vertical rhythm is established through a spacing scale: xs (4px), sm (12px), md (24px), lg (40px), xl (64px). Section separation uses lg spacing (40px) for major breaks, md (24px) for component grouping. The hero section spans full viewport height (h-screen) with a flex layout that positions the headline on the right (md:w-1/2) and supporting copy on the left. A vertical divider (w-px, bg-zinc-500/30) runs center-screen to create visual balance. The layout embraces negative space—the background is a clean #f4f4f5 with no pattern or texture, allowing the lime-green accent

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than color darkening. Level 1 (Base): flat background at #f4f4f5 with no shadow. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 1px border at #dcdcdc, background #e9ecef. Level 3 (Elevated/Hover): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), background shifts to #dcdcdc, transform: translateY(-4px) on hover. Buttons use no shadow at rest; on hover, they receive the Level 2 shadow (0 3px 8px rgba(0, 0, 0, 0.15)) and lift 2px (translateY(-2px)). Interactive elements (inputs, cards) transition all properties over 150

Shapes

The shape philosophy is "Technical Sharpness"—favoring precision over softness. Buttons use 4px border-radius (rounded-sm, 0.25rem) to feel engineered and intentional, never rounded-full. Cards use 16px border-radius (rounded-lg, 1rem) for a slightly softer container that still reads as modern and controlled. Input fields use 8px border-radius (rounded-DEFAULT, 0.5rem) as a middle ground. The ampersand (&) graphic in the hero uses organic, flowing curves as a visual counterpoint to the rigid UI—this is the only soft element, emphasizing the brand's motion-design expertise. All borders are 1px

Components

Action Elements Buttons are the primary interaction pattern. The primary button uses #9de500 background, #1b1b1b text, 8px 16px padding, 4px border-radius, and Bebas Neue 14px 600 weight with 0.05em letter-spacing. On hover, the background shifts to #62a400 (inverse-primary), the element lifts 2px (transform: translateY(-2px)), and a 0 3px 8px rgba(0,0,0,0.15) shadow appears. On active/press, the background becomes #9de500 again with a 1px inset shadow (inset 0 2px 4px rgba(0,0,0,0.1)) to signal depression. Secondary buttons have a transparent background, 2px border at #9de500, and #9de500 text; on hover, the background fills with #bbfd6a (primary-container) and the text becomes #1b1b1b. All button transitions use 150ms cubic-bezier(0.4, 0, 0.2, 1).

Containers & Surfaces Cards use

Do's and Don'ts

**Do**

• Do use Bebas Neue for all headlines and CTAs—its geometric, uppercase character is the brand's visual signature and must remain consistent.
• Do apply the primary lime-green (#9de500) exclusively to interactive elements (buttons, links, focus states) to maintain its power as an attention-directing accent.
• Do maintain 1px borders at #dcdcdc on all cards and containers—this crisp edge definition is essential to the technical aesthetic.
• Do use the full 150ms cubic-bezier(0.4, 0, 0.2, 1) transition timing on all interactive state changes to signal responsiveness and precision.
• Do pair high-contrast typography (51.2px Bebas Neue) with generous negative space—the brand's power comes from boldness, not density.

**Don't**

• Don't soften button corners beyond 4px border-radius—the sharp, engineered feel is core to the brand identity.
• Don't use secondary colors (amber #f99c00, red #fb2c36) on primary CTAs; reserve them for status indicators and alerts only.
• Don't apply shadows stronger than 0 8px 24px rgba(0,0,0,0.12)—the brand avoids heavy depth and prefers light, technical layering.
• Don't mix Bebas Neue with Inter Tight in the same headline—maintain clear typographic hierarchy: Bebas for display/headlines, Inter Tight/Plus Jakarta for body.
• Don't use the surface background (#f4f4f5) as a text color or interactive element—it must remain a neutral canvas to amplify the lime-green accent.