Back to Portal
Strategy & Planning

Design System

Brand colors, typography direction, component recommendations, and the changes we suggest for a cohesive Streamline identity that signals professional authority.

Brand positioning direction

Streamline Pet Solutions sits at the intersection of professional operations and the warmth of animal care. The visual system needs to do two things simultaneously: communicate that this is serious business infrastructure (for the B2B sale) while feeling approachable and purpose-built for the grooming world (for the direct consumer sale).

The current site uses generic light-blue and white — neutral enough to not offend, but also not memorable. The direction below builds a more distinctive system around a warm forest green primary (professional authority), deep cream neutrals (warmth, approachability), and a gold accent (premium positioning, expertise).

Proposed color system

Forest — primary
#2D5016
Buttons, headings, brand anchors
Fern — secondary
#4A7C26
Hover states, secondary CTAs
Harvest — accent
#C9A227
Price highlights, badges, icons
Cream — background
#F8F3E8
Page backgrounds, warm sections
Ink — body
#1C1C1C
Body copy, headings on light
Why not blue

The current site's blue reads as generic service-business default. MoeGo, Gingr, and DaySmart Pet all use blue. Green is the primary brand differentiator in grooming (the natural world, the dog's environment) and is currently unclaimed at the premium end. The gold accent creates a premium signal that commands higher price perception.

Typography direction

Two typefaces, clearly separated by role:

Display / Headlines — Fraunces (Optical Serif)
Streamline Your Operations,
Free Your Time.

Fraunces is a "wonky" display serif with warmth and personality. It reads as expert and approachable simultaneously — far from the stiff corporate serif. Free on Google Fonts.

Body / UI — IBM Plex Sans
Our grooming SOPs are built from 12 years of real operational experience across independent salons and mobile operations. Every procedure is cross-referenced, versioned, and ready for your team to use on day one.
AVAILABLE TOOLKITS · 16 SYSTEMS · FROM $1,495

What to change in WordPress

The site currently uses a generic system font stack. To implement the typography direction, these changes are needed in the Customizer or child theme:

Current
System font stack (Arial/Helvetica fallback)
Heading weight: bold (700), no optical sizing
Line height: 1.4 across all text
No display/body separation
Recommended
Fraunces for h1–h3; IBM Plex Sans for body/UI
Heading: opsz 72+ at large sizes for optical refinement
Body: 1.7; Headings: 1.1–1.15
Google Fonts embed, 2 calls max (performance)

Priority changes

ElementCurrent stateRecommendationPriority
Primary CTA color Generic blue (#007cba) Replace with Forest (#2D5016) P1 — This week
Logo / wordmark No visible logo on live site Add wordmark in Forest + Harvest combo P1 — This week
Price display Plain text, no visual weight Large Fraunces serif price + Harvest color P2 — Redesign
Hero headline font System font, heavy Fraunces, opsz 72, weight 700 P2 — Redesign
Background White throughout Cream (#F8F3E8) sections alternating with white P2 — Redesign
Product card design Plain WooCommerce default Custom card with category badge, SOP count, anchor CTA P3 — Phase 2
Favicon Default WordPress Streamline mark in Forest, 32x32 SVG P3 — Phase 2

Voice and tone

The current site copy reads as uncertain in places — hedging, explaining itself, qualifying the value. Streamline has earned authority from 12 years of operational experience. The copy should reflect that.

Current patterns to avoid
"Whether you're just starting out or scaling up..."
"Our resources are designed to help you..."
Excessive exclamation marks in headings
Vague testimonials ("This changed my business!")
Target voice patterns
"Stop reinventing the wheel." (direct, decisive)
"Built from 12 years running a grooming operation." (earned authority)
Specific claims: "150+ procedures, 12 categories."
Outcome-first: "Your team runs shifts without you."
Next step

The full website mockup (live in your portal) applies this design system to the homepage, shop page, and about page. View it to see the system in context before committing to the full redesign scope.