# No Limit Turf — Design System Spec > Source: nolimitturf.com (live site, captured 2026-05-11) > Stack: WordPress · custom theme `wp-content/themes/nolimit/` · Lato-only typography · Splide carousel > Built by Big Marlin Group (footer credit). All tokens grepped from the live theme CSS. > Asset completeness: **complete** (canonical palette in `defaults.css`, real product photography, real before/after pair, logo PNG). --- ## At-a-glance - **Business**: No Limit Turf — Phoenix Valley synthetic-turf supplier + installation broker - **What they actually do**: 1. **Cut-to-deliver supplier** — direct-from-manufacturer synthetic turf rolled and cut to homeowner spec, delivered flat-fee anywhere in the Valley from $65. The pitch is "skip the markup." 2. **Three-track install path** — DIY pickup, contractor-referred bulk supply, OR in-house "recommended installer" referral. 3. **9 product lines** — Augusta International (golf-quality), EVO 70 Lime, EVO 70 Olive, Pet Play 90, Lime 80, No Limit 92, Premium 104, Bermuda 92, plus playground / sports / gym / putting-green / rooftop SKUs. - **Geography**: Greater Phoenix Valley, Arizona. Showroom: **7925 E Ray Rd #125, Mesa, AZ 85212** (also listed as `8305 E Sebring Ave Ste #125, Mesa` elsewhere on the live site — flag for client to disambiguate). - **Phone**: (602) 609-4575 - **Audience tracks (three separate nav entries, treat as three audiences in the system)**: - **Homeowners** (B2C residential, default register) - **Contractors** (B2B trade — bulk pricing, will-call pickup) - **Commercial** (B2B end-buyer — schools, multi-family, hospitality) - **Voice anchors (verbatim from the live site)**: - *"Elevate Your Landscape"* - *"Direct from the manufacturer for quality without the markup"* - *"Make your yard your own!"* - *"You get your pick of our extensive inventory."* - *"NO LIMIT TO THE POSSIBILITIES"* - *"Cut Out the Middle Man, Skip the Markup"* - *"Our Cut-to-Deliver Model Avoids Leftover Turf"* - *"PICTURE PERFECT, YEAR ROUND"* - *"Say goodbye to / Say hello to"* (the canonical before/after caption pattern) - *"Flat Fee Delivery / Anywhere in the Valley For As Low As $65"* - **Register**: Direct, optimistic, **mid-priced supplier confidence**. Not luxury-landscape, not bargain-store — closer to a "Costco of turf" energy: limited curated SKUs, transparent pricing, **value through cutting out the middleman**. The all-caps display + light-weight body is the signature typographic gesture. --- ## 🎯 Core assets (one-class citizens) ### Logo - **File**: `assets/no-limit-turf-brand/logo-large.png` (451 × 208, ~14 KB) - **Note**: Only PNG available from the live CDN — no SVG vector source. The PNG is a wide stacked-wordmark "NO LIMIT TURF" with no separate iconic mark. - **Usage scenarios**: header (max 60-72px height), footer (full width), business card, vehicle wrap, t-shirt - **Variants needed for sprinkle**: a vector SVG redraw + dark-on-light + light-on-dark + favicon-mark + a separate iconic glyph (currently the brand is wordmark-only — for some sprinkle scenarios an iconic version would help). **TODO when a real client engagement starts**: request hi-res / vector logo from client. - **Honesty caveat**: 451px source is **below the 5-10-2-8 8/10 threshold for resolution**, but logo follows the "have-it = use-it" exception. We use it at small sizes only (≤ 90px wide), never upscaled. - **Forbidden**: never recolor the wordmark; never stretch; never put on busy patterned backgrounds without a solid scrim. ### Photography (curated per 5-10-2-8, scored) 10 hero/product candidates pulled, all from the live brand CDN. Scoring (resolution / copyright clarity / brand-mood fit / visual consistency / standalone narrative): | Asset | Resolution | Score | Role | |---|---|---|---| | `pet-hero.jpg` | 1920×980 | **9/10** | Pet-Friendly turf hero / landing background | | `install-yard-large.jpg` | 2048×1536 | **9/10** | Homeowner hero / install showcase | | `product-augusta.jpg` | 2000×962 | **9/10** | Augusta International product line (golf-quality) | | `product-evo60-installed.jpg` | 2000×961 | **9/10** | EVO 60 Lime — installed yard | | `product-lime80.jpg` | 2000×961 | **9/10** | Lime 80 product line | | `product-closeup-evo60.jpeg` | 2048×1536 | **9/10** | Blade texture macro — the "look how real this is" close-up | | `install-1.jpg` | 1536×906 | **8.5/10** | Install detail — backyard | | `install-2.jpg` | 1536×848 | **8.5/10** | Install detail — yard with feature | | `before-yard.jpg` | 792×421 | **7.5/10** | Before-image for the signature slider (moderate res but irreplaceable — canonical pair) | | `after-yard.jpg` | 792×421 | **7.5/10** | After-image for the slider (same caveat) | **Total: 10 candidates / 8 above 8.5, 2 = signature pair below threshold (used only in the before/after pattern at the size they were authored for).** **Honest framing rule**: photography is all owned brand assets (Big Marlin Group built the site for them). Use freely in this design system kit. --- ## 🎨 Color tokens (extracted verbatim from live `defaults.css`) The brand is **disciplined** — only 5 hex values across the entire theme. Live `:root` block: ```css --color-black: #0a0a0a /* near-black, not pure */ --color-white: #ffffff --color-sage: #606c61 /* muted gray-green, USED AS TEXT COLOR (signature) */ --color-grass: #5aa501 /* vivid grass green, CTA + accent */ --color-lightning: #dceb38 /* electric chartreuse-yellow, BORDER + HOVER (signature) */ ``` Live semantic assignments (verbatim): - `--text-color: var(--color-sage)` → all body copy in sage gray-green (not gray) - `--background-color: var(--color-white)` - `--secondary-background-color: var(--color-sage)` → sage panels - `--accent-color: var(--color-grass)` → green CTA borders + fills - `--border-color: var(--color-lightning)` → chartreuse borders → canonical token mapping in `_shared.css`: ``` /* PRIMARY */ --brand #5aa501 /* Grass — the CTA green */ --brand-deep #468001 /* derived darken — hover, emphasis */ --brand-soft #7ac42a /* derived lighten */ --brand-deeper #2f5601 /* deepest — emphasis */ --brand-pale #e7f5d5 /* derived pale — surface tint */ --brand-tint #f4faea /* paler — large background washes */ /* ACCENT */ --lightning #dceb38 /* canonical lightning chartreuse — border + hover */ --lightning-soft #ebf28f /* lighter — focus ring */ --lightning-deep #b8c526 /* darker — text on light, deep hover */ /* SAGE — used as body-text color, not surface gray */ --sage #606c61 --sage-soft #8a948b --sage-deep #485250 /* INK */ --ink-pure #000000 --ink-deep #0a0a0a /* live --color-black */ --ink #0a0a0a --ink-soft #2a2a2a --ink-mid #555555 /* BACKGROUNDS */ --bg #ffffff --bg-soft #f7faf2 /* derived pale-green surface */ --bg-warm #f4faea --bg-sage #606c61 /* sage panel ground */ --bg-dark #0a0a0a /* near-black ground (page-dark class) */ /* BORDER + RULE */ --border #e6ebd9 /* derived pale lightning */ --border-mid #cfd9a5 --rule #0a0a0a /* ALERT (off-brand, derived only) */ --alert #d33 /* never used in source — placeholder for warning states */ ``` **Signature gradient** (derive, not in source): for hero scrims and emphasis blocks, blend grass → lightning: ```css --grad-turf: linear-gradient(135deg, #5aa501 0%, #7ac42a 40%, #dceb38 100%); --grad-hero-scrim: linear-gradient(180deg, rgba(10,10,10,0) 35%, rgba(10,10,10,0.55) 75%, rgba(10,10,10,0.85) 100%); ``` --- ## ✏️ Typography (Lato single-family system, verbatim from live `defaults.css`) **Single-typeface system** — only Lato, loaded with weights **100 / 300 / 400 / 700 / 900** (italics in each weight). This is the same single-family discipline as Lightsource bp's Lato 300/400/700/900 — but used here for trades / supplier register rather than utility-solar editorial. → canonical mapping: ``` --font-display 'Lato', system-ui, sans-serif --font-body 'Lato', system-ui, sans-serif --font-mono ui-monospace, SFMono-Regular, Menlo, Consolas, monospace ``` Live type scale (desktop / mobile): | Token | Desktop | Mobile | Weight | Notes | |---|---|---|---|---| | h1 | **112px** | 58.67px | **900** | Massive display — only on heroes | | h2 | 40px | 30px | **900 + UPPERCASE** | The most-used heading size | | h3 | 40px | 26.67px | regular + UPPERCASE | Same size as h2 but lighter weight | | h4 | 32px | 24px | regular | | | h5 | 27px | 21.33px | regular | | | h6 | 21px | — | regular | | | body | 21px | 16px | **300 (Light)** | The signature lightweight body | | body-copy-2 | 16px | 16px | 300 | Secondary copy | **The defining typographic moves**: 1. **`font-weight: 300` (Light) for body copy** — most trades sites use 400+. This Light body against 900 Black display creates the brand's "confident-but-relaxed" feel. 2. **`text-transform: uppercase` on H2 and H3** — `text-transform: uppercase` is baked into `defaults.css` h2/h3. All-caps section headings are the visual rhythm. 3. **`color: var(--color-sage)` for body text** — body copy is NOT black or gray; it's sage gray-green. Reads warmer and more landscape-aligned without going visually loud. 4. **No letter-spacing tweaks in the source** — Lato's default tracking is used as-is. (We'll add a touch of -0.01em on H1/H2/H3 in our `_shared.css` for tightening, since 112px Lato Black benefits from it.) --- ## 🏗️ Site-specific patterns (signature visual moves) These get baked into `_shared.css` from the start. ### 1. Ghost-button → Filled-on-hover (the canonical CTA) From live CSS: ```css a.btn.btn-primary { background: transparent; border: 3px solid #5aa501; color: #5aa501; } a.btn.btn-primary:hover { background: #5aa501; color: #fff; } ``` **3px green border**, uppercase text, transparent by default, fills solid on hover. Single-direction transition (`all 0.3s ease-in-out`). This is the load-bearing button pattern. We promote to `.btn-accent` in the system, plus add a "filled by default" `.btn-accent-filled` variant for primary CTAs and a `.btn-lightning` variant for the chartreuse hover-state callout. ### 2. ALL-CAPS H2/H3 section headings Baked into `defaults.css` — every section title is uppercase Lato 900 or Lato 400. We add a `letter-spacing: 0.01em` because uppercase Lato benefits at large sizes. Pair with optional 4px grass underline (the "field stripe"). ### 3. Before/After swipe slider (the signature conversion pattern) The before/after pair with the canonical "Say goodbye to / Say hello to" caption pattern. The slider sits in the homepage hero second-fold. We render it as `.before-after` with a draggable divider handle. **This pattern is so on-brand it's reserved for the homepage and the homeowner landing only** — overusing it dilutes its punch. ### 4. Three-track audience tile (Homeowners / Contractors / Commercial) The nav itself splits three ways. Below the hero on the homepage, three large tiles route to the three audience tracks. Each tile = photo + headline + "I'm a ____ → " CTA. **Equal weight — no tile bigger than another.** Distinct accent color per tile (grass for homeowners / sage for contractors / black for commercial). ### 5. Product gallery with paired close-up + in-situ (Splide carousel) 8 named SKUs (Augusta / EVO 70 Lime / EVO 70 Olive / Pet Play 90 / Lime 80 / No Limit 92 / Premium 104 / Bermuda 92). Each gallery slide = paired close-up of blade texture + lifestyle install. The "two photos = one product" pattern. We render with `.product-tile` showing both photos stacked. ### 6. Flat-fee delivery callout band "FLAT FEE DELIVERY · ANYWHERE IN THE VALLEY FOR AS LOW AS $65" — distinctive trust-anchor pattern. Render as `.delivery-strip`: dark band, lightning border-top, grass `$65` highlight, full-width. ### 7. "Skip the Markup" value-prop tiles Three or four reasons: Direct-from-Manufacturer / Cut-to-Deliver / No Leftovers / Flat Delivery. Render as `.value-tiles` with a chartreuse top-border accent. These tiles use lightning `#dceb38` as a 4px top border — the rare "left border accent" anti-pattern legitimized by being in the brand spec. ### 8. Lightning chartreuse `#dceb38` as the hover-and-link-on-dark color On dark grounds (footer, hero scrim), hover state for any link is `--lightning`, not pure white. The live CSS has `.page-dark a:hover { color: var(--color-lightning); }` — we honor that. ### 9. Sage `#606c61` as body text (NOT gray) Most-distinctive choice. We do NOT override to gray. ### 10. Lato Black 900 H1 at clamp(58px, ...112px) — massive display The H1 is `112px / weight 900` on desktop. We use `clamp(2.75rem, 4.5vw + 1rem, 7rem)` so it scales with viewport without going small on tablets. --- ## 🚫 Forbidden / off-brand - ❌ No purple gradients, no neon teal, no AI-default purple-to-pink. The palette is locked at 5 hexes. - ❌ Never substitute the sage `#606c61` for a neutral gray — sage is the body-text signature. - ❌ Never use Lato Regular 400 for body — the brand uses Light 300. Use 400 only for medium-emphasis runs. - ❌ No emoji-as-icon. Use Lucide or Phosphor outline. - ❌ No "before/after" pattern overuse — once on homepage, once on homeowner landing. Multiple instances per page dilutes. - ❌ No mascot, cartoon character, or hand-drawn illustration — the brand is photo-led. - ❌ No fake stats ("over 1000 yards installed!"). The live site doesn't make numeric claims; we don't add them. - ❌ No "as featured in" press logos. - ❌ No carousel of stock home-services icons — every visual element earns its place via real product photos. --- ## ✅ Vibe / mood keywords (5) **Direct · supplier-confident · photo-led · grass-and-chartreuse · uppercase** If a design choice doesn't land in 3+ of those buckets, it's drifting. --- ## 🪞 Position in the design-systems library Slots into the **Commercial / services** group, tag `data-tags="trades"`. Differentiated against the existing trades systems: | System | Anchor | No Limit Turf differs by | |---|---|---| | `goettl` | Patriot trades HVAC w/ mascot | Photo-led not mascot-led; grass+chartreuse not flag+red | | `master-craftsmen` | Windows / doors dealer-marks | Cut-to-deliver supplier model, not authorized-dealer trust | | `mc` | Desert-modern editorial | Direct supplier voice, not premium-craftsmanship | | `centimark` | Commercial B2B roofing | Single-product not facility services; B2C-primary | | `horizon-fix` | Multi-trade home services sunrise | Single-trade specialist (turf only), photo-product-led, NOT optimistic-and-capable but supplier-confident | Best fit for: **synthetic turf installers, landscape suppliers, hardscape brokers, "cut out the middleman" supplier brands, regional B2C+B2B mixed-channel brands** with 3+ audience tracks, photo-product galleries, and a "direct from manufacturer" pitch. Also fits with adjustments: pool builders, sod/lawn-care companies, exterior paint suppliers, fencing brokers, any **regional materials-direct supplier** that splits audiences between homeowner / contractor / commercial.