[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6},"actionData","errors","routes/templates.$id_.preview",{"_7":8,"_9":10,"_11":12,"_13":14},"entry",{"_15":96,"_11":12,"_16":17,"_18":19,"_141":142,"_143":144,"_38":21,"_26":27,"_22":145,"_146":147,"_28":148,"_149":124,"_150":31,"_151":94,"_152":-5,"_153":-5},"revision",{"_15":94,"_95":96,"_97":98,"_99":100,"_101":102,"_103":104,"_105":98,"_106":-5,"_32":107,"_108":73,"_109":78,"_110":111,"_112":113,"_114":115,"_116":117,"_118":119,"_120":121},"slug","reviews-shade-tagged-kylie","template",{"_15":12,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39},"id","name","Kylie Cosmetics Shade-Tagged Review Wall","description","Cosmetics review section that solves shade-matching through social proof: a two-column header pairs the 4.7/12,480 rating summary with a blush rating-breakdown card whose five star-level bars animate outward on load, plus a would-recommend stat; below it a ReviewList island in stamped variant renders five real-voice reviews where the demographics sidebar carries Shade and Skin Tone instead of age/gender, with improvement tags, helpful votes, sort and filter controls. Island CSS vars are remapped to the brand palette so the list inherits the mauve theme.","category","reviews","industries",[85],"useCase","social-proof","mood","soft","tags",[85,86,21,87,71,88,89,90,91,92,93],"thumbnail","https://pcx-assets.trylexsis.com/template-catalog/media/e72c99b815a679575a0f0ee2dec8e59047d31a4e5bad47d237138a6c7d1dc56c.webp","islands_used",[68],"props_used",{"_68":69},"theme",{"_45":46,"_47":48},"section",{"_15":12,"_40":41,"_42":43,"_44":-5},"html","

\n\n

Reviews

12,480 reviews, one formula

\n \n 4.7\n out of 5\n

Every review below is tagged with the shade and skin tone it was written for — filter by yours to find your match faster.

\n\n

Rating breakdown

\n 5 ★\n \n \n \n 76%\n
\n 4 ★\n \n \n \n 16%\n
\n 3 ★\n \n \n \n 5%\n
\n 2 ★\n \n \n \n 2%\n
\n 1 ★\n \n \n \n 1%\n

92% would recommend to a friend

\n\n

","css","#kyl-reviews {\n --lx-review-accent: var(--lx-accent,#905D5D);\n --lx-review-text: var(--lx-text,#393939);\n --lx-review-muted: var(--lx-muted,#645458);\n --lx-review-border: var(--lx-border,#E7DAE2);\n --lx-review-border-color: var(--lx-border,#E7DAE2);\n --lx-review-surface: var(--lx-highlight,#f8f1f4);\n --lx-review-card-bg: transparent;\n --lx-review-badge-bg: var(--lx-highlight,#f8f1f4);\n}\n/* Three colors in the review primitives are hardcoded and no --lx-review-* var reaches\n them, so override by structure. See ISLAND_GAPS.md gap 8.\n 1) primitives/Rating.tsx uses .text-amber-400 for filled stars.\n 2) _shared/ReviewCard.tsx uses .text-green-600 for the Verified badge.\n 3) primitives/Badge.tsx builds `var(--lx-accent-color,#5055aa)20` — not valid CSS,\n so improvement tags render indigo with no background at all. */\n#kyl-reviews .text-amber-400 { color: var(--lx-secondary,#b3848f) !important; }\n#kyl-reviews .text-green-600 { color: var(--lx-accent,#905D5D) !important; }\n#kyl-reviews [data-part=\"improvements\"] > div > span {\n background: var(--lx-highlight,#f8f1f4) !important;\n color: var(--lx-accent,#905D5D) !important;\n}\n.kyl-bar { width: var(--kyl-w); animation: kyl-grow 1s cubic-bezier(.22,.7,.24,1) both; }\n@keyframes kyl-grow { from { width: 0; } }\n.kyl-reveal { opacity: 0; transform: translateY(16px); animation: kyl-rise .62s cubic-bezier(.22,.7,.24,1) both; }\n.kyl-d1 { animation-delay: .12s; }\n.kyl-d2 { animation-delay: .2s; }\n@keyframes kyl-rise { to { opacity: 1; transform: none; } }\n@media (prefers-reduced-motion: reduce) {\n .kyl-reveal { animation: none !important; opacity: 1 !important; transform: none !important; }\n .kyl-bar { animation: none !important; width: var(--kyl-w); }\n}\n@media (max-width: 880px) { .kyl-rev-head { grid-template-columns: minmax(0,1fr) !important; gap: 26px !important; } }\n/* mobile-pass */\n@media (max-width: 640px) {\n section { padding: 42px 14px !important; }\n section h2 { font-size: 25px !important; }\n .kyl-rev-head > div:last-child { padding: 18px 16px !important; }\n}","js","palette",{"_53":54,"_55":56,"_57":58,"_59":54,"_60":61,"_62":63,"_64":65,"_66":67},"fonts",{"_49":50,"_51":52},"display","Poppins","body","Inter","bg","#FFFFFF","accent","#905D5D","text","#393939","surface","border","#E7DAE2","highlight","#f8f1f4","secondary","#b3848f","muted","#645458","ReviewList",{"_70":71,"_72":73,"_74":73,"_75":73,"_76":73,"_77":78,"_79":80,"_81":82,"_83":84},"variant","stamped","showDemographics",true,"showHelpful","showSort","showFilters","showHeader",false,"pageSize",5,"averageRating",4.7,"totalReviews",12480,"beauty","cosmetics","review-list","rating-breakdown","shade-tagged","skin-tone","helpful-votes","mauve","animated-bars","1505d251-3058-4111-b34e-03ce1b65c651","template_id","7c2dfa7f-e243-4005-a8de-dba71e84ac70","version",1,"artifact_key","template-catalog/templates/7c2dfa7f-e243-4005-a8de-dba71e84ac70/revisions/1/template.json","manifest_key","template-catalog/templates/7c2dfa7f-e243-4005-a8de-dba71e84ac70/revisions/1/manifest.json","artifact_sha256","a530c2ae2156407fbdceb1447a6def6c72a4d09bd1e9872c3ae7529c627ad815","schema_version","renderer_version",[68],"themable","has_js","size_kb",12.67,"validation_status","valid","validation_report",{"_113":73,"_4":137,"_138":139,"_32":140},"media_manifest",[122],"created_at","2026-08-23T07:33:37.646587+00:00","published_at","2026-08-23T07:33:38.102089+00:00",{"_123":124,"_125":31,"_126":127,"_128":129,"_130":-5,"_131":132,"_133":134,"_135":136},"key","template-catalog/media/e72c99b815a679575a0f0ee2dec8e59047d31a4e5bad47d237138a6c7d1dc56c.webp","url","sha256","e72c99b815a679575a0f0ee2dec8e59047d31a4e5bad47d237138a6c7d1dc56c","source","/templates/thumbs/reviews-shade-tagged-kylie.webp","alt_text","provenance","repository migration","size_bytes",22942,"content_type","image/webp",[],"warnings",[],[68],"visibility","global","status","published",[85],"page_types",[154],[85,86,21,87,71,88,89,90,91,92,93],"thumbnail_key","thumbnail_url","current_revision_id","workspace_id","created_by_user_id","pdp"]