Internal reference · not linked from the site
On Track brand guide
Colors, typography, components and content rules used to build the On Track Garage Door Solutions website. Use this page when adding or editing anything on the site.
01 · Color
Color palette
A dark, cool-tinted base with two blues sampled from the logo. The original electric blue (#1F4FFF) was only 3.6:1 against black, so it was split into Royal Blue for fills and Sky Blue for text on dark backgrounds.
Brand blues
Primary buttons, solid icon badges, fills. Main brand blue (from the logo).
White text 7.0:1 · AAAPrimary button hover state.
White text 5.7:1 · AAHeader utility bar, CTA gradient start, text on white buttons.
White text 12.7:1 · AAAAccent text: eyebrows, links, icons, highlighted heading words.
7.7:1 on Ink · AAALink hover and keyboard focus ring.
11.5:1 on Ink · AAANeutrals
Page background, form fields, inner cards.
Base colorCards and alternate section backgrounds.
Base colorHover states, raised captions.
Base colorDividers, card and chip outlines.
Decorative onlyHeadings, labels, emphasized copy.
17.8:1 on Ink · AAABody copy and paragraphs.
9.0:1 on Ink · AAAFine print, meta text, captions.
6.2:1 on Ink · AAText and icons on blue fills.
7.0:1 on Royal BlueSupporting colors
Footer background, a step darker than the page.
Base colorReview star ratings. Echoes the llama mascot.
10.9:1 on InkForm input borders (hover: Subtle, focus: Sky Blue).
3.8:1 on Surface · meets 3:1 UIBackground. Text #B7F0CB, border #2E7D4F.
Text 11.9:1Background. Text #FFC9CF, border #8B2C36.
Text 12.1:1Call-to-action band background. White text throughout.
White text ≥7.0:1All tokens live in Elementor → Site Settings → Variables (prefixed ot-). The older kit swatches Background-Black, Blue-Main, Blue-Secondary, Silver and White were updated to match Ink, Royal Blue, Sky Blue, Muted and White.
02 · Typography
Type system
Two Google Fonts from the same family. Big, bold, uppercase headings contrast with relaxed, readable body text. Sizes are listed desktop / tablet / mobile.
Headings & UI
Barlow Semi Condensed Weights 700 / 800 · italic for highlightsHeadings, eyebrows, buttons, nav, labels, phone numbers. Token: var(--ot-font-heading). Chosen to echo the condensed italic “ON TRACK” in the logo.
ABCDEFGHIJKLM 0123456789Body copy
Barlow Weight 400 · bold 700 for inline emphasisParagraphs, lists, form inputs, captions. Token: var(--ot-font-body). Same family as the original site, highly legible at small sizes.
Aa Bb Cc Dd Ee Ff Gg 0123456789Highlighted words in headings
Request a call back
Wrap the words in <em> inside an H1–H3. Site CSS turns them italic Sky Blue, echoing the italic logo. (A span with a class gets stripped by Elementor, so always use <em>.) Use once per heading at most. Write headings in sentence case in the editor; the uppercase is applied by CSS so screen readers read them normally.
03 · Buttons & links
Buttons & links
Every button combines the base class ot-btn with one variant. Labels are short, action-first and uppercase.
04 · Components
Components & global parts
Reusable building blocks. Edit global parts and components once and every page updates.
ot-card: Surface fill, 1px Border, 12px radius, 32px padding (24px on mobile).
Tinted (ot-icon-badge, 56px) for value props. Solid Royal Blue for service cards. Round for phone links. Icons: Font Awesome 5 Solid via the Elementor icon library.
Check list item: Sky Blue check-circle icon
Pills use a 999px radius. Check lists use fa-check-circle. Review stars use Star Gold.
Global parts
Sticky. Deep Blue utility bar (hidden on mobile), logo, WordPress Main Menu, phone link, Schedule Service button. Menu collapses to a burger at ≤1024px.
Logo, blurb, license badge and placeholder license line, Explore + Services links, contact column, auto-updating © year.
Blue gradient call-to-action. Per-page overrides: Eyebrow, Heading, Text. Used on Home, Services, About, Service Areas.
One featured review plus four cards. Currently sample content for client preview.
Body font and colors, link colors and site-wide custom CSS (sticky header, focus rings, heading <em> style). Always save the full settings set: partial updates wipe the rest.
05 · Layout
Layout & spacing
Max width 74rem (1184px), centered. Side padding 1.5rem (1.25rem on mobile).
Vertical padding 6.5rem desktop · 5rem tablet · 3.75rem mobile (class ot-section). Alternate backgrounds between Ink and Surface (ot-section-alt).
Mobile ≤767px · Tablet ≤1024px · Desktop above. Grids drop 4 → 2 → 1 columns. Split layouts stack at tablet.
Cards 1.5rem (1.25rem mobile). Split layouts 4–5rem between columns. Stacks 1–1.5rem.
Buttons 6px · inputs 8px · cards 12px · large images and panels 16px · pills 999px · avatars and phone icons circular.
Photos: 0 30px 60px rgba(0,0,0,.45). Blue badges: 0 10px 24px rgba(30,75,210,.35). The mascot gets a soft drop-shadow.
Real service photos, 4:3 crops with object-fit: cover and 16px radius. Hero uses the sunset garage photo with a dark left-to-right gradient for text contrast.
Kept minimal: 0.15–0.2s color and border transitions, cards lift 4px on hover. Smooth scrolling only when reduced motion is not requested.
06 · Voice & content
Voice & content
Friendly, plain-spoken and confident, like a neighbor who happens to be a pro. Short sentences, no jargon, no hard sell.
On Track Garage Door Solutions (first mention) · On Track (after). The logo wordmark is uppercase; in copy, write “On Track”.
Phone: 505-818-2600, linked as tel:+15058182600.
No street address: service-area business.
The llama mascot (“No Probllama”) adds personality. Use it once per page at most, never in place of real information. Use the “back on track” wordplay sparingly: hero, how-it-works and the CTA.
Locally owned & operated in New Mexico
Licensed, insured & background-checked
Same-day service available for most repairs
Upfront pricing, no hidden fees
Fully stocked trucks: most repairs on the spot
Own and manufacturer warranties honored
Openers and controls for all major brands
24/7 or emergency service promises
Years-in-business or job-count numbers
Ratings, review counts or “#1” claims
Pricing figures or discounts
A street address
Service areas (15): Albuquerque, Bernalillo, Rio Rancho, Corrales, Los Ranchos, Santa Fe, Los Lunas, Belen, Cedar Crest, Sandia Park, Placitas, Tijeras, Edgewood, Algodones, Bosque Farms. Grouped as Albuquerque Metro, North of Albuquerque, East Mountains and Valencia County.
07 · Accessibility
Accessibility rules
Body text ≥ 4.5:1 contrast (actual minimum 5.8:1). UI borders ≥ 3:1.
Visible focus ring on every interactive element: 3px Sky Light outline, 3px offset.
One H1 per page. Heading levels go in order (H1 → H2 → H3). Visual size comes from classes, not the tag.
Each page's root container is <main id="content"> so the skip link works.
Form labels connect to inputs: the label's input-id matches the input's ID.
Icon-only links need visually hidden text (see the mobile phone button in the header).
Write alt text in the Media Library. Decorative images and icons stay silent.
Launch build: axe-core audit (WCAG 2.1 A/AA + best practices) shows 0 violations at desktop and mobile.
08 · Assets
Logo, mascot & imagery
Use the logo on dark backgrounds only, with clear space at least the height of the “ON TRACK” wordmark. Minimum width 116px (mobile header); 152px in the desktop header.
Logo · media 229 (WebP)
Mascot · media 231
Site icon / favicon · media 236
Photos: sunset hero 230 · torsion spring 232 · new installation 233 · opener 234 · maintenance 235. All WebP with alt text set in the Media Library. Original Wix files are the source; the earlier AVIF uploads (62, 66, 79) are unused.