Signature
Numbing
Supplies
A clinical luxury design system for the premium tattoo supply store. Light, precise, and authoritative — built on the aesthetic of high-end apothecary and medical-grade skincare.
Colour Palette
Warm neutrals anchor the brand. Forest green carries authority and clinical trust. Gold provides selective premium accent. All colours meet WCAG AA contrast on cream backgrounds.
Typography
Three-font system: Cormorant Garamond for editorial display, DM Sans for functional UI, DM Mono for labels and data. Never mix more than two in a single component.
theme.liquid using @font-face, and reference via CSS variables. Avoid loading from Google Fonts in production — adds ~300ms render-blocking latency and requires GDPR consent banner. Shopify library fallbacks if self-hosting isn't viable: Playfair Display (display), Assistant (body), Roboto Mono (mono).Precision
Spacing & Tokens
4px base unit. All spacing, radius, shadow and motion values are defined as CSS custom properties and should never be hardcoded.
| Token | Value | Visual |
|---|---|---|
--sp-1 | 0.25rem / 4px | |
--sp-2 | 0.5rem / 8px | |
--sp-3 | 0.75rem / 12px | |
--sp-4 | 1rem / 16px | |
--sp-6 | 1.5rem / 24px | |
--sp-8 | 2rem / 32px | |
--sp-12 | 3rem / 48px | |
--sp-16 | 4rem / 64px |
| Token | Value |
|---|---|
--dur-fast | 120ms |
--dur-base | 220ms |
--dur-slow | 360ms |
--ease-out | cubic-bezier(0.16,1,0.3,1) |
--ease-spring | cubic-bezier(0.34,1.56,0.64,1) |
--radius-sm | 4px |
--radius-md | 8px |
--radius-lg | 12px |
--radius-full | 9999px |
Buttons
Five button variants. One primary action per screen. Secondary and ghost for supporting actions. Gold reserved for promotional moments only.
Form Elements
All inputs use the same border system. Forest green for focus. Clear error states with inline messaging. 44px minimum touch target on mobile.
Badges & Notices
DM Mono text, uppercase, tight tracking. Dot variant for status indicators. Notices always include a recovery path — never a dead end.
Product Cards
Hover lifts 2px with shadow upgrade. Out-of-stock cards remain visible — driving notify-me signups rather than being hidden.
Cart Drawer
Slides in from the right. Free shipping bar at $100 threshold. Express checkout buttons visible above fold on mobile. Checkout CTA shows live total.
Loading States
Shimmer skeletons everywhere — no full-page spinners. Dot pulse for filter changes. Ring spinner for in-button loading. Supplier images go through standardisation pipeline before display.
Search & Filter
Shopify Search & Discovery app (free) handles predictive search and filter configuration. Dawn's native filtering is basic — the app is required for the multi-attribute filter panel shown here. Only Concentration requires manual product tagging; all other filters (Brand, Category, Price, Availability, Size) are auto-populated from existing product data.
Mobile Patterns
65–70% of customers order from mobile. Bottom nav is always visible. Sticky ATC bar on PDP. 44×44px minimum touch targets. LCP <2.5s on 4G.
| Name | Breakpoint | Layout |
|---|---|---|
| Mobile | < 768px | 1-col, bottom nav, drawer filters |
| Tablet | 768–1024px | 2-col, sidebar filters |
| Desktop | > 1024px | 3–4 col, top nav, inline filters |
Email Templates
Shopify handles transactional emails (order confirmation, shipping, refunds). Klaviyo handles marketing flows (abandoned cart, review request, back-in-stock, win-back). Georgia replaces Cormorant in email — web fonts don't load in email clients.
We've received your order and it's being prepared with care. You'll receive a shipping confirmation with tracking details within 24 hours.
Questions? Reply to this email or contact us at support@signaturenumbingsupplies.com
| Platform | Trigger | Key Detail | |
|---|---|---|---|
| Order Confirmation | Shopify | Order placed | Custom tip: how to apply before next session |
| Shipping Notification | Shopify | Fulfilled | Tracking link + application guide link |
| Abandoned Cart | Klaviyo | 1hr after abandonment | Show cart items + free shipping threshold nudge |
| Review Request | Klaviyo | Day 7 post-delivery | Judge.me / Stamped link · Nudge at Day 14 |
| Back in Stock | Klaviyo | Inventory restored | Direct link to product, urgency on quantity |
| Win-back | Klaviyo | 60 days no purchase | 10% discount offer · One send only |
Imagery & Art Direction
Supplier-sourced product images standardised through a 4-step pipeline. Clinical white-background hero shots. Lifestyle shots in tattoo studio context for editorial placements only.
Checkout Stepper
4-step flow: Cart → Information → Shipping → Payment. Completed steps show a checkmark. Active step highlighted in forest green with focus ring. Applied to Shopify checkout branding on Standard plan via logo + colour only — full stepper customisation requires Plus.
Data Table & Stat Cards
Used in admin views, order history, and any data-dense surface. Stat cards use Cormorant Garamond for the headline number — large display figures feel editorial, not clinical. Sparkbar for trend at a glance.
| Order | Customer | Products | Date | Status | Total |
|---|---|---|---|---|---|
| #SNS-4831 | S Sarah M. |
TKTX 40% × 2, Zensa × 1 | Jun 04, 2026 | Fulfilled | $82.98 |
| #SNS-4830 | J James K. |
Hush Numbing Spray × 3 | Jun 04, 2026 | Processing | $59.97 |
| #SNS-4829 | A Alex T. |
Dr. Numb 5% × 1, BLT × 2 | Jun 03, 2026 | Fulfilled | $74.97 |
| #SNS-4828 | M Maria R. |
Zensa 30g × 2 | Jun 03, 2026 | Refunded | $59.98 |
Product Detail Page
Full PDP layout. 5-image gallery with lightbox. Tabbed content panel (Description, Ingredients, How to Use, Warnings, Shipping). Reviews imported via Judge.me or Stamped.io CSV. Related products strip below the fold.
Key benefits: Fast-acting within 20 minutes · Lasts up to 4 hours · Non-greasy formula · Dermatologist tested · Safe for sensitive skin.
Mobile Filter Bottom Sheet
On mobile (<768px) the sidebar filter panel is replaced by a bottom sheet that slides up from the screen edge. Triggered by the "Filter" button in the collection toolbar. Overlay dims the product grid behind it. Handle bar for drag-to-dismiss.
| Trigger | Behaviour |
|---|---|
| Tap "Filter" toolbar button | Sheet slides up from bottom, overlay fades in |
| Tap overlay | Sheet dismisses, filters unchanged |
| Drag handle downward | Sheet dismisses on release past 40% threshold |
| Tap "Cancel" | Sheet dismisses, filters unchanged |
| Tap "Show N Products" | Sheet dismisses, collection reloads with filters applied |
| Tap "Reset all" | All chips deselected, count resets to total |
Mobile PDP Layout
On mobile the 2-column desktop PDP collapses to a single scrollable column. Gallery sits at the top full-width. Product info scrolls beneath it. The sticky ATC bar is always pinned to the bottom — overlaying the scroll content — so Add to Cart is always one tap away regardless of scroll position.
| Desktop Element | Mobile Treatment |
|---|---|
| 2-column grid layout | Single column, gallery first |
| Inline ATC + qty stepper | Hidden — replaced by sticky bottom bar |
| Side-by-side trust badges | Single row, icon + short label, 3 across |
| Tabbed content (Description…) | Accordion-style — tap to expand each section |
| Review summary + cards | Collapsed — "Show 248 reviews" CTA, tap to expand |
| Related products strip | Horizontal scroll strip, 2.5 cards visible |
| Breadcrumb | Single back arrow + parent category name |
| Image gallery (lightbox) | Swipeable, dots indicator, double-tap to zoom |
| State | Behaviour |
|---|---|
| On page load | Always visible, pinned to bottom above bottom nav |
| Variant selected | Bar updates: name + price update live, no page reload |
| Qty changed | Price in bar updates live (qty × unit price) |
| Tap Add | Button shows spinner → "Added ✓" for 1.5s → resets |
| Out of stock | Bar shows "Notify Me" instead of "Add" |
Cart Cross-sell Block
One complementary product recommendation shown in the cart drawer footer — between the items list and the checkout CTA. Drives AOV by surfacing a relevant add-on at the moment of highest purchase intent. Logic: if cart contains a "Before" product, suggest an "After" product, and vice versa.
| Cart Contains | Suggest |
|---|---|
| Only "Before" products | An "After Care" product (healing balm, spray) |
| Only "After" products | A "Before" numbing cream |
| Mixed Before + After | A "During" product (open wound gel) |
| Single brand only | Different brand — introduce variety |
| Item already in cart | Skip, show next eligible product |
Option B (Full conditional logic — Liquid + JS): Edit
cart-drawer.liquid to read cart item tags and conditionally render a different product. This is significant custom development — not a simple edit. Alternatively, use a cross-sell app (e.g. Frequently Bought Together, Monster Upsells) which integrates via App Blocks with zero Liquid editing required.Announcement Bar
Top-of-site promo strip. Sits above the navigation header on every page. Rotates between 3 messages with prev/next arrows. Dismissible via close button — preference stored in localStorage for 24 hours. Forest green background is the default; swap to gold for sale events.
| # | Message | CTA |
|---|---|---|
| 1 | Free standard shipping on orders over $100 | Shop Now → |
| 2 | Trusted by 10,000+ tattoo artists worldwide | Read Reviews → |
| 3 | New arrivals: Hush Numbing Spray now in stock | Shop New → |
Homepage Hero
Full-width dark banner, ink background. Cormorant Garamond display headline at 80px. Two CTAs: primary (white button) and secondary (ghost). Trust signals below the fold line. Product image placeholder on right — supplier hero shot at 1:1 ratio, white-BG processed through the standardisation pipeline.
Ink with
Confidence.
Feel Less.
Professional-grade numbing creams, aftercare, and tattoo supplies from all major brands — delivered fast to your studio or door.
| Breakpoint | Layout change |
|---|---|
| Desktop (>1024px) | 2-col: content left, product image right (45% width) |
| Tablet (768–1024px) | Product image shrinks to 35%, headline to 56px |
| Mobile (<768px) | Single column, product image hidden, headline 40px, CTAs full-width stacked |
Collection / Category Page
The product grid page. Toolbar with count, sort dropdown, and active filter pills. 4-col grid desktop, 2-col mobile. Sidebar filter panel (desktop) collapses to bottom sheet on mobile. Active filter pills shown above the grid for quick removal.
Search — Zero Results
Shown when a search returns no matching products. Never a dead end — always offers alternative paths: clear search, browse suggestions, or contact us. The "did you mean" synonyms pull from the Shopify Search & Discovery synonym groups.
| Rule | Detail |
|---|---|
| Never show blank page | Always render the zero-results component |
| Echo the query | Show what they searched for in quotes |
| Synonym suggestions | Pull from Search & Discovery synonym groups |
| Fallback CTA | Browse All is always present |
| Typo tolerance | Shopify Search & Discovery handles this natively — misspelling "numbing" still returns results |
PDP Tab Content Panels
All 5 tab content panels fully designed. Description, Ingredients, How to Use, Warnings, and FAQs. On mobile these become accordions — tap to expand, tap again to collapse.
Active and inactive ingredients in this formulation. Key active highlighted in green.
Email Capture Popup
Klaviyo-powered popup. Triggers on exit-intent (desktop) or after 30 seconds on-page (mobile). 10% first-order discount incentive. Dismissible — preference stored for 7 days. Never shown again after sign-up.
your first order
| Device | Trigger | Delay |
|---|---|---|
| Desktop | Exit-intent (mouse leaves viewport upward) | Minimum 15s on page |
| Mobile | Time on page | 30 seconds |
| Both | Scroll depth fallback | After 60% page scroll |
| Condition | Action |
|---|---|
| Already subscribed (Klaviyo) | Never show |
| Dismissed within 7 days | Suppress (cookie) |
| Arrived via email campaign | Never show — they're already subscribed |
| Checkout page | Never show — don't interrupt purchase flow |
| After successful signup | Never show again (permanent cookie) |
Account & Login Page
Shopify-native account system. Login and Register tabs. Shop Pay SSO as the primary option — reduces friction significantly on mobile. Standard email/password form as fallback. Logged-in state shows order history, saved addresses, and reorder shortcuts.