Creative Sprout Media

Overview

Creative Sprout Media is a global web design and digital marketing agency operating across Lahore, Dubai, and Australia. The brand embodies a philosophy of 'Vibrant Minimalism'—a design aesthetic that pairs bold, energetic accent colors (#03e78b, #ff485f, #f8bb86) with clean, spacious layouts and refined typography. The visual language is contemporary and professional, avoiding unnecessary ornamentation while maintaining visual warmth through strategic color placement. The UI evokes clarity, confidence, and forward momentum—emotions essential to a growth-focused agency. Every interface element serves a purpose: the dominant white canvas (#ffffff) provides breathing room, while the signature emerald green (#03e78b) acts as the primary accent, drawing attention to calls-to-action and key interactive moments.

The brand voice is direct, strategic, and approachable. The tone avoids corporate jargon, instead favoring clear, action-oriented language that speaks to business outcomes. Vocabulary patterns emphasize transformation ('go beyond,' 'produce design-based experiences'), partnership ('helping brands'), and global reach. The personality is confident without arrogance, creative without pretension. Example sentence in brand voice: 'We transform your vision into measurable digital growth across three continents.'

Colors

The color system is built on a foundation of clean neutrals (white #ffffff, near-black #1f1f1f, mid-gray #808080) paired with three vibrant accent colors that define the brand's energy. Primary (#03e78b) is the signature emerald green used exclusively on CTAs, interactive states, and brand moments—it appears on the 'Start a Project' button, chat widgets, and focus states. This color was chosen for its psychological association with growth and forward momentum, critical for a digital agency. Secondary (#ff485f) is a coral-red accent reserved for alerts, secondary CTAs, and status indicators; it provides warmth and urgency without competing with primary. Tertiary (#f8bb86) is a soft peach used for tertiary actions, badges, and supporting UI elements, adding approachability to the system.

Su

Typography

The typography system employs a two-font strategy: Futura PT (fontFamily: futura-pt, sans-serif) for display and headline scales, and Soleil (fontFamily: soleil, sans-serif) for body and label text. Futura PT is a geometric sans-serif with distinctive character and authority, used at display (115px, fontWeight 500, lineHeight 130px, letterSpacing -0.02em) for hero headlines and headline-lg (56px, fontWeight 500, lineHeight 65px) for section titles. This pairing communicates sophistication and creative confidence. Soleil, a humanist sans-serif, is lighter and more approachable, used for body-lg (19px, fontWeight 300, lineHeight 28px) and body-md (18px, fontWeight 300, lineHeight 26px) to ensure readability and warmth in longer-form content. The light weight (300) of Soleil body text creates

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, providing flexibility for responsive design while maintaining visual coherence. The page rhythm is governed by a semantic spacing scale: gutter (50px) is used for horizontal padding on the main container and section separation, lg spacing (40px) for major section breaks, md spacing (24px) for component padding and moderate vertical rhythm, and sm spacing (12px) for internal component spacing. The hero section employs a generous left-aligned layout with the h1 'Web & Digital Marketing Agency' set at 115px with 130px line-height, creating dramatic visual impact. White-space is treated as a design element, not wasted space—the 50px gutter on header and content sections creates breathing room that emphasizes the

Elevation & Depth

Depth in this system is achieved through subtle shadows and layering rather than dramatic effects. The elevation scale defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minimal lift on interactive elements like hover states, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and containers, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and elevated surfaces. The primary CTA button uses no shadow, relying instead on its vivid primary color (#03e78b) and contrast to establish hierarchy. Cards transition from md to lg shadow on hover (transition: all 200ms ease-in-out), creatin

Shapes

The shape philosophy is 'Geometric Clarity'—a system that balances sharp, architectural precision with subtle softness. Buttons and interactive elements use full border-radius (9999px / rounded.full) to create pill-shaped buttons that feel modern and approachable; this is applied to the primary CTA ('Start a Project'), secondary circular button, and badge components. Standard cards and containers use rounded.DEFAULT (0.5rem / 8px) for a subtle, professional appearance that avoids harsh corners without appearing overly rounded. Input fields use rounded.DEFAULT (8px) for consistency with cards.

Components

Action Elements Buttons are the primary interaction mechanism and use the full border-radius (9999px) to signal interactivity. The button-primary component applies primary color (#03e78b) with white text (on-primary), 16px vertical padding, 32px horizontal padding, and label-md typography (14px, fontWeight 600). On hover, the background transitions to primary-fixed-dim (#03e78b) with a 200ms ease-in-out transition, providing tactile feedback. The button-secondary is a circular element (54px × 54px, border-radius: 50%) with inverse-surface background (#202020) and on-surface-variant text color (#808080), used for secondary actions like 'Contact Us' or chat toggles. On hover, the background darkens to #333333. The button-tertiary is a transparent button with an underline (borderBottom: 2

Do's and Don'ts

**Do**

• Do use primary (#03e78b) exclusively for CTAs and primary interactive moments—it's the brand's signature accent and must remain distinctive.
• Do maintain the 50px gutter on desktop layouts and scale proportionally on mobile (24px) to preserve the breathing room that defines the brand.
• Do apply the full border-radius (9999px) to all primary buttons and CTAs to signal interactivity and maintain visual consistency.
• Do use Futura PT for headlines and display text to convey authority and creativity; reserve Soleil for body text to ensure readability.
• Do transition interactive elements with 200ms ease-in-out timing to provide smooth, professional feedback without feeling sluggish.
• Do layer shadows subtly (md elevation for cards, lg for modals) to create depth without overwhelming the clean aesthetic.

**Don't**

• Don't use secondary (#ff485f) or tertiary (#f8bb86) as primary CTAs—they dilute the brand's signature green and confuse interaction hierarchy.
• Don't apply border-radius greater than 1.5rem (rounded.xl) to cards or containers; it breaks the geometric clarity and feels overly playful.
• Don't use shadows heavier than lg elevation (0 8px 24px rgba(0, 0, 0, 0.12)) as it contradicts the minimalist aesthetic and creates visual clutter.
• Don't mix Futura PT and Soleil weights arbitrarily; use fontWeight 500 for Futura headlines and 300 for Soleil body to maintain the intended contrast.
• Don't reduce the gutter below 24px on mobile or 50px on desktop—the white-space is essential to the brand's confident, spacious feel.
• Don't apply color overlays or gradients to the primary green (#03e78b); it must remain pure and unmixed to preserve its distinctiveness and impact.