Sam's Mowing Hamilton

Overview

Sam's Mowing Hamilton is a local lawn care and property maintenance service built on a foundation of reliability, approachability, and genuine expertise. The brand serves residential and commercial clients across Hamilton, New Zealand, positioning itself as the friendly, professional alternative to impersonal landscaping chains. The aesthetic movement is 'Conversational Minimalism'—a design language that combines warm, earthy neutrals (#faf8f5 cream background, #231f20 near-black text) with a vibrant, energetic green primary (#27a745) that represents growth, vitality, and the outdoor work itself. The UI evokes trust through clarity and personality through tone: the interface feels like talking to a knowledgeable neighbor, not a corporate entity.

The brand voice is direct, honest, and occasionally playful. Vocabulary patterns include casual phrasing ('Right, listen up!'), rhetorical questions ('Do you do ______?'), and specific, actionable language ('Prices start from $50'). The personality is confident without being arrogant—Sam knows his work is good, and he's happy to prove it. Example sentence in brand voice: 'We'll get your lawn looking sharp, and we'll do it without the fuss.'

Colors

The color system balances a warm, inviting neutral palette with strategic accent colors that drive action and convey the outdoor, growth-focused nature of the business. The primary color, #27a745 (a medium, saturated green), is used exclusively for call-to-action buttons ('Call Sam', 'Get a Quote'), interactive states, and key brand moments. This green is not a pale, corporate green—it's vibrant enough to feel energetic and alive, reflecting the vitality of healthy lawns and the energy of the work. Secondary accent is #df3131 (a warm, confident red), reserved for testimonials, highlights, and secondary CTAs that need distinction without competing with primary actions. The tertiary accent, #a97c50 (a warm earth brown), appears in supporting UI and reinforces the outdoor, natural aesthetic.

Typography

The type system uses a serif-and-sans pairing to communicate both professionalism and approachability. Display and headline levels (display, headline-lg, headline-md) use Georgia serif at weights 700, creating a traditional, trustworthy foundation—this is the voice of expertise. Body and label levels use Arial/Helvetica sans-serif at weights 400–600, ensuring clarity and modern readability on screen. The hierarchy is steep: display at 60px (68px line-height) for hero statements, headline-lg at 40px for section titles, headline-md at 28px for subsections, and body-md at 16px for standard paragraph text. Letter-spacing is tight on display levels (-0.04em) to create visual impact, and opens slightly on body text (0em) for comfortable reading. All text over busy backgrounds or illustrations sh

Layout

The page uses a 12-column grid system with a maximum container width of 1280px, centered with equal margins on desktop. The spacing scale is semantic: {spacing.unit} = 8px as the base increment, with {spacing.md} = 24px used for standard section gutters and card padding, {spacing.lg} = 40px for major section separation (e.g., between hero and testimonials), and {spacing.xl} = 64px for full-page rhythm breaks. The hero section spans full width with a cream background (#faf8f5) and uses asymmetric layout: text content (headline, subheading, CTAs) on the left occupies 6 columns, while the green lawn-mower illustration occupies the right 6 columns, creating visual balance and directing the eye toward the call-to-action buttons. White space is generous but purposeful—never more than {spacing.lg

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic drop-shadows. The elevation system uses three levels: Level 1 (Base, no shadow) for the main surface and background; Level 2 (Standard Card, {elevation.sm} = 0 1px 4px rgba(0, 0, 0, 0.06)) for cards, input fields, and standard interactive elements—this creates a barely-perceptible lift; Level 3 (Elevated/Hover, {elevation.md} = 0 4px 12px rgba(0, 0, 0, 0.08)) for modals, hovered cards, and focused inputs. The shadow blur radius increases with elevation (1px for sm, 4px for md, 8px for lg), and the spread is always 0px,

Shapes

The shape philosophy is 'Approachable Precision'—rounded corners are used consistently but conservatively, avoiding both harsh rectangles and excessive softness. Buttons use {rounded.lg} = 1rem (16px) border-radius, creating a friendly, modern appearance without feeling childish. Cards and input fields use {rounded.DEFAULT} = 0.5rem (8px) or {rounded.md} = 0.75rem (12px), providing subtle visual softness while maintaining a professional edge. The hero illustration (green lawn-mower silhouette) uses organic, flowing curves to contrast with the structured UI, reinforcing the natural, outdoor nat

Components

Action Elements Buttons are the primary interaction pattern. The primary button (button-primary) uses {colors.primary} (#27a745) background with white text, {rounded.lg} (16px radius), and 12px vertical / 24px horizontal padding, resulting in a 48px height. On hover, the background darkens to #1b5e20 (a 30% reduction in lightness), and the transition occurs over 200ms using cubic-bezier(0.4, 0, 0.2, 1) for a snappy, responsive feel. The secondary button (button-secondary) uses a transparent background with a 2px solid border in {colors.primary}, and the same text color; on hover, it fills with {colors.primary-container} (#c8e6c9, a very light green) while maintaining the border. Disabled buttons reduce opacity to 0.6 and use {colors.on-surface-variant} (#646464) text, signaling unavail

Do's and Don'ts

**Do**

• Do use the primary green (#27a745) exclusively for primary CTAs and interactive states—it's the brand's signature and should never be diluted or overused.
• Do maintain the cream background (#faf8f5) as the default surface; it's warm, inviting, and distinctly different from corporate white.
• Do apply the serif Georgia font to all headlines and display text—it signals expertise and trustworthiness, differentiating Sam's from generic service sites.
• Do use the spacing scale semantically: {spacing.md} for card padding, {spacing.lg} for section breaks, {spacing.gutter} for page margins.
• Do include the 'WINZ Approved Supplier' badge and testimonials prominently—social proof is critical for service businesses, and the design should celebrate it.
• Do keep shadows subtle ({elevation.sm} and {elevation.md} only); avoid dramatic drop-shadows that feel dated or overly skeuomorphic.

**Don't**

• Don't use the secondary red (#df3131) for primary CTAs—it's reserved for accents and secondary actions; using it on the main 'Call Sam' button would dilute the green's impact.
• Don't apply rounded corners > 1.5rem to buttons or cards—it reads as childish and undermines the professional, trustworthy tone.
• Don't use sans-serif fonts for headlines; the serif-and-sans pairing is intentional and critical to the brand's personality.
• Don't place text directly over the green lawn illustration without a text-shadow (0 2px 4px rgba(0, 0, 0, 0.15))—legibility will suffer.
• Don't exceed {spacing.lg} (40px) between major content sections; the page should feel cohesive, not sparse.
• Don't use the outline-variant color (#bfcdb5) for text; it's too light and will fail accessibility contrast ratios. Use it only for borders and dividers.