{{ product.price | money }}
\n{% endfor %}" }, "design_principles": [ "Near-black primary, green reserved for success only.", "Soft pastel surface tints for status (info, success, warning, caution, critical).", "Variable-weight Inter at 450/550/650 — slightly lighter than standard.", "Multi-layer inset button shadow for tactile, depressible feel.", "Dedicated 'magic' purple for AI suggestions." ], "color": { "primary": { "name": "brand-near-black", "hex": "#303030", "scale": { "default": "#303030", "hover": "#1A1A1A", "active": "#1A1A1A", "disabled": "rgba(0,0,0,0.17)", "text_on_brand": "#FFFFFF" } }, "neutrals": { "page_bg": "#F1F1F1", "surface": "#FFFFFF", "surface_secondary": "#F7F7F7", "surface_tertiary": "#F3F3F3", "border": "#E3E3E3", "text": "#303030", "text_secondary": "#616161", "text_disabled": "#B5B5B5", "text_link": "#005BD3" }, "semantic": { "success": { "fill": "#047B5D", "surface": "#CDFED4", "text": "#014B40" }, "warning": { "fill": "#FFB800", "surface": "#FFF1E3", "text": "#5E4200" }, "caution": { "fill": "#FFE600", "surface": "#FFF8DB", "text": "#4F4700" }, "critical": { "fill": "#C70A24", "surface": "#FEE8EB", "text": "rgba(142,11,33,1)" }, "info": { "fill": "#91D0FF", "surface": "#EAF4FF", "text": "#003A5A", "link": "#005BD3" } }, "category_accents": { "magic": { "fill": "#8051FF", "surface": "#F8F7FF", "use": "AI suggestions / Sidekick" }, "emphasis": "#005BD3" }, "page_bg_token": "neutrals.page_bg", "card_bg_token": "neutrals.surface", "body_text_token": "neutrals.text", "muted_text_token": "neutrals.text_secondary", "notes": "Polaris uses 'critical' (red), 'warning' (orange), and 'caution' (yellow) as distinct tones — three different severity levels." }, "typography": { "fonts": { "sans": { "family": "Inter", "fallback": "-apple-system, BlinkMacSystemFont, \"San Francisco\", \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif", "google": true, "weights_variable": [450, 550, 650, 700], "weights_notes": "Polaris targets Inter's variable axis at 450/550/650 for a slightly lighter feel than standard 400/500/600" }, "mono": { "family": "ui-monospace, SFMono-Regular, \"SF Mono\", Consolas, \"Liberation Mono\", Menlo, monospace" } }, "scale_px": [11, 12, 13, 14, 16, 18, 20, 22, 24, 30, 32, 36, 40], "line_heights_px": [12, 16, 20, 24, 28, 32, 40, 48], "letter_spacing_px": { "densest": -0.54, "denser": -0.3, "dense": -0.2, "normal": 0 } }, "tokens": { "spacing_px": { "0": 0, "025": 1, "050": 2, "100": 4, "150": 6, "200": 8, "300": 12, "400": 16, "500": 20, "600": 24, "800": 32, "1000": 40, "1200": 48, "1600": 64, "2000": 80, "2400": 96, "2800": 112, "3200": 128 }, "spacing_aliases_px": { "card_padding": 16, "card_gap": 16, "button_group_gap": 8, "table_cell_padding": 6 }, "radius_px": { "0": 0, "050": 2, "100": 4, "150": 6, "200": 8, "300": 12, "400": 16, "500": 20, "750": 30, "full": 9999 }, "shadow": { "0": "none", "100": "0 1px 0 rgba(26,26,26,0.07)", "200": "0 3px 1px -1px rgba(26,26,26,0.07)", "300": "0 4px 6px -2px rgba(26,26,26,0.20)", "400": "0 8px 16px -4px rgba(26,26,26,0.22)", "500": "0 12px 20px -8px rgba(26,26,26,0.24)", "600": "0 20px 20px -8px rgba(26,26,26,0.28)", "button_primary_inset_notes": "Complex multi-layer inset shadow gives Polaris primary buttons a tactile, depressible feel" }, "motion": { "easings": { "default": "cubic-bezier(0.25, 0.1, 0.25, 1)", "ease_in_out": "cubic-bezier(0.42, 0, 0.58, 1)", "ease_out": "cubic-bezier(0.19, 0.91, 0.38, 1)", "ease_in": "cubic-bezier(0.42, 0, 1, 1)", "linear": "linear" }, "duration_ms": [0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 5000], "keyframes": ["bounce", "fade-in", "pulse", "spin", "appear-above", "appear-below"] } }, "components": { "button": { "variants": { "primary": { "bg": "#303030", "fg": "#FFFFFF", "shadow": "--p-shadow-button-primary (multi-inset bevel)", "notes": "Tactile depressible feel" }, "secondary": { "bg": "#FFFFFF", "border": "border", "shadow": "subtle bevel" }, "tertiary": { "bg": "transparent" }, "plain": { "text_only": true }, "critical": { "bg": "#C70A24", "fg": "#FFFFFF" } } }, "input": { "bg": "surface", "border": "border", "border_width": 1, "radius_px": 8, "shadow": "shadow-border-inset (subtle depth)" }, "card": { "bg": "surface", "radius_px": 12, "padding_px": 16, "gap_px": 16, "shadow": "minimal" }, "badge": { "shape": "pill", "variants": ["info", "success", "warning", "attention", "critical", "new", "magic"], "uses": "*-surface fills for soft pastels" }, "banner": { "shape": "full-width tinted card", "leading_icon": true, "variants": ["info", "success", "warning", "critical"], "uses_surface_tint": true, "dismissible": true } }, "do": [ "Use near-black for primary actions, not green.", "Use the 'magic' purple specifically for AI features.", "Use the variable Inter weights 450/550/650 — it's a signature." ], "dont": [ "Don't make primary actions green — that's reserved for success states.", "Don't flatten the primary button — its inset shadow is a Polaris signature.", "Don't conflate 'warning' (orange) and 'caution' (yellow) — they're distinct." ], "provenance": { "scanned_from": [ "https://polaris-react.shopify.com/tokens/color", "https://polaris-react.shopify.com/tokens/font", "https://polaris-react.shopify.com/tokens/space", "https://polaris-react.shopify.com/tokens/border", "https://polaris-react.shopify.com/tokens/shadow", "https://polaris-react.shopify.com/tokens/motion", "https://www.shopify.com/" ], "scanned_at": "2026-05-25", "confidence": "high", "notes": "All hex values pulled from published Polaris tokens. Token names use base-1000 scale (050=2px, 100=4px) — unusual and worth preserving." } }