No Limit Turf · Design System Showcase

Grass green. Chartreuse hover. Sage body.

A full kit-of-parts extracted from nolimitturf.com — real CSS tokens, real product photography, the real PNG wordmark. Lato single-family typography on the discipline-only 5-hex palette: grass #5aa501, lightning chartreuse #dceb38, sage body text #606c61, near-black ground, white surface. The register is direct-supplier confidence — Phoenix Valley's "cut out the middleman, skip the markup" synthetic-turf brand.

Sourcenolimitturf.com
TypeLato 100/300/400/700/900
Brand#5aa501
Captured2026-05-11
Coverage9 SKUs · Valley-wide · $65 flat delivery
Four doors into the system

Reference. Catalog. Demo. Source.

Each file does one job. Open the reference for the kitchen-sink, the catalog for every section pattern in No Limit Turf's voice, the demo pages for full compositions, or the spec for the source-of-truth narrative.

01 · Reference

Design System

Every color, font, button, card, field-stripe, and component documented from the live theme's CSS. The kitchen-sink — everything you can build with.

Open the reference 02 · Catalog

Sections

Every section pattern from the universal catalog rendered in No Limit Turf's voice — audience tiles, product gallery, expertise matrix, before/after slider, delivery strip, value-tile row.

Browse the catalog 03 · Demo

Pages

Full-page compositions: flagship homepage, plus three audience landings (homeowners, contractors, commercial) — each composed only from _shared.css tokens and the catalog patterns.

See the pages 04 · Source

Brand Spec

The markdown source-of-truth: voice anchors verbatim from the live site, color tokens with semantic mapping, signature patterns, forbidden moves, and the five mood keywords. Read it before you change anything.

Read the spec
At a glance

What's in this kit.

One CSS file, one brand spec, eight HTML pages, ten brand assets. The CSS is the source of truth; the pages are the receipts.

Files in this kit

_shared.css All tokens, all components. Imports Lato 100/300/400/700/900 from Google Fonts. Edit only here — the demo pages reference these classes.
brand-spec.md Source-of-truth narrative. Voice anchors, signature patterns, color extraction notes, forbidden moves, mood keywords. Read this first.
palettes.json Color tokens in machine-readable form. The default No Limit Turf grass + chartreuse + sage palette.
index.html This page. System overview + at-a-glance.
design-system.html Token + component reference. Every color, font, button, card visible.
sections.html Pattern catalog. Every reusable block rendered in No Limit Turf's voice with real copy.
homepage.html Flagship homepage demo. Photo hero, audience tiles, before/after slider, value tiles, product gallery, testimonials, CTA band.
landing-1-homeowners.html Homeowner landing. Why turf, value tiles, 9-SKU grid, install paths, pricing, before/after, FAQ.
landing-2-contractors.html Contractor landing. Trade account, bulk pricing, expertise matrix of SKU specs, coverage zones.
landing-3-commercial.html Commercial landing. Vertical-fit tiles, category examples, commercial specs, proposal request.
pages.html Gallery picker linking to every page in this kit.
assets/no-limit-turf-brand/ The wordmark PNG, ten real product/install photos from the live brand CDN, and the canonical before/after pair.

Quick characterizations

Vibe
Direct supplier-confident energy. A "Costco of turf" register — limited curated SKUs, transparent pricing, value through cutting out the middleman. The grass-green and chartreuse palette over sage body text makes it feel landscape-aligned without going stock.
Audience
Three tracks, equal weight: Homeowners (B2C residential, default register), Contractors (B2B trade — bulk pricing, will-call), Commercial (B2B end-buyer — schools, multi-family, hospitality). Phoenix Valley geography.
Voice anchors (verbatim)
"Elevate Your Landscape."
"NO LIMIT TO THE POSSIBILITIES."
"Cut Out the Middle Man, Skip the Markup."
"PICTURE PERFECT, YEAR ROUND."
"Say goodbye to / Say hello to."
Forbidden
No purple gradients. No neutral gray for body text — sage is the signature. No Lato Regular 400 for body — Light 300. No emoji-as-icon. No mascot, cartoon, hand-drawn illustration. No before/after overuse. No fake stats ("over 1,000 yards installed"). No "as featured in" press logos.
Mood keywords
Direct Supplier-confident Photo-led Grass-and-chartreuse Uppercase