A 57-year commercial-roofing identity, in tokens.
Distilled from centimark.com — real colors lifted from the live `templates/dryad` Joomla stylesheets, real production photography from CentiMark's `/images/2024` library, and the exact Roboto + Montserrat type pairing the live site loads via Google Fonts. Every token below has a one-to-one mapping with a value in the live site's stylesheet.
Logo
CentiMark's primary mark is the corporate wordmark + tagline lockup. Pulled directly from `centimark.com/images/cm-logo.png` (header) and `/images/2024/03/15/centimark-logo-footer-web.webp` (footer). The wordmark uses the corporate sky-blue `#3a95db` with a deep-navy accent. Logo max-width on the live site caps at 200px (custom.css L254). No public SVG variant exists; PNG is sufficient at 400×148 native.
Color
CentiMark's identity is dual-blue: sky-blue `#3a95db` (`--maincolor` from preset9.css — primary recognition, CTAs, links) plus deep-navy `#0054A0` (button-hover overlay, secondary fills, depth). The single warm-gold accent `#f5b335` is reserved for page-title H1s and emergency-response phone CTAs — never used as primary. This dual-blue identity is what differentiates CentiMark from every other commercial-roofer site, which typically use one navy.
Typography
Roboto for display + headings (matches `custom.css h1-h6 { font-family: 'Roboto' }`). Montserrat for body + UI (matches `custom.css body { font-family: 'Montserrat' }`). Both load directly from Google Fonts via `@import` in custom.css line 2 — no proprietary substitution needed. The pairing reads as: Roboto's geometric sans for authority + clarity at headlines, Montserrat's slightly humanist sans for comfortable readability at body sizes.
A single roof leak can cause havoc to your regular business operations, damage your equipment and inventory and put your employees at risk. Stay ahead of roof leaks by maintaining your commercial roof in its best shape possible.
Buttons
CentiMark's signature button is a 20px-radius solid pill with **font-weight 700, padding 20px 45px, Roboto** type (custom.css L131-176). The signature element is a `:before` pseudo-element pinned to the right edge — an 85px-wide deep-navy slab at 0.10 opacity that on hover expands to 100% width, opacity 1, scales to 1.5, and squares its corners (radius drops to 0). The visual reads as "a deep-navy wave fills the button from right to left." 500ms transition. Hover over each button below to see the move.
Cards · radius · shadow
Cards use the dominant 20px radius + the signature `0 0 15px 0 rgba(0,0,0,0.10)` SOFT HALO shadow (custom.css L851-857). The halo is RADIAL — not a tight directional drop like Montgomery's `0px 3px 6px`. CentiMark's cards float on the page, not above it. Article-style cards add an overhanging category chip pinned at `top: -22px` — a distinctive trades pattern.
TPO Roof Systems
Single-ply thermoplastic membrane — energy-efficient, weldable seams, ideal for low-slope commercial roofs.
Iconography
Icon-circle is the standard service/sector tile lead element — 76×76 brand-pale circle with the brand-blue stroke icon centered. Three variants: brand-pale (default), deep-navy (on white-card hover), gold-pale (for safety/emergency). All transitions use the 500ms easing.
Photography
Production commercial roofing photography — installed roof systems shot from above (drone), crews-on-roofs, emergency-response action, fleet/equipment, and sector-vertical illustrative tiles. The vertical-sector tiles are critical CentiMark trade-marketing assets — they appear repeatedly to navigate by industry. NO smiling-people stock. NO generic agency clichés.
Token reference
Every token defined in `_shared.css :root`, with hex values and the live custom.css line where each was extracted from. Use these in CSS, never hard-code colors or radii.
| Token | Value | Source / Usage |
|---|---|---|
--brand | #3a95db | preset9.css `--maincolor` · primary identity, CTAs, links, header pulse-dot |
--brand-deep | #0054A0 | custom.css L155 · button hover slab + secondary fills |
--accent-gold | #f5b335 | custom.css L515 · page-title H1 + 24/7 phone card |
--ink | #3d3d3d | custom.css L7 · body text |
--ink-deep | #312e2e | custom.css L62 · h1-h6 ink |
--ink-charcoal | #252525 | custom.css L444 · offcanvas + footer surface |
--radius-lg | 20px | DOMINANT · custom.css L131,855 · btn + card + header panel |
--radius | 10px | custom.css L376 · dropdown bottom corners + portfolio images |
--shadow-card | 0 0 15px 0 rgba(0,0,0,0.10) | custom.css L855 · article-list halo |
--shadow-soft | 0 0 60px 0 rgba(0,0,0,0.07) | custom.css L214 · sticky header halo |
--shadow-glow | 0px 0px 65px 0px rgba(0,0,0,0.10) | custom.css L380 · dropdown ambient glow |
--transition-base | 500ms | custom.css L25 · default duration on all interactive |
--blue-gradient | linear-gradient(135deg, #3a95db, #0054A0) | core sky-to-navy CentiMark identity gradient |
--container | 1200px | custom.css L1265 · section row max-width |
--font-display | 'Roboto', sans-serif | custom.css L62 · all headings + UI |
--font-body | 'Montserrat', sans-serif | custom.css L4 · body text |
Signature patterns
CentiMark-only patterns extending the canonical section catalog. Below: the impact-stats bar (57 yrs / 100 offices / 650 crews / 100% commercial) — a distinctive trades signature. See `sections.html` for the full catalog and `homepage.html` for live composition.
Built to keep your facility watertight.
Since 1968 we've been the largest commercial-only roofing contractor in North America. Numbers say it best.
57+
Years
Founded 1968, Canonsburg PA
100+
Offices
North America regional coverage
650+
Crews
Dedicated commercial roofing teams
100%
Commercial
Zero residential focus, ever