# Imperial Shinez — Design System Spec > Source: imperialshinez.com.au (live site, captured 2026-05-08) > Stack: Webflow site · `imperial-shinez.webflow.6941753f....opt.min.css` (theme) + `imperial-shinez.webflow.shared.469a456ce.min.css` (Webflow base) > All tokens grepped from real production CSS. All photos pulled from the live Webflow CDN with referer header set. --- ## At-a-glance - **Business**: Imperial Shinez Mobile Car Detailing - **What they actually do**: Sydney's premium **mobile car detailing** service — they come to the customer's home, office, or location across Sydney with a fully-equipped mobile unit (water supply, products, all kit) and perform: 1. **Detailing services** (1–2 day turnaround) — wash, steam clean, leather care, paint decontamination, window cleaning. Maintenance washes through to full interior restoration. 2. **Ceramic Paint Protection** (2–6 days) — premium 5-year ceramic coatings with paint correction, hydrophobic finish, UV protection, glass coating, leather protection. Packages for new and used vehicles. 3. **Paint Protection Film (PPF)** — STEK PPF with 10-year warranty. Self-healing film for stone-chip / debris protection. Front-end or full-vehicle coverage. 4. **Shop / DIY products** — Shinezcarcare, their own line of Australian-formulated car-care products (all-purpose cleaner, citrus pre-wash, wheel cleaner, wheel mitt) for DIY enthusiasts and professional detailers. - **Location**: Sydney, NSW, Australia (mobile across the metro) - **Audience**: high-end private vehicle owners (the live portfolio is wall-to-wall exotic — Bugatti Veyron, Ferrari 488/812/458, Lamborghini Aventador/Huracán/Urus/Countach, Porsche GT2 RS / GT3 RS, Aston Martin DB11, Rolls-Royce Wraith, Audi R8) PLUS everyday Sydney drivers who want the same standard at their door. - **Voice anchors pulled from live site**: *"Sydney's Premium Mobile Detailing & Car Care"*, *"The Difference Is In The Details"*, *"Premium Mobile Detailing. Delivered to You."*, *"Use What The Professionals Use."*, *"No need to waste time at a detail shop."*, *"What Sydney Drivers Say."* - **Register**: Approachable-luxury automotive. Gloss-blue + showroom-black palette with a champagne-gold credentials accent. Reads closer to a high-end automotive aftermarket brand (think Detail Garage / Adam's Polishes / 3D Car Care) than a generic local cleaning service. Mobile-convenience is the central proposition — they emphasize "we come to you" as much as the work itself. --- ## Color tokens (extracted, frequency-counted) Frequency table from `imperial-shinez.webflow.6941753f....opt.min.css` via `grep -oE '#[0-9A-Fa-f]{6}'` and the Webflow `--*-color:` custom properties (Webflow exports them verbatim from the design tool, which is the canonical source): | Hex | Source / Role | |---|---| | `#0f70be` | **THE Imperial Shinez blue** — `--global-color`, all primary CTAs, links, accents | | `#be0f12` | `--button-highlight` — racing red highlight (button hover), inverse-of-blue on chromatic wheel | | `#ccb686` | `--secondary-color` — warm champagne / "accredited applicator" gold | | `#19191b` | `--dark-color` — true automotive-glossy black, hero scrim base, footer | | `#282725` | `--heading-text` — warm near-black for body headings | | `#5c5d5e` | `--body-color` — muted graphite for body copy | | `#f2f2f2` | `--light-color` — pale neutral surface | | `#000000` | 14 occ. — page background overlays / scrim multiplier | | `#ffffff` | 5 occ. + `--white-color` — card surfaces | → canonical mapping (see `_shared.css`): - `--brand` → `#0f70be` - `--brand-deep` → `#0a5896` (derived darken) - `--brand-soft` → `#1f8ad6` (derived lighten) - `--accent` → `#be0f12` (live `--button-highlight`) - `--gold` → `#ccb686` (live `--secondary-color`) - `--ink-deep` → `#19191b` - `--ink` → `#282725` - `--ink-soft` → `#5c5d5e` - `--bg-warm` → `#f2f2f2` Hero scrims (live): `linear-gradient(#0009, #0009)` and `linear-gradient(#000000b3, #000000b3)` flat-overlay multipliers — captured as `--grad-hero-scrim`. --- ## Typography (extracted Webflow global tokens) Direct from `--_typography---*` and `--_font-family---*` in the live theme CSS: ``` heading-font — "Cal Sans", sans-serif body-font — Poppins, sans-serif heading-typo — Cal Sans 400 (acts like "regular" — Cal Sans is already a confident display) title-font-size — 64px title-line-height: 70px title-letter-spacing: -.25px subtitle-font-size — 13px subtitle-line-height: 20px subtitle-letter-spacing: 1.04px (uppercase eyebrow) body-typo — Poppins 400 16px line-height: 26px button-typo — Poppins 400 15px line-height: 28px nav-style — 15px / 100px nav height heading-subheading-style--heading-gap: 50px ``` → token mapping: - `--font-display` → `'Cal Sans', 'Poppins', system-ui, ...` — Cal Sans is loaded from Bunny Fonts (free CDN equivalent of Google Fonts) at `https://fonts.bunny.net/css?family=cal-sans:400,500,600,700`. Cal Sans is a contemporary humanist display sans (originally distributed by Beam) — slightly geometric with optical adjustments in the apertures. **Substitution note**: if Cal Sans is unavailable, Poppins 600 falls back gracefully because the tracking and metrics are sympathetic. - `--font-body` → `'Poppins', system-ui, ...` (Google Fonts) - `--font-eyebrow` → `'Poppins', ...` (live uses Poppins 600 13px on subtitle eyebrows) The defining typographic move: **Cal Sans display sits at weight 400–500** (NOT 700/800) and uses *only* a slightly negative tracking (-0.25px ≈ -0.005em). This reads as "confidently composed" rather than "compressed" — a more approachable register than the aggressive negative tracking other automotive brands lean on. Eyebrows are EXPANDED tracking (1.04px ≈ 0.08em), uppercase, 13px. --- ## Site-specific patterns These are the signature stylistic moves that make the live site recognizably Imperial Shinez — not generic Webflow defaults. They are baked into `_shared.css` from the start, **not** retrofitted as a refinement layer. ### 1. 20px corner radius — the dominant card chamfer Live `border-radius:` frequency table: ``` 8 border-radius: 20px ← DOMINANT — cards, photo tiles, CTAs 7 border-radius: 50% ← icon dot circles, avatars 5 border-radius: 0 2 border-radius: 50px ← pill chips 2 border-radius: 30px ← larger feature panels 2 border-radius: 5px ← form inputs 2 border-radius: 10px ← small chips 2 border-radius: 3px ``` The brand has a **softly rounded** card system — every photo tile, service card, CTA button, pricing chip, and feature panel uses 20px. This is the "approachable-luxury" register: not the sharp 0px editorial corners DeMar uses, not the 14px generic SaaS chamfer YMCA needed fixing — it's a deliberate 20px showroom radius that pairs with 50% icon circles. We bake `--radius-lg: 20px` as the canonical card radius. ### 2. Heavy directional drop-shadows (showroom lighting) Live `box-shadow` patterns: ``` 0 8px 9px -3px #00000042 ← live card drop (~25% black, soft, asymmetric down) 0 5px 25px #00000040 ← live wider drop (slider / hero) 0 8px 9px -3px #00000024 ← lighter variant for less-prominent panels 1px -5px 25px -6px #0003 ← live: dropdown upward shadow inset 0 -1px 16px -15px var(--dark-color) ← live: dropdown sheen ``` These are **directional drop shadows**, not the soft halos DeMar uses. The card sits ON the page surface with confident weight — "showroom lighting." Hover gets heavier (`-card-hover: 0 12px 30px -6px rgba(0,0,0,0.28)`). This is the brand's strongest visual cue after the 20px radius and the gloss-blue palette. ### 3. Brisk 0.3s baseline + luxurious 0.5s `easeOutCirc` for hero reveals Live transition mix: ``` 3 transition: all .3s ← brand baseline 1 transition: all .5s cubic-bezier(.23,1,.32,1) ← live: hero reveal / image hover 1 transition: color .5s cubic-bezier(.77,0,.175,1) ← live: nav color "snap" 2 transition: opacity .2s ``` Two-tier: brisk 0.3s for ordinary state changes, a luxurious 0.5s `cubic-bezier(.23,1,.32,1)` (easeOutCirc) for hero / photo reveals. We expose both as `--transition-base` and `--ease-luxe`. ### 4. Solid-color blue CTAs + racing-red hover (NOT a gradient button) The live primary CTA is solid `#0f70be` blue at rest, and **flips to solid `#be0f12` red on hover** — using the `--button-highlight` token. There is NO gradient on the button itself. That two-color rest/hover swap is the brand's distinctive interaction — it reads as "polished surface flips to racing accent" without being garish. We bake the same swap into `.btn:hover`. ### 5. Shine-sweep on photo cards + buttons Live photo tiles and product cards animate a translucent white shine sweep across them on hover — a windshield-highlight effect. We capture this as `--grad-shine: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%)` and apply it via `::after` on `.btn`, `.tile .tile-img`, and `.photo-frame`. It's the brand's most distinctive interaction — small but unmistakable in an automotive context. ### 6. Cal Sans 400/500 + Poppins 400 — restrained-weight type pairing The brand display weight is **Cal Sans 400–500**, not 700/800. The headline doesn't shout — Cal Sans's wide-aperture forms carry the tone at lower weight. Body is Poppins 400 16/26. Every heading utility in `_shared.css` defaults to weight 500 except the largest `.display` (600). No italic, no serif counterpoint. The brand's editorial weight comes from typeface contrast (Cal Sans display vs Poppins body) at calm weights, plus the ~1.04px expanded tracking on subtitle eyebrows. ### 7. Subtitle-eyebrow with optional star-glyph lead Live eyebrows are Poppins 600 13/20 1.04px expanded uppercase. On hero blocks, the eyebrow is preceded by a small ✦ star glyph (live: `static/icons/_star.svg`) — the brand's "shine" mark, used sparingly. We bake `.eyebrow.with-star::before { content: '✦' }` so designers can opt in to the lead-glyph without committing to it everywhere. ### 8. Sydney coverage-zone pill grid The brand serves Sydney suburbs — the canonical service-area display is a pill-shaped grid of suburb names that flip to brand-blue on hover (`--coverage-zones`). It's a small interaction but unmistakably "local mobile service" — neither a map nor a paragraph of suburbs. ### 9. Before/after pair as a signature pattern Detailing brands ALL show before/after pairs — but the Imperial Shinez treatment is a 2-column 4:3 grid with a centered white vertical divider that has a circular ⇄ chip in the middle. Each half carries an upper-left "BEFORE" / "AFTER" pill chip; the AFTER chip uses `--brand` blue. Captured as `.before-after`. ### 10. "Most Chosen" pricing-tier ribbon (racing-red) Pricing tiers carry a small `--accent` red "MOST CHOSEN" pill in the upper-right of the featured tier — the only place the racing red appears at component scale. The featured tier itself flips to `var(--bg-charcoal)` jet-black with white type. Specific to packaged-services brands where one tier needs to be the recommended choice. --- ## Imagery / Photography **Real assets pulled from live Webflow CDN** (referer header set): - **Logo**: `Imperial-Shinez-Logo.png` (1285×1000) — live: `/6941753e2171780ca93feac2/6978ac69f1cedf43988b41fe_Imperial-Shinez-Logo.png`. PNG only — no SVG mark found on site. - **Brand mark**: `Asset 2@2x.webp` (live: `/694456a18bb5909d4497bbe_`) — used as social-circle mark. - **Hero shots (3)**: Bugatti Veyron in detail bay, Bugatti foam wash, Lamborghini Aventador ceramic-coated showroom. - **Portfolio (10+)**: Lamborghini Countach, Audi R8, Rolls-Royce Wraith, Ferrari 812 Superfast, Ferrari 458 Speciale, Ferrari 488 Pista, Lamborghini Urus, Lamborghini Huracán STO, Aston Martin DB11, Porsche GT2 RS, Porsche GT3 RS (4 PPF angles). - **Interior detail (4)**: Ferrari cockpit, Ferrari leather seat, Ferrari exterior finish, Ferrari mobile foam wash. - **Aston Martin ceramic set (4)**: interior detail, door sill, wheel detail, residential setup. - **Mobile-context shots (2)**: car-wash worker, responsive mobile-detailing context. - **Decorative**: water-bubble, water-blob, twinkle (overlay decoration). **Treatment rules**: - Photo tiles default to 4:3 aspect at 20px radius with the `--shadow-card` drop. Hover: shine-sweep across. - Hero photo blocks use a 180deg dark scrim (`var(--grad-hero-scrim)` — 30% → 85% jet) over the photo for white-text legibility. - Avatars use 88px circles with a 2px white border + soft shadow (testimonial reviewer style). - Work tiles in a portfolio grid carry a bottom-anchored gradient overlay so the "make/model + service" caption reads white on photo. --- ## Catalog chrome (`sections.html`) The pattern catalog wrapper UI (`sx-shell`, `sx-header`, `sx-index`, `sx-pattern`, `sx-demo`, `demo-label`) is themed with Imperial Shinez tokens: - `sx-header::before` — 4px gloss-blue gradient strip across the top (signature page-opener) - `sx-index` — flat `--bg-soft` panel; each item gets a brand-blue ✦ star glyph that animates on hover (matches the live eyebrow lead-glyph) - `sx-pattern::before` — 80px × 4px brand-blue rule above each pattern (brand divider) - `sx-pattern .id` — left-rule 4px brand-blue border on a pale `--brand-pale` ID chip with 20px corners - `sx-demo` — `--bg-pure` surface, **20px radius (NOT 0px)**, soft `--shadow-card` drop on hover only - `demo-label` — solid blue pill in the upper-left with Poppins 600 caps All values flow from `--brand`, `--brand-deep`, `--bg-soft`, `--shadow-card`, `--radius-lg`, etc., so the palette toggle works. --- ## Domain-fit reframings (mobile-detailing-shaped) These section names map the canonical SECTION-PATTERNS.md vocabulary to Imperial Shinez's automotive-mobile-service voice: | Canonical pattern | Imperial Shinez reframe | Notes | |---|---|---| | `service-times` | `availability-windows` | Mon–Sat hours when the mobile unit is out | | `ministries-grid` | `services-grid` | The 3 service offerings as `.tile` cards | | `staff-profile` | `owner-profile` | Single owner / lead detailer bio | | `staff-grid` | `team-grid` | Certified mobile detailers | | `service-area` | `coverage-zones` | Sydney suburbs — pill grid (Eastern / North / Inner-West / South) | | `member-quote` | `customer-testimonial` | 5-star Google review with reviewer + service | | `ways-to-give` | `booking-paths` | Online / Phone / Email / SMS booking | | `events-list` | `recent-jobs` | Editorial portfolio rows | | `beliefs-list` | `process-steps` | "Book Online → We Come to You → Expert Detailing → Quality Inspection" | Plus DS signatures unique to Imperial Shinez: - `before-after-pair` — 50/50 photo split with center divider - `pricing-tier-card` — packaged service prices with "MOST CHOSEN" featured ribbon - `service-checklist` — long blue-dot-check feature lists - `social-proof-strip` — Google reviews stars + count + Facebook recs - `coverage-zones` — Sydney suburb pill grid - `work-tile` — portfolio cars with overlay caption ("BUGATTI VEYRON · CERAMIC COATING") - `gloss-rule` — 56px brand-blue rule above section heads - `availability` — pill-style availability cards --- ## Provenance / gaps - **Logo**: real (PNG only — no SVG found on site). 1285×1000. `Imperial-Shinez-Logo.png` from Webflow CDN. - **Type**: Cal Sans (Bunny Fonts CDN — Google-Fonts-equivalent, no proprietary substitution required) + Poppins (Google Fonts). Both real, free. - **Photography**: 32 real assets confirmed (see `assets/imperial-shinez-brand/`). All pulled with referer header from the live Webflow CDN. - **Brand colors**: 100% extracted from production Webflow CSS — `#0f70be` is unambiguously the brand blue (it's literally the `--global-color` token in the live theme). `#be0f12` (button-highlight red) and `#ccb686` (champagne) are also live tokens, not derived. - **Note**: no canonical brand SVG mark — the `Asset 2@2x.webp` is a small mark / favicon variant. For clean lockups the `logo.png` is the source of truth. - **Note**: the brand has a Sydney address but the live site doesn't publish a single street address — they're a mobile service. Booking and contact happen via the contact form / phone. Demo pages reflect this.