KAYUCO Wireframe v1 / 2026-05-07

HI-FI
WIREFRAME

Every Kayuco Tires & Towing design token and component, rendered with real brand content. Intended for Anthony's kickoff conversation with Gilberto and as a single-source reference for the Astro site build on port 4501.

Cada token y componente del sistema de diseño de Kayuco Tires & Towing, renderizado con contenido real de marca. Para la reunión de inicio con Gilberto y como referencia única para la construcción del sitio en Astro.

BrandKayuco Tires & Towing
OwnerGilberto Ledesma
Domainkayucotires.com
StackAstro · port 4501
01 · Tokens · Color

Color palette

Locked hex values consumed via custom properties. Brand colors anchor signal. Ink scale handles text. Surface scale handles backgrounds. Semantic colors handle state.

Brand

D8331F
--kc-brand-redRed
1A1A1A
--kc-brand-charcoalCharcoal
F4EDE0
--kc-brand-creamCream
D9A24E
--kc-brand-goldGold

Ink scale (text on cream)

0E0E0E
--kc-ink-900Ink 900
3A3A3A
--kc-ink-700Ink 700
6B6B6B
--kc-ink-500Ink 500
B5B0A6
--kc-ink-300Ink 300

Surface scale

F4EDE0
--kc-surface-baseBase
EBE2D2
--kc-surface-1Surface 1
E1D7C5
--kc-surface-2Surface 2
1A1A1A
--kc-surface-inverseInverse
262626
--kc-surface-inverse-1Inverse 1

Semantic

4F9F4D
--kc-successSuccess
F0A741
--kc-warningWarning
B81F0F
--kc-dangerDanger
4A6B8A
--kc-infoInfo
02 · Tokens · Typography

Type families

Three families. Oswald for display, DM Sans for body, IBM Plex Mono for data. Inter is banned.

Oswald
Display · 500/600/700
RÁPIDO. JUSTO.
DM Sans
Body · 400/500/700
María Rivera vino hoy con su Civic. Cuatro gomas, alineación, y un cambio de aceite mientras teníamos el carro arriba. Una hora.
IBM Plex Mono
Data · 400/500
715 Millbury St · Worcester MA 01607 · (978) 701-2069 · 225/45R17
02b · Tokens · Type scale

Modular scale, ratio 1.25

7xl · 80KAYUCO
6xl · 64RÁPIDO
5xl · 52JUSTO
4xl · 40SERVICES
3xl · 30SECTION HEAD
2xl · 24CARD TITLE
xl · 20SUB HEAD
lg · 18Lede paragraph at eighteen pixels
base · 16Body line at sixteen pixels
sm · 14Caption line at fourteen pixels
xs · 12Helper line at twelve pixels
2xs · 11Stamp line at eleven pixels
03 · Tokens · Spacing

4px base, 14 steps

--kc-space-1 · 4px
--kc-space-2 · 8px
--kc-space-3 · 12px
--kc-space-4 · 16px
--kc-space-5 · 20px
--kc-space-6 · 24px
--kc-space-8 · 32px
--kc-space-10 · 40px
--kc-space-12 · 48px
--kc-space-16 · 64px
--kc-space-20 · 80px
--kc-space-24 · 96px
--kc-space-32 · 128px
--kc-space-40 · 160px
04 · Tokens · Radii

Corner radii

--kc-radius-xs2px
--kc-radius-sm · button4px
--kc-radius-md8px
--kc-radius-lg · card14px
--kc-radius-xl22px
--kc-radius-2xl32px
--kc-radius-pill999px
05 · Tokens · Shadows

Tinted elevation

Shadows are tinted to the charcoal background hue, not pure black. Each level corresponds to a semantic elevation: subtle lift, card hover, dropdown, hero.

shadow-1subtle
shadow-2card hover
shadow-3dropdown
shadow-4hero
06 · Tokens · Motion

Durations + easings

Calm, fast, purposeful. Spring is tactile, not bouncy. Reduced-motion zeros out durations.

Durations

  • --kc-duration-instant80ms · button press
  • --kc-duration-fast150ms · exit / hide
  • --kc-duration-base200ms · enter / show
  • --kc-duration-slow300ms · layout shift
  • --kc-duration-deliberate500ms · hero / first paint

Easings (animated demo)

ease-out

ease-in

ease-inout

ease-spring (tactile, not bouncy)

07 · Tokens · Z-index

Stacking layers

--kc-z-base · 0
--kc-z-raised · 10
--kc-z-sticky · 100
--kc-z-overlay · 200
--kc-z-modal · 300
--kc-z-toast · 400
--kc-z-tooltip · 500
08 · Tokens · Border widths

Stroke weights

--kc-border-width-1 · 1px
--kc-border-width-2 · 2px
--kc-border-width-3 · 3px
--kc-border-width-4 · 4px
09 · Tokens · Focus rings

Keyboard affordance

Tab through the elements below to see each variant.

Ghost ring
10 · Tokens · Breakpoints

Mobile-first

  • --kc-bp-sm480px · large phone
  • --kc-bp-md768px · tablet
  • --kc-bp-lg1024px · laptop
  • --kc-bp-xl1280px · desktop
  • --kc-bp-2xl1536px · wide
11 · Components · Buttons

Three variants, four sizes, five states

Primary (action)

Secondary (charcoal)

Ghost (low priority)

States

12 · Components · Cards

Service, testimonial, tier-pricing

Service card

Tire installationInstalación de gomas

