Design system
Hold The Line uses a dark, fire-tactical visual language within R3. Click any swatch to copy its CSS value. Tokens
are defined in hold-the-line.css on the .htl-site root.
Near-black surfaces, cream typography, and red as the operational accent. Gradients in the global body background use soft red glows — keep new UI consistent with these tokens.
Montserrat Variable for display and body — aligned with the main R3 site. Hero titles are uppercase with tight line height; subtitles use wide letter-spacing.
Hero title pattern
Hold The Line
Training Co.
Body · 1.0625rem / 1.65
Professional instruction for agencies that need realistic, field-credible preparation. 0123456789
Section heading pattern
Example section title
HTL layouts use rem-based gaps consistent with R3 (e.g. section padding clamp(2.5rem, 5vw, 3.75rem)).
Cards and UI chrome typically use 6px rounded corners (border-radius: 6px). Hero rules and small details may use 2px.
Production patterns: horizontal rule with red gradient, cards with hover border glow, links cream → red on hover.
htl-card
Hover to see border emphasis. CTA buttons use filled red on the live site.
Header and social previews use /images/htl/logos/htl.jpg. Watermark on pages is the same asset at low
opacity.
