HeyTony

Overview

HeyTony is a digital marketing agency brand system built on **Technical Minimalism with Vibrant Accents**—a design philosophy that pairs austere dark surfaces with bold, saturated accent colors to convey expertise, precision, and forward momentum. The brand serves growth-focused businesses in Hamilton and beyond, positioning itself as a strategic partner that cuts through noise to deliver measurable results. The visual language evokes a tech-forward, no-nonsense aesthetic: dark charcoal (#202020) as the dominant canvas, crisp white typography (#f8f3f0), and a signature electric blue (#4b7fff) that appears on all primary CTAs, underlines, and interactive focus states. This creates a sense of clarity and confidence—the UI feels like a control panel for business growth.

The brand voice is direct, data-driven, and conversational. Vocabulary favors action verbs ("level up," "fuel," "identify") and concrete outcomes over abstract claims. The tone is confident without arrogance, technical without jargon. Example sentence in brand voice: "We identify the gaps your competitors miss—then we fill them with precision-targeted campaigns that move the needle."

Colors

The color system operates on a **high-contrast, accent-driven model** designed for clarity and visual hierarchy in a B2B SaaS-adjacent context. **Primary (#4b7fff)** is the brand's signature electric blue, used exclusively on call-to-action buttons, link underlines, focus states, and accent elements. It appears frequently but strategically—never as a background, always as an interactive signal. **Secondary (#ff6900)** is a warm, energetic orange reserved for highlights, badges, and secondary CTAs; it provides warmth against the cool blue and dark canvas. **Tertiary (#65bc7b)** is a muted sage green used for success states, positive feedback, and tertiary actions.

The surface stack anchors the dark theme: **surface (#202020)** is the page background, **surface-container (#1a1a1a)** is used

Typography

The type system centers on **Kumbh Sans**, a geometric sans-serif that conveys modernity and technical precision while remaining highly legible at all sizes. The hierarchy is aggressive and intentional: **display (96px, 800 weight)** is reserved for hero headlines and makes an immediate impact; **headline-lg (48px, 700 weight)** anchors section headers; **body-md (16px, 400 weight)** is the workhorse for body copy and maintains 24px line-height for comfortable reading. Letter-spacing is tight on display sizes (-0.02em) to create density and confidence, while body copy uses 0.02em to add breathing room. All interactive labels use **label-md (14px, 600 weight, 0.05em letter-spacing)** to ensure they feel distinct and clickable. On dark backgrounds, apply a subtle text-shadow (0 1px 2px rgba(

Layout

The layout system uses a **12-column grid with a 1280px max-width container**, centered on desktop with 24px gutters on each side. Mobile breakpoints collapse to single-column with 20px side padding. The spacing scale is semantic: **lg (40px)** separates major sections (hero to services, services to testimonials); **md (24px)** is used for card padding and component spacing; **sm (12px)** for internal component gaps (button padding, list item spacing). The page rhythm favors generous white space—sections are separated by at least 40px vertical space, creating visual breathing room and emphasizing the minimalist aesthetic. Container max-widths vary by section (some 1024px, some 1400px) but never exceed 1280px for readability. Hero sections use full-width backgrounds with a diagonal or curve

Elevation & Depth

Depth is achieved through **subtle layering and strategic shadows** rather than bright highlights. The elevation system has three levels: **Level 1 (Base)** is the flat dark surface (#202020) with no shadow; **Level 2 (Cards/Panels)** uses a soft shadow (0 3px 8px rgba(0, 0, 0, 0.15)) and a 1px border in outline-variant (#666666) to define separation; **Level 3 (Modals/Popovers)** uses a deeper shadow (0 15px 10px rgba(0, 0, 0, 0.7)) with a 2px border in primary (#4b7fff) to signal importance. Hover states on cards transition to Level 3 over 200ms, creating a subtle lift effect. No blur or gla

Shapes

The shape philosophy is **Geometric Precision with Minimal Softness**—a balance between technical sharpness and approachability. **Buttons and inputs** use 16px border-radius (rounded.lg), creating a subtle rounded rectangle that feels modern without being playful. **Cards and panels** use 16px radius as well, maintaining visual consistency. **Badges and pills** use full border-radius (9999px) to signal compactness and emphasis. **Dividers and accent lines** (like the underline under "digital marketing" in the hero) use 4px radius to soften hard edges while remaining geometric. The rationale:

Components

Action Elements **Buttons** come in two primary variants: **button-primary** (solid blue background, white text, 48px height, 12px vertical / 32px horizontal padding, 16px radius) for primary CTAs like "Get Started" or "Contact"; **button-secondary** (transparent background, blue text, 2px blue border, same dimensions) for secondary actions. Both use label-md typography (14px, 600 weight, 0.05em letter-spacing). Hover states transition the background color over 200ms—primary darkens to #3a63e6, secondary fills with rgba(75, 127, 255, 0.08). Active/pressed states use #1b4ecc. **Links** are unstyled by default (blue text, no underline) but gain a 2px bottom border on hover, transitioning over 150ms. All interactive elements have a minimum touch target of 44px × 44px.

Containers & Su

Do's and Don'ts

**Do**

• Do use primary blue (#4b7fff) exclusively for interactive elements—buttons, links, focus states, and accent underlines—to create a consistent visual language for "clickable."
• Do maintain high contrast between on-surface (#f8f3f0) and surface (#202020) for accessibility; aim for WCAG AA compliance (4.5:1 minimum for body text).
• Do apply 200ms transitions on hover/focus states using cubic-bezier(0.4, 0, 0.2, 1) easing to feel responsive without being jarring.
• Do use the full 12-column grid and respect 24px gutters; never nest containers without a clear hierarchy.
• Do pair Kumbh Sans weights deliberately: 400 for reading, 600+ for interaction, 700+ for hierarchy—no intermediate weights.

**Don't**

• Don't use secondary orange (#ff6900) or tertiary green (#65bc7b) on primary CTAs; reserve them for badges, secondary actions, and status indicators.
• Don't apply shadows to text; use text-shadow only on labels under 14px over busy backgrounds, and keep it subtle (0 1px 2px rgba(0, 0, 0, 0.3)).
• Don't mix border-radius values on similar components—buttons are 16px, cards are 16px, inputs are 8px; consistency is precision.
• Don't use pure white (#ffffff) for text; use on-surface (#f8f3f0) to reduce eye strain on dark backgrounds and add warmth.
• Don't animate opacity or scale on hover; use color transitions and shadow depth changes to signal interactivity without distraction.