Most 4-tire sets out the door in under an hour. Mount, balance, valve stems, and disposal included.

$67/tire

★ ★ ★ ★ ★
Llegué a las 9, salí a las 10. Cuatro gomas instaladas y financiadas. Omar es honesto, no te vende lo que no necesitas.
María R. Worcester · 2026-04-22 · Google

Tier pricing (Tier 1 stack from AUDIT.md)

Tier 1 · Foundation

Tell the story you live

$1,250/mo

+ $3,250 setup midpoint

  • Bilingual one-page site
  • NAP cleanup across stale listings
  • Review responder, EN + ES
  • SMS appointment confirmations
Start here
Tier 2 · Equity

Capture the call you missed

$2,000/mo

  • Tier 1 stack included
  • S4 AI Receptionist (bilingual)
  • Custom build add-ons
Talk it through
13 · Components · Forms

Inputs, select, checkbox, radio

We use this to confirm your appointment.

Enter a valid 10-digit phone number.

Preferred language Idioma preferido
13b · Components · Contact form

Full /contact pattern

Send a message

Tell us what you need

We never share your info. We text or call to confirm.

15 · Components · Hero

Asymmetric, bilingual

Worcester · Since 2010

LAS GOMAS QUE NECESITAS.
RÁPIDO. JUSTO.

The tires you need. Fast. Fair.

Twenty-three tire brands on the rack. Most installs out the door in under an hour. Auto repair while we have the car up. Acima and Snap Finance, same visit.

Pide una cotización (978) 701-2069

PLACEHOLDER : real Kayuco storefront photo, Saturday morning. See assets-inventory.md.

16 · Components · Trust strip

Credentials at a glance

  • 23+tire brands
  • 1 hrtypical install
  • 2finance lenders
  • ASEcertified
  • Since2010
17 · Components · Service grid

Asymmetric 7-tile

New tires

Gomas nuevas

Twenty-three brands on the rack. Pirelli, Yokohama, Toyo, Falken, Hankook, Continental, Bridgestone.

FROM $67 / TIRE INSTALLED

Used tires

Gomas usadas

Inspected. A real option, not an apology.

FROM $40

Wheel alignment

Alineación

Computerized 4-wheel alignment.

Financing

Financiamiento

Acima and Snap Finance. Approved on the same visit. No prime credit required.

TPMS reset

Reinicio TPMS

Sensor pairing on every wheel install. Included.

Towing

Remolque

Shop hours, local Worcester area. Light-duty.

SHOP HOURS · LOCAL

Auto repair

Reparación general

ASE-certified. Brakes, alignment, oil, suspension, exhaust, engine work.

18 · Components · Testimonials

Multi-review section

★ ★ ★ ★ ★ 4.4 on 77 Google reviews
  • ★ ★ ★ ★ ★
    Llegué a las 9, salí a las 10. Cuatro gomas instaladas y financiadas. Omar es honesto, no te vende lo que no necesitas.
    María R. Worcester · 2026-04-22 · Google
  • ★ ★ ★ ★ ★
    Two new tires plus an alignment. They had me back on the road in 50 minutes. Honest crew.
    James P. Worcester · 2026-03-08 · Google
  • ★ ★ ★ ★ ★
    Mi carro no arrancaba un sábado. Llamé en la mañana y vinieron por él. Lo arreglaron el mismo día.
    Luis S. Worcester · 2026-02-15 · Google
19 · Components · FAQ accordion

Native <details>, FAQPage-ready

How long does a tire install take?

Most four-tire installs are out the door in under an hour. We mount, balance, install valve stems, and dispose of your old tires in that hour.

Can I finance tires with bad credit?

Yes. We work with two lenders, Acima and Snap Finance. Both approve customers without prime credit. Apply on your phone in the shop and you usually have an answer in a few minutes.

Do you tow at night?

We tow during shop hours: Mon-Fri 9 to 6, Sat 8 to 3. After hours, call us in the morning and we will come get you.

¿Hablan español?

Sí. Nuestro equipo es bilingüe en inglés y español.

20 · Components · Sticky CTA

Mobile-only call button

Visible at viewports below 768px on production. Shown here in a phone-sized frame.

Mobile preview · <768px

Page content scrolls here

Call us (978) 701-2069
21 · Components · Map

Leaflet (recommended) or Google embed

Stylized placeholder shown here. Production swaps in Leaflet + OpenStreetMap or Google embed iframe.

715 Millbury St · Worcester MA
Get directions
22 · Components · Image

Responsive picture, treated, placeholder

Placeholder: bay action shot Placeholder: team photo Placeholder: storefront wide
24 · Components · Pills + stamp

Badge, tag, trust stamp

Recommended ASE Certified In stock Open today
SINCE2010
FAMILYRUN
26 · Components · Inverse section

Charcoal-on-cream rhythm break

Voice + Tone

Direct. Warm. Working-class confident.

Short sentences, action verbs, no corporate hedging. We use the customer's name. We do not pretend to be a luxury brand. We do not apologize for being a neighborhood shop.

See the full bible
27 · Components · Blog

Index with filter pills

28 · Components · Loading + Empty + Error

States

Skeleton (replaces spinners)

Empty state

No reviews yet for this month.

You could be the first. Leave a review on Google.

Error state (form-inline)

Enter a valid 10-digit phone number.

29 · Components · Tactile press

Click and hold

The block below pushes 2px down on press. Spring physics, not bouncy.

Press me

End of wireframe · 29 sections · every token, every component
Carefully crafted with Angel.Ink