TSR Concrete Coatings

Overview

TSR Concrete Coatings is a direct-response, high-conversion B2C services brand built on the aesthetic of **Architectural Confidence**—a design philosophy that pairs bold, commanding typography with stark contrast and purposeful negative space to convey expertise, reliability, and immediate action. The brand serves homeowners and commercial property managers seeking premium concrete floor coatings installed in one day, and the UI evokes trust through a dark-to-light visual hierarchy that guides users from hero messaging to a prominent call-to-action. The emotional response is one of assured professionalism: the user feels they are in capable hands, and the interface removes friction between awareness and conversion.

The voice is direct, benefit-focused, and conversational without being casual. TSR speaks in concrete outcomes ("one-day installation," "60% off," "exceptional craftsmanship") rather than abstract features. Vocabulary leans on action verbs ("Get," "Explore," "Request") and specificity ("60 months," "free estimate") to build urgency and credibility. Example sentence in brand voice: "Get 60% off installation or 0% APR for 60 months—see if your ZIP qualifies."

Colors

The color system is built on a **high-contrast, trust-driven palette** where primary (pure black #000000) anchors dark sections and hero bands, while secondary (warm orange #dd7b35) acts as the accent that draws the eye to offers, promotions, and interactive elements. The primary color (#000000) dominates hero sections, navigation, and dark-background form containers, creating visual authority and legibility for white text. Secondary (#dd7b35) is reserved for promotional tiles, badges, and accent highlights—it appears in the promo-6060 explainer tiles and the animated radial glow in the quote-form-section-dark to signal urgency and brand personality. Tertiary (#16a34a) is used sparingly for success states and confirmations (e.g., "Offer Claimed" callout in green). Surface colors range from

Typography

The type system pairs **Oswald** (geometric, bold, all-caps-friendly) for headlines and display text with **Montserrat** (humanist, approachable) for body copy and labels. This pairing creates visual hierarchy through weight and family rather than size alone: Oswald's condensed letterforms and high x-height command attention at 76px (display), 48px (headline-lg), and 32px (headline-md), while Montserrat's open counters and generous spacing keep body text (18px, 16px) readable and friendly. Display text (76px, 800 weight, -0.04em letter-spacing) is used for hero H1s and major section headers; headline-lg (48px, 700 weight) for subsection titles; headline-md (32px, 700 weight) for card titles. Body-lg (18px, 400 weight) is used for hero copy and prominent callouts; body-md (16px, 400 weight)

Layout

The layout system uses a **12-column fluid grid** with a max-width of 1280px (--maxw: 1320px in CSS, accounting for padding). The page rhythm alternates between full-bleed hero sections (dark background, 0 padding), contained content sections (gutter: 24px on each side, md spacing: 24px between elements), and full-width dark form bands (quote-form-section-dark). Spacing is semantic: lg (40px) separates major sections; md (24px) separates cards and form groups; sm (12px) separates inline elements and list items. The hero uses a 2-column layout (text on left, image on right) at desktop, stacking to single column on mobile. Form sections use a 1-column layout for inputs, with 12px gaps between fields. Container max-width is enforced at 1280px for readability; beyond that, content centers with

Elevation & Depth

Depth is conveyed through **layered shadows and background stratification** rather than pure flatness. The elevation system defines three levels: Level 1 (Base) uses no shadow and sits on the surface color (#ffffff or #f3f5f7); Level 2 (Standard Card) applies box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), lifting the card 4px above the base; Level 3 (Elevated/Modal) applies box-shadow: 0 18px 50px -22px rgba(13, 22, 55, 0.45), creating a pronounced depth effect. Dark sections (quote-form-section-dark) layer four background images: a random photo (optional), a dark scrim (rgba(0, 0, 0, 0.55)), an

Shapes

The shape philosophy is **Architectural Sharpness with Functional Softness**—corners are slightly rounded to soften the industrial aesthetic of concrete, but not so rounded as to feel playful or casual. Buttons use border-radius: 6px (--radius: 6px), creating a subtle, professional corner that reads as modern without being trendy. Cards and larger containers use border-radius: 14px (--radius-lg: 14px), providing a more generous curve that signals approachability while maintaining the bold, confident aesthetic. Form inputs use border-radius: 0px (sharp corners) to emphasize precision and data e

Components

Action Elements **Button-Primary** (CTA) uses backgroundColor: {colors.primary} (#000000), textColor: {colors.on-primary} (#ffffff), padding: 14px 28px, height: 48px, border-radius: 6px, font-size: 18px, font-weight: 700. On hover, backgroundColor shifts to {colors.primary-container} (#1f1f1f), transform: translateY(-2px), and box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.3) applies over 0.2s ease. Focus state adds outline: 2px solid {colors.primary}, outline-offset: 3px. **Button-Secondary** uses backgroundColor: transparent, textColor: {colors.primary}, border: 1px solid {colors.outline}, padding: 12px 24px, height: 48px, font-size: 14px, font-weight: 700. Hover state changes backgroundColor to {colors.surface-container-high} (#e4e7eb) and borderColor to {colors.primary}. Transition ti

Do's and Don'ts

**Do**

• Do use Oswald for all headlines and display text—its geometric, condensed letterforms command attention and reinforce the brand's architectural confidence.
• Do apply the secondary accent (#dd7b35) sparingly and strategically: promo tiles, badges, and the radial glow in dark sections. Overuse dilutes urgency.
• Do maintain at least 24px (md spacing) between major sections and 12px (sm spacing) between inline elements to preserve visual breathing room and guide the eye.
• Do use pure black (#000000) for primary CTAs and dark hero sections; it creates maximum contrast and signals authority without feeling cold.
• Do apply box-shadow: 0 18px 50px -22px rgba(13, 22, 55, 0.45) to elevated cards to create depth without visual noise.
• Do use color-mix(in srgb, #dd7b35 X%, #0d1418) on dark backgrounds to blend the secondary accent into the dark base, ensuring WCAG AA contrast.

**Don't**

• Don't use Montserrat for headlines—it lacks the visual weight and condensed letterforms needed to command attention at display sizes.
• Don't apply border-radius greater than 14px to cards or containers; it softens the architectural confidence and reads as casual or playful.
• Don't use the secondary accent (#dd7b35) as a background color for body text or large surfaces; reserve it for interactive elements, badges, and accent glows.
• Don't apply shadows to elements on dark backgrounds (quote-form-section-dark); use color-mix() and border-color instead to maintain visual clarity.
• Don't reduce letter-spacing below -0.04em on display text or increase it above 0.14em on labels; it disrupts the carefully calibrated hierarchy.
• Don't use opacity or transparency for text on photographic backgrounds without a text-shadow; apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to maintain legibility.