Design Library
Brand tokens, type specimens, UI components, and accessibility guidelines for Paved By Infiniti (Infiniti Seal Coating).
Logo Suite
All approved logo variants for Paved By Infiniti. Each variant has a specific use case — use the right one for the context.
Primary Logo
Full wordmark — the primary logo for all standard uses. Light or dark background as shown.
The following variations will be generated from the final logo once it's locked:
- Brandmark — Horizontal lockup for headers, footers, invoices
- Wordmark — Text-only "INFINITI SEAL COATING"
- Stacked Badge — Compact for signage, apparel, stamps
- Monogram "I" — Standalone copper letterform with ∞ sparkle
- Badge — Monogram in circle for watermarks, small placements
- Social — Profile pic (400×400), OG card (1200×630)
- Favicon — 48px, 32px, 16px
Each variant in: color, white, and dark versions.
Color Palette
Iron Copper palette — midnight navy, warm copper, and iron gray. Industrial, premium, grounded.
How colors pair in real UI contexts — all combinations below pass WCAG AA.
Typography
Oswald for bold industrial authority, Source Sans Pro for clean legibility.
Weights: 400 Regular · 500 Medium · 600 Semi-Bold · 700 Bold
Use for: Hero headings, section titles, stat numbers, nav items, buttons
Why: Condensed sans-serif with industrial authority. Bold, geometric, modern — communicates confidence without pretension. Perfect for a premium blue-collar brand.
Weights: 300 Light · 400 Regular · 600 Semi-Bold · 700 Bold + Italic
Use for: Body text, descriptions, labels, captions, form fields
Why: Humanist sans with excellent readability. Pairs naturally with Oswald — friendly but professional, no-nonsense.
Voice & Tone
How Paved By Infiniti speaks — direct, reliable, earned through 3rd-generation craft.
The Story
"Third generation. My grandfather sealed driveways, my father sealed driveways. I seal driveways. It's not a job — it's a standard."
— Sean Mitchell, Owner · Infiniti Seal Coating
Brand Voice
Paved By Infiniti is Sean — direct, reliable, and proud of the work. Not flashy. Not corporate. Earned through craft.
No fluff. Sean shows up, does the work, and stands behind it. Every word should reflect that. Short sentences. Active voice. Say what you mean.
Third-generation means something. This isn't a side hustle — it's a trade passed down through the family. Take pride in the details: prep work, materials, application technique.
Talk to homeowners, not contractors. Use language they understand — "your driveway," "curb appeal," "before winter hits." They care about their home, not industry specs.
500+ driveways. Columbus-based. 3rd generation. Licensed & insured. Let the facts speak — don't oversell. The track record IS the trust signal.
Tone Spectrum
The same voice adapts to context — warmer for storytelling, crisper for product info.
Do & Don't
- ✓ "Three generations of paving expertise — this is a family trade"
- ✓ "Sean applies two coats — never cuts corners"
- ✓ "Your driveway protected, guaranteed" — speak to homeowner confidence
- ✓ Use "we" and "our work" — it's a family operation
- ✓ Share real before/after results — this is expertise, not marketing
- ✓ Keep it direct and honest — Sean talks to homeowners, not corporations
- ✗ "Premium luxury sealcoating solutions" — too corporate
- ✗ "Call now for amazing deals!" — too salesy
- ✗ "Best in Columbus!" — unearned, let reviews say it
- ✗ Trendy millennial/Gen-Z slang — doesn't fit the heritage
- ✗ Overly formal academic tone — Sean talks to homeowners
- ✗ Generic placeholder copy — every word should feel like Sean's shop
Trust Numbers
These aren't marketing claims — they're Sean's real track record. Use them.
Sample Copy
Reference copy in the Paved By Infiniti voice — use these as starting points.
Protect Your Driveway. Period.
Columbus sealcoating and asphalt repair from a 3rd-generation family business. Free estimates, licensed & insured.
My grandfather sealed driveways. My father sealed driveways. I seal driveways. Three generations means we've learned what works, what fails, and what actually protects your investment for the long haul. Infiniti Seal Coating brings that family knowledge to every Columbus driveway we touch — with commercial-grade materials and the kind of attention to detail that comes from genuinely caring about the finished job.
Driveway sealcoating is the single best investment you can make in your home's exterior — a properly sealed surface resists water intrusion, freeze-thaw cracking, and UV fading for 3–5 years. We use professional coal tar emulsion sealer, not the watered-down box-store stuff. The difference shows.
Headings
Heading scale using Oswald — bold, uppercase authority from hero down to sub-sections.
Weight: 400
Line-h: 1.1
Weight: 400
Line-h: 1.2
Weight: 500
Line-h: 1.3
Weight: 600
Line-h: 1.35
Weight: 600
Line-h: 1.4
Weight: 700
Letter-sp: 1px
Paragraphs
Body text styles at actual sizes — Source Sans Pro across all paragraph roles.
Line-h: 1.78
Weight: 400
Line-h: 1.6
Weight: 400
Letter-sp: 2px
Weight: 600 · Caps
Line-h: 1.65
Weight: 400
Links
Four link patterns — hover each to see the interaction state.
Rich Text
A sample rich text block showing how body copy, headings, lists, and blockquotes look together in the Paved By Infiniti voice.
Why Sealcoating Matters
Your driveway is one of the largest surfaces on your property — and one of the most neglected. Without proper sealing, asphalt oxidizes, dries out, and begins to crack. Water works into those cracks, freezes, expands, and turns hairline fractures into costly repairs. A properly sealed driveway can last 25–30 years with regular maintenance. An unsealed one? Expect to repave in 10–15.
"Prep work is 80% of the job. Anyone can roll sealer. Doing it right means cleaning, patching, and letting it cure properly first."
— Sean Mitchell, Infiniti Seal Coating
What We Use — And Why It Matters
We use professional-grade coal tar emulsion sealer — not the watered-down big-box store product. The difference in durability is measurable. Every job starts with a thorough pressure wash, followed by hand-applied crack filler on all visible fractures before any sealer touches the surface.
- Commercial-grade coal tar emulsion sealer (not DIY box-store product)
- Full surface pressure wash and clean before every application
- Hand-applied crack filler on all fractures prior to sealing
- Two coats minimum for maximum protection
When to Seal
In Central Ohio, late spring through early fall is ideal — surface temps above 50°F and no rain in the forecast for 24 hours. New driveways should wait 6–12 months before first seal. After that, every 3–5 years keeps the surface protected and looking sharp.
- Call or text Sean for a free on-site estimate
- We schedule at your convenience, typically within 1–2 weeks
- Day of: surface prep, crack fill, and full clean
- Sealer applied in two passes for complete coverage
- Keep off the driveway 24–48 hours for full cure
Forms
Styled inputs, textareas, selects, and checkboxes — all production-ready and brand-consistent. Focus states use Copper ring.
We'll call or text — whichever you prefer.
Sean responds personally — not a call center.
Testimonial Components
Testimonial components with copper accent, slide animation, and navigation. Use for customer reviews on Homepage and About page. Real Columbus homeowners, real results.
Anatomy
| Element | Token / Value |
|---|---|
| Section background | var(--color-surface) — #F0EDE8 |
| Author name | Oswald 600, 1.5rem, var(--color-text) |
| Author meta (zone/title) | Source Sans Pro 500, 0.875rem, var(--color-text-light) |
| Quote text | Source Sans Pro italic, 1.125rem, line-height 1.7, var(--color-text). Large ::before curly quote (4rem, var(--color-primary) at 35% opacity). |
| Star rating | #D4A017 (gold), 1.1rem, letter-spacing 0.08em |
| Arrow buttons | 40×40px circle, 2px border var(--color-accent-dark), hover: copper fill + white icon |
| Slide animation | Horizontal slide — outgoing: slides out 40px + fades. Incoming: slides in 40px + fades. Duration 0.45s, ease. |
| Layout | 2-column grid (1fr author / 2fr quote), max-width 800px centered. Stacks to 1-col on ≤600px. |
Preview
Usage Notes
- Minimum 3 testimonials for the carousel to feel balanced
- Include neighborhood/location (not just name) — homeowners trust local reviews
- Keep quotes under 2 lines on desktop for visual consistency
- Arrow buttons need
aria-labelfor screen readers - Carousel region needs
aria-live="polite"for slide change announcements - Slide animation: Horizontal slide (not fade) — outgoing element translates 40px in direction of travel + opacity 0, incoming translates from 40px + opacity 1. Duration 0.45s ease.
- Do NOT auto-play — homeowners read at their own pace, auto-advancing frustrates
Icon System
Google Material Symbols Outlined — free, open-source, 2,500+ icons. Curated set below with exact usage locations. White on copper circles. Dev name in mono.
Rule: Never mix icon styles (no Rounded, Sharp, or Filled). If a concept isn't in this curated set, check the full library and add it here first before using.
Spacing Tokens
Consistent rhythm throughout the site — four semantic spacing values cover every layout need.
Component Previews
How the design system comes together in real components — navigation, hero, trust bar, and product cards.
Navigation
Trust Bar
Hero Section
Your Driveway.
Our Legacy.
Columbus driveway sealcoating from a 3rd-generation family trade. Quality that holds up.
Service Cards
Contrast Ratios
WCAG 2.1 AA compliance audit — only passing combinations shown. Copper accent is limited to large text and decorative use only.
| Preview | Foreground | Background | Ratio | AA Normal | AA Large | Notes |
|---|---|---|---|---|---|---|
| Aa | Text #1B2A4A | Background #FAF8F5 | 16.32:1 | Pass | Pass | Excellent — main body text |
| Aa | Text #1B2A4A | Surface #F0EDE8 | 14.93:1 | Pass | Pass | Excellent — card text on surface |
| Aa | Text #1B2A4A | White #FFFFFF | 17.06:1 | Pass | Pass | Maximum — white card body text |
| Aa | Text Light #5a6a82 | Background #FAF8F5 | 4.97:1 | Pass | Pass | Good — captions, meta text |
| Aa | Text Light #5a6a82 | Surface #F0EDE8 | 4.55:1 | Pass | Pass | Marginal pass — avoid tiny text |
| Aa | Text Light #5a6a82 | White #FFFFFF | 5.20:1 | Pass | Pass | Good — muted text on white cards |
| Aa | Primary #B87333 | Background #FAF8F5 | 5.02:1 | Pass | Pass | Good — links and UI on page bg |
| Aa | Primary #B87333 | White #FFFFFF | 5.25:1 | Pass | Pass | Good — links on white cards |
| Aa | Primary Dark #1B2A4A | Background #FAF8F5 | 7.68:1 | Pass | Pass | Strong — headings on page bg |
| Aa | Primary Dark #1B2A4A | Surface #F0EDE8 | 7.02:1 | Pass | Pass | Strong — headings on surface cards |
| Aa | White #FFFFFF | Primary #B87333 | 5.25:1 | Pass | Pass | Good — white text on copper buttons |
| Aa | White #FFFFFF | Primary Dark #1B2A4A | 8.02:1 | Pass | Pass | Strong — header, dark UI elements |
| Aa | White #FFFFFF | Accent Dark #7c4e22 | 4.41:1 | Large Only | Pass | Large text / headings / icons only — use Accent Dark for all green text |
| Aa | Secondary #d49a63 | Navy #1B2A4A | 8.07:1 | Pass | Pass | Excellent — footer lavender on dark |
| – | Border #DDD8D0 | Background #FAF8F5 | 1.32:1 | Decorative | Decorative | Border color — never used for text, purely structural |
CSS Variables
Copy-paste ready — Iron Copper tokens that power the entire design system
/* ===== Paved By Infiniti Design Tokens — A2 Iron Copper ===== */
:root {
/* Colors */
--color-primary: #B87333; /* copper — primary CTA color */
--color-primary-dark: #1B2A4A; /* hover, headings */
--color-secondary: #d49a63; /* copper light — warm highlights */
--color-accent: #B87333; /* copper — large text / decorative only */
--color-accent-body: #A0522D; /* burnt sienna — body-safe accent (4.8:1) */
--color-accent-dark: #7c4e22; /* deep bronze — hover, depth */
--color-text: #1B2A4A; /* navy-black body copy */
--color-text-light: #5a6a82; /* muted captions */
--color-bg: #FAF8F5; /* warm white canvas */
--color-surface: #F0EDE8; /* warm surface — card bg */
--color-border: #DDD8D0; /* dividers / outlines */
/* Typography */
--font-display: 'Oswald', sans-serif;
--font-body: 'Source Sans Pro', system-ui, sans-serif;
/* Type Scale */
--text-hero: 4rem; /* 64px */
--text-section: 2.5rem; /* 40px */
--text-card: 1.5rem; /* 24px */
--text-body: 1.125rem; /* 18px */
--text-small: 0.875rem; /* 14px */
--text-label: 0.75rem; /* 12px */
/* Spacing */
--space-section: 80px; /* between sections */
--space-card: 32px; /* card padding */
--space-grid: 24px; /* grid gaps */
--space-component: 16px; /* inline spacing */
}