Real CSS tokens grepped from `templates/dryad/css/custom.css` and `presets/preset9.css` on the live centimark.com Joomla site. Real production photography from CentiMark's `/images/2024` media library. Roboto + Montserrat free-Google type pairing as the live site loads them. Forty-two section patterns (canonical + signature) ready for the sprinkle pipeline.
Logo, color, typography, buttons, cards, shadows, photography, and the full token reference. Every value mapped 1:1 to a line in the live custom.css. The signature CentiMark moves documented inline.
Every canonical section pattern from the library — plus the CentiMark signature blocks: services-grid (hover-overlay tiles), sectors-grid, impact-stats, regional-offices, case-studies, safety-record, certifications, 24/7 emergency, safety-director, customer-testimonial, roof-systems, sig-cta-band, quote-form, warranty-seal, industries-nav, process-steps.
Four built pages composing only from `_shared.css` tokens: a Homepage, Services landing, Sectors landing, and Contact (request-a-quote / 24-hour emergency / regional offices) landing. Real CentiMark voice + photography.
Hero · intro · services-grid · image-text · impact-stats · sectors-grid · regional-offices · case-studies · testimonial · safety-record · CTA · footer.
Full services-grid + roof-systems (TPO/EPDM/SPF/Metal/BUR) + 5-step process + warranty seal + safety record. The "what we do" landing.
Industries-nav strip + 8-sector grid + sector-by-sector deep-dives (Retail / Manufacturing / Healthcare / Cold Storage) + case studies + certifications.
Three-paths value-prop card row + signature quote-form + 24/7 emergency promise + 100+ regional offices map + facility-manager FAQ.
Full markdown documentation: extracted color tokens, typography ramp, photography manifest, signature design moves, and section-pattern reframings for B2B commercial roofing.
The default is the extracted CentiMark sky-and-navy. Three alternates retest the system against industrial slate, hi-vis safety yellow, and a heritage rust palette — each preserving the dual-blue gradient logic via re-mapped CSS variables.