Sprout Marketing

Overview

Sprout Marketing is a B2B marketing agency brand system rooted in organic growth metaphors and professional expertise. The design language combines a distinctive sage-green primary accent (#a9b95b) with clean, spacious layouts and the geometric precision of Gotham typography to convey both approachability and authority. The brand evokes the feeling of cultivated growth—deliberate, measured, and grounded in two decades of proven results. The UI prioritizes clarity and breathing room, with generous whitespace (24px gutters, 40px section separation) that reflects the agency's confidence and client-focused methodology. Voice: direct, grounded, results-oriented. The brand speaks in concrete outcomes, not aspirations. Example sentence: 'We've grown client revenue by 34% in 18 months through strategic positioning and disciplined execution.'

Colors

The Sprout Marketing color system centers on a warm sage-green primary (#a9b95b) that appears on all call-to-action buttons, active navigation states, and key interactive elements. This accent is paired with a supporting secondary green (#b8c578) used for hover states and secondary accents, creating a cohesive, nature-inspired palette without feeling whimsical. The surface stack is anchored in pure white (#ffffff) for maximum clarity and professional presentation, with a carefully calibrated gray hierarchy: surface-container-high (#dddddd) for subtle dividers and borders, surface-container (#e8e8e8) for secondary backgrounds, and on-surface (#333333) for body text at 16px/400 weight. Error states use a muted red (#a94442) reserved for validation and alerts. The tertiary teal (#2eb79f) is u

Typography

The typography system is built on Gotham (loaded via Adobe Typekit), a geometric sans-serif that conveys both precision and warmth. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements with commanding presence. Headline-lg (40px, 700 weight) is used for page titles and section headers, while headline-md (28px, 600 weight) breaks content into digestible chunks. Body-lg (18px, 400 weight, 28px line-height) is reserved for introductory paragraphs and callout text; body-md (16px, 400 weight, 24px line-height) serves as the default paragraph weight. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text, form labels, and navigation items to maintain visual hierarchy without introducing new typefaces. All headings use -0.02em to -0.04em negat

Layout

The layout system uses a 12-column grid with a 1280px max-width container, centered with 24px horizontal gutters on desktop and 12px on mobile. Section separation follows a consistent 40px (lg spacing) rhythm vertically, creating visual breathing room that reinforces the brand's confidence and clarity. Cards and content blocks use 24px (md spacing) internal padding, with 12px (sm spacing) between nested elements. The hero section spans full viewport height with a photographic background (nature/growth imagery) overlaid with a semi-transparent dark gradient (rgba(0,0,0,0.3)) to ensure text legibility; primary CTA buttons sit 24px below the headline. Navigation occupies a fixed 80px header with 24px horizontal padding, logo centered or left-aligned depending on viewport. All container widths

Elevation & Depth

Elevation in Sprout Marketing is achieved through subtle, restrained shadows that maintain the clean, professional aesthetic. Level 1 (Base): no shadow; flat surfaces on the white background. Level 2 (Cards, inputs, standard containers): box-shadow: 0 1px 2px rgba(0,0,0,0.06), creating a barely perceptible lift. Level 3 (Modals, dropdowns, elevated cards on hover): box-shadow: 0 4px 12px rgba(0,0,0,0.08), introducing a 4px blur radius and 12px spread to suggest depth without drama. Level 4 (Reserved for future use, e.g., floating action buttons): box-shadow: 0 16px 40px rgba(0,0,0,0.12). All s

Shapes

The shape language is 'Soft-Technical'—combining geometric precision with subtle warmth. Buttons use 1rem (16px) border-radius on primary and secondary actions, creating a slightly rounded rectangle that feels modern without appearing playful. Input fields and form elements use 0.5rem (8px) border-radius for a tighter, more utilitarian appearance. Cards and content containers use 0.75rem (12px) border-radius as a middle ground, balancing approachability with professionalism. The logo and badge elements use 9999px (full) border-radius for pill-shaped containers. This graduated radius scale refl

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use the sage-green background (#a9b95b) with white text, 15px vertical and 25px horizontal padding, and 1rem border-radius. On hover (button-primary-hover), the background shifts to the primary-fixed-dim (#b8c578), a slightly lighter green, with a 200ms ease-in-out transition. On focus, a 2px solid outline in primary (#a9b95b) appears 2px outside the button boundary, meeting WCAG AAA focus visibility standards. Secondary buttons (button-secondary) use a transparent background with a 2px border in primary, white text, and the same padding/radius as primary buttons; on hover, the background fills with surface-container-high (#dddddd) while the border remains primary. All buttons use Gotham at 14

Do's and Don'ts

**Do**

• Do use the sage-green primary (#a9b95b) exclusively on CTAs, active states, and key interactive elements—never on backgrounds or body text.
• Do maintain 24px gutters and 40px section separation vertically to preserve the spacious, confident brand feel.
• Do apply Gotham at 700 weight for all headlines and 600 weight for labels and button text; never use lighter than 400 for body copy.
• Do use the gray surface stack (#f4f4f4 to #cccccc) for subtle visual hierarchy; avoid pure black (#000000) for backgrounds or pure white for text on white.
• Do transition all interactive states over 150–200ms using ease-in-out timing; never apply instant color changes.
• Do apply focus outlines (2px solid primary, 2px offset) on all interactive elements for keyboard navigation accessibility.

**Don't**

• Don't use the secondary green (#b8c578) on primary CTAs; reserve it for hover states and secondary accents only.
• Don't reduce padding below 12px (sm spacing) or section separation below 24px (md spacing); whitespace is a brand asset.
• Don't mix typefaces; Gotham is the sole brand typeface—no fallbacks to system fonts or serif alternatives.
• Don't apply shadows stronger than 0 16px 40px rgba(0,0,0,0.12); the brand aesthetic is clean and minimal, not dramatic.
• Don't use the tertiary teal (#2eb79f) for primary actions or backgrounds; it's reserved for status indicators and success states.
• Don't apply border-radius tighter than 0.5rem (8px) on buttons or looser than 1.5rem (24px) on any component; maintain the graduated radius scale.