No Limit Turf — Design System Reference

01 · Color

Five hex values. Discipline first.

The brand is locked at five canonical hexes — grass, lightning, sage, near-black, white. Derived darker/lighter variants for hover and surface tints, but the core five are immutable. Sage is body text, not gray. Lightning is the border + hover-on-dark accent.

Canonical five

Grass

#5aa501 · --brand

Lightning

#dceb38 · --lightning

Sage

#606c61 · --sage (body text)

Ink Deep

#0a0a0a · --ink-deep

White

#ffffff · --bg

Grass ladder (brand-deep → tint)

Brand Deeper

#2f5601

Brand Deep

#468001 · hover

Brand

#5aa501

Brand Soft

#7ac42a

Brand Pale

#e7f5d5

Brand Tint

#f4faea

Lightning family

Lightning Deep

#b8c526

Lightning

#dceb38

Lightning Soft

#ebf28f

Sage family (body text)

Sage Deep

#485250

Sage

#606c61 · body

Sage Soft

#8a948b

Ink ladder

Ink Pure

#000000

Ink Deep

#0a0a0a · page-dark

Ink Soft

#2a2a2a

Ink Mid

#555555

Surfaces

BG

#ffffff

BG Soft

#f7faf2

BG Warm

#f4faea

BG Sage

#606c61 · panel

BG Dark

#0a0a0a · page-dark

Surface Gray

#f2f2f2

Signature gradients

