Design tokens & core elements
Edit assets/scss/aan-theme-kit.scss, then recompile the SCSS
— click Compile SASS in the WP admin menu, or run a manual
sass build from the theme's assets/ folder
(sass scss/style.scss css/style.css) — and everything below
re-skins. This page is the visual contract for the kit; tune it against the dealer's Figma.
Colors
Globals & text
Surfaces
States
Fonts
Each family is pulled straight from the kit tokens ($font-display /
$font-body / $font-accent / $font-mono in
aan-theme-kit.scss, loaded via @font-face in fonts.scss). No
font names are hardcoded — the family beside each token is read live from the compiled CSS
by the inline script below, so the panel always names whatever font a clone actually wires up. The pangram
runs the full 100–900 weight range at 20px; weights outside the chosen face's
defined range fall back to the nearest real cut, so you can see which thicknesses exist per font.
$font-display
$font-body
$font-mono
$font-accent
Typography
Heading 1 with accent
h1 · .hl two-tone highlightHeading 2
h2Heading 3
h3Heading 4
h4Heading 5
h5Heading 6 / overline
h6 (uppercase, tracked)Lead paragraph — the intro sentence that sits under a heading and sets the tone for the section below it.
.leadBody copy. The quick brown fox jumps over the lazy dog. Buy this 2024 example with confidence — financing available and nationwide shipping.
p / bodyButtons
$btn-radius, $btn-text-transform, $btn-letter-spacing control shape/case globally. Hover to preview states + arrow nudge.
Bootstrap buttons (themed via the kit bridge)
Forms
This is the LIVE AAN form engine — [aanform formname="employment"] (the same
renderer used at /employment/). Styling it = styling every dealer form. It themes
from the kit's Bootstrap bridge (.form-control, .btn-primary).
Surfaces
Cards (shadow + radius + border tokens)
Surface card
$surface-card with $shadow-card and $radius-md.
Another panel
Reused for popups, finance widget, VDP panels.
Radii
Vehicle card & variants
The actual SRP / Featured card (.car-card, styled by
assets/scss/components/vehicle-card.scss) — the most critical component — in two rows. Variants show the real
SRP banner overlays (Sold / Sale Pending / Lease Special = .image-overlay PNGs the C2
drives) and themable status badges (.card-badge: CPO / New Arrival). Placeholder photos;
tokenizing the card's own colours/borders is a Phase-B step.
Page row
$bg-page — the default page background.
Alternating row
$bg-row-alt — for zebra-striped sections.
We Want Your Car
Get a competitive, wholesale-backed offer on your luxury or exotic vehicle within 24 hours. No pressure, no games — just a fair number.
- Wholesale-backed pricing
- Same-day cash offers
- We handle all paperwork
- Any condition considered
- Nationwide pickup
Live inventory — filter, sort & cards
The real SRP injected via [inventory] — the live filter dropdowns,
the sort control, and live cards from /api/cars. Compare these against the static
demo cards higher up. Inventory cards + the filter/sort are core theme style.
Compare Vehicles (0)
Hide
Location
1800 Nations Dr
Gurnee, IL 60031
Phone: 847-782-0300
Hours of Operation
| Monday-Friday: | 8:00am - 6:00pm |
| Saturday: | 9:00am - 5:00pm |
| Sunday: | By Appointment |
