Tonic

Overview

Tonic is a Denver-based digital transformation consulting firm that embodies a philosophy of "Strategic Pragmatism"—the intersection of bold vision and executable delivery. The brand serves enterprise clients and ambitious mid-market companies seeking to modernize their digital infrastructure, build custom applications, and navigate complex technology landscapes. The aesthetic is clean, professional, and confident without being austere: a white canvas with deep navy (#282f44) anchoring the hierarchy, punctuated by a distinctive magenta-purple primary accent (#852066) that signals action, energy, and forward momentum. The UI evokes trust through clarity and precision—generous whitespace, well-proportioned typography, and purposeful color deployment create an atmosphere of competence and accessibility. The emotional response is one of calm confidence: users feel they are in capable hands, guided by a team that understands both the technical and business dimensions of transformation.

Tonic's voice is direct, measured, and grounded in outcomes. The brand avoids hype, jargon, and false urgency; instead, it speaks in concrete terms about impact, measurable results, and partnership. Vocabulary patterns emphasize action verbs ("build," "deliver," "transform"), stakeholder focus ("clients," "teams," "partners"), and tangible deliverables ("products," "platforms," "ecosystems"). The tone is collaborative and slightly formal—professional without coldness. Example sentence in brand voice: "We partner with you to design and build digital products that solve real business problems and s

Colors

The Tonic color system operates on a principle of "Purposeful Restraint," where a limited, high-contrast palette ensures clarity and guides user attention to critical actions. The primary color, #852066 (a rich magenta-purple), is reserved exclusively for interactive elements—primary call-to-action buttons, active links, focus states, and brand-critical highlights. This color appears on the "Contact" button (rgb(133, 32, 102) in computed styles), the hero section accent, and all primary CTAs throughout the site. On-primary text is pure white (#ffffff) for maximum contrast and legibility. The secondary color, #282f44 (a deep navy), serves as the dominant text color and structural anchor, appearing in headings, body copy, and the navigation bar. It conveys authority and stability without the

Typography

The Tonic type system pairs Poppins (a geometric, contemporary sans-serif) for headlines and display text with Libre Franklin (a humanist sans-serif with strong personality) for body and UI text. This pairing communicates modernity and approachability: Poppins brings energy and visual impact to headlines (50px, 700 weight for h1; 32px, 600 weight for h2), while Libre Franklin grounds longer-form content in readability and warmth (16px, 400 weight for body-md; 18px, 400 weight for body-lg). The type scale follows a 1.25x multiplier, creating clear visual hierarchy without excessive jumps. Display text (60px, 700 weight, -0.04em letter-spacing) is reserved for hero moments and major section breaks. Headline-lg (50px, 700 weight) anchors the hero section with a 30px rounded-right corner treat

Layout

Tonic employs a 12-column Bootstrap-based grid with a maximum container width of 1264px (set at the xxl breakpoint, 1441px+), ensuring content remains scannable and focused on large displays. The gutter width is 30px (15px left + right padding per column), providing generous breathing room between grid items. Page rhythm is established through semantic spacing: lg spacing (40px) separates major sections (hero, intro, services, footer), md spacing (24px) divides subsections and card groups, and sm spacing (12px) provides internal breathing within components. The hero section spans full-width with a background image overlay, containing a headline with a distinctive white background and 30px rounded-right corner—a branded shape that recurs in CTAs and featured content blocks. The intro sectio

Elevation & Depth

Tonic uses a subtle shadow system to create depth without visual heaviness, reflecting the brand's preference for clarity over drama. The elevation scale consists of three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for small UI elements like badges and input fields; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards, dropdowns, and modals; and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for elevated modals, popovers, and hover states. Cards default to md elevation with a 1px solid border at rgba(0, 0, 0, 0.06), creating a layered appearance without relying solely on shadow. On hover, cards transiti

Shapes

Tonic's shape philosophy is "Architectural Precision"—a balance between sharp, professional edges and subtle softness that prevents coldness. The rounded scale uses rem-based values for consistency: sm (0.25rem / 4px) for small UI elements like badges and input fields; DEFAULT (0.5rem / 8px) for buttons and standard containers; md (0.75rem / 12px) for cards and larger components; lg (1rem / 16px) for modals and elevated surfaces; xl (1.5rem / 24px) for hero sections and feature blocks; and full (9999px) for pill-shaped buttons and avatars. Buttons use DEFAULT (4px) border-radius, creating a su

Components

Action Elements Buttons are the primary interaction mechanism and use a two-tier system: primary (bg #852066, text white, 18px Libre Franklin 600 weight, padding 10px 24px, height 44px, border-radius 4px) for main CTAs like "Contact," and secondary (bg #282f44, text white, 16px Libre Franklin 600 weight, padding 8px 16px, height 40px, border-radius 4px) for supporting actions. Primary buttons transition to #471137 on hover with a 200ms ease-in-out timing, maintaining the accent family. Secondary buttons darken to #1a1f2e on hover. Both apply a 0.2rem focus ring at rgba(133, 32, 102, 0.25) when keyboard-focused. Disabled buttons reduce opacity to 50% and set cursor: not-allowed. Ghost buttons (transparent background, primary text, 4px border-radius) are used for tertiary actions, applyi