FeedForge

Overview

FeedForge is a performance-driven creative production platform that embodies the aesthetic of **Data-Backed Pragmatism** — a design philosophy that marries bold, energetic visual accents with a clean, business-focused interface. The brand serves high-growth e-commerce and DTC companies who need to produce, test, and scale winning ad creative at speed. The UI evokes confidence and momentum: a warm, near-black canvas (#180703) grounds the experience, while a vibrant yellow accent (#fff96c) punctuates every call-to-action and key interaction, signaling energy and urgency without sacrificing clarity. The emotional response is one of control and velocity — users feel they are operating a precision instrument, not a generic tool.

The voice is direct, conversational, and unapologetically results-oriented. FeedForge speaks in the language of performance metrics, revenue impact, and creative velocity. Vocabulary favors action verbs (produce, test, scale, capture, drive) and concrete outcomes (revenue growth, conversions, engagement). The tone rejects hype; instead, it grounds claims in specificity and data. Example sentence in brand voice: "We source creators, manage production, and deliver authentic UGC designed to capture attention, build trust, and drive conversions."

Colors

The FeedForge color system is built on a **warm, high-contrast foundation** designed to maximize readability and visual hierarchy across performance-critical interfaces. Primary (#fff96c) is a vivid, warm yellow deployed exclusively on call-to-action buttons, key links, and interactive highlights — it commands attention without aggression, evoking both optimism and urgency. The on-primary text color (#604b01) is a deep brown that ensures WCAG AA contrast (18:1+) and reads as authoritative on the bright yellow. Secondary (#8cc9fa) is a soft, cool blue used for supporting accents, secondary information, and status indicators; it provides visual relief and signals secondary actions or informational content. Tertiary (#9893f4) is a muted purple reserved for tertiary actions, badges, and decora

Typography

The FeedForge type system is anchored in **Plus Jakarta Sans**, a geometric sans-serif that balances technical precision with approachable warmth. The system uses eight levels: display (82px, 800 weight) for hero headlines that demand attention; headline-lg (42px, 800 weight) for section titles and major content blocks; headline-md (28px, 800 weight) for subsection headers; title-lg (20px, 700 weight) for card titles and prominent labels; body-lg (17px, 400 weight) for primary body copy and descriptions; body-md (16px, 400 weight) for secondary body copy and form labels; label-md (14px, 600 weight) for buttons, badges, and interactive elements; and label-sm (12px, 500 weight) for metadata, timestamps, and tertiary information. The pairing communicates a hierarchy of urgency: display and he

Layout

FeedForge employs a **fluid, container-constrained grid** with a maximum width of 1024px and a 12-column layout system. The design uses a semantic spacing scale: xs (4px) for micro-interactions and icon spacing, sm (12px) for compact component padding, md (24px) for standard section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The gutter width is 24px, applied consistently to left/right container margins on desktop and adjusted to 16px on tablet and 12px on mobile. White-space philosophy prioritizes breathing room around interactive elements and key content blocks; sections are separated by lg (40px) spacing on desktop, creating a rhythm that guides the eye through the narrative. The hero section uses pt-[152px] (desktop)

Elevation & Depth

Depth in FeedForge is achieved through **subtle shadows and strategic background layering** rather than dramatic z-index stacking. The elevation system defines three levels: Level 1 (Base) uses no shadow, relying on background color and border-radius for definition; Level 2 (Standard Card) applies box-shadow: 0 8px 24px rgba(24, 7, 3, 0.15), creating a soft, diffuse shadow that suggests gentle lift; Level 3 (Elevated/Modal) applies box-shadow: 0 16px 40px rgba(24, 7, 3, 0.12), a larger spread shadow for prominent overlays. Showcase cards (video slides) use the Level 2 shadow to separate them f

Shapes

FeedForge employs a **Warm Technical** shape philosophy that balances precision with approachability. Border-radius values are semantic and purposeful: sm (4px) is used sparingly for minor UI elements and image containers where sharpness signals technical precision; DEFAULT (9px) is the workhorse radius for buttons, inputs, and standard cards, providing a subtle softness that feels modern without sacrificing legibility; md (14px) is used for showcase cards and service item containers, creating a more pronounced roundness that invites interaction; lg (24px) is reserved for large hero elements a

Components

Action Elements Buttons are the primary interaction mechanism and use a strict two-tier system. **button-primary** (height: 56px, padding: 0 24px, rounded: full, background: #fff96c, text: #604b01, font-weight: 700, font-size: 17px) is the highest-priority CTA, deployed on hero sections and key conversion moments. On hover, the background transitions to #fffadc (primary-container) with a 200ms ease-out transition, providing clear feedback without introducing new visual complexity. **button-secondary** (height: 42px, padding: 0 16px, rounded: 9px, background: white, border: 1px solid outline-variant, text: on-surface) is used for secondary actions like "Learn more" links; it maintains visual hierarchy through size and border treatment rather than color, ensuring the primary CTA remains

Do's and Don'ts

**Do**

• Do use primary yellow (#fff96c) exclusively on call-to-action buttons and key interactive moments — never on body text, backgrounds, or decorative elements.
• Do apply the 200ms ease-out transition timing consistently across all hover and focus states to create a predictable, responsive feel.
• Do use Plus Jakarta Sans at weights 700–800 for headlines and 400 for body copy; avoid intermediate weights (500–600) except for labels and badges.
• Do maintain the warm brown text color (#180703) on all surfaces for consistency and warmth; avoid pure black (#000000).
• Do use the surface-container stack (surface-container-low, surface-container-high) for subtle visual separation rather than introducing new background colors.
• Do apply box-shadow: 0 8px 24px rgba(24, 7, 3, 0.15) to showcase cards and elevated surfaces to create soft, diffuse depth.

**Don't**

• Don't use primary yellow on text, backgrounds, or non-interactive elements — it is reserved exclusively for CTAs and key highlights.
• Don't apply multiple shadows or layered elevation effects; stick to the three-level system (no shadow, Level 2, Level 3).
• Don't mix border-radius values arbitrarily; use the semantic scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency.
• Don't introduce new accent colors beyond primary, secondary, and tertiary; if a new color is needed, derive it from the existing palette using opacity or tint adjustments.
• Don't use pure black (#000000) or pure white (#ffffff) for text; use on-surface (#180703) and surface (#ffffff) from the token system.
• Don't animate transitions faster than 200ms or slower than 400ms; maintain the 200ms standard for micro-interactions and 300ms for larger state changes.