--grad-turf · linear-gradient(135deg, #5aa501 0%, #7ac42a 40%, #dceb38 100%)

Grass → soft grass → lightning. Used for hero footer rules, CTA-band glow, stat numbers.

--grad-hero-scrim · linear-gradient(180deg, transparent 35%, rgba(10,10,10,0.55) 75%, rgba(10,10,10,0.85) 100%)

Hero-photo scrim, 35% transparent at top fading to near-opaque at bottom. Keeps captions readable on photography.

--grad-field-fade · linear-gradient(180deg, #ffffff 0%, #f7faf2 100%)

White-to-pale-green field fade — used for section transitions on light grounds.

02 · Typography

Lato. One family. Five weights.

Single-typeface system. The defining moves: Lato Light 300 body in sage (most trades sites use 400+ in gray — this brand intentionally does not), Lato Black 900 H1 at 112px, and UPPERCASE H2/H3 baked into the type scale via text-transform: uppercase.

.display Lato 900 / clamp 44px–112px
line-height: 0.98
letter-spacing: -0.015em
Use: massive hero H1

Elevate Your Landscape.

.h1 Lato 900 / clamp 40px–80px
Use: page-hero (non-display)

Picture Perfect, Year Round.

.h2 Lato 900 / clamp 30px–40px
UPPERCASE + letter-spacing: 0.01em
Use: most section headings

No Limit to the Possibilities

.h3 Lato 400 / clamp 24px–40px
UPPERCASE + letter-spacing: 0.012em
Use: subsections, lighter weight than h2

Cut Out the Middle Man

.h4 Lato 700 / clamp 20px–32px
Title-case
Use: card titles

Skip the Markup

.h5 Lato 700 / 27px
Use: secondary card titles

Direct From the Manufacturer

.h6 Lato 700 / 21px
Use: small headers

Flat-fee delivery

.lede / body-lg Lato 300 / 21px / sage
line-height: 1.55
Use: hero ledes, intro paragraphs
SIGNATURE: Light weight in sage, not gray.

Direct from the manufacturer for quality without the markup. Cut to your exact dimensions, rolled, and delivered flat-fee anywhere in the Valley from $65.

.body-copy Lato 300 / 21px / sage
Use: long-form body

You get your pick of our extensive inventory — nine product lines from golf-quality Augusta International to pet-resistant Pet Play 90. We cut your roll to the exact dimensions you need so you're not paying for leftovers.

.meta Lato 300 / 14px / ink-mid
Use: card meta, captions

7925 E Ray Rd #125, Mesa, AZ 85212 · Open Mon–Sat

.eyebrow.with-bar Lato 700 / 12px / grass
UPPERCASE + letter-spacing: 0.18em
+ 28px grass bar prefix

Cut to deliver

.eyebrow.lightning Lato 700 / 12px / lightning-deep
UPPERCASE

Trade pricing

03 · Buttons

Ghost-then-filled is canonical.

The signature button is .btn-accent: 3px grass border, uppercase, transparent by default — fills solid green on hover with a single all 0.3s ease-in-out transition. That treatment is verbatim from the live site's defaults.css. Use .btn-accent-filled when you need a hero CTA that shouts louder, and .btn-lightning for chartreuse callouts on dark grounds.

.btn-accent Get a Quote Get a Quote Get a Quote canonical CTA

.btn-accent-filled Order Turf Order Turf Order Turf primary hero CTA

.btn-dark Visit Showroom Visit Showroom Visit Showroom

.btn-ghost Learn More Learn More Learn More

.btn-text Browse all 9 product lines →

.btn-lightning $65 Delivery $65 Delivery $65 Delivery

.btn-outline-light Call Us Call Us Call Us

The ghost-then-filled convention is the live theme's load-bearing button pattern: a.btn.btn-primary { background: transparent; border: 3px solid #5aa501; color: #5aa501; } with a hover state that swaps to solid green and white text. We honor it verbatim, then add .btn-accent-filled for the rare case where a primary CTA needs to be filled from the start (hero overlays, conversion bands).

04 · Field stripe

The signature 4px rule.

A short grass-green bar that sits above section eyebrows, marks the bottom of hero photos, and underlines emphasis blocks. Five variants: default, large, gradient, lightning, full-width. The "field stripe" name evokes a property-line marker.

.field-stripe
60×4px · grass

.field-stripe.lg
96×6px · grass

.field-stripe.grad
60×4px · grass→lightning

.field-stripe.lightning
60×4px · chartreuse

.field-stripe.center
auto-margin

.field-stripe.full
100%×4px · grass

05 · Wordmark pattern

Three words. Grass middle.

When the phrase "No Limit Turf" appears in body text, footer copy, or CTA labels, mark it up with <span class="wordmark">. The middle word ("LIMIT") is grass-green, framing words are ink. On dark grounds, add .on-dark to flip framing to white. Never use in display H1 headlines — only in body / footer / CTA copy.

No Limit Turf

Welcome to No Limit Turf, Phoenix Valley's direct-from-manufacturer turf supplier.

No Limit Turf

06 · Cards

Card. Audience-tile. Product-tile. Value-tile.

Cards share a 1px lightning-pale border, 8px corner radius, and a subtle hover-lift. The signature variations: audience-tile with a 4px grass top-border that swaps to lightning on hover, product-tile with paired close-up + scene photos in a 16:9 split, and value-tile with a 4px lightning top-border baked in.

.card (generic)

Mesa

Cut to deliver

We cut your roll to the exact dimensions you need so you're not paying for leftover turf.

Direct

From the manufacturer

Skip the middleman markup. We source direct and pass the savings through to you.

$65

Flat-fee delivery

Anywhere in the Valley for as low as $65, regardless of address.

.audience-tile · three-way route

Homeowners

Make your yard your own. Pick from nine product lines, get it cut to your dimensions, and we'll deliver flat-fee anywhere in the Valley.

I'm a homeowner →

Contractors

Trade pricing, will-call pickup, and cut-list ordering for your installs. Set up a trade account once and order by the roll.

I'm a contractor →

Commercial

Schools, multi-family, hospitality. Commercial-grade SKUs, bulk supply, and proposal-grade specs for your project.

I'm a commercial buyer →

.product-tile · close-up + scene pair

Residential

EVO 70 Lime

Bright lime tone · 70 oz face weight · soft underfoot

Golf · Putting

Augusta International

Golf-quality short pile · stimp-true · indoor or outdoor putting green

Residential

Lime 80

Vibrant lime · 80 oz face weight · UV-stabilized

.value-tile · lightning top-border

Direct From Manufacturer

We source straight from the mill — no distributors, no broker layers, no marked-up middlemen between you and the turf.

Cut to Deliver

Every roll is cut to your exact dimensions before it leaves the lot. You pay for what you need — nothing more.

No Leftovers

Cut-to-deliver means you don't end up with a half-roll in your garage. Less waste, less storage, less spend.

Flat-Fee Delivery

Anywhere in the Valley for as low as $65. No mileage gymnastics, no surcharges by zip code.

.bio-card · .case-card · .insight-card

NL

Showroom Lead

Mesa Showroom

Walk in, look at the rolls in person, and take samples home before you commit to a SKU.

Backyard install

Residential · pet-friendly

Pet Play 90 with reinforced backing for high-traffic dog runs.

Tip

Order by sketch, not by guess.

Send a rough sketch with longest and shortest dimensions — we'll calculate the cut list and confirm your roll plan before delivery.

.pricing-tier (with .featured "MOST ORDERED")

Entry

EVO 70 Lime

$2.85/ sq ft

Bright color, soft hand, residential-rated. The lowest face weight in the popular range.

Get a quote

Mid-range

No Limit 92

$3.65/ sq ft

92 oz face weight, dual-tone blade, our most-ordered residential SKU. Best balance of look and longevity.

Get a quote

Premium

Premium 104

$4.45/ sq ft

Top-of-the-line residential. 104 oz face weight, deepest pile, most natural blade memory.

Get a quote

07 · Chips & badges

Chips. Four variants.

Small uppercase pills. Default warm-cream, plus lightning (chartreuse fill), dark (ink ground with lightning text), and outline (sage text, transparent).

Mesa Showroom $65 Delivery Trade pricing Cut-to-deliver 9 product lines Will-call pickup

08 · Stats

Stat numbers.

Massive Lato Black numerals — grass by default, with an optional .num.grad variant that fills with the turf gradient via background-clip. Pair with an uppercase sage label.

9

Product lines

$65

Valley delivery

3

Install paths

09 · Testimonial

Testimonial card.

Display-weight quote, grass-colored opening mark, sage author meta. One per row in 3-up grids; one solo for hero-adjacent placement.

No Limit Turf was the easiest part of our whole backyard redo. We picked our SKU, gave them the dimensions, and the rolls showed up cut and ready.

DF

Dana Firth

Homeowner · Chandler

10 · Pullquote

Pullquote.

Display-weight blockquote with a 6px grass left rule. Max 24ch so it never reads like body copy — always emphatic, always brief.

Cut out the middle man. Skip the markup.

11 · Process steps

Numbered process.

Grass-circle step numbers with a hairline rule below each step. Add .lightning to a step-num to flip it to chartreuse for emphasis (e.g. the conversion step).

1

Pick your SKU

Browse the nine product lines. Order samples online or stop by the Mesa showroom to see and touch the rolls in person.

2

Send your dimensions

Submit your yard's longest and shortest dimensions. We'll calculate the cut list and confirm your roll plan.

3

We cut + deliver

Your roll is cut to spec at the lot and dropped flat-fee anywhere in the Valley from $65.

4

Install your way

DIY, hire your own contractor, or use one of our recommended installers. Three paths, same delivered roll.

12 · Expertise matrix

Nine product lines.

3×3 grid of the nine named SKUs. One cell each, with face weight and primary use. Hover background to warm-tint.

Augusta International

Golf-quality short pile · putting green

EVO 70 Lime

Bright lime · 70 oz · residential

EVO 70 Olive

Olive tone · 70 oz · residential

Pet Play 90

Pet-resistant · reinforced backing

Lime 80

Vibrant lime · 80 oz · UV-stable

No Limit 92

Dual-tone · 92 oz · most-ordered

Premium 104

Top-tier · 104 oz · deepest pile

Bermuda 92

Bermuda-grass mimic · 92 oz

Putting Green

Indoor/outdoor stimp-true · custom cut

13 · Service checklist

Checked list.

Grass checkmark + sage body. For "what's included" or "what we handle" enumerations.

Free roll-plan calculation from your dimensions
Cut-to-deliver at no extra charge per cut
Flat-fee delivery anywhere in the Valley from $65
Will-call pickup at the Mesa lot, Mon–Sat
Optional recommended-installer referral

14 · Coverage zones

Phoenix Valley coverage.

Pill grid of the eight cities the brand delivers to. Same flat $65 anywhere in the zone.

Mesa

Phoenix

Tempe

Gilbert

Chandler

Scottsdale

Queen Creek

Glendale

15 · Availability

Showroom hours.

Day-by-day open table. Hours below are typical retail hours — the live site doesn't publish a precise schedule so these are placeholders, replaced at sprinkle time.

Monday8am–5pm

Tuesday8am–5pm

Wednesday8am–5pm

Thursday8am–5pm

Friday8am–5pm

Saturday9am–3pm

SundayClosed

(typical retail hours · confirm with showroom at sprinkle time)

16 · CTA band

Full-width conversion band.

Dark ground with a grass-gradient sunrise glow in the top-right corner and a 4px gradient bottom rule. Display headline on the left, two CTAs on the right.

Ready when you are

Make your yard your own.

Pick a SKU, send your dimensions, and we'll deliver flat-fee.

Get a quote (602) 609-4575

17 · Delivery strip

Flat-fee delivery callout.

Slim dark band with a 4px lightning border-top. Lightning-yellow strong tag for the dollar figure, grass-soft em tag for the highlight phrase.

$65 FLAT-FEE DELIVERY · ANYWHERE IN THE VALLEY · CUT TO YOUR EXACT DIMENSIONS

18 · Before / After

The signature slider.

A 16:9 stacked pair with a lightning-yellow vertical divider and a circle handle. The caption pattern is verbatim: "Say goodbye to / Say hello to." Reserved for homepage + homeowner landing — overuse dilutes the punch.

Before After

brown patches picture-perfect, year round

19 · Footer

Full footer.

Dark ground with a 4px lightning border-top. Four columns: brand block + three link groups. Wordmark pattern in the closing copy. Address, phone, and showroom hours in the contact column.