Truespeed Internet Services

Overview

Truespeed Internet Services is a regional ISP brand that prioritizes local expertise, reliability, and transparent pricing for customers in Eastern Ontario and Quebec. The design system embodies a "Technical Trust" aesthetic—combining the authority and stability of deep navy foundations with vibrant cyan and emerald accents that signal innovation, speed, and human-centered service. The visual language is clean and modern, avoiding corporate sterility by grounding every interaction in concrete, local values: no hidden fees, no mandatory contracts, and a team that actually answers the phone. The emotional response is one of calm confidence: users feel they're in capable hands, supported by a brand that understands their region and their needs.

The brand voice is direct, honest, and conversational—never corporate jargon, never breathless hyperbole. Truespeed speaks in the language of its customers: practical, solution-focused, with a touch of regional pride. Vocabulary favors clarity over cleverness: "fast, reliable internet" not "blazing-fast connectivity solutions." Example sentence in brand voice: "We've been serving Brockville for 12 years because we believe internet should be simple, affordable, and backed by people who live here."

Colors

The Truespeed color system is built on a foundation of deep navy (#09112B, #111E45) that conveys stability, trust, and technical competence—the backbone of every hero section and dark-mode surface. This navy is never cold or distant; it's warmed by strategic accent colors that drive engagement and signal action. Primary blue (#1D4ED8) is the signature CTA color, used on all primary buttons, links, and interactive focus states; it appears in the header's "Check Availability" button and throughout forms. Secondary green (#047857) represents reliability and local service—deployed on secondary CTAs and service badges. Tertiary cyan (#0EA5E9) adds energy and modernity, used for stats, highlights, and accent borders on service cards. Light surfaces (#FFFFFF, #F8FAFF) provide breathing room and c

Typography

The type system pairs Sora (display, headlines, labels) with Plus Jakarta Sans (body, UI text), creating a hierarchy that balances personality with legibility. Sora's geometric, modern letterforms convey speed and precision—ideal for headlines like "Better Internet Starts Here" (52px, 800 weight, -0.03em tracking) and CTAs. Plus Jakarta Sans provides warm, approachable body text at 16px–18px with 1.65 line-height for comfortable reading on screens. Headlines use aggressive negative letter-spacing (-0.03em to -0.02em) to create visual impact and reinforce the brand's confident, no-nonsense tone. Labels and buttons are set in Sora at 12px–14px with 0.01em–0.05em positive tracking to ensure crispness at small sizes. All type is rendered with -webkit-font-smoothing: antialiased and -moz-osx-fo

Layout

The layout system uses a 12-column grid with a 1200px max-width container, maintaining consistent horizontal rhythm across all breakpoints. Sections are separated by 64px (lg spacing) vertically, creating clear visual breathing room without excessive whitespace. The hero section spans full-width with a 55/45 grid split (content left, availability checker right) to balance messaging with immediate conversion opportunity. Card grids use 3-column layouts on desktop (24px gap) that collapse to 2 columns at tablet and 1 column on mobile. Horizontal padding is consistently 24px (gutter) on all containers, scaling down to 16px on tablets and 12px on mobile. The topbar (6px padding), header (72px height), and footer (64px+ padding) establish fixed rhythm anchors. Spacing scale is semantic: xs (4px

Elevation & Depth

Depth is achieved through a layered shadow system that respects the brand's navy-tinted color palette. Level 1 (Base): no shadow; flat surfaces on white background. Level 2 (Standard Cards): 0 2px 8px rgba(9, 17, 43, 0.08)—subtle lift for cards, inputs, and default buttons. Level 3 (Elevated/Modals): 0 4px 20px rgba(9, 17, 43, 0.10)—used on hover states, floating elements, and secondary cards. Level 4 (Maximum Depth): 0 8px 32px rgba(9, 17, 43, 0.13)—reserved for modals, dropdowns, and prominent overlays. Dark-mode surfaces (window cards) use a stronger shadow: 0 4px 24px rgba(13, 21, 32, 0.4)

Shapes

The shape philosophy is "Geometric Warmth"—using consistent, moderate border-radius values that feel modern and approachable without the sterility of sharp corners or the softness of extreme rounding. Buttons and inputs use 12px radius (--ts-r-md), creating a friendly, slightly rounded square that's neither aggressive nor overly soft. Cards and containers use 16px radius (--ts-r-lg) for a more pronounced roundness that signals openness and accessibility. Modals and elevated surfaces use 24px radius (--ts-r-xl) to emphasize their prominence and create visual distinction. Small UI elements (badg

Components

Action Elements Buttons are the primary interaction mechanism and follow a strict hierarchy. Primary buttons (--ts-btn--green, background #047857, height 50px, padding 0 24px) are used for main CTAs like "Check Availability" and "Get Started." They use Sora 700 weight at 14px with 0.01em tracking. On hover, they shift to #10B981 and lift 2px (transform: translateY(-2px)) with elevation.md shadow. Secondary buttons (--ts-btn--outline-white, border 2px solid rgba(255,255,255,0.5), color white) are used in dark contexts (hero, CTA band) for alternative actions. Ghost buttons (--ts-btn--ghost, background transparent, color #1D4ED8) are used for tertiary actions and maintain the same 50px height for touch consistency. All buttons have a minimum 44px touch target and use transition: backgrou

Do's and Don'ts

**Do**

• Do use navy (#09112B) as the dominant background for hero sections and dark-mode surfaces to establish trust and authority.
• Do apply primary blue (#1D4ED8) exclusively to CTAs, links, and focus states—never use it for decorative elements or backgrounds.
• Do pair Sora headlines with Plus Jakarta Sans body text to create clear visual hierarchy and maintain readability at all sizes.
• Do maintain 24px gutters and 64px section spacing to create predictable, scannable page rhythm.
• Do use the shadow system (elevation.sm/md/lg) consistently—never hardcode shadows or use pure black (rgba(0,0,0,...)).
• Do apply 0.18s ease transitions to all interactive state changes (hover, focus, active) for smooth, responsive feedback.
• Do enforce 44px minimum touch targets on all buttons and interactive elements for mobile accessibility.
• Do use window cards with colored top borders to signal service categories (blue=internet, green=phone, purple=TV) at a glance.

**Don't**

• Don't use primary blue (#1D4ED8) for backgrounds, body text, or decorative elements—reserve it exclusively for interactive CTAs.
• Don't mix Sora and Plus Jakarta Sans weights arbitrarily; use Sora 700–800 for headlines/labels and Plus Jakarta Sans 400 for body.
• Don't apply shadows using pure black (0,0,0) or generic gray; always use navy-tinted rgba(9,17,43,...) to maintain brand warmth.
• Don't create custom border-radius values; use only the defined scale (8px, 12px, 16px, 24px, 9999px) to maintain visual consistency.
• Don't exceed 1200px container width or use asymmetric gutters; maintain the 12-column grid and 24px padding system.
• Don't use secondary green (#047857) for primary CTAs or primary blue for secondary actions—maintain strict color hierarchy.
• Don't animate state changes faster than 0.18s or slower than 0.3s; use only ease, ease-in-out, or cubic-bezier(0.18, 0, 0.82, 1).
• Don't remove focus outlines or rely on color alone for interactive states; always provide visible keyboard navigation indicators.