{ "$schema": "https://pumpcade-design-system.netlify.app/data/design-system.schema.json", "name": "Pumpcade Design System", "version": "2.0.0", "generated": "2026-09-30", "source": { "figma": "6E7Dfwlfl3mHJ7T5NeWNbu", "tokenSnapshot": "713c16b", "tokenSource": "source/scotty/design-tokens.ts" }, "howToUse": "Use the current React package and component workbench for new screens. The catalogue contains source geometry and historical specimens; its CSS snippets are reference implementations, not the current React API. Figma source IDs and SVG export bounds are recorded independently.", "classes": [ { "name": "Foundation", "note": "Textures, seams and the shadow vocabulary. No meaning on their own, the raw material every surface is drawn from." }, { "name": "Surface", "note": "The drawn comic plates on their own: face, hard shadow, clipped texture. Take one and put your own content on it." }, { "name": "Control", "note": "Anything you act on, buttons, tabs, chips, selects, fields." }, { "name": "Display", "note": "Anything that shows state or data, badges, arrows, tags, charts, scoreboards." }, { "name": "Region", "note": "A whole area of a page: nav bars, cards, rows, podiums, panels, modals." } ], "language": { "shadow": { "rule": "Every raised element is two copies of one path: a coloured face and a hard black silhouette behind it. Zero blur, always.", "ladder": [ 2, 3, 4, 5, 8, 11 ], "forbidden": [ 6, 7 ], "note": "11 was added because 19 of 56 shadow-bearing exports measure 10.65-12.38. 6 and 7 remain drift." }, "emphasis": { "rule": "A white copy over a black copy of the same word.", "offset": "0.062 x fontSize", "min": "1px", "note": "Do not apply to button labels, the drawn button has exactly three paths." }, "seams": { "rule": "Segmented rows are built from caps, and segments OVERLAP by the seam depth rather than butting together.", "depths": { "SLANT": 21.91, "TORN": 46.59, "ZIGZAG": 13.08, "HEAD CAP": 18.34, "TAIL CAP": 28.84, "RAGGED": 20.86 } }, "parametric": { "rule": "Preserve source path vertices, notches and shadow relationships. Source CTA plates permit controlled body stretch; content must remain inside their safe inset. Complex illustrations and glyphs keep their aspect ratio.", "css": "border-image with a slice equal to the cap depths" }, "construction": { "rule": "Surface + content. A drawn plate carries content placed on top of it. Take the Surface, put your own content on it." }, "halftone": { "rule": "Ship as an SVG , never as baked vector dots.", "why": "Flattened it is up to 190KB per component; as a pattern it is reusable." }, "focus": { "rule": "Keyboard focus must remain visible on every interactive element. Prefer a silhouette stroke when available; an offset outline is an intentional accessible fallback.", "width": 5, "widthSmall": 3, "smallThreshold": 60, "colour": "#FFA800", "why": "The artwork has exactly one authored focus state, LoadMore's focus-ring vector, and it follows the drawn edge. A rectangular ring on a torn comic plate draws a box the artwork never has and reads as a browser default sitting on top of the design.", "smallRule": "Controls under 60 px on their short edge step to 3 px; 5 px around a 43×50 button is half the button.", "cssFallback": "Where the shape is a CSS border-image the silhouette cannot be stroked. Use outline:3px solid #FFA800; outline-offset:2px, declared as a fallback, not as the same thing.", "supersedes": "Tailwind ring-2, which is a framework default rather than a designed value.", "decision": "G10" }, "contrast": { "rule": "White label at 18px and above, black below.", "why": "White on #9652EF is 4.42:1, passes AA-Large, fails AA-Normal. Black is 4.75:1." }, "outcome": { "yes": { "colour": "#91BB4F", "glyph": "check" }, "no": { "colour": "#EA2A46", "glyph": "exclamation" }, "rule": "NO is red, not the brand orange.", "why": "Orange is the brand, logo, focus, headings. Making it also mean the losing side overloads the one colour the brand owns, which is what R1 exists to stop. Red is already the negative signal on the LOSS stamp, the voided badge and the danger alert.", "accessibility": "Red/green is the deuteranopia failure and orange/green would separate better. Not decisive here: the drawn YesNoButton already carries a check on YES and an exclamation on NO, so the pair survives colour being removed. The glyph is load-bearing, do not drop it.", "conflictsWith": "Historical code used orange for NO. Current source and exports use red #EA2A46.", "decision": "G11" }, "skeleton": { "rule": "A skeleton is any shape-only SVG filled flat. It is a rule, not a component.", "css": ".pc-skeleton{filter:grayscale(1) brightness(0) invert(1) opacity(.14)}", "why": "The shape exports already are skeletons, face, shadow and outline with all content stripped. 81 skeletons, no drawings.", "motion": "The optional pulse is the product's own animate-pulse and is suppressed under prefers-reduced-motion." }, "variantAxes": { "rule": "Four axis names, and each means one thing across the whole library.", "why": "The audit found State meaning EIGHT different things, interaction on LoadMore, lifecycle on OutcomeCard, selection on Segmented, and a mix of selection and lifecycle on SportsTab. A consumer could not predict any component's shape from any other, which is the difference between an API and a pile of properties.", "axes": { "State": { "means": "Interaction and selection, mutually exclusive UI conditions.", "values": [ "default", "hover", "focus", "pressed", "disabled", "selected" ], "canonical": "Control / Button / LoadMore, the only component whose states the artwork drew." }, "Status": { "means": "Domain lifecycle, what has happened to the thing, not to the pointer.", "values": [ "live", "fair-launch", "awaiting", "settled", "voided", "won", "lost", "created" ] }, "Size": { "means": "Scale of one drawing. Never a context word.", "values": [ "sm", "md", "lg", "xl" ], "note": "OutcomeSlats was Size=modal|card. Those are places, not sizes; the card form is a uniform 0.613 of the modal form, so it is md against lg." }, "Tone": { "means": "Semantic colour role.", "values": [ "primary", "accent", "positive", "info", "success", "warn", "error", "orange", "black", "violet" ] } }, "domainAxes": [ "Side (yes|no)", "Provider (phantom|google|x)", "Edge (the seam library)" ], "knownInconsistency": "Control / Nav / SportsTab still carries live on its State axis. live is a Status, but the selected+live combination was never drawn, so splitting the axis now would invent artwork. It splits when that variant is drawn." } }, "tokens": { "count": 171, "source": { "file": "source/scotty/design-tokens.ts", "snapshot": "713c16b", "handoff": "2026-09-29", "version": "2.0.0" }, "formats": { "css": "https://pumpcade-design-system.netlify.app/data/export/tokens.css", "w3c": "https://pumpcade-design-system.netlify.app/data/export/tokens.w3c.json", "tailwind": "https://pumpcade-design-system.netlify.app/data/export/tailwind.theme.json" } }, "downloads": { "shapes": "https://pumpcade-design-system.netlify.app/data/export/pumpcade-shapes.zip", "svg": "https://pumpcade-design-system.netlify.app/data/export/pumpcade-svg.zip" }, "components": [ { "id": "surface-banner", "sourceId": "6020:4", "name": "Surface / Banner", "class": "Surface", "domain": "Core", "size": { "w": 495, "h": 138 }, "exportBox": null, "figma": { "nodeId": "6020:4", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6020-4", "sheet": "04 · Surfaces" }, "authored": false, "description": "Cloned verbatim from the original artwork (40:39335). Fill is tokenised; the hard offset shadow is the shared effect style instead of the duplicated black path the artwork used.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/r2-banner.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Surface / Banner, 495 × 138\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-banner{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:495px; height:138px;\n padding:0px 40px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/primitive-banner.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 46px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-banner[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-banner[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Content", "type": "INSTANCE_SWAP", "default": "Display / Type / DisplayTitle", "values": [] }, { "name": "Texture", "type": "BOOLEAN", "default": "false", "values": [] }, { "name": "Shadow", "type": "BOOLEAN", "default": "true", "values": [] } ], "use": "Use as the wide plate under a full-width bar of content, it is the 495×138 parametric plate GAPS #2 specifies for the mobile trade-ticket bar, stretched on the SLANT seam (21.91) with the caps pinned left and right.", "notUse": "Not for a single line of label copy, at 138 tall it dwarfs one line; the label plate is the 296×58 Surface / Label Banner.", "insteadUse": "Surface / Label Banner", "pairsWith": [ "Control / Market / StakeInput", "Control / Market / YesNoButton", "Foundation / Ribbon Seam" ] }, { "id": "surface-label-banner", "sourceId": "6020:6", "name": "Surface / Label Banner", "class": "Surface", "domain": "Core", "size": { "w": 296, "h": 58 }, "exportBox": null, "figma": { "nodeId": "6020:6", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6020-6", "sheet": "04 · Surfaces" }, "authored": false, "description": "Cloned verbatim from the artwork (40:36615). Fill is tokenised; the hard shadow is the shared effect style.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/r2-labelbanner.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Surface / Label Banner, 296 × 58\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-label-banner{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:296px; height:58px;\n padding:0px 24px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/primitive-label-banner.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 24px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-label-banner[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-label-banner[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Label", "type": "TEXT", "default": "SECTION", "values": [] }, { "name": "Shadow", "type": "BOOLEAN", "default": "true", "values": [] } ], "use": "Use as the plate under one line of label copy at 296×58, it is the plate the authored AlertStrip is built on, caps fixed and only the body stretching.", "notUse": "Not stretched to page width, G9 caps this plate at section width because its body carries a long top tear and a bottom tab at ~0.54 of the body, both of which strand when the body is stretched 12×.", "insteadUse": "Display / Feedback / AlertStrip", "pairsWith": [ "Display / Feedback / AlertStrip", "Surface / Type / SectionHeading", "Display / Type / DisplayTitle" ] }, { "id": "surface-torn-panel", "sourceId": "6020:8", "name": "Surface / Torn Panel", "class": "Surface", "domain": "Core", "size": { "w": 454, "h": 263 }, "exportBox": null, "figma": { "nodeId": "6020:8", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6020-8", "sheet": "04 · Surfaces" }, "authored": false, "description": "Cloned verbatim from the artwork (40:36597). Fill is tokenised; the hard shadow is the shared effect style.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/primitive-torn-panel.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6020-8.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Surface / Torn Panel, 454 × 263\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-torn-panel{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:454px; height:263px;\n padding:42px 32px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/primitive-torn-panel.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-torn-panel[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-torn-panel[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Content", "type": "INSTANCE_SWAP", "default": "Display / Type / DisplayTitle", "values": [] }, { "name": "Texture", "type": "BOOLEAN", "default": "false", "values": [] } ], "use": "Use as the ground for any panel that holds content, it is the plate under EmptyState, Masthead and TicketPanel, so changing this plate changes all three.", "notUse": "Not as the ground for a modal, every modal title and provider row sits on Surface / ModalPanel (518×361, with the dotted clip group).", "insteadUse": "Surface / ModalPanel", "pairsWith": [ "Surface / Feedback / EmptyState", "Region / Masthead", "Region / TicketPanel", "Display / Type / DisplayTitle" ] }, { "id": "surface-burst", "sourceId": "6021:3", "name": "Surface / Burst", "class": "Surface", "domain": "Core", "size": { "w": 212, "h": 165 }, "exportBox": null, "figma": { "nodeId": "6021:3", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6021-3", "sheet": "04 · Surfaces" }, "authored": false, "description": "Cloned verbatim from the artwork (40:39378). Starburst silhouette; do not stretch non-uniformly.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/primitive-burst.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6021-3.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Surface / Burst, 212 × 165\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-burst{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:212px; height:165px;\n padding:26px 15px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/primitive-burst.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-burst[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-burst[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Size", "type": "VARIANT", "default": "sm", "values": [ "sm", "pool", "champion" ] }, { "name": "Content", "type": "INSTANCE_SWAP", "default": "Display / Type / DisplayTitle", "values": [] } ], "use": "Use as the starburst plate behind a short, loud figure, it is the 212×165 body of TimerChip [burst] and the instance the landing ground places six times.", "notUse": "Not stretched to fill a wide slot, the starburst silhouette must scale uniformly; a wide banner-with-burst is drawn as Display / Market / HotMarketTag.", "insteadUse": "Display / Market / HotMarketTag", "pairsWith": [ "Display / Market / TimerChip [burst]", "Surface / Page Ground [landing]", "Foundation / Halftone Edge Dots" ] }, { "id": "foundation-ribbon-segment", "sourceId": "6021:5", "name": "Foundation / Ribbon Segment", "class": "Foundation", "domain": "Core", "size": { "w": 367, "h": 82 }, "exportBox": null, "figma": { "nodeId": "6021:5", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6021-5", "sheet": "01 · Foundations" }, "authored": false, "description": "One cell of a segmented row, 82px tall, the shared skeleton behind ActivityRow and LeaderboardRow. The right edge is a chevron that notches into the next segment.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6021-5.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Foundation / Ribbon Segment, 367 × 82\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-ribbon-segment{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:367px; height:82px;\n padding:0px 29px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/primitive-ribbon-segment.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-ribbon-segment[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-ribbon-segment[data-loading] > *{ visibility:hidden }", "plannedProps": [], "use": "Use as one cell of a segmented row, body height 81.90 is universal across ActivityRow, LeaderboardRow, StatStrip and SummaryBar, and the right edge is a chevron that notches into the next segment.", "notUse": "Not butted against the next cell, segments OVERLAP by the seam depth (x[i+1] = x[i] + W[i] − seam); take the cap and depth from Foundation / Ribbon Seam.", "insteadUse": "Foundation / Ribbon Seam", "pairsWith": [ "Foundation / Ribbon Seam", "Foundation / Ribbon Row Shadow", "Region / Data / ActivityRow", "Region / Data / LeaderboardRow" ] }, { "id": "foundation-halftone-edge-dots", "sourceId": "6021:6", "name": "Foundation / Halftone Edge Dots", "class": "Foundation", "domain": "Core", "size": { "w": 320, "h": 200 }, "exportBox": null, "figma": { "nodeId": "6021:6", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6021-6", "sheet": "01 · Foundations" }, "authored": false, "description": "Exact reproduction of the code pattern burstEdgeDots: 13x13 tile, circles r=2 at (3.5,3.5) and (10,10), opacity 0.55. One tiled node replaces 30,060 dot vectors; in code this is an SVG .", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6021-6.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Foundation / Halftone Edge Dots, 320 × 200\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-halftone-edge-dots{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:320px; height:200px;\n padding:32px 22px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/primitive-halftone-edge-dots.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-halftone-edge-dots[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-halftone-edge-dots[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Tone", "type": "VARIANT", "default": "edge-dots", "values": [ "bg-dots", "edge-dots", "light" ] } ], "use": "Use as the dot field at the edge of a burst or plate, 13×13 tile, r=2 at (3.5,3.5) and (10,10), opacity 0.55, shipped as an SVG because flattened it is up to 190KB per component.", "notUse": "Not on a dark surface, where black dots disappear, the dark-ground variant is Foundation / Halftone Light.", "insteadUse": "Foundation / Halftone Light", "pairsWith": [ "Surface / Burst", "Surface / ModalPanel", "Surface / Torn Panel" ] }, { "id": "foundation-halftone-light", "sourceId": "6021:7", "name": "Foundation / Halftone Light", "class": "Foundation", "domain": "Core", "size": { "w": 320, "h": 200 }, "exportBox": null, "figma": { "nodeId": "6021:7", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6021-7", "sheet": "01 · Foundations" }, "authored": false, "description": "Light variant of burstEdgeDots, white dots for dark surfaces.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6021-7.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Foundation / Halftone Light, 320 × 200\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-halftone-light{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:320px; height:200px;\n padding:32px 22px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/primitive-halftone-light.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-halftone-light[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-halftone-light[data-loading] > *{ visibility:hidden }", "plannedProps": [], "use": "Use as the dot field over dark surfaces, it is burstEdgeDots in white, and the skeleton rule uses it as the shimmer field over a filled shape.", "notUse": "Not over paper or white plates, where white dots vanish, use Foundation / Halftone Edge Dots.", "insteadUse": "Foundation / Halftone Edge Dots", "pairsWith": [ "Foundation / Skeleton", "Surface / OutcomeCard", "Surface / Page Ground [landing]" ] }, { "id": "foundation-halftone-bg-dots", "sourceId": "6028:2", "name": "Foundation / Halftone Bg Dots", "class": "Foundation", "domain": "Core", "size": { "w": 320, "h": 200 }, "exportBox": null, "figma": { "nodeId": "6028:2", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6028-2", "sheet": "01 · Foundations" }, "authored": false, "description": "Exact reproduction of the code pattern bgDots: 15x15 tile, circles r=2.4 at (4,4) and (11.5,11.5), opacity 0.45.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6028-2.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Foundation / Halftone Bg Dots, 320 × 200\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-halftone-bg-dots{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:320px; height:200px;\n padding:32px 22px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/primitive-halftone-bg-dots.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-halftone-bg-dots[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-halftone-bg-dots[data-loading] > *{ visibility:hidden }", "plannedProps": [], "use": "Use as the page-ground dot field, the coarser 15×15 tile, r=2.4 at (4,4) and (11.5,11.5), opacity 0.45, which is what the landing ground's 1047-node dot field must become.", "notUse": "Not as the edge treatment on a burst, that is the finer 13×13 burstEdgeDots tile at opacity 0.55.", "insteadUse": "Foundation / Halftone Edge Dots", "pairsWith": [ "Surface / Page Ground [landing]", "Region / Nav / TopNav" ] }, { "id": "control-button-burst", "sourceId": "6268:2037", "name": "Control / Button / Burst", "class": "Control", "domain": "Button", "size": { "w": 314, "h": 233 }, "exportBox": null, "figma": { "nodeId": "6268:2037", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6268-2037", "sheet": "05 · Buttons" }, "authored": false, "description": "Artwork 40:5364. The primary CTA of the product. 27 path vertices = 13 spikes, cloned verbatim. Fill is the artwork gradient stored inverted (#FFA800@0 → #FAF424@1) so the rendered top is yellow. Shadow +15.7,+19.7. The label is vector outlines in the artwork.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/button-burst.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6062-63.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / Button / Burst, 314 × 233\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-burst{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:314px; height:233px;\n padding:37px 22px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/button-burst.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, LoadMore is 6.13, not 3.\n the same distance each way, so press and release are one gesture */\n.pc-burst{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-burst:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-burst:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-burst:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-burst[disabled], .pc-burst[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-burst{ transition:none } }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-burst[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-burst[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Label", "type": "TEXT", "default": "CREATE\nMARKET", "values": [] }, { "name": "State", "type": "VARIANT", "default": "default", "values": [ "default", "hover", "pressed", "focus", "disabled" ] } ], "use": "Use for the one page-level primary CTA (CREATE MARKET), 13 spikes, a +15.7/+19.7 shadow and the inverted #FFA800→#FAF424 gradient make it the loudest control in the system, which only holds if there is exactly one on screen.", "notUse": "Not for the confirm action inside a modal or card, that is Control / Button at Tone=primary, which is authored from the LoadMore silhouette and carries five states.", "insteadUse": "Control / Button", "pairsWith": [ "Control / SpinnerSelect", "Control / Chip / Duration", "Display / Badge / Step" ] }, { "id": "control-chip-notched", "sourceId": "6059:87", "name": "Control / Chip / Notched", "class": "Control", "domain": "Chip", "size": { "w": 198, "h": 73 }, "exportBox": null, "figma": { "nodeId": "6059:87", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6059-87", "sheet": "06 · Chips" }, "authored": false, "description": "ONE component, three uses. QuickStakeChip (h 62.02), SegmentedTab lg (h 62.45) and the StepHeader (h 73.26) are the SAME silhouette, md and lg differ by exactly k = 1.1731 on every one of the 10 path points. Caps fixed, body stretches.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/r2-chip-notched.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / Chip / Notched, 198.4 × 73.4\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-notched{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:198.4px; height:73.4px;\n padding:0px 16px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/chip-notched.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 31px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, LoadMore is 6.13, not 3.\n the same distance each way, so press and release are one gesture */\n.pc-notched{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-notched:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-notched:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-notched:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-notched[disabled], .pc-notched[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-notched{ transition:none } }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-notched[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-notched[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Label", "type": "TEXT", "default": "$10", "values": [] }, { "name": "Size", "type": "VARIANT", "default": "md", "values": [ "md", "lg" ] }, { "name": "Selected", "type": "BOOLEAN", "default": "false", "values": [] }, { "name": "State", "type": "VARIANT", "default": "default", "values": [ "default", "hover", "pressed", "focus", "disabled" ] } ], "use": "Use for the quick-stake row and for any single-select chip, one silhouette at two sizes (md and lg differ by exactly k = 1.1731 on every one of the 10 path points), so change Size rather than redrawing.", "notUse": "Not for something that only reports state, StatusBadge is deliberately built on this same notched chip so status reads as status, and a pressable chip beside an unpressable one is the confusion R1 exists to stop.", "insteadUse": "Display / Market / StatusBadge", "pairsWith": [ "Control / ChipRow", "Control / Market / StakeInput", "Region / Masthead", "Region / TicketPanel" ] }, { "id": "control-chip-duration", "sourceId": "6064:79", "name": "Control / Chip / Duration", "class": "Control", "domain": "Chip", "size": { "w": 233, "h": 163 }, "exportBox": null, "figma": { "nodeId": "6064:79", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6064-79", "sheet": "06 · Chips" }, "authored": false, "description": "Artwork 40:3227. Speech bubble with a downward tail. Four colours, one per duration: 1 MIN #EA2A46, 5 MIN #91BB4F, 10 MIN #FAF424, 30 MIN #419FE5. Selected = the label duplicated, black copy offset +4.4 behind white. Sizes vary ±14% and the bubbles deliberately overlap.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/chip-duration.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6064-79.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / Chip / Duration, 232.9 × 163.4\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-duration{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:232.9px; height:163.4px;\n padding:26px 16px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/chip-duration.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, LoadMore is 6.13, not 3.\n the same distance each way, so press and release are one gesture */\n.pc-duration{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-duration:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-duration:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-duration:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-duration[disabled], .pc-duration[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-duration{ transition:none } }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-duration[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-duration[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Label", "type": "TEXT", "default": "1 MIN", "values": [] }, { "name": "Duration", "type": "VARIANT", "default": "1 MIN", "values": [ "1 MIN", "5 MIN", "10 MIN", "30 MIN" ] }, { "name": "Selected", "type": "BOOLEAN", "default": "false", "values": [] }, { "name": "State", "type": "VARIANT", "default": "default", "values": [ "default", "hover", "pressed", "focus", "disabled" ] } ], "use": "Use for the four fixed market durations on Create Market, one colour per value (1 MIN #EA2A46, 5 MIN #91BB4F, 10 MIN #FAF424, 30 MIN #419FE5), and selected is the label duplicated with a black copy offset +4.4 behind the white.", "notUse": "Not as a tooltip: this is the system's only speech bubble and GAPS #11 earmarks the path for a re-authored parametric Tooltip [speech] whose body stretches to the copy, that component does not exist yet, and the duration chip's body is fixed.", "insteadUse": null, "pairsWith": [ "Control / SpinnerSelect", "Display / Badge / Step", "Control / Button / Burst" ] }, { "id": "control-market-yesnobutton", "sourceId": "6065:101", "name": "Control / Market / YesNoButton", "class": "Control", "domain": "Market", "size": { "w": 215, "h": 153 }, "exportBox": null, "figma": { "nodeId": "6065:101", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6065-101", "sheet": "05 · Buttons" }, "authored": false, "description": "Artwork 40:36784 / 40:34375. The comic tilt IS a rotation of a plain rectangle: YES +2.03°, NO −2.08°, so the pair splays outward. Panel carries the flat fill and NO stroke; the outline is separate; shading is a white→black linear at blendMode OVERLAY. Disabled keeps the shading, so it reads as a grey gradient.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/market-yesnobutton.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6065-101.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / Market / YesNoButton, 215 × 153\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-yesnobutton{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:215px; height:153px;\n padding:24px 15px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/market-yesnobutton.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, LoadMore is 6.13, not 3.\n the same distance each way, so press and release are one gesture */\n.pc-yesnobutton{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-yesnobutton:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-yesnobutton:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-yesnobutton:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-yesnobutton[disabled], .pc-yesnobutton[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-yesnobutton{ transition:none } }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-yesnobutton[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-yesnobutton[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Side", "type": "VARIANT", "default": "yes", "values": [ "yes", "no" ] }, { "name": "State", "type": "VARIANT", "default": "default", "values": [ "default", "resolving", "settled", "disabled" ] }, { "name": "Payout", "type": "BOOLEAN", "default": "false", "values": [] }, { "name": "Payout text", "type": "TEXT", "default": "WIN $18.40", "values": [] } ], "use": "Use for the binary side selection on the money path, keep the pair adjacent, because the comic tilt is a rotation of a plain rectangle (YES +2.03°, NO −2.08°) that only reads as intentional when the two splay outward, and keep the check/exclamation glyphs since G11 makes them the load-bearing part of the YES/NO distinction.", "notUse": "Not where the payout line must be shown, the full block including the hint is drawn at 215×201 as Control / Market / YesNoButton [with payout], and the code reserves that aspect.", "insteadUse": "Control / Market / YesNoButton [with payout]", "pairsWith": [ "Display / Market / PayoutHint", "Control / Market / StakeInput", "Control / Market / OutcomeSlats" ] }, { "id": "control-tab-segmented-lg", "sourceId": "6072:17", "name": "Control / Tab / Segmented [lg]", "class": "Control", "domain": "Tab", "size": { "w": 172, "h": 80 }, "exportBox": null, "figma": { "nodeId": "6072:17", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6072-17", "sheet": "09 · Tabs" }, "authored": false, "description": "Artwork 40:12782. ACTIVE = #9652EF plus a clip group carrying the OVERLAY gradient; INACTIVE = plain #FFFFFF with no clip group at all. Label stays black in BOTH states. Active vs inactive is not a fill swap. The set carried an unnamed third variant (Figma's \"State3\") that was byte-identical to default, same 172×80 box, same three nodes, same fills, so it was removed rather than named.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/tab-segmented-lg.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6072-17.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / Tab / Segmented [lg], 172 × 79.9\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-segmented-lg{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:172px; height:79.9px;\n padding:0px 16px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/tab-segmented-lg.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, LoadMore is 6.13, not 3.\n the same distance each way, so press and release are one gesture */\n.pc-segmented-lg{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-segmented-lg:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-segmented-lg:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-segmented-lg:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-segmented-lg[disabled], .pc-segmented-lg[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-segmented-lg{ transition:none } }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-segmented-lg[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-segmented-lg[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Label", "type": "TEXT", "default": "ALL TIME", "values": [] }, { "name": "Selected", "type": "BOOLEAN", "default": "false", "values": [] }, { "name": "State", "type": "VARIANT", "default": "default", "values": [ "default", "hover", "pressed", "focus", "disabled" ] } ], "use": "Use for the large segmented tab row, where ACTIVE is #9652EF plus a clip group carrying the OVERLAY gradient and INACTIVE is plain #FFFFFF with no clip group, the label stays black in both, so active is not a fill swap.", "notUse": "Not maintained as its own drawing: this is Control / Chip / Notched at k = 1.1731 on all 10 path points (GAPS §1.2), so new work should take the chip and set Size.", "insteadUse": "Control / Chip / Notched", "pairsWith": [ "Control / ChipRow", "Region / Masthead" ] }, { "id": "control-tab-segmented-md", "sourceId": "6072:33", "name": "Control / Tab / Segmented [md]", "class": "Control", "domain": "Tab", "size": { "w": 188, "h": 71 }, "exportBox": null, "figma": { "nodeId": "6072:33", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6072-33", "sheet": "09 · Tabs" }, "authored": false, "description": "Artwork 40:13975 ff. WARNING: each of the four tabs is a DIFFERENT hand-drawn ragged rectangle, not one shape at four widths.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/tab-segmented-md.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6072-33.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / Tab / Segmented [md], 187.9 × 70.6\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-segmented-md{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:187.9px; height:70.6px;\n padding:0px 10px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/tab-segmented-md.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 30px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, LoadMore is 6.13, not 3.\n the same distance each way, so press and release are one gesture */\n.pc-segmented-md{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-segmented-md:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-segmented-md:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-segmented-md:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-segmented-md[disabled], .pc-segmented-md[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-segmented-md{ transition:none } }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-segmented-md[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-segmented-md[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Label", "type": "TEXT", "default": "MARKETS", "values": [] }, { "name": "Selected", "type": "BOOLEAN", "default": "false", "values": [] }, { "name": "State", "type": "VARIANT", "default": "default", "values": [ "default", "hover", "pressed", "focus", "disabled" ] } ], "use": "Use for the four-up filter tab row exactly as drawn, each of the four tabs is a DIFFERENT hand-drawn ragged rectangle, so the row works at four items and a fifth is a drawing to buy.", "notUse": "Not for a row whose length varies, the four widths are not one parametric shape; an arbitrary-length single-select row is Control / Chip / Notched inside Control / ChipRow.", "insteadUse": "Control / Chip / Notched", "pairsWith": [ "Control / ChipRow", "Region / Masthead", "Region / Market / MarketCard [grid]" ] }, { "id": "control-tab-market-section", "sourceId": "6268:1861", "name": "Control / Tab / Market Section", "class": "Control", "domain": "Tab", "size": { "w": 142, "h": 62 }, "exportBox": null, "figma": { "nodeId": "6268:1861", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6268-1861", "sheet": "09 · Tabs" }, "authored": false, "description": "Artwork 40:36608 (RULES / PREDICTION ODDS / ACTIVITY). The artwork draws face and outline as TWO vectors, the face carries no stroke. PREDICTION ODDS overflows its tab by 11px, which is the clipping seen on several frames.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/tab-market-section.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6061-71.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / Tab / Market Section, 142 × 62\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-market-section{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:142px; height:62px;\n padding:0px 11px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/tab-market-section.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 26px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, LoadMore is 6.13, not 3.\n the same distance each way, so press and release are one gesture */\n.pc-market-section{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-market-section:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-market-section:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-market-section:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-market-section[disabled], .pc-market-section[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-market-section{ transition:none } }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-market-section[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-market-section[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Label", "type": "TEXT", "default": "RULES", "values": [] }, { "name": "Selected", "type": "BOOLEAN", "default": "false", "values": [] }, { "name": "State", "type": "VARIANT", "default": "default", "values": [ "default", "hover", "pressed", "focus", "disabled" ] } ], "use": "Use for the market-detail section tabs (RULES / PREDICTION ODDS / ACTIVITY), the face and the outline are two separate vectors and the face carries no stroke, so recolour the face without touching the ink.", "notUse": "Not for a label longer than the drawn set, PREDICTION ODDS already overflows its tab by 11px in the artwork, which is the clipping visible on several frames.", "insteadUse": null, "pairsWith": [ "Region / Market / RulesPanel", "Display / Data / PredictionOddsChart", "Display / Data / ActivityRow [compact]" ] }, { "id": "display-badge-step", "sourceId": "6061:76", "name": "Display / Badge / Step", "class": "Display", "domain": "Badge", "size": { "w": 47, "h": 47 }, "exportBox": null, "figma": { "nodeId": "6061:76", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6061-76", "sheet": "11 · Badges & Tags" }, "authored": false, "description": "Artwork 40:3159 (Create Market steps). A plain 42.23 square, the only un-notched control besides the NavItem pill.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6061-76.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Badge / Step, 47 × 47\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-step{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:47px; height:47px;\n padding:0px 6px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/badge-step.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 20px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-step[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-step[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Number", "type": "TEXT", "default": "1", "values": [] }, { "name": "State", "type": "VARIANT", "default": "current", "values": [ "todo", "current", "done" ] } ], "use": "Use as the numbered step pip on Create Market, a plain 42.23 square, the only un-notched control besides the NavItem pill, and G2 gives the current step a weight change on this badge rather than the orange ring.", "notUse": "Not as a checkbox or a progress dot with a tick, GAPS #23 proposes a checkbox built from this square but none is drawn, so a tick here is invented behaviour.", "insteadUse": null, "pairsWith": [ "Control / SpinnerSelect", "Control / Chip / Duration", "Control / Button / Burst" ] }, { "id": "control-searchfield", "sourceId": "6268:2055", "name": "Control / SearchField", "class": "Control", "domain": "Control", "size": { "w": 491, "h": 90 }, "exportBox": null, "figma": { "nodeId": "6268:2055", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6268-2055", "sheet": "07 · Inputs" }, "authored": false, "description": "Artwork 40:7531. Torn left edge and a double-notch right cap. No focus, hover or filled state is drawn anywhere in the artwork.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/control-searchfield.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6071-6.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / SearchField, 491 × 90\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-searchfield{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:491px; height:90px;\n padding:0px 39px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/control-searchfield.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 38px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, LoadMore is 6.13, not 3.\n the same distance each way, so press and release are one gesture */\n.pc-searchfield{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-searchfield:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-searchfield:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-searchfield:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-searchfield[disabled], .pc-searchfield[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-searchfield{ transition:none } }\n\n/* error, never on its own. Ships with AlertStrip [inline] beneath it,\n because a colour is not a message (G2 gave the ring to focus only) */\n.pc-searchfield[aria-invalid=\"true\"]{ box-shadow:inset 0 0 0 2px var(--pc-color-danger,#EA2A46) }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-searchfield[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-searchfield[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Placeholder", "type": "TEXT", "default": "SEARCH MARKETS", "values": [] }, { "name": "Value", "type": "TEXT", "default": "", "values": [] }, { "name": "State", "type": "VARIANT", "default": "default", "values": [ "default", "hover", "focus", "filled", "disabled" ] }, { "name": "Clear", "type": "BOOLEAN", "default": "false", "values": [] } ], "use": "Use for the market-list search input, torn left edge, double-notch right cap, and since no focus, hover or filled state is drawn anywhere, its focus comes from the G10 rule: the silhouette stroked 5px #FFA800, not a rectangle around it.", "notUse": "Not for the stake amount, it is the same 491×90 box as Control / Market / StakeInput (GAPS §1.2), and StakeInput is the one with the USDC suffix drawn.", "insteadUse": "Control / Market / StakeInput", "pairsWith": [ "Control / DropdownSelect [sort]", "Region / Masthead", "Control / ChipRow" ] }, { "id": "control-dropdownselect-sort", "sourceId": "6268:2093", "name": "Control / DropdownSelect [sort]", "class": "Control", "domain": "Control", "size": { "w": 185, "h": 90 }, "exportBox": null, "figma": { "nodeId": "6268:2093", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6268-2093", "sheet": "08 · Selects" }, "authored": false, "description": "Artwork 40:8148. Base #9652EF, rendered ramp #662CE8 → #C677F6. Notches on the LEFT with a double-notch tail bottom-right.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/control-dropdownselect-sort.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6071-16.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / DropdownSelect [sort], 185 × 90\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-dropdownselect-sort{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:185px; height:90px;\n padding:0px 15px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/control-dropdownselect-sort.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 38px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, LoadMore is 6.13, not 3.\n the same distance each way, so press and release are one gesture */\n.pc-dropdownselect-sort{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-dropdownselect-sort:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-dropdownselect-sort:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-dropdownselect-sort:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-dropdownselect-sort[disabled], .pc-dropdownselect-sort[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-dropdownselect-sort{ transition:none } }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-dropdownselect-sort[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-dropdownselect-sort[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Label", "type": "TEXT", "default": "SORT BY", "values": [] }, { "name": "Value", "type": "TEXT", "default": "NEWEST", "values": [] }, { "name": "Silhouette", "type": "VARIANT", "default": "notch-left", "values": [ "notch-left", "notch-both" ] }, { "name": "Open", "type": "BOOLEAN", "default": "false", "values": [] }, { "name": "Items", "type": "INSTANCE_SWAP", "default": "Foundation / Ribbon Seam", "values": [] }, { "name": "State", "type": "VARIANT", "default": "default", "values": [ "default", "hover", "pressed", "focus", "disabled" ] } ], "use": "Use as the sort trigger in a filter toolbar, base #9652EF rendering as a #662CE8→#C677F6 ramp, notches on the LEFT with a double-notch tail bottom-right, and hang Control / DropdownSelect [open] beneath it.", "notUse": "Not for the view or type filters, which are drawn as their own silhouettes and colours, but equally, do not draw a fourth: the three triggers are already one affordance drawn three times (GAPS §1.2).", "insteadUse": null, "pairsWith": [ "Control / DropdownSelect [open]", "Control / DropdownSelect [view]", "Control / DropdownSelect [type]", "Control / SearchField" ] }, { "id": "control-dropdownselect-view", "sourceId": "6268:2131", "name": "Control / DropdownSelect [view]", "class": "Control", "domain": "Control", "size": { "w": 168, "h": 90 }, "exportBox": null, "figma": { "nodeId": "6268:2131", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6268-2131", "sheet": "08 · Selects" }, "authored": false, "description": "Artwork 40:8157. Base #FAF424. Notches on BOTH sides, a third distinct silhouette. The three triggers are hand-drawn variants, not one reused shape.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/control-dropdownselect-view.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6071-26.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / DropdownSelect [view], 168 × 90\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-dropdownselect-view{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:168px; height:90px;\n padding:0px 13px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/control-dropdownselect-view.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 38px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, LoadMore is 6.13, not 3.\n the same distance each way, so press and release are one gesture */\n.pc-dropdownselect-view{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-dropdownselect-view:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-dropdownselect-view:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-dropdownselect-view:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-dropdownselect-view[disabled], .pc-dropdownselect-view[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-dropdownselect-view{ transition:none } }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-dropdownselect-view[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-dropdownselect-view[data-loading] > *{ visibility:hidden }", "plannedProps": [], "use": "Use as the view filter in the toolbar, base #FAF424 with notches on BOTH sides, the third of the three distinct trigger silhouettes.", "notUse": "Not reached for as a general-purpose select because its yellow suits a layout, the three triggers are one affordance drawn three times (GAPS §1.2), so a fourth menu reuses the [sort] trigger rather than adding a silhouette.", "insteadUse": "Control / DropdownSelect [sort]", "pairsWith": [ "Control / DropdownSelect [open]", "Control / DropdownSelect [sort]", "Control / DropdownSelect [type]" ] }, { "id": "control-dropdownselect-type", "sourceId": "6268:2169", "name": "Control / DropdownSelect [type]", "class": "Control", "domain": "Control", "size": { "w": 183, "h": 90 }, "exportBox": null, "figma": { "nodeId": "6268:2169", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6268-2169", "sheet": "08 · Selects" }, "authored": false, "description": "Artwork 40:8184. Base #419FE5. Mirrors [sort]: notch on the RIGHT.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/control-dropdownselect-type.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6071-36.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / DropdownSelect [type], 183 × 90\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-dropdownselect-type{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:183px; height:90px;\n padding:0px 15px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/control-dropdownselect-type.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 38px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, LoadMore is 6.13, not 3.\n the same distance each way, so press and release are one gesture */\n.pc-dropdownselect-type{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-dropdownselect-type:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-dropdownselect-type:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-dropdownselect-type:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-dropdownselect-type[disabled], .pc-dropdownselect-type[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-dropdownselect-type{ transition:none } }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-dropdownselect-type[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-dropdownselect-type[data-loading] > *{ visibility:hidden }", "plannedProps": [], "use": "Use as the type filter in the toolbar, base #419FE5, mirroring [sort] with the notch on the RIGHT.", "notUse": "Not as a generic select, it mirrors [sort] and exists only because the three filters were hand-drawn separately (GAPS §1.2); a fourth menu reuses the [sort] trigger.", "insteadUse": "Control / DropdownSelect [sort]", "pairsWith": [ "Control / DropdownSelect [open]", "Control / DropdownSelect [sort]", "Control / DropdownSelect [view]" ] }, { "id": "control-dropdownselect-open", "sourceId": "6270:119", "name": "Control / DropdownSelect [open]", "class": "Control", "domain": "Control", "size": { "w": 175, "h": 204 }, "exportBox": null, "figma": { "nodeId": "6270:119", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6270-119", "sheet": "08 · Selects" }, "authored": false, "description": "Artwork 40:8193. Panel plus two #EDEDED shard textures. Items centre-aligned, row pitch 29.8. No dividers, no hover, no selected state drawn.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/control-dropdownselect-open.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6071-56.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / DropdownSelect [open], 175 × 204\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-dropdownselect-open{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:175px; height:204px;\n padding:33px 12px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/control-dropdownselect-open.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, LoadMore is 6.13, not 3.\n the same distance each way, so press and release are one gesture */\n.pc-dropdownselect-open{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-dropdownselect-open:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-dropdownselect-open:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-dropdownselect-open:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-dropdownselect-open[disabled], .pc-dropdownselect-open[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-dropdownselect-open{ transition:none } }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-dropdownselect-open[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-dropdownselect-open[data-loading] > *{ visibility:hidden }", "plannedProps": [], "use": "Use as the open menu panel under any of the three triggers, items centre-aligned at a row pitch of 29.8, and GAPS #14 also specifies this panel as the plate for the wallet account menu hung under the hexagon.", "notUse": "Not where a hovered, selected or divided row must be shown, the artwork draws no dividers, no hover and no selected state, so all three are authored work rather than a variant.", "insteadUse": null, "pairsWith": [ "Control / DropdownSelect [sort]", "Control / DropdownSelect [view]", "Control / DropdownSelect [type]", "Control / Nav / WalletButton" ] }, { "id": "control-nav-navitem", "sourceId": "6268:1895", "name": "Control / Nav / NavItem", "class": "Control", "domain": "Nav", "size": { "w": 192, "h": 50 }, "exportBox": null, "figma": { "nodeId": "6268:1895", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6268-1895", "sheet": "10 · Navigation" }, "authored": false, "description": "Artwork 40:12666. A plain axis-aligned rectangle with NO radius, the only un-comic shape in the product. Ink is #3F3F3F, not #000000: the nav is the one place with the softer shadow ink. It hugs its label.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/nav-navitem.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6064-63.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / Nav / NavItem, 192 × 50\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-navitem{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:192px; height:50px;\n padding:0px 15px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/nav-navitem.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 21px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, LoadMore is 6.13, not 3.\n the same distance each way, so press and release are one gesture */\n.pc-navitem{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-navitem:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-navitem:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-navitem:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-navitem[disabled], .pc-navitem[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-navitem{ transition:none } }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-navitem[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-navitem[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Label", "type": "TEXT", "default": "MARKETS", "values": [] }, { "name": "Selected", "type": "BOOLEAN", "default": "false", "values": [] }, { "name": "State", "type": "VARIANT", "default": "default", "values": [ "default", "hover", "pressed", "focus", "disabled" ] } ], "use": "Use for a top-nav item pill that hugs its own label, it is the one place the shadow ink is #3F3F3F rather than #000000, and matching MobileHeader depends on keeping that softer ink.", "notUse": "Not as a general button, a plain axis-aligned rectangle with no radius is the only un-comic shape in the product and outside the nav it reads as unstyled markup.", "insteadUse": "Control / Button", "pairsWith": [ "Region / Nav / TopNav", "Display / Brand / Logo", "Control / Nav / WalletButton", "Control / Nav / SportsTab" ] }, { "id": "control-nav-walletbutton", "sourceId": "6268:1839", "name": "Control / Nav / WalletButton", "class": "Control", "domain": "Nav", "size": { "w": 55, "h": 63 }, "exportBox": null, "figma": { "nodeId": "6268:1839", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6268-1839", "sheet": "10 · Navigation" }, "authored": false, "description": "Artwork 40:12670. Regular point-up hexagon, ratio 2/√3 = 1.1547 exactly. #30D8BC is the ONLY teal in the product. Mobile form is 0.782×.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6064-67.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / Nav / WalletButton, 55 × 63\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-walletbutton{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:55px; height:63px;\n padding:0px 6px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/nav-walletbutton.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 26px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, LoadMore is 6.13, not 3.\n the same distance each way, so press and release are one gesture */\n.pc-walletbutton{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-walletbutton:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-walletbutton:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-walletbutton:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-walletbutton[disabled], .pc-walletbutton[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-walletbutton{ transition:none } }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-walletbutton[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-walletbutton[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Size", "type": "VARIANT", "default": "desktop", "values": [ "desktop", "mobile" ] }, { "name": "State", "type": "VARIANT", "default": "default", "values": [ "default", "hover", "pressed", "focus", "disabled" ] } ], "use": "Use for the wallet slot in the desktop header, a regular point-up hexagon at exactly 2/√3 = 1.1547 in #30D8BC, the only teal in the product, so it is unmistakable in the nav.", "notUse": "Not for showing a connected wallet with a balance or address, SPEC_CHROME §19 records that it has no connected/disconnected distinction, so that state is undrawn (GAPS #14).", "insteadUse": null, "pairsWith": [ "Region / Nav / TopNav", "Control / DropdownSelect [open]", "Display / Brand / Logo" ] }, { "id": "control-nav-walletbutton-mobile", "sourceId": "6268:1965", "name": "Control / Nav / WalletButton [mobile]", "class": "Control", "domain": "Nav", "size": { "w": 43, "h": 50 }, "exportBox": null, "figma": { "nodeId": "6268:1965", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6268-1965", "sheet": "10 · Navigation" }, "authored": false, "description": "Artwork 40:2964. Hexagon 39.8 x 46.0, stroke 1, mobile halves the ink. Scale 0.782. Sits 2px left of the frame centre, measured drift.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/nav-walletbutton-mobile.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6073-58.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / Nav / WalletButton [mobile], 43 × 50\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-walletbutton-mobile{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:43px; height:50px;\n padding:0px 6px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/nav-walletbutton-mobile.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 21px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, LoadMore is 6.13, not 3.\n the same distance each way, so press and release are one gesture */\n.pc-walletbutton-mobile{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-walletbutton-mobile:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-walletbutton-mobile:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-walletbutton-mobile:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-walletbutton-mobile[disabled], .pc-walletbutton-mobile[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-walletbutton-mobile{ transition:none } }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-walletbutton-mobile[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-walletbutton-mobile[data-loading] > *{ visibility:hidden }", "plannedProps": [], "use": "Use for the wallet slot in MobileHeader, hexagon 39.8×46 at stroke 1 because mobile halves the ink, and under the 60px threshold its focus ring steps to the 3px form.", "notUse": "Not maintained as a separate design, it is Control / Nav / WalletButton at 0.782× with the stroke halved (GAPS §1.2); it is the mobile scale, not a second drawing.", "insteadUse": "Control / Nav / WalletButton", "pairsWith": [ "Region / Nav / MobileHeader", "Control / Nav / HamburgerButton [mobile]", "Display / Brand / Logo" ] }, { "id": "control-nav-hamburgerbutton-mobile", "sourceId": "6268:1995", "name": "Control / Nav / HamburgerButton [mobile]", "class": "Control", "domain": "Nav", "size": { "w": 43, "h": 50 }, "exportBox": null, "figma": { "nodeId": "6268:1995", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6268-1995", "sheet": "10 · Navigation" }, "authored": false, "description": "Artwork 40:2976. Same hexagon as the mobile wallet, face #FFA800. NO DRAWER EXISTS, the hamburger has no destination anywhere in the file.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6073-66.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / Nav / HamburgerButton [mobile], 43 × 50\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-hamburgerbutton-mobile{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:43px; height:50px;\n padding:0px 6px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/nav-hamburger-mobile.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 21px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, LoadMore is 6.13, not 3.\n the same distance each way, so press and release are one gesture */\n.pc-hamburgerbutton-mobile{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-hamburgerbutton-mobile:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-hamburgerbutton-mobile:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-hamburgerbutton-mobile:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-hamburgerbutton-mobile[disabled], .pc-hamburgerbutton-mobile[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-hamburgerbutton-mobile{ transition:none } }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-hamburgerbutton-mobile[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-hamburgerbutton-mobile[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Icon", "type": "VARIANT", "default": "hamburger", "values": [ "wallet", "hamburger" ] }, { "name": "State", "type": "VARIANT", "default": "default", "values": [ "default", "hover", "pressed", "focus", "disabled" ] } ], "use": "Use only once a drawer actually exists, as drawn it has no destination anywhere in the file, so shipping it as-is puts a dead control in the mobile header on 13 frames.", "notUse": "Not as the mobile wallet slot, that is the same hexagon in #30D8BC; this one is face #FFA800.", "insteadUse": "Control / Nav / WalletButton [mobile]", "pairsWith": [ "Region / Nav / MobileHeader", "Control / Nav / WalletButton [mobile]" ] }, { "id": "display-brand-logo", "sourceId": "6073:77", "name": "Display / Brand / Logo", "class": "Display", "domain": "Brand", "size": { "w": 175, "h": 56 }, "exportBox": null, "figma": { "nodeId": "6073:77", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6073-77", "sheet": "21 · Brand" }, "authored": false, "description": "Artwork 40:12676. Three flat #FFA800 vectors, no stroke and no shadow, the only brand mark. Mobile is a pure uniform 0.648× scale. Custom lettermark; no type-set fallback.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/brand-logo.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6073-77.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Brand / Logo, 175 × 56\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-logo{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:175px; height:56px;\n padding:0px 14px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/brand-logo.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 24px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-logo[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-logo[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Size", "type": "VARIANT", "default": "desktop", "values": [ "desktop", "mobile" ] } ], "use": "Use as the only brand mark, three flat #FFA800 vectors with no stroke and no shadow, mobile at a pure uniform 0.648× scale, and no type-set fallback exists so it must ship as vector.", "notUse": "Not placed straight onto an orange or violet ground, orange on orange is 1:1 and orange on violet 2.29:1; Surface / BrandField holds the measured clear space and inverts the mark to black.", "insteadUse": "Surface / BrandField", "pairsWith": [ "Region / Nav / TopNav", "Region / Nav / MobileHeader", "Surface / BrandField" ] }, { "id": "display-indicator-trendarrow-up", "sourceId": "6072:37", "name": "Display / Indicator / TrendArrow [up]", "class": "Display", "domain": "Indicator", "size": { "w": 46, "h": 90 }, "exportBox": null, "figma": { "nodeId": "6072:37", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6072-37", "sheet": "12 · Indicators" }, "authored": false, "description": "Artwork 40:12641. Vertical chevron 38.6 x 81.9, face #91BB4F, shadow +7.9. Drawn OUTSIDE the ribbon, left of the rank cell.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6072-37.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Indicator / TrendArrow [up], 46 × 90\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-trendarrow-up{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:46px; height:90px;\n padding:0px 6px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/indicator-trendarrow-up.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 38px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-trendarrow-up[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-trendarrow-up[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Direction", "type": "VARIANT", "default": "up", "values": [ "up", "down", "flat" ] } ], "use": "Use to the left of a leaderboard rank cell to show upward movement, a 38.6×81.9 vertical chevron, face #91BB4F, shadow +7.9, drawn OUTSIDE the ribbon so it does not consume a segment.", "notUse": "Not greyed or rotated by hand to mean no change, the flat state is drawn as the same glyph rotated 90° in white.", "insteadUse": "Display / Indicator / TrendArrow [flat]", "pairsWith": [ "Region / Data / LeaderboardRow", "Display / Data / StatStrip" ] }, { "id": "display-indicator-trendarrow-down", "sourceId": "6072:41", "name": "Display / Indicator / TrendArrow [down]", "class": "Display", "domain": "Indicator", "size": { "w": 46, "h": 90 }, "exportBox": null, "figma": { "nodeId": "6072:41", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6072-41", "sheet": "12 · Indicators" }, "authored": false, "description": "Artwork 40:12645. Same glyph as [up], face #EA2A46.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6072-41.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Indicator / TrendArrow [down], 46 × 90\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-trendarrow-down{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:46px; height:90px;\n padding:0px 6px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/indicator-trendarrow-down.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 38px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-trendarrow-down[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-trendarrow-down[data-loading] > *{ visibility:hidden }", "plannedProps": [], "use": "Use for downward movement beside a rank cell, the same glyph as [up] with face #EA2A46, consistent with G11 making red the system's one negative signal.", "notUse": "Not recoloured to the brand orange to avoid red/green, G11 already settled that, and orange is reserved for the brand and the focus ring.", "insteadUse": null, "pairsWith": [ "Region / Data / LeaderboardRow", "Display / Data / StatStrip" ] }, { "id": "display-indicator-trendarrow-flat", "sourceId": "6072:45", "name": "Display / Indicator / TrendArrow [flat]", "class": "Display", "domain": "Indicator", "size": { "w": 90, "h": 46 }, "exportBox": null, "figma": { "nodeId": "6072:45", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6072-45", "sheet": "12 · Indicators" }, "authored": false, "description": "Artwork 40:12649. The SAME glyph rotated 90°, wide, not tall. Face is #FFFFFF, not grey: there is no muted token here.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6072-45.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Indicator / TrendArrow [flat], 90 × 46\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-trendarrow-flat{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:90px; height:46px;\n padding:0px 7px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/indicator-trendarrow-flat.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 19px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-trendarrow-flat[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-trendarrow-flat[data-loading] > *{ visibility:hidden }", "plannedProps": [], "use": "Use for no movement, the same chevron rotated 90°, so it is wide rather than tall, with a face of #FFFFFF.", "notUse": "Not tinted grey to read as muted, white is the drawn value and the system has no muted token to tint it with.", "insteadUse": null, "pairsWith": [ "Region / Data / LeaderboardRow", "Display / Data / StatStrip" ] }, { "id": "display-market-timerchip-inline", "sourceId": "6073:5", "name": "Display / Market / TimerChip [inline]", "class": "Display", "domain": "Market", "size": { "w": 105, "h": 46 }, "exportBox": null, "figma": { "nodeId": "6073:5", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6073-5", "sheet": "11 · Badges & Tags" }, "authored": false, "description": "Artwork 40:7591 inside MarketCard. Plain axis-aligned rectangle, no radius. The ONLY surface in the product with NO offset shadow. The ink overhangs the chip vertically.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6073-5.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Market / TimerChip [inline], 64 × 46\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-timerchip-inline{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:64px; height:46px;\n padding:0px 6px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/market-timerchip-inline.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 19px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-timerchip-inline[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-timerchip-inline[data-loading] > *{ visibility:hidden }", "plannedProps": [], "use": "Use for the countdown inside a MarketCard, a plain axis-aligned rectangle and the only surface in the product with NO offset shadow, which is exactly what stops it competing with the card it sits on.", "notUse": "Not as the hero countdown on a market page, that is the 220×173 burst form.", "insteadUse": "Display / Market / TimerChip [burst]", "pairsWith": [ "Region / Market / MarketCard [grid]", "Region / Market / MarketCard [rail]" ] }, { "id": "display-market-timerchip-burst", "sourceId": "6072:117", "name": "Display / Market / TimerChip [burst]", "class": "Display", "domain": "Market", "size": { "w": 296, "h": 176 }, "exportBox": null, "figma": { "nodeId": "6072:117", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6072-117", "sheet": "11 · Badges & Tags" }, "authored": false, "description": "Artwork 40:39376. Burst 212 x 164.7 #9652EF, shadow +8, plus an inner decorative burst which is the SAME 11-spike path scaled ×0.46 sitting behind the text.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/market-timerchip-burst.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6072-117.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Market / TimerChip [burst], 220 × 173\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-timerchip-burst{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:220px; height:173px;\n padding:28px 15px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/market-timerchip-burst.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-timerchip-burst[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-timerchip-burst[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Time", "type": "TEXT", "default": "00:42", "values": [] }, { "name": "Style", "type": "VARIANT", "default": "burst", "values": [ "inline", "burst" ] }, { "name": "Inner burst", "type": "BOOLEAN", "default": "true", "values": [] } ], "use": "Use as the single hero countdown on market detail or a share card, a 212×164.7 #9652EF burst at shadow +8 with an inner copy of its own 11-spike path at ×0.46 behind the text.", "notUse": "Not repeated across a card grid, inside a card the countdown is the shadowless 64×46 rectangle.", "insteadUse": "Display / Market / TimerChip [inline]", "pairsWith": [ "Region / Market / PoolBurst", "Display / Market / QuestionBanner", "Region / Share / PnlCard" ] }, { "id": "control-spinnerselect", "sourceId": "6269:253", "name": "Control / SpinnerSelect", "class": "Control", "domain": "Control", "size": { "w": 570, "h": 343 }, "exportBox": null, "figma": { "nodeId": "6269:253", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6269-253", "sheet": "07 · Inputs" }, "authored": false, "description": "Artwork 40:3120. Burst panel with shard/halftone clip, a header banner, a step badge and a triangle arrow pair. The carousel ghosts are baked into the flattened art at roughly 30% alpha, not a live opacity property.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/r2-spinnerselect.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / SpinnerSelect, 570 × 343\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-spinnerselect{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:570px; height:343px;\n padding:55px 40px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/control-spinnerselect.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, LoadMore is 6.13, not 3.\n the same distance each way, so press and release are one gesture */\n.pc-spinnerselect{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-spinnerselect:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-spinnerselect:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-spinnerselect:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-spinnerselect[disabled], .pc-spinnerselect[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-spinnerselect{ transition:none } }\n\n/* error, never on its own. Ships with AlertStrip [inline] beneath it,\n because a colour is not a message (G2 gave the ring to focus only) */\n.pc-spinnerselect[aria-invalid=\"true\"]{ box-shadow:inset 0 0 0 2px var(--pc-color-danger,#EA2A46) }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-spinnerselect[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-spinnerselect[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Value", "type": "TEXT", "default": "BITCOIN", "values": [] }, { "name": "Header", "type": "TEXT", "default": "PICK SOURCE", "values": [] }, { "name": "Step", "type": "TEXT", "default": "1", "values": [] } ], "use": "Use for the PICK SOURCE step on Create Market, this is the shipped LoopingSnapSelector, and the carousel ghosts are baked into the flattened art at roughly 30% alpha, so they are artwork, not a live opacity you can drive.", "notUse": "Not as a general select, a menu-style choice is a DropdownSelect trigger with the open panel beneath it.", "insteadUse": "Control / DropdownSelect [open]", "pairsWith": [ "Control / SpinnerArrows", "Display / Badge / Step", "Control / Chip / Duration", "Control / Button / Burst" ] }, { "id": "control-spinnerarrows", "sourceId": "6270:123", "name": "Control / SpinnerArrows", "class": "Control", "domain": "Control", "size": { "w": 31, "h": 71 }, "exportBox": null, "figma": { "nodeId": "6270:123", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6270-123", "sheet": "07 · Inputs" }, "authored": false, "description": "Artwork 40:3157/3158. Two triangles 31.2 x 28.1, vertical gap 14.8. Cloned from the face vectors only, the artwork draws their shadows as separate siblings.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6073-81.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / SpinnerArrows, 31 × 71\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-spinnerarrows{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:31px; height:71px;\n padding:0px 6px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/control-spinnerarrows.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 30px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, LoadMore is 6.13, not 3.\n the same distance each way, so press and release are one gesture */\n.pc-spinnerarrows{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-spinnerarrows:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-spinnerarrows:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-spinnerarrows:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-spinnerarrows[disabled], .pc-spinnerarrows[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-spinnerarrows{ transition:none } }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-spinnerarrows[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-spinnerarrows[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Up enabled", "type": "BOOLEAN", "default": "true", "values": [] }, { "name": "Down enabled", "type": "BOOLEAN", "default": "true", "values": [] } ], "use": "Use as the up/down pair on SpinnerSelect, two triangles 31.2×28.1 with a 14.8 vertical gap.", "notUse": "Not used as-is where a raised control is expected, this clone took the face vectors only and lost the shadows the artwork draws as separate siblings, so it currently breaks the face-plus-hard-shadow rule every other raised element follows.", "insteadUse": null, "pairsWith": [ "Control / SpinnerSelect" ] }, { "id": "surface-type-sectionheading", "sourceId": "6073:72", "name": "Surface / Type / SectionHeading", "class": "Surface", "domain": "Type", "size": { "w": 339, "h": 69 }, "exportBox": null, "figma": { "nodeId": "6073:72", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6073-72", "sheet": "03 · Typography" }, "authored": false, "description": "Artwork 2004:6457. Yellow torn label banner, shadow +4.4,+4.9.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/type-sectionheading.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6073-72.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Surface / Type / SectionHeading, 339 × 69\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-sectionheading{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:339px; height:69px;\n padding:0px 27px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/type-sectionheading.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 29px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-sectionheading[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-sectionheading[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Label", "type": "TEXT", "default": "SECTION HEADING", "values": [] } ], "use": "Use as the yellow torn label over a page section, shadow +4.4/+4.9, sized for one short heading.", "notUse": "Not as the page's own header, that is Region / Masthead, which composes the Torn Panel ground with a ChipRow of filters.", "insteadUse": "Region / Masthead", "pairsWith": [ "Region / Masthead", "Control / ChipRow", "Region / Market / MarketCard [grid]" ] }, { "id": "region-data-activityrow", "sourceId": "6032:2", "name": "Region / Data / ActivityRow", "class": "Region", "domain": "Data", "size": { "w": 1650, "h": 97 }, "exportBox": null, "figma": { "nodeId": "6032:2", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6032-2", "sheet": "15 · Data" }, "authored": false, "description": "The unified ribbon. ActivityRow, LeaderboardRow, StatStrip and SummaryBar are ONE component with different segment lists, their segment paths are byte-identical where widths match. Body height 81.90 is universal.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/r2-activityrow.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Region / Data / ActivityRow, 1650 × 97\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-activityrow{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:1650px; height:97px;\n padding:0px 132px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/data-activityrow.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 41px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-activityrow[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-activityrow[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Status", "type": "VARIANT", "default": "settled", "values": [ "live", "created", "settled" ] }, { "name": "Type", "type": "TEXT", "default": "BOUGHT", "values": [] }, { "name": "Account", "type": "TEXT", "default": "@trader", "values": [] }, { "name": "Market", "type": "TEXT", "default": "WILL BTC BE HIGHER…", "values": [] }, { "name": "Time", "type": "TEXT", "default": "2m", "values": [] }, { "name": "Segments", "type": "INSTANCE_SWAP", "default": "Foundation / Ribbon Seam", "values": [] }, { "name": "Shadow", "type": "BOOLEAN", "default": "true", "values": [] } ], "use": "Use for a full-width desktop activity row, five ribbon segments on the universal 81.90 body, with the row shadow at +15,+15 set to exactly the row width.", "notUse": "Not in the market-detail feed, where the row is the 469×60 short form stacking at a 60px pitch.", "insteadUse": "Display / Data / ActivityRow [compact]", "pairsWith": [ "Foundation / Ribbon Seam", "Foundation / Ribbon Row Shadow", "Display / Indicator / TrendArrow [up]", "Control / Button / LoadMore" ] }, { "id": "region-data-leaderboardrow", "sourceId": "6032:25", "name": "Region / Data / LeaderboardRow", "class": "Region", "domain": "Data", "size": { "w": 1379, "h": 97 }, "exportBox": null, "figma": { "nodeId": "6032:25", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6032-25", "sheet": "15 · Data" }, "authored": false, "description": "Same skeleton as ActivityRow, 6 segments instead of 5. The rank cell is 176.0 wide, not the 236.04 its outline suggests, 236.04 is a leftover copied from ActivityRow and only 176.0 satisfies the placement rule.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/r2-leaderboardrow.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Region / Data / LeaderboardRow, 1379 × 97\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-leaderboardrow{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:1379px; height:97px;\n padding:0px 110px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/data-leaderboardrow.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 41px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-leaderboardrow[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-leaderboardrow[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Rank", "type": "TEXT", "default": "4", "values": [] }, { "name": "Trader", "type": "TEXT", "default": "@trader", "values": [] }, { "name": "Volume", "type": "TEXT", "default": "$1.2M", "values": [] }, { "name": "PnL", "type": "TEXT", "default": "+$8,120", "values": [] }, { "name": "Segments", "type": "INSTANCE_SWAP", "default": "Foundation / Ribbon Seam", "values": [] }, { "name": "Shadow", "type": "BOOLEAN", "default": "true", "values": [] } ], "use": "Use for a leaderboard row, the same skeleton as ActivityRow with 6 segments, and the rank cell is 176.0 wide, not the 236.04 its outline suggests, because only 176.0 satisfies the placement rule.", "notUse": "Not for activity data, the two are one skeleton with different segment lists, so a five-segment row is ActivityRow rather than a trimmed leaderboard row.", "insteadUse": "Region / Data / ActivityRow", "pairsWith": [ "Display / Data / TableHeader", "Display / Indicator / TrendArrow [up]", "Foundation / Ribbon Row Shadow", "Region / Data / LeaderboardPodium [champion]" ] }, { "id": "foundation-ribbon-seam", "sourceId": "6039:37", "name": "Foundation / Ribbon Seam", "class": "Foundation", "domain": "Core", "size": { "w": 300, "h": 81.9 }, "exportBox": null, "figma": { "nodeId": "6039:37", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6039-37", "sheet": "01 · Foundations" }, "authored": false, "description": "One ribbon segment, body height 81.91. Caps are fixed-width vectors pinned left/right; the body stretches, so resizing does not distort the seam. Depths: SLANT 21.91 · TORN 46.59 · ZIGZAG 13.08 · HEAD CAP 18.34 · TAIL CAP 28.84 · RAGGED 20.86. Rule: x[i+1] = x[i] + W[i] − seam, segments OVERLAP.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6039-37.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Foundation / Ribbon Seam, 300 × 81.9\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-ribbon-seam{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:300px; height:81.9px;\n padding:0px 24px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/primitive-ribbon-seam.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-ribbon-seam[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-ribbon-seam[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Template", "type": "VARIANT", "default": "slant / zigzag", "values": [ "head-cap / slant", "slant / torn", "torn / slant", "slant / zigzag", "zigzag / zigzag", "zigzag / tail-cap" ] }, { "name": "Label", "type": "TEXT", "default": "MARKET", "values": [] }, { "name": "Texture", "type": "BOOLEAN", "default": "false", "values": [] } ], "use": "Use to join ribbon segments, segments OVERLAP by the seam depth (x[i+1] = x[i] + W[i] − seam), depths SLANT 21.91 · TORN 46.59 · ZIGZAG 13.08 · HEAD CAP 18.34 · TAIL CAP 28.84 · RAGGED 20.86.", "notUse": "Not scaled with the row, the caps are fixed-width vectors pinned left and right and only the body stretches; scaling the whole segment distorts the seam.", "insteadUse": null, "pairsWith": [ "Foundation / Ribbon Segment", "Region / Data / ActivityRow", "Region / Data / LeaderboardRow", "Display / Data / StatStrip" ] }, { "id": "foundation-ribbon-row-shadow", "sourceId": "6041:13", "name": "Foundation / Ribbon Row Shadow", "class": "Foundation", "domain": "Core", "size": { "w": 1650, "h": 82 }, "exportBox": null, "figma": { "nodeId": "6041:13", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6041-13", "sheet": "01 · Foundations" }, "authored": false, "description": "The hard shadow behind a ribbon row, offset +15,+15. Width MUST equal the row width, the artwork LeaderboardRow shadow is 14px too wide, which is a defect, not a style.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6041-13.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Foundation / Ribbon Row Shadow, 1650 × 82\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-ribbon-row-shadow{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:1650px; height:82px;\n padding:0px 132px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/primitive-ribbon-row-shadow.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-ribbon-row-shadow[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-ribbon-row-shadow[data-loading] > *{ visibility:hidden }", "plannedProps": [], "use": "Use behind a ribbon row at +15,+15 with its width set exactly equal to the row width, the artwork's LeaderboardRow shadow is 14px too wide and that is a defect to fix, not a style to copy.", "notUse": "Not for a single segment or any non-ribbon surface, every other raised element takes its shadow from the ladder 2·3·4·5·8·11 as a shared effect style.", "insteadUse": null, "pairsWith": [ "Region / Data / ActivityRow", "Region / Data / LeaderboardRow", "Display / Data / StatStrip" ] }, { "id": "region-market-marketcard-grid", "sourceId": "6100:67", "name": "Region / Market / MarketCard [grid]", "class": "Region", "domain": "Market", "size": { "w": 506, "h": 208 }, "exportBox": null, "figma": { "nodeId": "6100:67", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6100-67", "sheet": "13 · Cards" }, "authored": false, "description": "Artwork 40:7535. The most-used surface in the product, 60+ instances, all carrying identical placeholder copy. Now composed from OutcomeSlats and TimerChip instances. No hover, live or settled state is drawn.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/market-marketcard-grid.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6100-67.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Region / Market / MarketCard [grid], 506 × 208\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-marketcard-grid{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:506px; height:208px;\n padding:33px 35px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/market-marketcard-grid.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-marketcard-grid[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-marketcard-grid[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Question", "type": "TEXT", "default": "WILL BTC BE HIGHER AT THE END OF THIS 1 MINUTE ROUND?", "values": [] }, { "name": "Icon", "type": "INSTANCE_SWAP", "default": "Display / Sports / TeamBadge", "values": [] }, { "name": "Odds", "type": "INSTANCE_SWAP", "default": "Control / Market / OutcomeSlats", "values": [] }, { "name": "Timer", "type": "INSTANCE_SWAP", "default": "Display / Market / TimerChip [inline]", "values": [] } ], "use": "Use as the tile in the market grid, the most-used surface in the product at 60+ instances, now composed from OutcomeSlats and TimerChip instances so a change to either propagates rather than being redrawn 60 times. The unit the product is built out of, and its four parts always come in this order: card, status, countdown, outcomes.", "notUse": "Not in the sports rail, that is a third, separately drawn shape at 554×227, narrower AND taller, so it is not a scale of this card.", "insteadUse": "Region / Market / MarketCard [rail]", "pairsWith": [ "Control / Market / OutcomeSlats", "Display / Market / TimerChip [inline]", "Display / Market / HotMarketTag", "Display / Market / StatusBadge", "Foundation / Skeleton" ] }, { "id": "region-market-marketcard-rail", "sourceId": "6104:126", "name": "Region / Market / MarketCard [rail]", "class": "Region", "domain": "Market", "size": { "w": 554, "h": 227 }, "exportBox": null, "figma": { "nodeId": "6104:126", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6104-126", "sheet": "13 · Cards" }, "authored": false, "description": "Artwork 2004:6648. A THIRD MarketCard shape, narrower AND taller than the 506 x 208 grid card, so not a scale. Three stack in the sports rail.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/market-marketcard-rail.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6104-126.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Region / Market / MarketCard [rail], 554 × 227\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-marketcard-rail{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:554px; height:227px;\n padding:36px 39px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/market-marketcard-rail.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-marketcard-rail[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-marketcard-rail[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Question", "type": "TEXT", "default": "WILL ETH CLOSE ABOVE $4,000?", "values": [] }, { "name": "Icon", "type": "INSTANCE_SWAP", "default": "Display / Sports / TeamBadge", "values": [] }, { "name": "Odds", "type": "INSTANCE_SWAP", "default": "Control / Market / OutcomeSlats", "values": [] } ], "use": "Use for the three-card sports rail, at 554×227 it is a separate drawing from the grid card, narrower and taller rather than a rescale.", "notUse": "Not in the main market grid, where the tile is the 506×208 card.", "insteadUse": "Region / Market / MarketCard [grid]", "pairsWith": [ "Control / Market / OutcomeSlats", "Display / Market / TimerChip [inline]", "Display / Sports / MatchScoreboard [soccer]" ] }, { "id": "control-market-outcomeslats", "sourceId": "6099:20", "name": "Control / Market / OutcomeSlats", "class": "Control", "domain": "Market", "size": { "w": 291, "h": 78 }, "exportBox": null, "figma": { "nodeId": "6099:20", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6099-20", "sheet": "14 · Market" }, "authored": false, "description": "Two sizes, both cloned. Modal slats 161.9/162.0 OVERLAP by 37.7, that overlap is the chevron seam. The card version is 99.3 wide with overlap 23.2: a uniform 0.613 scale where the overlap scales too, so the two sizes are one drawing.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/market-outcomeslats.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6099-20.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / Market / OutcomeSlats, 291.1 × 78.5\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-outcomeslats{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:291.1px; height:78.5px;\n padding:0px 23px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/market-outcomeslats.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 33px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, LoadMore is 6.13, not 3.\n the same distance each way, so press and release are one gesture */\n.pc-outcomeslats{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-outcomeslats:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-outcomeslats:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-outcomeslats:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-outcomeslats[disabled], .pc-outcomeslats[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-outcomeslats{ transition:none } }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-outcomeslats[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-outcomeslats[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Size", "type": "VARIANT", "default": "md", "values": [ "md", "sm" ] }, { "name": "Yes label", "type": "TEXT", "default": "62%", "values": [] }, { "name": "No label", "type": "TEXT", "default": "38%", "values": [] }, { "name": "Split", "type": "VARIANT", "default": "50 / 50", "values": [ "50 / 50", "yes-heavy", "no-heavy" ] } ], "use": "Use as the YES/NO probability display on a card or in the modal, the two sizes are one drawing at a uniform 0.613 scale with the overlap scaling too (37.7 in the modal, 23.2 on the card), and that overlap IS the chevron seam.", "notUse": "Not as the thing the user presses to pick a side, selection is Control / Market / YesNoButton, which carries the check and exclamation glyphs.", "insteadUse": "Control / Market / YesNoButton", "pairsWith": [ "Region / Market / MarketCard [grid]", "Control / Market / YesNoButton", "Display / Market / QuestionBanner" ] }, { "id": "control-market-yesnobutton-with-payout", "sourceId": "6274:1648", "name": "Control / Market / YesNoButton [with payout]", "class": "Control", "domain": "Market", "size": { "w": 215, "h": 201 }, "exportBox": null, "figma": { "nodeId": "6274:1648", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6274-1648", "sheet": "05 · Buttons" }, "authored": false, "description": "Artwork 40:36781. The full block INCLUDING the PayoutHint, where Market / YesNoButton is the button alone. Code mirrors this with aspect-[215/201] vs aspect-[215/154].", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/market-yesnobutton-with-payout.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6103-2393.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / Market / YesNoButton [with payout], 215 × 201\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-yesnobutton-with-payout{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:215px; height:201px;\n padding:32px 15px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/market-yesnobutton-with-payout.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, LoadMore is 6.13, not 3.\n the same distance each way, so press and release are one gesture */\n.pc-yesnobutton-with-payout{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-yesnobutton-with-payout:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-yesnobutton-with-payout:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-yesnobutton-with-payout:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-yesnobutton-with-payout[disabled], .pc-yesnobutton-with-payout[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-yesnobutton-with-payout{ transition:none } }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-yesnobutton-with-payout[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-yesnobutton-with-payout[data-loading] > *{ visibility:hidden }", "plannedProps": [], "use": "Use where the reserved 215/201 aspect is already in the layout and the payout must be visible at the moment of choosing a side.", "notUse": "Not treated as a second button design, it is Control / Market / YesNoButton (215×153) plus Display / Market / PayoutHint occupying the bottom 48px (GAPS §1.2), so compose the two rather than maintaining both.", "insteadUse": "Control / Market / YesNoButton", "pairsWith": [ "Display / Market / PayoutHint", "Control / Market / StakeInput" ] }, { "id": "control-market-stakeinput", "sourceId": "6268:2195", "name": "Control / Market / StakeInput", "class": "Control", "domain": "Market", "size": { "w": 491, "h": 90 }, "exportBox": null, "figma": { "nodeId": "6268:2195", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6268-2195", "sheet": "07 · Inputs" }, "authored": false, "description": "Artwork 40:34368. Amount plus a USDC suffix. The artwork draws one filled state; empty and disabled were never designed.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/market-stakeinput.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6103-2344.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / Market / StakeInput, 491 × 90\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-stakeinput{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:491px; height:90px;\n padding:0px 39px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/market-stakeinput.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 38px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, LoadMore is 6.13, not 3.\n the same distance each way, so press and release are one gesture */\n.pc-stakeinput{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-stakeinput:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-stakeinput:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-stakeinput:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-stakeinput[disabled], .pc-stakeinput[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-stakeinput{ transition:none } }\n\n/* error, never on its own. Ships with AlertStrip [inline] beneath it,\n because a colour is not a message (G2 gave the ring to focus only) */\n.pc-stakeinput[aria-invalid=\"true\"]{ box-shadow:inset 0 0 0 2px var(--pc-color-danger,#EA2A46) }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-stakeinput[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-stakeinput[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Value", "type": "TEXT", "default": "$25.00", "values": [] }, { "name": "State", "type": "VARIANT", "default": "default", "values": [ "default", "hover", "focus", "filled", "disabled" ] } ], "use": "Use for the amount field on the money path, the USDC suffix is drawn into it, which is the only thing distinguishing it from the identical 491×90 SearchField plate. Amount first, side second. The payout is a CONSEQUENCE, never an input, PayoutHint reads from the stake and the chosen side, and is never editable.", "notUse": "Not where an empty or disabled field must be shown, the artwork draws one filled state and both others were never designed (GAPS #12).", "insteadUse": null, "pairsWith": [ "Control / Market / YesNoButton", "Control / Chip / Notched", "Control / ChipRow", "Display / Feedback / AlertStrip" ] }, { "id": "region-market-rulespanel", "sourceId": "6100:81", "name": "Region / Market / RulesPanel", "class": "Region", "domain": "Market", "size": { "w": 465, "h": 275 }, "exportBox": null, "figma": { "nodeId": "6100:81", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6100-81", "sheet": "14 · Market" }, "authored": false, "description": "Artwork 40:36595. Torn-paper panel, shadow +11.6.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/market-rulespanel.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6100-81.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Region / Market / RulesPanel, 465 × 275\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-rulespanel{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:465px; height:275px;\n padding:44px 33px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/market-rulespanel.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-rulespanel[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-rulespanel[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Plate", "type": "INSTANCE_SWAP", "default": "Surface / TornPanel [rules]", "values": [] }, { "name": "Title", "type": "TEXT", "default": "RULES", "values": [] }, { "name": "Body", "type": "TEXT", "default": "Market resolves to YES if the closing price is higher than the opening price.", "values": [] } ], "use": "Use for the market rules block on market detail, torn-paper panel at shadow +11.6, sat under the RULES section tab.", "notUse": "Not as a generic content panel, the plate on its own is Surface / TornPanel [rules] at the same 465×275, and the system's rule is Surface plus content rather than a new region per body of copy.", "insteadUse": "Surface / TornPanel [rules]", "pairsWith": [ "Control / Tab / Market Section", "Surface / TornPanel [rules]" ] }, { "id": "region-market-poolburst", "sourceId": "6100:98", "name": "Region / Market / PoolBurst", "class": "Region", "domain": "Market", "size": { "w": 480, "h": 311 }, "exportBox": null, "figma": { "nodeId": "6100:98", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6100-98", "sheet": "14 · Market" }, "authored": false, "description": "Artwork 40:39346. Violet burst carrying POOL and the odds, shadow +15.4,+16.9.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/market-poolburst.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6100-98.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Region / Market / PoolBurst, 480 × 311\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-poolburst{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:480px; height:311px;\n padding:50px 34px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/market-poolburst.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-poolburst[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-poolburst[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Plate", "type": "INSTANCE_SWAP", "default": "Surface / Burst [pool]", "values": [] }, { "name": "Amount", "type": "TEXT", "default": "$24,180", "values": [] }, { "name": "Caption", "type": "TEXT", "default": "TOTAL POOL", "values": [] } ], "use": "Use for the POOL total and the odds on market detail, a violet burst at shadow +15.4/+16.9.", "notUse": "Not stretched into a wider slot, the burst silhouette must scale uniformly, and the plate alone is Surface / Burst [pool] at 478×279.", "insteadUse": "Surface / Burst [pool]", "pairsWith": [ "Display / Market / QuestionBanner", "Control / Market / OutcomeSlats", "Display / Market / TimerChip [burst]" ] }, { "id": "display-market-hotmarkettag", "sourceId": "6100:124", "name": "Display / Market / HotMarketTag", "class": "Display", "domain": "Market", "size": { "w": 368, "h": 99 }, "exportBox": null, "figma": { "nodeId": "6100:124", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6100-124", "sheet": "11 · Badges & Tags" }, "authored": false, "description": "Artwork 40:33843. Yellow banner with a burst. The mobile version is a 0.39 scale, the most extreme in the file.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6100-124.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [ { "name": "Label", "type": "TEXT", "default": "HOT MARKET", "values": [] } ], "use": "Use to flag a hot market on a card, a yellow banner with a burst, and the mobile form is a 0.39 uniform scale, the most extreme in the file, so check legibility before reusing it small.", "notUse": "Not for lifecycle state, live, resolving, voided and the rest belong on Display / Market / StatusBadge, and a promo flag reading as a status is exactly the overload R1 forbids.", "insteadUse": "Display / Market / StatusBadge", "pairsWith": [ "Region / Market / MarketCard [grid]", "Display / Market / LiveTag" ] }, { "id": "display-market-questionbanner", "sourceId": "6103:2358", "name": "Display / Market / QuestionBanner", "class": "Display", "domain": "Market", "size": { "w": 509, "h": 145 }, "exportBox": null, "figma": { "nodeId": "6103:2358", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6103-2358", "sheet": "14 · Market" }, "authored": false, "description": "Artwork 40:39333. The market question on a torn banner, two lines.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/market-questionbanner.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6103-2358.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Market / QuestionBanner, 509 × 145\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-questionbanner{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:509px; height:145px;\n padding:0px 41px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/market-questionbanner.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 46px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-questionbanner[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-questionbanner[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Question", "type": "TEXT", "default": "WILL BTC BE HIGHER AT THE END OF THIS 1 MINUTE ROUND?", "values": [] }, { "name": "Icon", "type": "INSTANCE_SWAP", "default": "Display / Sports / TeamBadge", "values": [] } ], "use": "Use to carry the market question at the top of market detail, a torn banner sized for two lines at 509×145.", "notUse": "Not as a page or section title, a section head is Surface / Type / SectionHeading and the page header is Region / Masthead.", "insteadUse": "Region / Masthead", "pairsWith": [ "Region / Market / PoolBurst", "Control / Market / OutcomeSlats", "Display / Market / TimerChip [burst]", "Display / Market / LiveTag" ] }, { "id": "display-market-livetag", "sourceId": "6103:2365", "name": "Display / Market / LiveTag", "class": "Display", "domain": "Market", "size": { "w": 173, "h": 111 }, "exportBox": null, "figma": { "nodeId": "6103:2365", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6103-2365", "sheet": "11 · Badges & Tags" }, "authored": false, "description": "Artwork 40:39370. The LIVE lozenge with its emphasis pair.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/market-livetag.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6103-2365.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Market / LiveTag, 173 × 111\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-livetag{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:173px; height:111px;\n padding:0px 14px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/market-livetag.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 46px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-livetag[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-livetag[data-loading] > *{ visibility:hidden }", "plannedProps": [], "use": "Use where LIVE needs the emphasis pair, a white word over a black copy of itself, and GAPS #6 names this lozenge as the plate for the wordier lifecycle states.", "notUse": "Not maintained alongside Display / Badge / Live [md], both are 173×111 LIVE marks from different artwork nodes; the badge is the dot-plus-label form and this is the emphasis form, and two live marks on one screen is drift.", "insteadUse": "Display / Market / LiveTag", "pairsWith": [ "Display / Market / QuestionBanner", "Display / Market / StatusBadge", "Display / Type / DisplayTitle" ] }, { "id": "display-data-statstrip", "sourceId": "6100:167", "name": "Display / Data / StatStrip", "class": "Display", "domain": "Data", "size": { "w": 1191, "h": 100 }, "exportBox": null, "figma": { "nodeId": "6100:167", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6100-167", "sheet": "15 · Data" }, "authored": false, "description": "Artwork 40:13911. The ribbon skeleton again, five segments, body h 81.9. Segment 1 uses the RAGGED head cap, segment 5 a mirrored tail. Two of its drawn widths overshoot their visible slot.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/data-statstrip.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6100-167.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Data / StatStrip, 1191 × 100\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-statstrip{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:1191px; height:100px;\n padding:0px 95px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/data-statstrip.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 42px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-statstrip[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-statstrip[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Cell 1", "type": "TEXT", "default": "VOLUME", "values": [] }, { "name": "Cell 2", "type": "TEXT", "default": "$1.2M", "values": [] }, { "name": "Cell 3", "type": "TEXT", "default": "TRADERS", "values": [] }, { "name": "Cell 4", "type": "TEXT", "default": "4,812", "values": [] }, { "name": "Cell 5", "type": "TEXT", "default": "24H", "values": [] }, { "name": "Segments", "type": "INSTANCE_SWAP", "default": "Foundation / Ribbon Seam", "values": [] } ], "use": "Use as the profile stat strip, the ribbon skeleton a third time at five segments on the 81.9 body, segment 1 taking the RAGGED head cap and segment 5 a mirrored tail.", "notUse": "Not resized by dragging its drawn width, two of its segment widths already overshoot their visible slot, so a different column count is rebuilt from Foundation / Ribbon Seam rather than stretched.", "insteadUse": "Foundation / Ribbon Seam", "pairsWith": [ "Display / Profile / CopyShareIcons", "Region / Profile / ProfileHeader", "Foundation / Ribbon Row Shadow" ] }, { "id": "display-data-summarybar", "sourceId": "6100:2299", "name": "Display / Data / SummaryBar", "class": "Display", "domain": "Data", "size": { "w": 1569, "h": 233 }, "exportBox": null, "figma": { "nodeId": "6100:2299", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6100-2299", "sheet": "15 · Data" }, "authored": false, "description": "Artwork 40:3249. The segmented ribbon a fourth time, at h 74.1 instead of 81.9, every seam scales by 0.905, so the slant seam is 19.8. Column labels sit ABOVE the bar, centred over their segment.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/data-summarybar.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6100-2299.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Data / SummaryBar, 1569 × 233\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-summarybar{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:1569px; height:233px;\n padding:37px 110px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/data-summarybar.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-summarybar[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-summarybar[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Cell 1", "type": "TEXT", "default": "TOTAL POOL", "values": [] }, { "name": "Cell 2", "type": "TEXT", "default": "$24,180", "values": [] }, { "name": "Cell 3", "type": "TEXT", "default": "ENDS IN", "values": [] }, { "name": "Cell 4", "type": "TEXT", "default": "00:42", "values": [] }, { "name": "Segments", "type": "INSTANCE_SWAP", "default": "Foundation / Ribbon Seam", "values": [] } ], "use": "Use for the column-summary bar where labels sit ABOVE the bar centred over their segment, it is the ribbon at body height 74.1 with every seam scaled 0.905, so the slant seam is 19.8 rather than 21.91.", "notUse": "Not stacked with 81.9-body ribbons, the seams will not line up; a row at the universal body height is Region / Data / ActivityRow.", "insteadUse": "Region / Data / ActivityRow", "pairsWith": [ "Display / Data / TableHeader", "Region / Data / LeaderboardRow", "Foundation / Ribbon Seam" ] }, { "id": "display-data-pricechart", "sourceId": "6103:140", "name": "Display / Data / PriceChart", "class": "Display", "domain": "Data", "size": { "w": 1428, "h": 473 }, "exportBox": { "w": 1431, "h": 475, "sourceNodeId": "6103:140", "includesStrokeAndShadow": true }, "figma": { "nodeId": "6103:140", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6103-140", "sheet": "16 · Charts" }, "authored": false, "description": "Artwork 40:39158. Area chart with an entry line, a price marker and a dollar axis. The artwork draws one state; the code has area-up / area-down / settled.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/r2m-pricechart.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Data / PriceChart, 1428 × 473\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-pricechart{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:1428px; height:473px;\n padding:76px 100px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/data-pricechart.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-pricechart[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-pricechart[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Direction", "type": "VARIANT", "default": "down", "values": [ "up", "down" ] }, { "name": "Marker", "type": "BOOLEAN", "default": "true", "values": [] }, { "name": "Value", "type": "TEXT", "default": "$64,180", "values": [] } ], "use": "Use for the full-width market price history, area chart with an entry line, a price marker and a dollar axis, but note the artwork draws one state where the code has area-up, area-down and settled, so two of the three are undrawn.", "notUse": "Not for YES/NO probability, that is the 459×280 percentage-axis chart.", "insteadUse": "Display / Data / PredictionOddsChart", "pairsWith": [ "Display / Market / QuestionBanner", "Control / Tab / Market Section" ] }, { "id": "display-data-predictionoddschart", "sourceId": "6103:2297", "name": "Display / Data / PredictionOddsChart", "class": "Display", "domain": "Data", "size": { "w": 459, "h": 280 }, "exportBox": null, "figma": { "nodeId": "6103:2297", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6103-2297", "sheet": "16 · Charts" }, "authored": false, "description": "Artwork 40:34439. Small area chart with a percentage axis.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/r2m-oddschart.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Data / PredictionOddsChart, 459 × 280\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-predictionoddschart{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:459px; height:280px;\n padding:45px 32px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/data-predictionoddschart.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-predictionoddschart[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-predictionoddschart[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Marker", "type": "BOOLEAN", "default": "true", "values": [] }, { "name": "Value", "type": "TEXT", "default": "62%", "values": [] } ], "use": "Use in the PREDICTION ODDS tab on market detail, a small area chart on a percentage axis, sized to sit inside the detail column at 459 wide.", "notUse": "Not for price in dollars, which is the 1428-wide Display / Data / PriceChart.", "insteadUse": "Display / Data / PriceChart", "pairsWith": [ "Control / Tab / Market Section", "Control / Market / OutcomeSlats" ] }, { "id": "display-data-activityrow-compact", "sourceId": "6103:2337", "name": "Display / Data / ActivityRow [compact]", "class": "Display", "domain": "Data", "size": { "w": 469, "h": 60 }, "exportBox": null, "figma": { "nodeId": "6103:2337", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6103-2337", "sheet": "15 · Data" }, "authored": false, "description": "Artwork 40:36623. A SHORT form of the activity row used in the market-detail feed, not the 1650-wide ribbon. Four stack at a 60px pitch.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/data-activityrow-compact.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6103-2337.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Data / ActivityRow [compact], 469 × 60\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-activityrow-compact{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:469px; height:60px;\n padding:0px 38px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/data-activityrow-compact.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 25px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-activityrow-compact[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-activityrow-compact[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Account", "type": "TEXT", "default": "@trader", "values": [] }, { "name": "Action", "type": "TEXT", "default": "BOUGHT YES", "values": [] }, { "name": "Time", "type": "TEXT", "default": "2m", "values": [] }, { "name": "Side", "type": "VARIANT", "default": "yes", "values": [ "yes", "no" ] } ], "use": "Use in the market-detail activity feed, where four rows stack at a 60px pitch.", "notUse": "Not on the full-width activity page, that is the 1650-wide ribbon row.", "insteadUse": "Region / Data / ActivityRow", "pairsWith": [ "Region / Sports / ActivityFeed [rail]", "Control / Tab / Market Section" ] }, { "id": "region-data-leaderboardpodium-champion", "sourceId": "6114:84", "name": "Region / Data / LeaderboardPodium [champion]", "class": "Region", "domain": "Data", "size": { "w": 863, "h": 621 }, "exportBox": null, "figma": { "nodeId": "6114:84", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6114-84", "sheet": "15 · Data" }, "authored": false, "description": "Artwork 40:12682. Composed from ValuePlate and StarHex instances over the champion burst. Not a size of the other two tiers, a different layout.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/data-leaderboardpodium-champion.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6114-84.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Region / Data / LeaderboardPodium [champion], 863 × 621\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-leaderboardpodium-champion{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:863px; height:621px;\n padding:99px 60px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/data-leaderboardpodium-champion.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-leaderboardpodium-champion[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-leaderboardpodium-champion[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Plate", "type": "INSTANCE_SWAP", "default": "Surface / Burst [champion]", "values": [] }, { "name": "Kicker", "type": "INSTANCE_SWAP", "default": "Display / Type / KickerTag", "values": [] }, { "name": "Name", "type": "TEXT", "default": "@trader", "values": [] }, { "name": "Value", "type": "TEXT", "default": "$12,480", "values": [] }, { "name": "Avatar", "type": "INSTANCE_SWAP", "default": "Display / Badge / StarHex", "values": [] } ], "use": "Use for first place only, composed from ValuePlate and StarHex instances over the champion burst, and it is a different layout from tiers 2 and 3 rather than a larger size of them.", "notUse": "Not for second or third place, which are the 597-wide band forms and do not scale from this.", "insteadUse": "Region / Data / LeaderboardPodium [runner-up]", "pairsWith": [ "Surface / Burst [champion]", "Surface / Data / ValuePlate", "Display / Badge / StarHex", "Display / Type / KickerTag" ] }, { "id": "region-data-leaderboardpodium-runner-up", "sourceId": "6100:2432", "name": "Region / Data / LeaderboardPodium [runner-up]", "class": "Region", "domain": "Data", "size": { "w": 597, "h": 293 }, "exportBox": null, "figma": { "nodeId": "6100:2432", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6100-2432", "sheet": "15 · Data" }, "authored": false, "description": "Artwork 40:12408. Blue band with a chevron shard texture, a violet RUNNER UP tag, and a value plate that OVERHANGS the band by 41px.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/data-leaderboardpodium-runner-up.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6100-2432.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Region / Data / LeaderboardPodium [runner-up], 597 × 293\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-leaderboardpodium-runner-up{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:597px; height:293px;\n padding:47px 42px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/data-leaderboardpodium-runner-up.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-leaderboardpodium-runner-up[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-leaderboardpodium-runner-up[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Rank", "type": "VARIANT", "default": "runner-up", "values": [ "runner-up", "third" ] }, { "name": "Name", "type": "TEXT", "default": "@trader", "values": [] }, { "name": "Value", "type": "TEXT", "default": "$8,120", "values": [] }, { "name": "Kicker", "type": "INSTANCE_SWAP", "default": "Display / Type / KickerTag", "values": [] }, { "name": "Plate", "type": "INSTANCE_SWAP", "default": "Surface / Data / ValuePlate", "values": [] } ], "use": "Use for second place, a blue band with a chevron shard texture and a violet RUNNER UP tag, whose value plate deliberately OVERHANGS the band by 41px.", "notUse": "Not for third place, which is the orange-deep tier at 597×237 rather than a recolour of this one.", "insteadUse": "Region / Data / LeaderboardPodium [third]", "pairsWith": [ "Surface / Data / ValuePlate", "Display / Type / KickerTag", "Region / Data / LeaderboardPodium [third]" ] }, { "id": "region-data-leaderboardpodium-third", "sourceId": "6100:2485", "name": "Region / Data / LeaderboardPodium [third]", "class": "Region", "domain": "Data", "size": { "w": 597, "h": 237 }, "exportBox": null, "figma": { "nodeId": "6100:2485", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6100-2485", "sheet": "15 · Data" }, "authored": false, "description": "Artwork 40:12356. The third tier, orange-deep.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/data-leaderboardpodium-third.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6100-2485.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Region / Data / LeaderboardPodium [third], 597 × 237\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-leaderboardpodium-third{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:597px; height:237px;\n padding:38px 42px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/data-leaderboardpodium-third.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-leaderboardpodium-third[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-leaderboardpodium-third[data-loading] > *{ visibility:hidden }", "plannedProps": [], "use": "Use for third place, the orange-deep tier at 597×237, 56px shorter than the runner-up band it sits beside.", "notUse": "Not for second place, which is 293 tall and blue with its own RUNNER UP tag.", "insteadUse": "Region / Data / LeaderboardPodium [runner-up]", "pairsWith": [ "Surface / Data / ValuePlate", "Display / Type / KickerTag", "Region / Data / LeaderboardPodium [runner-up]" ] }, { "id": "region-profile-predictionhistorycard", "sourceId": "6100:2645", "name": "Region / Profile / PredictionHistoryCard", "class": "Region", "domain": "Profile", "size": { "w": 775, "h": 254 }, "exportBox": null, "figma": { "nodeId": "6100:2645", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6100-2645", "sheet": "13 · Cards" }, "authored": false, "description": "Artwork 40:13984. Composed from LabelColumn and ResultStamp instances. The artwork draws won / loss / created as separate instances rather than one component with states.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/profile-predictionhistorycard.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6100-2645.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Region / Profile / PredictionHistoryCard, 775 × 254\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-predictionhistorycard{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:775px; height:254px;\n padding:41px 54px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/profile-predictionhistorycard.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-predictionhistorycard[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-predictionhistorycard[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Plate", "type": "INSTANCE_SWAP", "default": "Surface / OutcomeCard", "values": [] }, { "name": "State", "type": "VARIANT", "default": "default", "values": [ "default", "resolving", "settled" ] }, { "name": "Question", "type": "TEXT", "default": "WILL BTC BE HIGHER AT THE END OF THIS 1 MINUTE ROUND?", "values": [] }, { "name": "Stake", "type": "TEXT", "default": "$25.00", "values": [] }, { "name": "Stamp", "type": "INSTANCE_SWAP", "default": "Display / Profile / ResultStamp [won]", "values": [] } ], "use": "Use for one row of a user's prediction history, composed from LabelColumn and ResultStamp instances sitting on the OutcomeCard surface.", "notUse": "Not rebuilt as three cards for won, lost and created, the artwork drew them as separate instances, but the three colours now live on Surface / OutcomeCard as a State property.", "insteadUse": "Surface / OutcomeCard", "pairsWith": [ "Surface / OutcomeCard", "Surface / LabelColumn", "Display / Profile / ResultStamp [won]" ] }, { "id": "region-profile-profileheader", "sourceId": "6100:3703", "name": "Region / Profile / ProfileHeader", "class": "Region", "domain": "Profile", "size": { "w": 409, "h": 196 }, "exportBox": null, "figma": { "nodeId": "6100:3703", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6100-3703", "sheet": "20 · Profile" }, "authored": false, "description": "Artwork 40:12849. Name on a burst plus a star badge.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/profile-profileheader.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6100-3703.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Region / Profile / ProfileHeader, 409 × 196\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-profileheader{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:409px; height:196px;\n padding:31px 29px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/profile-profileheader.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-profileheader[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-profileheader[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Username", "type": "TEXT", "default": "@trader", "values": [] }, { "name": "Wallet", "type": "TEXT", "default": "7xKX…9fQ2", "values": [] }, { "name": "Avatar", "type": "INSTANCE_SWAP", "default": "Display / Badge / StarHex", "values": [] }, { "name": "Actions", "type": "INSTANCE_SWAP", "default": "Display / Profile / CopyShareIcons", "values": [] } ], "use": "Use at the top of a public profile, the name on a burst plus the star badge, above the StatStrip.", "notUse": "Not as a stand-in for an avatar, no avatar exists anywhere in the artwork (GAPS #13), so identity here is carried by the name, and drawing one is new work.", "insteadUse": null, "pairsWith": [ "Display / Profile / StarBadge", "Display / Data / StatStrip", "Display / Profile / CopyShareIcons" ] }, { "id": "display-profile-resultstamp-won", "sourceId": "6100:3729", "name": "Display / Profile / ResultStamp [won]", "class": "Display", "domain": "Profile", "size": { "w": 229, "h": 128 }, "exportBox": null, "figma": { "nodeId": "6100:3729", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6100-3729", "sheet": "11 · Badges & Tags" }, "authored": false, "description": "Artwork 40:14026. The loss variant uses stamp/loss #FF8FA5.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/profile-resultstamp-won.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6100-3729.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Profile / ResultStamp [won], 229 × 128\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-resultstamp-won{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:229px; height:128px;\n padding:0px 18px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/profile-resultstamp-won.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 46px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-resultstamp-won[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-resultstamp-won[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Label", "type": "TEXT", "default": "WON", "values": [] }, { "name": "Result", "type": "VARIANT", "default": "won", "values": [ "won", "lost" ] } ], "use": "Use as the terminal outcome stamp on a history card, the loss variant is stamp/loss #FF8FA5, and GAPS #6 names it as the mark for terminal lifecycle states.", "notUse": "Not expected to carry the claim CTA, WinLossBanner welds a claim-winnings button to this stamp in code, but that button is undrawn (GAPS #8), so pair the stamp with a real button rather than growing it one.", "insteadUse": "Control / Button", "pairsWith": [ "Surface / OutcomeCard", "Region / Profile / PredictionHistoryCard", "Surface / LabelColumn" ] }, { "id": "display-profile-starbadge", "sourceId": "6100:3736", "name": "Display / Profile / StarBadge", "class": "Display", "domain": "Profile", "size": { "w": 71, "h": 87 }, "exportBox": null, "figma": { "nodeId": "6100:3736", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6100-3736", "sheet": "11 · Badges & Tags" }, "authored": false, "description": "Artwork 40:14190. Yellow hexagon star badge, shadow +5.8.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/profile-starbadge.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6100-3736.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Profile / StarBadge, 71 × 87\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-starbadge{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:71px; height:87px;\n padding:0px 6px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/profile-starbadge.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 37px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-starbadge[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-starbadge[data-loading] > *{ visibility:hidden }", "plannedProps": [], "use": "Use as the rank ornament on a profile header, a yellow hexagon star badge at shadow +5.8, and the largest of the three drawn hexagon sizes (39.8 mobile · 50.9 nav · 71 here).", "notUse": "Not on the champion podium, that frame is the larger 138×167 Display / Badge / StarHex with its black star and three small stars.", "insteadUse": "Display / Badge / StarHex", "pairsWith": [ "Region / Profile / ProfileHeader", "Display / Data / StatStrip" ] }, { "id": "display-profile-copyshareicons", "sourceId": "6101:46", "name": "Display / Profile / CopyShareIcons", "class": "Display", "domain": "Profile", "size": { "w": 108, "h": 63 }, "exportBox": null, "figma": { "nodeId": "6101:46", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6101-46", "sheet": "20 · Profile" }, "authored": false, "description": "Artwork 40:13941, inside the StatStrip WALLET segment beside @TESTIE. Copy and share drawn as one unit.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/profile-copyshareicons.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6101-46.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Profile / CopyShareIcons, 108 × 63\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-copyshareicons{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:108px; height:63px;\n padding:0px 9px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/profile-copyshareicons.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 26px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-copyshareicons[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-copyshareicons[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Icon", "type": "VARIANT", "default": "copy", "values": [ "copy", "share" ] }, { "name": "State", "type": "VARIANT", "default": "default", "values": [ "default", "hover", "pressed", "focus", "disabled" ] } ], "use": "Use inside the StatStrip WALLET segment beside the handle, where copy and share appear together as the single 108×63 unit the artwork drew.", "notUse": "Not where only share or only copy is needed, the two are welded into one drawing and cannot be used apart until they are split, which GAPS #17 lists as the free first action of the icon set.", "insteadUse": null, "pairsWith": [ "Display / Data / StatStrip", "Region / Profile / ProfileHeader" ] }, { "id": "region-auth-signinmodal", "sourceId": "6101:93", "name": "Region / Auth / SignInModal", "class": "Region", "domain": "Auth", "size": { "w": 524, "h": 380 }, "exportBox": null, "figma": { "nodeId": "6101:93", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6101-93", "sheet": "19 · Auth" }, "authored": false, "description": "Artwork frame 40:242. Composed from three WalletOption instances and a CloseButton. Torn panel with a dotted clip texture and a I HAVE A PASS KEY link in #91BB4F.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/auth-signinmodal.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6101-93.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Region / Auth / SignInModal, 524 × 380\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-signinmodal{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:524px; height:380px;\n padding:61px 37px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/auth-signinmodal.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-signinmodal[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-signinmodal[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Title", "type": "TEXT", "default": "SIGN IN", "values": [] }, { "name": "Option 1", "type": "INSTANCE_SWAP", "default": "Control / Auth / WalletOption", "values": [] }, { "name": "Option 2", "type": "INSTANCE_SWAP", "default": "Control / Auth / WalletOption", "values": [] }, { "name": "Option 3", "type": "INSTANCE_SWAP", "default": "Control / Auth / WalletOption", "values": [] }, { "name": "Passkey link", "type": "TEXT", "default": "I HAVE A PASS KEY", "values": [] }, { "name": "Passkey visible", "type": "BOOLEAN", "default": "true", "values": [] } ], "use": "Use for the sign-in flow, the only modal the system has ever drawn, composed from three WalletOption rows and a CloseButton on a torn panel with a dotted clip and a #91BB4F I HAVE A PASS KEY link. One panel, one row per provider, one way out. Never two dismiss affordances.", "notUse": "Not as the template for the predict or deposit modal, both are undrawn (GAPS #1, #5) and should be built on Surface / ModalPanel rather than by editing a copy of this one.", "insteadUse": "Surface / ModalPanel", "pairsWith": [ "Control / Auth / WalletOption", "Control / Auth / CloseButton", "Surface / ModalPanel" ] }, { "id": "control-auth-walletoption", "sourceId": "6101:34", "name": "Control / Auth / WalletOption", "class": "Control", "domain": "Auth", "size": { "w": 171, "h": 56 }, "exportBox": null, "figma": { "nodeId": "6101:34", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6101-34", "sheet": "19 · Auth" }, "authored": false, "description": "Row 167.3 x 52.6 with a hard shadow, an icon in a 28.1 clip group and a 30px white label. Faces: phantom #4B42A0, google #3B7DED, x #262626. The artwork labels the third row PHANTOM instead of X, a copy-paste error in the source.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/auth-walletoption.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6101-34.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / Auth / WalletOption, 171.2 × 56.4\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-walletoption{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:171.2px; height:56.4px;\n padding:0px 14px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/auth-walletoption.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 24px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, LoadMore is 6.13, not 3.\n the same distance each way, so press and release are one gesture */\n.pc-walletoption{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-walletoption:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-walletoption:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-walletoption:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-walletoption[disabled], .pc-walletoption[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-walletoption{ transition:none } }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-walletoption[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-walletoption[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Provider", "type": "VARIANT", "default": "phantom", "values": [ "phantom", "solflare", "backpack" ] }, { "name": "Label", "type": "TEXT", "default": "PHANTOM", "values": [] }, { "name": "Icon", "type": "INSTANCE_SWAP", "default": "Display / Brand / Logo", "values": [] }, { "name": "State", "type": "VARIANT", "default": "default", "values": [ "default", "hover", "pressed", "focus", "disabled" ] } ], "use": "Use as a provider row inside the sign-in modal, faces phantom #4B42A0, google #3B7DED, x #262626 with the icon in a 28.1 clip group, and note the artwork mislabels the third row PHANTOM instead of X.", "notUse": "Not as a generic list row or button outside auth, it reads as a provider affordance wherever it appears.", "insteadUse": "Control / Button", "pairsWith": [ "Region / Auth / SignInModal", "Surface / ModalPanel", "Control / Auth / CloseButton" ] }, { "id": "control-auth-closebutton", "sourceId": "6268:1913", "name": "Control / Auth / CloseButton", "class": "Control", "domain": "Auth", "size": { "w": 57, "h": 57 }, "exportBox": null, "figma": { "nodeId": "6268:1913", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6268-1913", "sheet": "05 · Buttons" }, "authored": false, "description": "Artwork 40:284. Disc overlapping the modal top-right corner. The same affordance appears on DropdownSelect [open] at 29.7.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6100-3741.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / Auth / CloseButton, 57 × 57\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-closebutton{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:57px; height:57px;\n padding:0px 6px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/auth-closebutton.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 24px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, LoadMore is 6.13, not 3.\n the same distance each way, so press and release are one gesture */\n.pc-closebutton{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-closebutton:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-closebutton:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-closebutton:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-closebutton[disabled], .pc-closebutton[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-closebutton{ transition:none } }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-closebutton[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-closebutton[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "State", "type": "VARIANT", "default": "default", "values": [ "default", "hover", "pressed", "focus", "disabled" ] } ], "use": "Use as the dismiss disc overlapping a panel's top-right corner, the same affordance appears at 29.7 on DropdownSelect [open], so it is one close mark at two sizes.", "notUse": "Not as a generic icon button, there is no icon system (GAPS #17), and under R1 this shape carries dismissal and nothing else.", "insteadUse": null, "pairsWith": [ "Region / Auth / SignInModal", "Surface / ModalPanel", "Control / DropdownSelect [open]" ] }, { "id": "control-nav-sportstab", "sourceId": "6082:14", "name": "Control / Nav / SportsTab", "class": "Control", "domain": "Nav", "size": { "w": 133, "h": 50 }, "exportBox": null, "figma": { "nodeId": "6082:14", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6082-14", "sheet": "10 · Navigation" }, "authored": false, "description": "Artwork 2004:4433. SportsNav REPLACES the TopNav item cluster in place, so build TopNav with a swappable items slot rather than two navs. The active pill is byte-identical to NavItem. WARNING: the active label stays #FFA800 on white, 2.1:1, fails WCAG.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/nav-sportstab.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6082-14.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / Nav / SportsTab, 133.2 × 50.3\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-sportstab{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:133.2px; height:50.3px;\n padding:0px 11px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/nav-sportstab.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 21px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, LoadMore is 6.13, not 3.\n the same distance each way, so press and release are one gesture */\n.pc-sportstab{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-sportstab:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-sportstab:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-sportstab:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-sportstab[disabled], .pc-sportstab[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-sportstab{ transition:none } }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-sportstab[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-sportstab[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Label", "type": "TEXT", "default": "soccer", "values": [] }, { "name": "Count", "type": "TEXT", "default": "6", "values": [] }, { "name": "Count visible", "type": "BOOLEAN", "default": "true", "values": [] }, { "name": "Selected", "type": "BOOLEAN", "default": "false", "values": [] }, { "name": "Live", "type": "BOOLEAN", "default": "false", "values": [] } ], "use": "Use for sports-section navigation built as a swappable items slot on TopNav, since SportsNav replaces the TopNav item cluster in place at the same y with the same pill mechanics.", "notUse": "Not with the drawn active colour, the active label is #FFA800 on white at 2.1:1 and fails WCAG; and the active pill is byte-identical to Control / Nav / NavItem, so it is not a second drawing.", "insteadUse": "Control / Nav / NavItem", "pairsWith": [ "Region / Nav / SportsNav", "Region / Nav / TopNav", "Display / Market / LiveTag" ] }, { "id": "display-sports-teambadge", "sourceId": "6082:27", "name": "Display / Sports / TeamBadge", "class": "Display", "domain": "Sports", "size": { "w": 126, "h": 86 }, "exportBox": null, "figma": { "nodeId": "6082:27", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6082-27", "sheet": "17 · Sports" }, "authored": false, "description": "Artwork 2004:6762. A second size exists at 110 x 65 on the same page, 0.917×, unexplained. Colour-configurable per team.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/sports-teambadge.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6082-27.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Sports / TeamBadge, 126 × 86\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-teambadge{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:126px; height:86px;\n padding:0px 10px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/sports-teambadge.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 36px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-teambadge[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-teambadge[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Team", "type": "VARIANT", "default": "home", "values": [ "home", "away" ] }, { "name": "Abbr", "type": "TEXT", "default": "ARS", "values": [] }, { "name": "Crest", "type": "INSTANCE_SWAP", "default": "Display / Brand / Logo", "values": [] } ], "use": "Use as the team crest on a scoreboard or live burst, colour-configurable per team at 126×86.", "notUse": "Not at the second 110×65 size found on the same artwork page, that 0.917× copy is unexplained drift, so pick 126×86 and scale uniformly if a smaller one is genuinely needed.", "insteadUse": null, "pairsWith": [ "Display / Sports / MatchScoreboard [soccer]", "Region / Sports / LiveGameBurst" ] }, { "id": "display-sports-matchscoreboard-soccer", "sourceId": "6104:55", "name": "Display / Sports / MatchScoreboard [soccer]", "class": "Display", "domain": "Sports", "size": { "w": 710, "h": 161 }, "exportBox": null, "figma": { "nodeId": "6104:55", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6104-55", "sheet": "17 · Sports" }, "authored": false, "description": "Artwork 2004:6878. Two team badges, the score and a match clock on a textured band.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/sports-matchscoreboard-soccer.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6104-55.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Sports / MatchScoreboard [soccer], 710 × 161\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-matchscoreboard-soccer{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:710px; height:161px;\n padding:26px 50px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/sports-matchscoreboard-soccer.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-matchscoreboard-soccer[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-matchscoreboard-soccer[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Home", "type": "TEXT", "default": "ARS", "values": [] }, { "name": "Away", "type": "TEXT", "default": "CHE", "values": [] }, { "name": "Score", "type": "TEXT", "default": "2 - 1", "values": [] }, { "name": "Clock", "type": "TEXT", "default": "67'", "values": [] }, { "name": "Home badge", "type": "INSTANCE_SWAP", "default": "Display / Sports / TeamBadge", "values": [] }, { "name": "Away badge", "type": "INSTANCE_SWAP", "default": "Display / Sports / TeamBadge", "values": [] } ], "use": "Use as the soccer match header, two team badges, the score and a match clock on a textured band, in the 710 box shared with the football board.", "notUse": "Not reused for football, despite sharing the 710 box, football is a separate drawing at 710×162.", "insteadUse": "Display / Sports / MatchScoreboard [football]", "pairsWith": [ "Display / Sports / TeamBadge", "Display / Sports / PlayfieldViz [pitch]", "Region / Sports / MatchLogPanel" ] }, { "id": "display-sports-matchscoreboard-football", "sourceId": "6104:1266", "name": "Display / Sports / MatchScoreboard [football]", "class": "Display", "domain": "Sports", "size": { "w": 710, "h": 162 }, "exportBox": null, "figma": { "nodeId": "6104:1266", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6104-1266", "sheet": "17 · Sports" }, "authored": false, "description": "Artwork 2005:14681. Same 710 box as the soccer board.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/sports-matchscoreboard-football.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6104-1266.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Sports / MatchScoreboard [football], 710 × 162\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-matchscoreboard-football{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:710px; height:162px;\n padding:26px 50px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/sports-matchscoreboard-football.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-matchscoreboard-football[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-matchscoreboard-football[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Home", "type": "TEXT", "default": "KC", "values": [] }, { "name": "Away", "type": "TEXT", "default": "BUF", "values": [] }, { "name": "Score", "type": "TEXT", "default": "21 - 17", "values": [] }, { "name": "Clock", "type": "TEXT", "default": "Q3 04:12", "values": [] }, { "name": "Home badge", "type": "INSTANCE_SWAP", "default": "Display / Sports / TeamBadge", "values": [] }, { "name": "Away badge", "type": "INSTANCE_SWAP", "default": "Display / Sports / TeamBadge", "values": [] } ], "use": "Use as the football match header, the same 710 box as the soccer board, drawn separately.", "notUse": "Not swapped for the soccer board because the boxes match, each sport's board is its own drawing.", "insteadUse": "Display / Sports / MatchScoreboard [soccer]", "pairsWith": [ "Display / Sports / TeamBadge", "Display / Sports / PlayfieldViz [gridiron]", "Region / Sports / MatchLogPanel" ] }, { "id": "display-sports-matchscoreboard-mma", "sourceId": "6104:1293", "name": "Display / Sports / MatchScoreboard [mma]", "class": "Display", "domain": "Sports", "size": { "w": 658, "h": 150 }, "exportBox": null, "figma": { "nodeId": "6104:1293", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6104-1293", "sheet": "17 · Sports" }, "authored": false, "description": "Artwork 2008:7698. Narrower than the 710 board the other sports use. MMA has NO separate playfield group, the octagon is drawn into the page background strip.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/sports-matchscoreboard-mma.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6104-1293.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Sports / MatchScoreboard [mma], 658 × 150\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-matchscoreboard-mma{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:658px; height:150px;\n padding:0px 53px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/sports-matchscoreboard-mma.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 46px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-matchscoreboard-mma[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-matchscoreboard-mma[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Home", "type": "TEXT", "default": "JONES", "values": [] }, { "name": "Away", "type": "TEXT", "default": "MIOCIC", "values": [] }, { "name": "Clock", "type": "TEXT", "default": "R3 02:40", "values": [] }, { "name": "Home badge", "type": "INSTANCE_SWAP", "default": "Display / Sports / TeamBadge", "values": [] }, { "name": "Away badge", "type": "INSTANCE_SWAP", "default": "Display / Sports / TeamBadge", "values": [] } ], "use": "Use as the MMA match header, 658×150, narrower than the 710 board the other sports use.", "notUse": "Not paired with a PlayfieldViz, MMA has no separate playfield group at all; the octagon is drawn into the page background strip.", "insteadUse": null, "pairsWith": [ "Display / Sports / TeamBadge", "Region / Sports / MatchLogPanel" ] }, { "id": "display-sports-matchscoreboard-tennis", "sourceId": "6104:1373", "name": "Display / Sports / MatchScoreboard [tennis]", "class": "Display", "domain": "Sports", "size": { "w": 597, "h": 156 }, "exportBox": null, "figma": { "nodeId": "6104:1373", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6104-1373", "sheet": "17 · Sports" }, "authored": false, "description": "Artwork 2010:23059. A third board width.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/sports-matchscoreboard-tennis.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6104-1373.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Sports / MatchScoreboard [tennis], 597 × 156\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-matchscoreboard-tennis{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:597px; height:156px;\n padding:25px 42px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/sports-matchscoreboard-tennis.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-matchscoreboard-tennis[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-matchscoreboard-tennis[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Home", "type": "TEXT", "default": "ALCARAZ", "values": [] }, { "name": "Away", "type": "TEXT", "default": "SINNER", "values": [] }, { "name": "Score", "type": "TEXT", "default": "6-4 3-6 4-2", "values": [] }, { "name": "Home badge", "type": "INSTANCE_SWAP", "default": "Display / Sports / TeamBadge", "values": [] }, { "name": "Away badge", "type": "INSTANCE_SWAP", "default": "Display / Sports / TeamBadge", "values": [] } ], "use": "Use as the tennis match header, a third board width at 597×156.", "notUse": "Not placed above Display / Sports / PlayfieldViz [court] as a separate element, the court is the one playfield that bundles its scoreboard into the same group, so you would draw the board twice.", "insteadUse": null, "pairsWith": [ "Display / Sports / TeamBadge", "Region / Sports / MatchLogPanel" ] }, { "id": "display-sports-playfieldviz-pitch", "sourceId": "6104:111", "name": "Display / Sports / PlayfieldViz [pitch]", "class": "Display", "domain": "Sports", "size": { "w": 1139, "h": 693 }, "exportBox": null, "figma": { "nodeId": "6104:111", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6104-111", "sheet": "16 · Charts" }, "authored": false, "description": "Artwork 2004:4460. The pitch. Five more exist, one per sports page.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/sports-playfieldviz-pitch.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6104-111.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Sports / PlayfieldViz [pitch], 1139 × 693\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-playfieldviz-pitch{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:1139px; height:693px;\n padding:111px 80px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/sports-playfieldviz-pitch.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-playfieldviz-pitch[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-playfieldviz-pitch[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Marker", "type": "BOOLEAN", "default": "true", "values": [] } ], "use": "Use as the live match visualisation on the soccer page, 1139×693, the largest element on that page and the anchor the scoreboard and log panels sit around.", "notUse": "Not as a generic sports background, six playfields exist, one per sports page, each separately drawn at its own size.", "insteadUse": null, "pairsWith": [ "Display / Sports / MatchScoreboard [soccer]", "Region / Sports / MatchLogPanel", "Region / Sports / ActivityFeed [rail]" ] }, { "id": "display-sports-playfieldviz-gridiron", "sourceId": "6104:824", "name": "Display / Sports / PlayfieldViz [gridiron]", "class": "Display", "domain": "Sports", "size": { "w": 1221, "h": 617 }, "exportBox": null, "figma": { "nodeId": "6104:824", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6104-824", "sheet": "16 · Charts" }, "authored": false, "description": "Artwork 2005:14180. The gridiron.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/sports-playfieldviz-gridiron.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6104-824.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Sports / PlayfieldViz [gridiron], 1221 × 617\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-playfieldviz-gridiron{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:1221px; height:617px;\n padding:99px 85px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/sports-playfieldviz-gridiron.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-playfieldviz-gridiron[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-playfieldviz-gridiron[data-loading] > *{ visibility:hidden }", "plannedProps": [], "use": "Use as the live match visualisation on the football page, 1221×617, the widest of the six playfields.", "notUse": "Not reused for another sport, the six playfields are separate drawings, not variants of one field.", "insteadUse": null, "pairsWith": [ "Display / Sports / MatchScoreboard [football]", "Region / Sports / MatchLogPanel" ] }, { "id": "display-sports-playfieldviz-diamond", "sourceId": "6104:948", "name": "Display / Sports / PlayfieldViz [diamond]", "class": "Display", "domain": "Sports", "size": { "w": 816, "h": 545 }, "exportBox": null, "figma": { "nodeId": "6104:948", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6104-948", "sheet": "16 · Charts" }, "authored": false, "description": "Artwork 2005:19414. The diamond. Baseball also carries a BattersBox sub-view no other sport has.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/sports-playfieldviz-diamond.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6104-948.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Sports / PlayfieldViz [diamond], 816 × 545\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-playfieldviz-diamond{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:816px; height:545px;\n padding:87px 57px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/sports-playfieldviz-diamond.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-playfieldviz-diamond[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-playfieldviz-diamond[data-loading] > *{ visibility:hidden }", "plannedProps": [], "use": "Use as the live match visualisation on the baseball page, 816×545, and it is the only sport that also carries a BattersBox sub-view.", "notUse": "Not treated as the template for the other playfields, no other sport has the BattersBox, so copying this one imports a view that has no equivalent.", "insteadUse": null, "pairsWith": [ "Region / Sports / MatchLogPanel", "Region / Sports / ActivityFeed [rail]" ] }, { "id": "display-sports-playfieldviz-rink", "sourceId": "6104:1113", "name": "Display / Sports / PlayfieldViz [rink]", "class": "Display", "domain": "Sports", "size": { "w": 1055, "h": 576 }, "exportBox": null, "figma": { "nodeId": "6104:1113", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6104-1113", "sheet": "16 · Charts" }, "authored": false, "description": "Artwork 2008:16582. The rink.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/sports-playfieldviz-rink.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6104-1113.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Sports / PlayfieldViz [rink], 1055 × 576\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-playfieldviz-rink{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:1055px; height:576px;\n padding:92px 74px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/sports-playfieldviz-rink.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-playfieldviz-rink[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-playfieldviz-rink[data-loading] > *{ visibility:hidden }", "plannedProps": [], "use": "Use as the live match visualisation on the hockey page, 1055×576.", "notUse": "Not reused for another sport, the six playfields are separate drawings at six different sizes.", "insteadUse": null, "pairsWith": [ "Region / Sports / MatchLogPanel", "Region / Sports / ActivityFeed [rail]" ] }, { "id": "display-sports-playfieldviz-court", "sourceId": "6104:1212", "name": "Display / Sports / PlayfieldViz [court]", "class": "Display", "domain": "Sports", "size": { "w": 1149, "h": 786 }, "exportBox": null, "figma": { "nodeId": "6104:1212", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6104-1212", "sheet": "16 · Charts" }, "authored": false, "description": "Artwork 2010:22944. The court, this one bundles the scoreboard into the same group, unlike every other sport.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/sports-playfieldviz-court.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6104-1212.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Sports / PlayfieldViz [court], 1149 × 786\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-playfieldviz-court{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:1149px; height:786px;\n padding:126px 80px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/sports-playfieldviz-court.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-playfieldviz-court[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-playfieldviz-court[data-loading] > *{ visibility:hidden }", "plannedProps": [], "use": "Use as the live match visualisation on the court sport's page, 1149×786, and unlike every other playfield it bundles the scoreboard into the same group, so it arrives complete.", "notUse": "Not composed with a separate MatchScoreboard on top, that would draw the scoreboard twice.", "insteadUse": null, "pairsWith": [ "Region / Sports / MatchLogPanel", "Region / Sports / ActivityFeed [rail]" ] }, { "id": "region-sports-matchlogpanel", "sourceId": "6104:173", "name": "Region / Sports / MatchLogPanel", "class": "Region", "domain": "Sports", "size": { "w": 553, "h": 284 }, "exportBox": null, "figma": { "nodeId": "6104:173", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6104-173", "sheet": "17 · Sports" }, "authored": false, "description": "Artwork 2004:6686. Violet panel of event rows with a clip-group texture. Two sit side by side.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/sports-matchlogpanel.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6104-173.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Region / Sports / MatchLogPanel, 553 × 284\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-matchlogpanel{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:553px; height:284px;\n padding:45px 39px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/sports-matchlogpanel.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-matchlogpanel[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-matchlogpanel[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Rows", "type": "INSTANCE_SWAP", "default": "Display / Data / ActivityRow [compact]", "values": [] }, { "name": "Title", "type": "TEXT", "default": "MATCH LOG", "values": [] } ], "use": "Use for the running list of match events beside a playfield, a violet panel of event rows with a clip-group texture, drawn to sit two side by side.", "notUse": "Not for the site's activity feed, on sports pages that is Region / Sports / ActivityFeed [rail] and elsewhere the ribbon row.", "insteadUse": "Region / Sports / ActivityFeed [rail]", "pairsWith": [ "Display / Sports / PlayfieldViz [pitch]", "Display / Sports / MatchScoreboard [soccer]" ] }, { "id": "region-sports-activityfeed-rail", "sourceId": "6104:339", "name": "Region / Sports / ActivityFeed [rail]", "class": "Region", "domain": "Sports", "size": { "w": 545, "h": 341 }, "exportBox": null, "figma": { "nodeId": "6104:339", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6104-339", "sheet": "15 · Data" }, "authored": false, "description": "Artwork 2004:6461. The ACTIVITY tab plus compact rows, as used on sports pages.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/sports-activityfeed-rail.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6104-339.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Region / Sports / ActivityFeed [rail], 545 × 341\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-activityfeed-rail{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:545px; height:341px;\n padding:55px 38px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/sports-activityfeed-rail.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-activityfeed-rail[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-activityfeed-rail[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Rows", "type": "INSTANCE_SWAP", "default": "Display / Data / ActivityRow [compact]", "values": [] }, { "name": "Title", "type": "TEXT", "default": "LIVE ACTIVITY", "values": [] } ], "use": "Use for the ACTIVITY tab plus its compact rows in a sports page rail at 545 wide.", "notUse": "Not on desktop product pages, the full-width feed there is the 1650-wide ribbon row.", "insteadUse": "Region / Data / ActivityRow", "pairsWith": [ "Display / Data / ActivityRow [compact]", "Control / Tab / Market Section", "Display / Sports / PlayfieldViz [pitch]" ] }, { "id": "display-type-displaytitle", "sourceId": "6111:72", "name": "Display / Type / DisplayTitle", "class": "Display", "domain": "Type", "size": { "w": 248, "h": 54 }, "exportBox": null, "figma": { "nodeId": "6111:72", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6111-72", "sheet": "03 · Typography" }, "authored": false, "description": "The system's only emphasis device, as a component. A white word over a black copy of itself, offset 0.062 × fontSize, measured from three artwork instances. The text property drives BOTH copies, so the offset cannot drift.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6111-72.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [ { "name": "Text", "type": "TEXT", "default": "PUMPCADE", "values": [] }, { "name": "Size", "type": "VARIANT", "default": "md", "values": [ "sm", "md", "lg" ] } ], "use": "Use for any headline that needs the system's one emphasis device, a white word over a black copy of itself at 0.062 × fontSize, minimum 1px, with the Text property driving BOTH copies so the offset cannot drift.", "notUse": "Not on button labels, the emphasis rule explicitly excludes them, because the drawn button has exactly three paths.", "insteadUse": null, "pairsWith": [ "Display / Type / KickerTag", "Region / Masthead", "Surface / Feedback / EmptyState", "Surface / Burst [champion]" ] }, { "id": "display-type-kickertag", "sourceId": "6111:97", "name": "Display / Type / KickerTag", "class": "Display", "domain": "Type", "size": { "w": 211, "h": 77 }, "exportBox": null, "figma": { "nodeId": "6111:97", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6111-97", "sheet": "11 · Badges & Tags" }, "authored": false, "description": "Artwork 40:12737. The small label tag that sits over a title, CHAMPION, RUNNER UP, THIRD.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/type-kickertag.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6111-97.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Type / KickerTag, 211 × 77\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-kickertag{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:211px; height:77px;\n padding:0px 17px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/type-kickertag.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 32px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-kickertag[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-kickertag[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Text", "type": "TEXT", "default": "CHAMPION", "values": [] }, { "name": "Rank", "type": "VARIANT", "default": "champion", "values": [ "champion", "runner-up", "third" ] } ], "use": "Use as the small label sitting over a title, the drawn set is CHAMPION, RUNNER UP and THIRD on the podium tiers.", "notUse": "Not as a market status flag, lifecycle state is Display / Market / StatusBadge, and a rank kicker reading as a status is the overload R1 forbids.", "insteadUse": "Display / Market / StatusBadge", "pairsWith": [ "Display / Type / DisplayTitle", "Region / Data / LeaderboardPodium [champion]", "Surface / Data / ValuePlate" ] }, { "id": "surface-burst-champion", "sourceId": "6110:15", "name": "Surface / Burst [champion]", "class": "Surface", "domain": "Surface", "size": { "w": 863, "h": 621 }, "exportBox": null, "figma": { "nodeId": "6110:15", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6110-15", "sheet": "04 · Surfaces" }, "authored": false, "description": "Artwork 40:12683 plus its clip group. The BACKGROUND the champion title sits on, previously buried inside a flat podium clone and impossible to reuse.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/surface-burst-champion.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6110-15.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Surface / Burst [champion], 863 × 621\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-burst-champion{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:863px; height:621px;\n padding:99px 60px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/surface-burst-champion.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-burst-champion[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-burst-champion[data-loading] > *{ visibility:hidden }", "plannedProps": [], "use": "Use as the background the champion title sits on, it was extracted from a flat podium clone precisely so it can be reused rather than re-flattened.", "notUse": "Not for the pool figure on market detail, that is the 478×279 Surface / Burst [pool].", "insteadUse": "Surface / Burst [pool]", "pairsWith": [ "Region / Data / LeaderboardPodium [champion]", "Display / Type / DisplayTitle", "Display / Badge / StarHex", "Surface / Data / ValuePlate" ] }, { "id": "surface-labelcolumn", "sourceId": "6110:39", "name": "Surface / LabelColumn", "class": "Surface", "domain": "Surface", "size": { "w": 112, "h": 142 }, "exportBox": null, "figma": { "nodeId": "6110:39", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6110-39", "sheet": "04 · Surfaces" }, "authored": false, "description": "Artwork 40:14021. White torn panel holding the PREDICTION / AMOUNT / STATE / PLACED stack inside a history card.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/surface-labelcolumn.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6110-39.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Surface / LabelColumn, 112 × 142\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-labelcolumn{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:112px; height:142px;\n padding:0px 9px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/surface-labelcolumn.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 46px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-labelcolumn[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-labelcolumn[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Label", "type": "TEXT", "default": "RANK", "values": [] } ], "use": "Use as the white torn plate holding the PREDICTION / AMOUNT / STATE / PLACED stack inside a history card.", "notUse": "Not as a generic four-row list plate, at 112 wide it is drawn to that one stack, and a wider content panel is Surface / Torn Panel.", "insteadUse": "Surface / Torn Panel", "pairsWith": [ "Region / Profile / PredictionHistoryCard", "Surface / OutcomeCard", "Display / Profile / ResultStamp [won]" ] }, { "id": "surface-data-valueplate", "sourceId": "6110:57", "name": "Surface / Data / ValuePlate", "class": "Surface", "domain": "Data", "size": { "w": 461, "h": 167 }, "exportBox": null, "figma": { "nodeId": "6110:57", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6110-57", "sheet": "04 · Surfaces" }, "authored": false, "description": "Artwork 40:12720. Green torn plate carrying a headline value. The runner-up plate deliberately OVERHANGS its band by 41px.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/data-valueplate.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6110-57.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Surface / Data / ValuePlate, 461 × 167\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-valueplate{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:461px; height:167px;\n padding:27px 32px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/data-valueplate.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-valueplate[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-valueplate[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Value", "type": "TEXT", "default": "$12,480", "values": [] }, { "name": "Caption", "type": "TEXT", "default": "TOTAL POOL", "values": [] }, { "name": "Caption visible", "type": "BOOLEAN", "default": "true", "values": [] } ], "use": "Use to carry a single headline value on a podium tier, a green torn plate, and on the runner-up band it deliberately OVERHANGS by 41px.", "notUse": "Not clipped to its band to tidy the overhang, the overhang is drawn intent, not a bounds error.", "insteadUse": null, "pairsWith": [ "Region / Data / LeaderboardPodium [champion]", "Region / Data / LeaderboardPodium [runner-up]", "Display / Type / DisplayTitle" ] }, { "id": "display-badge-starhex", "sourceId": "6110:64", "name": "Display / Badge / StarHex", "class": "Display", "domain": "Badge", "size": { "w": 138, "h": 167 }, "exportBox": null, "figma": { "nodeId": "6110:64", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6110-64", "sheet": "11 · Badges & Tags" }, "authored": false, "description": "Artwork 40:12704. Yellow hexagon with a black star and three small stars. Champion only.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/badge-starhex.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6110-64.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Badge / StarHex, 138 × 167\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-starhex{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:138px; height:167px;\n padding:27px 10px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/badge-starhex.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-starhex[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-starhex[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Size", "type": "VARIANT", "default": "md", "values": [ "sm", "md" ] } ], "use": "Use as the champion frame, a yellow hexagon with a black star and three small stars, champion only, and GAPS #13 names this hexagon as the clip mask for a future avatar.", "notUse": "Not on the runner-up or third tiers, the general rank ornament is the 71×87 Display / Profile / StarBadge.", "insteadUse": "Display / Profile / StarBadge", "pairsWith": [ "Region / Data / LeaderboardPodium [champion]", "Surface / Burst [champion]" ] }, { "id": "surface-outcomecard", "sourceId": "6119:56", "name": "Surface / OutcomeCard", "class": "Surface", "domain": "Surface", "size": { "w": 775, "h": 254 }, "exportBox": null, "figma": { "nodeId": "6119:56", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6119-56", "sheet": "13 · Cards" }, "authored": false, "description": "The torn card surface behind a history entry, with shadow and halftone clip. Three states exist in the artwork as separate instances: won #91BB4F, lost #EA2A46, created #9652EF. The stamp and label column sit ON this.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/surface-outcomecard.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6119-56.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Surface / OutcomeCard, 775 × 254.1\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-outcomecard{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:775px; height:254.1px;\n padding:41px 54px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/surface-outcomecard.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-outcomecard[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-outcomecard[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "State", "type": "VARIANT", "default": "default", "values": [ "default", "resolving", "settled" ] }, { "name": "Content", "type": "INSTANCE_SWAP", "default": "Display / Type / DisplayTitle", "values": [] } ], "use": "Use as the torn card behind a history entry, the State property carries won #91BB4F, lost #EA2A46 and created #9652EF, which is where three separate artwork instances were consolidated, and GAPS #8 names it as the row plate for the positions drawer.", "notUse": "Not as a generic card in a market grid, a grid tile is the 506×208 MarketCard.", "insteadUse": "Region / Market / MarketCard [grid]", "pairsWith": [ "Display / Profile / ResultStamp [won]", "Surface / LabelColumn", "Region / Profile / PredictionHistoryCard", "Region / TicketPanel" ] }, { "id": "surface-modalpanel", "sourceId": "6119:66", "name": "Surface / ModalPanel", "class": "Surface", "domain": "Surface", "size": { "w": 518, "h": 361 }, "exportBox": null, "figma": { "nodeId": "6119:66", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6119-66", "sheet": "04 · Surfaces" }, "authored": false, "description": "Artwork 40:244 with shadow and dotted clip group. The surface every modal title and provider row sits on.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/surface-modalpanel.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6119-66.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Surface / ModalPanel, 518 × 361\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-modalpanel{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:518px; height:361px;\n padding:58px 36px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/surface-modalpanel.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-modalpanel[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-modalpanel[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Content", "type": "INSTANCE_SWAP", "default": "Display / Type / DisplayTitle", "values": [] }, { "name": "Close", "type": "BOOLEAN", "default": "true", "values": [] } ], "use": "Use as the ground for every modal, the predict, deposit and menu-drawer modals in GAPS #1/#4/#5 are all specified as this plate plus Control / Auth / CloseButton, so all four modals stay one shape.", "notUse": "Not for an inline panel on a page, a page panel is Surface / Torn Panel, and a modal plate used inline drops the dotted clip's meaning.", "insteadUse": "Surface / Torn Panel", "pairsWith": [ "Control / Auth / CloseButton", "Control / Auth / WalletOption", "Display / Type / DisplayTitle", "Control / Market / StakeInput" ] }, { "id": "surface-burst-pool", "sourceId": "6119:70", "name": "Surface / Burst [pool]", "class": "Surface", "domain": "Surface", "size": { "w": 478, "h": 279 }, "exportBox": null, "figma": { "nodeId": "6119:70", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6119-70", "sheet": "04 · Surfaces" }, "authored": false, "description": "Artwork 40:39348. Violet burst, the surface behind POOL and the odds.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/surface-burst-pool.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6119-70.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Surface / Burst [pool], 478 × 279\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-burst-pool{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:478px; height:279px;\n padding:45px 33px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/surface-burst-pool.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-burst-pool[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-burst-pool[data-loading] > *{ visibility:hidden }", "plannedProps": [], "use": "Use as the violet surface behind POOL and the odds, with your own figures placed on top rather than baked in.", "notUse": "Not as the champion title ground, which is the much larger 863×621 Surface / Burst [champion].", "insteadUse": "Surface / Burst [champion]", "pairsWith": [ "Region / Market / PoolBurst", "Display / Type / DisplayTitle" ] }, { "id": "surface-tornpanel-rules", "sourceId": "6119:74", "name": "Surface / TornPanel [rules]", "class": "Surface", "domain": "Surface", "size": { "w": 465, "h": 275 }, "exportBox": null, "figma": { "nodeId": "6119:74", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6119-74", "sheet": "04 · Surfaces" }, "authored": false, "description": "Artwork 40:36597. White torn panel, the surface the rules copy sits on.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/surface-tornpanel-rules.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6119-74.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Surface / TornPanel [rules], 465 × 275\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-tornpanel-rules{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:465px; height:275px;\n padding:44px 33px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/surface-tornpanel-rules.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-tornpanel-rules[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-tornpanel-rules[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Content", "type": "INSTANCE_SWAP", "default": "Display / Type / DisplayTitle", "values": [] } ], "use": "Use as the white paper the rules copy sits on inside RulesPanel, at 465×275.", "notUse": "Not maintained separately from Surface / Torn Panel, both are cloned from artwork node 40:36597, differing only as 465×275 against 454×263, so the two are one plate at two crops.", "insteadUse": "Surface / Torn Panel", "pairsWith": [ "Region / Market / RulesPanel", "Control / Tab / Market Section" ] }, { "id": "region-nav-topnav", "sourceId": "6361:27822", "name": "Region / Nav / TopNav", "class": "Region", "domain": "Nav", "size": { "w": 1820, "h": 65 }, "exportBox": null, "figma": { "nodeId": "6361:27822", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6361-27822", "sheet": "10 · Navigation" }, "authored": false, "description": "Artwork 47:46540. Content box 1820 x 65 at x 51.4, y 39. No background of its own, it sits on the page halftone ground. Logo, five NavItems and the WalletButton. Item gap 40px between text boxes, and the cluster is NOT centred: it spans 585→1414 on a 1920 canvas, centre 1000 against a page centre of 960. The active item differs per screen and is wrong on two of them.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/r2-topnav.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Region / Nav / TopNav, 1820 × 65\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-topnav{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:1820px; height:65px;\n padding:0px 146px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/nav-topnav.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 27px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-topnav[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-topnav[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Items", "type": "INSTANCE_SWAP", "default": "Region / Nav / SportsNav", "values": [] }, { "name": "Active", "type": "VARIANT", "default": "MARKETS", "values": [ "MARKETS", "FAUCET", "CREATE MARKET", "ACTIVITY", "LEADERBOARD" ] }, { "name": "Logo", "type": "INSTANCE_SWAP", "default": "Display / Brand / Logo", "values": [] } ], "use": "Use as the 1820 nav bar on every desktop page, with Current set to the page you are on, the torn white plate moves to that label and scales to it, and that label goes black on white while the rest stay #FFA800. Measured from the artwork, where the same shape is 153 on Markets, 133 on Activity, 192 on Leaderboard and 208 on Create Market. The top of every listing page reads bar, title, numbers, filters, top to bottom, in that order.", "notUse": "Not on the sports pages, which replace the whole nav with a logo + SportsNav + wallet row, and not on mobile, where MobileHeader replaces it on all 13 frames.", "insteadUse": "Region / Nav / SportsNav", "pairsWith": [ "Control / Nav / NavItem", "Control / Nav / WalletButton", "Display / Brand / Logo", "Region / Nav / SportsNav" ] }, { "id": "region-nav-mobileheader", "sourceId": "6132:499", "name": "Region / Nav / MobileHeader", "class": "Region", "domain": "Nav", "size": { "w": 412, "h": 50 }, "exportBox": null, "figma": { "nodeId": "6132:499", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6132-499", "sheet": "10 · Navigation" }, "authored": false, "description": "Composed from the wordmark and the two hexes, the artwork never groups them. Band ~85 tall, items centred at y≈41. Hexagons 39.8 x 46, stroke 1 because mobile halves the ink, shadow #3F3F3F at +3.5. Two measured drifts: the 'centred' wallet sits 2px left of centre and the margins are asymmetric, 30 left against 35.8 right. Replaces TopNav entirely on all 13 mobile frames.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/nav-mobileheader.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6132-499.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Region / Nav / MobileHeader, 412 × 50\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-mobileheader{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:412px; height:50px;\n padding:0px 33px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/nav-mobileheader.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 21px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-mobileheader[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-mobileheader[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Logo", "type": "INSTANCE_SWAP", "default": "Display / Brand / Logo", "values": [] }, { "name": "Menu open", "type": "BOOLEAN", "default": "false", "values": [] } ], "use": "Use on every mobile frame, it replaces TopNav entirely on all 13; band ~85 tall, hexagons 39.8×46 at stroke 1 because mobile halves the ink, shadow ink #3F3F3F at +3.5.", "notUse": "Not treated as complete mobile navigation, the hamburger it carries opens nothing, so the drawer and bottom nav it implies are undrawn (GAPS #3, #4).", "insteadUse": null, "pairsWith": [ "Control / Nav / WalletButton [mobile]", "Control / Nav / HamburgerButton [mobile]", "Display / Brand / Logo" ] }, { "id": "display-data-tableheader", "sourceId": "6132:505", "name": "Display / Data / TableHeader", "class": "Display", "domain": "Data", "size": { "w": 1007, "h": 48 }, "exportBox": null, "figma": { "nodeId": "6132:505", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6132-505", "sheet": "15 · Data" }, "authored": false, "description": "The leaderboard column labels, composed from the four text nodes since the artwork never groups them. Headers are NOT aligned to their segment's left edge, they are centred over the VISIBLE, non-overlapped part: x_seg + (W − seamIn − seamOut)/2 − textW/2. No background, no rule, no sort affordance and no sorted state are drawn anywhere.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/r2-tableheader.svg", "preview": null, "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [ { "name": "Col 1", "type": "TEXT", "default": "RANK", "values": [] }, { "name": "Col 2", "type": "TEXT", "default": "TRADER", "values": [] }, { "name": "Col 3", "type": "TEXT", "default": "VOLUME", "values": [] }, { "name": "Col 4", "type": "TEXT", "default": "PNL", "values": [] }, { "name": "Sorted", "type": "VARIANT", "default": "none", "values": [ "none", "asc", "desc" ] } ], "use": "Use above a leaderboard ribbon, headers are centred over the VISIBLE, non-overlapped part of each segment by x_seg + (W − seamIn − seamOut)/2 − textW/2, and its 1007 span is the measured section width G9 settled on. One header, then rows of a single kind. Ranked and chronological never mix in the same list.", "notUse": "Not for sortable columns, no sort affordance and no sorted state are drawn anywhere in the file (GAPS #22), so a chevron here would be invented.", "insteadUse": null, "pairsWith": [ "Region / Data / LeaderboardRow", "Display / Data / SummaryBar", "Region / Masthead" ] }, { "id": "control-amountfilter", "sourceId": "6268:1931", "name": "Control / AmountFilter", "class": "Control", "domain": "Control", "size": { "w": 283, "h": 48 }, "exportBox": null, "figma": { "nodeId": "6268:1931", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6268-1931", "sheet": "07 · Inputs" }, "authored": false, "description": "Artwork Live Activity / Mobile 40:1151. The “$ ANY AMOUNT” filter, 283 x 48. A sibling control at 40:1142 carries MINIMUM PREDICTION. Mobile-only in the artwork, no desktop counterpart is drawn.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/control-amountfilter.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6132-478.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / AmountFilter, 283 × 48\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-amountfilter{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:283px; height:48px;\n padding:0px 23px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/control-amountfilter.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 20px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, LoadMore is 6.13, not 3.\n the same distance each way, so press and release are one gesture */\n.pc-amountfilter{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-amountfilter:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-amountfilter:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-amountfilter:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-amountfilter[disabled], .pc-amountfilter[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-amountfilter{ transition:none } }\n\n/* error, never on its own. Ships with AlertStrip [inline] beneath it,\n because a colour is not a message (G2 gave the ring to focus only) */\n.pc-amountfilter[aria-invalid=\"true\"]{ box-shadow:inset 0 0 0 2px var(--pc-color-danger,#EA2A46) }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-amountfilter[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-amountfilter[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Value", "type": "TEXT", "default": "ANY AMOUNT", "values": [] }, { "name": "State", "type": "VARIANT", "default": "default", "values": [ "default", "hover", "pressed", "focus", "disabled" ] } ], "use": "Use as the “$ ANY AMOUNT” filter on the mobile live-activity screen, with the MINIMUM PREDICTION sibling control beside it.", "notUse": "Not on desktop, it is mobile-only in the artwork with no desktop counterpart drawn; the desktop filter cluster is the DropdownSelect triggers.", "insteadUse": "Control / DropdownSelect [sort]", "pairsWith": [ "Region / Data / ActivityRow", "Control / ChipRow" ] }, { "id": "control-button-loadmore", "sourceId": "6138:34", "name": "Control / Button / LoadMore", "class": "Control", "domain": "Button", "size": { "w": 127, "h": 57 }, "exportBox": null, "figma": { "nodeId": "6138:34", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6138-34", "sheet": "05 · Buttons" }, "authored": false, "description": "Artwork 40:34289, the one button where design and code are provably the same file: the code path is this path translated by (1.24, 1.53). The five interaction states are AUTHORED, not extracted, because the artwork draws none. hover lifts the face 3px, pressed drops it onto its own shadow, focus adds a 5px #FFA800 outline, disabled greys the face to #A3A3A3 while keeping shadow and texture. Page 06 · States records the evidence behind each rule.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/button-loadmore.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6138-34.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / Button / LoadMore, 127.1 × 56.6\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-loadmore{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:127.1px; height:56.6px;\n padding:0px 10px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/button-loadmore.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 24px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, LoadMore is 6.13, not 3.\n the same distance each way, so press and release are one gesture */\n.pc-loadmore{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-loadmore:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-loadmore:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-loadmore:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-loadmore[disabled], .pc-loadmore[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-loadmore{ transition:none } }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-loadmore[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-loadmore[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "State", "type": "VARIANT", "default": "default", "values": [ "default", "hover", "pressed", "focus", "disabled" ] }, { "name": "Label", "type": "TEXT", "default": "LOAD MORE", "values": [] } ], "use": "Use for the single load-more action at the foot of a paginated list, it is the only control with authored states (hover lifts the face 3px, pressed drops it onto its own shadow, focus adds a 5px #FFA800 outline, disabled greys the face to #A3A3A3 while keeping shadow and texture), so it is the reference every other control's states are derived from.", "notUse": "Not as the general-purpose button, the family built from this silhouette is Control / Button with three tones and five states; keep this one at 127.1×56.6 with its 6.13 offset, which G5 fixes as the datum everything else is measured against.", "insteadUse": "Control / Button", "pairsWith": [ "Region / Data / ActivityRow", "Surface / Feedback / EmptyState", "Control / Button" ] }, { "id": "region-nav-sportsnav", "sourceId": "6136:17", "name": "Region / Nav / SportsNav", "class": "Region", "domain": "Nav", "size": { "w": 644, "h": 50 }, "exportBox": null, "figma": { "nodeId": "6136:17", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6136-17", "sheet": "10 · Navigation" }, "authored": false, "description": "Artwork Soccer 2004:4433. REPLACES the TopNav item cluster in place, same y, same font, same pill mechanics, same Logo and WalletButton flanking. Build TopNav with a swappable items slot rather than shipping two navs. Count badges are inline text, not pills; the live dot is 9.6 diameter, 15px left of its label.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/nav-sportsnav.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6136-17.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Region / Nav / SportsNav, 644 × 50\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-sportsnav{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:644px; height:50px;\n padding:0px 52px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/nav-sportsnav.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 21px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-sportsnav[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-sportsnav[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Items", "type": "INSTANCE_SWAP", "default": "Control / Nav / SportsTab", "values": [] } ], "use": "Use as the items slot swapped into TopNav on sports pages, same y, font, pill mechanics and flanking Logo and WalletButton; count badges are inline text rather than pills, and the live dot is 9.6 diameter sitting 15px left of its label.", "notUse": "Not shipped as a second nav beside TopNav, it replaces the item cluster in place, and two navs is the duplication this note exists to prevent.", "insteadUse": "Region / Nav / TopNav", "pairsWith": [ "Control / Nav / SportsTab", "Display / Brand / Logo", "Control / Nav / WalletButton" ] }, { "id": "region-data-tickermarquee", "sourceId": "6136:1149", "name": "Region / Data / TickerMarquee", "class": "Region", "domain": "Data", "size": { "w": 1857, "h": 124 }, "exportBox": null, "figma": { "nodeId": "6136:1149", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6136-1149", "sheet": "15 · Data" }, "authored": false, "description": "Artwork Landing 40:32774. The scrolling ticker at the page foot, inside a clip group. In code the motion is driven by --sports-activity-ticker-duration: 30s.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6136-1149.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use as the scrolling ticker at the page foot, inside a clip group, driven by the code's existing --sports-activity-ticker-duration: 30s rather than a new duration (GAPS #19 says adopt the shipped motion tokens as-is).", "notUse": "Not as a static strip of figures, a static segmented bar is Display / Data / StatStrip on the same ribbon skeleton.", "insteadUse": "Display / Data / StatStrip", "pairsWith": [ "Foundation / Ribbon Segment", "Foundation / Ribbon Seam", "Surface / Page Ground [landing]" ] }, { "id": "display-market-payouthint", "sourceId": "6136:1153", "name": "Display / Market / PayoutHint", "class": "Display", "domain": "Market", "size": { "w": 99, "h": 58 }, "exportBox": null, "figma": { "nodeId": "6136:1153", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6136-1153", "sheet": "11 · Badges & Tags" }, "authored": false, "description": "Artwork 40:36782 + 40:36783. Two centred lines in the bottom 48px of the 215 x 201 YES/NO block: “IF YES WINS” in #91BB4F (or #EA2A46 on the NO side) and the amount in black. Never grouped in the artwork. Code reserves the same space with aspect-[215/201] versus aspect-[215/154], and colours the no-side label #ff3056 rather than the artwork #EA2A46.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6136-1153.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [ { "name": "Text", "type": "TEXT", "default": "WIN $18.40", "values": [] } ], "use": "Use as the two centred lines in the bottom 48px of the 215×201 YES/NO block, “IF YES WINS” in #91BB4F, the NO side in #EA2A46, and the amount in black.", "notUse": "Not coloured #ff3056 on the NO side as the running code does, G11 fixes NO at #EA2A46 and marks the code as the thing that is wrong, on the money path.", "insteadUse": null, "pairsWith": [ "Control / Market / YesNoButton", "Control / Market / YesNoButton [with payout]", "Control / Market / StakeInput" ] }, { "id": "region-share-resultcard-deprecated-", "sourceId": "6172:174", "name": "Region / Share / ResultCard [deprecated]", "class": "Region", "domain": "Share", "size": { "w": 894, "h": 273 }, "exportBox": null, "figma": { "nodeId": "6172:174", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/?node-id=6172-174", "sheet": "22 · Share" }, "authored": false, "description": "The previous generation of the share card, kept rather than deleted so nothing referencing it breaks. Repaired so it is not broken while it is on the way out.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/share-resultcard.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6172-174.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Region / Share / ResultCard, 894.07 × 273.05\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-resultcard{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:894.07px; height:273.05px;\n padding:90px 63px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/share-resultcard.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-resultcard[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-resultcard[data-loading] > *{ visibility:hidden }", "plannedProps": [], "use": null, "notUse": "Deprecated. It is the hand-traced previous generation of the share card, 2 states where the product has 3, no QR, no branding, no gradient treatment, and it has now needed two repair passes.", "insteadUse": "Region / Share / PnlCard", "pairsWith": [] }, { "id": "region-sports-livegameburst", "sourceId": "6172:202", "name": "Region / Sports / LiveGameBurst", "class": "Region", "domain": "Sports", "size": { "w": 536, "h": 260 }, "exportBox": null, "figma": { "nodeId": "6172:202", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/?node-id=6172-202", "sheet": "17 · Sports" }, "authored": false, "description": "The live-score burst from the Landing Page hero (40:34214). A blue starburst carrying the league word, both team tiles and a red notched clock chip in the middle. The landing page repeats it three times with identical content, it is one component, not three variants.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/sports-livegameburst.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6172-202.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Region / Sports / LiveGameBurst, 536 × 260\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-livegameburst{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:536px; height:260px;\n padding:42px 38px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/sports-livegameburst.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-livegameburst[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-livegameburst[data-loading] > *{ visibility:hidden }", "plannedProps": [ { "name": "Score", "type": "TEXT", "default": "2 - 1", "values": [] }, { "name": "Label", "type": "TEXT", "default": "LIVE NOW", "values": [] }, { "name": "Badges", "type": "INSTANCE_SWAP", "default": "Display / Sports / TeamBadge", "values": [] } ], "use": "Use for a live-score burst in the landing hero, a blue starburst carrying the league word, both team tiles and a red notched clock chip, and the landing page's three copies are one component repeated, not three variants.", "notUse": "Not as the in-page match header, that is Display / Sports / MatchScoreboard at the sport's own drawn width.", "insteadUse": "Display / Sports / MatchScoreboard [soccer]", "pairsWith": [ "Display / Sports / TeamBadge", "Surface / Page Ground [landing]" ] }, { "id": "control-button", "sourceId": "6193:65", "name": "Control / Button", "class": "Control", "domain": "Button", "size": { "w": 127, "h": 57 }, "exportBox": null, "figma": { "nodeId": "6193:65", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/?node-id=6193-65", "sheet": "05 · Buttons" }, "authored": true, "description": "AUTHORED, not extracted. The button family the artwork never drew, built from the one silhouette it did, LoadMore (6138:34), whose path the running code already embeds verbatim. Three tones and five states. Disabled keeps the drawn #A3A3A3 face. Labels follow G3: white at 18px and above, black below, because white on #9652EF is 4.42:1 and fails AA-Normal.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/button-loadmore.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6193-65.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / Button, 127.1 × 56.6\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-button{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:127.1px; height:56.6px;\n padding:0px 10px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/button-loadmore.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, LoadMore is 6.13, not 3.\n the same distance each way, so press and release are one gesture */\n.pc-button{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-button:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-button:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-button:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-button[disabled], .pc-button[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-button{ transition:none } }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-button[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-button[data-loading] > *{ visibility:hidden }", "plannedProps": [], "use": "Use for every button that is not the one page-level CTA, three tones × five states authored from the LoadMore silhouette whose path the running code already embeds verbatim, with labels white at 18px and above and black below (G3, because white on #9652EF is 4.42:1 and fails AA-Normal).", "notUse": "Not for the primary CREATE MARKET call to action, which is the drawn 314×233 burst.", "insteadUse": "Control / Button / Burst", "pairsWith": [ "Control / Button / LoadMore", "Surface / ModalPanel", "Surface / Feedback / EmptyState", "Display / Feedback / AlertStrip" ] }, { "id": "display-feedback-alertstrip", "sourceId": "6194:30", "name": "Display / Feedback / AlertStrip", "class": "Display", "domain": "Feedback", "size": { "w": 296, "h": 58 }, "exportBox": null, "figma": { "nodeId": "6194:30", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/?node-id=6194-30", "sheet": "18 · Feedback" }, "authored": true, "description": "AUTHORED. Absorbs four shipped components that had no shared shape, GeoRestrictionDesktopBanner, SiteAlertBanner, TradeTicketInputFeedback and AsyncStatus, onto the Label Banner plate. Four tones. Capped at section width by G9: the plate's body carries a top tear and a bottom tab, and stretching it to page width strands both.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/control-alertstrip.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6194-30.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Feedback / AlertStrip, 296 × 298\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-alertstrip{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:296px; height:298px;\n padding:48px 21px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/control-alertstrip.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-alertstrip[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-alertstrip[data-loading] > *{ visibility:hidden }", "plannedProps": [], "use": "Use for any inline feedback message, including the field-error case G2 moved off the orange ring (a 2px red inner stroke on the field face plus this strip beneath it); its four tones absorb GeoRestrictionDesktopBanner, SiteAlertBanner, TradeTicketInputFeedback and AsyncStatus, mapping loading and refreshing to info, stale to warn, error to error, with success having no async counterpart (G12).", "notUse": "Not stretched to page width, G9 caps it at section width because the Label Banner body carries a top tear and a bottom tab that strand at the right end when stretched, and a page-width strip is a drawing to buy rather than a slider to widen.", "insteadUse": null, "pairsWith": [ "Control / Market / StakeInput", "Region / TicketPanel", "Region / Masthead", "Surface / Feedback / EmptyState" ] }, { "id": "display-market-statusbadge", "sourceId": "6196:82", "name": "Display / Market / StatusBadge", "class": "Display", "domain": "Market", "size": { "w": 198, "h": 73 }, "exportBox": null, "figma": { "nodeId": "6196:82", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/?node-id=6196-82", "sheet": "11 · Badges & Tags" }, "authored": true, "description": "AUTHORED. The market lifecycle had three states with no visual at all, voided, awaiting resolution and fair launch, which is why Market Detail ships seven stories against one drawing. Built on the notched chip so it reads as a status, not a control.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6196-82.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use for market lifecycle, it is the only place voided, awaiting resolution and fair launch have any visual at all, which is why Market Detail ships seven stories against one drawing.", "notUse": "Not where the user is meant to press something, it is built on the notched chip precisely so it reads as status; a pressable chip is Control / Chip / Notched.", "insteadUse": "Control / Chip / Notched", "pairsWith": [ "Region / Market / MarketCard [grid]", "Display / Market / LiveTag", "Display / Profile / ResultStamp [won]", "Region / TicketPanel" ] }, { "id": "surface-feedback-emptystate", "sourceId": "6194:178", "name": "Surface / Feedback / EmptyState", "class": "Surface", "domain": "Feedback", "size": { "w": 454, "h": 263 }, "exportBox": null, "figma": { "nodeId": "6194:178", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/?node-id=6194-178", "sheet": "18 · Feedback" }, "authored": true, "description": "AUTHORED. Ten of the 68 shipped states are empty or not-found and none had a drawing. Built on the Torn Panel so an empty list still reads as the product rather than as a blank page.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/surface-emptystate.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6194-178.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Surface / Feedback / EmptyState, 454 × 263\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-emptystate{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:454px; height:263px;\n padding:42px 32px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/surface-emptystate.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-emptystate[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-emptystate[data-loading] > *{ visibility:hidden }", "plannedProps": [], "use": "Use for empty, error and not-found lists, ten of the 68 shipped states are one of these and none had a drawing; built on the Torn Panel so an empty list still reads as the product rather than as a blank page. Four region states and NO TWO MAY LOOK ALIKE, loading, empty, error, loaded. Three errors shipped in the product are currently pixel-identical to their empty state, which is how this rule was found.", "notUse": "Not for a transient loading state, loading is the Foundation / Skeleton rule applied to the surface that is loading, not an empty plate shown while data arrives.", "insteadUse": "Foundation / Skeleton", "pairsWith": [ "Display / Type / DisplayTitle", "Control / Button", "Surface / Torn Panel" ] }, { "id": "surface-page-ground-landing", "sourceId": "6212:1074", "name": "Surface / Page Ground [landing]", "class": "Surface", "domain": "Core", "size": { "w": 1967, "h": 1965 }, "exportBox": null, "figma": { "nodeId": "6212:1074", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/?node-id=6212-1074", "sheet": "04 · Surfaces" }, "authored": true, "description": "The landing page ground, which the system was missing entirely. Orange #FFA800 base, three linear-gradient bands, six starbursts in two ambers (#F9B843 and #FF9100) and a dot field of 1047 nodes. DO NOT SHIP AS SVG: the full export is 1,091,311 bytes and 846,708 even with the dot field hidden, the gradient bands are the rest. This is a CSS recipe, not an asset: a flat ground, three gradients, the halftone primitive for the dots, and the starbursts placed as instances of Surface / Burst.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/r2m-pageground-landing.svg", "preview": null, "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use as the landing page ground, built as a CSS recipe, a flat #FFA800 base, three linear-gradient bands, the halftone primitive for the dot field, and the six starbursts placed as Surface / Burst instances.", "notUse": "Not shipped as an SVG asset, the full export is 1,091,311 bytes and still 846,708 with the dot field hidden, because the gradient bands are the rest.", "insteadUse": null, "pairsWith": [ "Surface / Burst", "Foundation / Halftone Bg Dots", "Region / Sports / LiveGameBurst", "Region / Data / TickerMarquee" ] }, { "id": "rule-skeleton", "sourceId": "rule:skeleton", "name": "Foundation / Skeleton", "class": "Foundation", "domain": "Core", "size": { "w": 0, "h": 0 }, "exportBox": null, "figma": { "nodeId": "rule:skeleton", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/", "sheet": "01 · Foundations" }, "authored": true, "description": "A RULE, not a component. The product ships SkeletonBlock and SkeletonLine; the system does not need to draw either. Every shape-only SVG here is already a skeleton, face, shadow and outline with all text and texture removed, so flattening one gives the loading state of that exact component. 81 skeletons, no drawings. Apply .pc-skeleton to any shape SVG. The optional pulse is the product's own animate-pulse convention and is suppressed under prefers-reduced-motion.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/r2-skeleton.svg", "preview": null, "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use as the loading state of any component by applying .pc-skeleton to that component's own shape-only SVG, the shape exports are already face, shadow and outline with all text and texture stripped, which gives 81 skeletons for the price of one fill rule.", "notUse": "Not drawn as bespoke SkeletonBlock and SkeletonLine components, it is a rule, not a component, and the optional pulse is the product's own animate-pulse, suppressed under prefers-reduced-motion.", "insteadUse": null, "pairsWith": [ "Region / Market / MarketCard [grid]", "Region / Data / ActivityRow", "Foundation / Halftone Light", "Surface / Feedback / EmptyState" ] }, { "id": "control-chiprow", "sourceId": "6219:2", "name": "Control / ChipRow", "class": "Control", "domain": "Market", "size": { "w": 850, "h": 73 }, "exportBox": null, "figma": { "nodeId": "6219:2", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6219-2", "sheet": "06 · Chips" }, "authored": true, "description": "The container the artwork never drew. The chips existed; the row did not, so every page re-measured the gap by hand. It carries gap 8, the product's gap-2, and scrolls horizontally rather than wrapping. Two to five chips via the toggles; any chip instance swaps for another Control / Chip variant.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6219-2.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use as the container for two to five chips, it carries gap 8, the product's gap-2, and scrolls horizontally rather than wrapping, which is what stops every page re-measuring the gap by hand.", "notUse": "Not for the fixed four-up filter tab row, those four tabs are four different hand-drawn ragged rectangles, not chips in a row.", "insteadUse": "Control / Tab / Segmented [md]", "pairsWith": [ "Control / Chip / Notched", "Region / Masthead", "Region / TicketPanel" ] }, { "id": "surface-brandfield", "sourceId": "6220:18", "name": "Surface / BrandField", "class": "Surface", "domain": "Brand", "size": { "w": 454, "h": 120 }, "exportBox": { "w": 454, "h": 120, "sourceNodeId": "6220:3", "includesStrokeAndShadow": true }, "figma": { "nodeId": "6220:18", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6220-18", "sheet": "21 · Brand" }, "authored": true, "description": "The brand plate, and the component that settles clear space with a measured number instead of a proposed one. The code caps the mark at max-w-[82%] of its field, which read the other way round is the rule: at least 9% of the field width stays clear on each side. The mark is drawn orange, so it inverts to black on the orange and violet grounds, orange on orange is 1:1 and orange on violet is 2.29:1, both failures. Black on either passes.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/r2-brandfield.svg", "preview": null, "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use whenever the mark sits on a coloured ground, at least 9% of the field width stays clear on each side (the code's max-w-[82%] cap read the other way round), and the mark inverts to black on the orange and violet grounds because orange on orange is 1:1 and orange on violet 2.29:1.", "notUse": "Not as a generic titled plate, it holds the brand mark only; a section head is Surface / Type / SectionHeading.", "insteadUse": "Surface / Type / SectionHeading", "pairsWith": [ "Display / Brand / Logo", "Region / Nav / TopNav" ] }, { "id": "region-masthead", "sourceId": "6222:147", "name": "Region / Masthead", "class": "Region", "domain": "Market", "size": { "w": 1007, "h": 230 }, "exportBox": null, "figma": { "nodeId": "6222:147", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6222-147", "sheet": "14 · Market" }, "authored": true, "description": "The page header. Composed, not cloned: the ground is an instance of Surface / Torn Panel and the filters are an instance of Control / ChipRow, so changing the plate changes every masthead. Drawn at 1007, the section width settled in G9, the torn edge is a drawn feature and stretching past that strands it, so wider is a drawing to buy, not a slider.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/r2-masthead.svg", "preview": null, "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use as the page header, composed rather than cloned, with the ground an instance of Surface / Torn Panel and the filters an instance of Control / ChipRow, so changing the plate changes every masthead.", "notUse": "Not stretched past 1007, the section width settled in G9, the torn edge is a drawn feature and stretching strands it, so wider is a drawing to buy rather than a slider to drag.", "insteadUse": null, "pairsWith": [ "Surface / Torn Panel", "Control / ChipRow", "Display / Type / DisplayTitle", "Surface / Type / SectionHeading" ] }, { "id": "region-ticketpanel", "sourceId": "6225:244", "name": "Region / TicketPanel", "class": "Region", "domain": "Market", "size": { "w": 1007, "h": 600 }, "exportBox": null, "figma": { "nodeId": "6225:244", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6225-244", "sheet": "13 · Cards" }, "authored": true, "description": "The market ticket, the closest thing the product has to a card primitive, and the one component the artwork implied everywhere but never drew. Fully composed: Torn Panel for the ground, ChipRow for the filters, OutcomeCard for the body. The stat grid is 4-up here and 2-up on mobile, cells split by a 2 px rule, the stroke/2 step G6 added to the ladder, a drawn line rather than a gap.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6225-244.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use as the card primitive the artwork implied everywhere but never drew, Torn Panel ground, ChipRow filters and OutcomeCard body, with the stat grid 4-up on desktop and 2-up on mobile, cells split by a 2px rule (the stroke/2 step G6 added to the ladder, a drawn line, not a gap).", "notUse": "Not for a market tile in a grid, that is the 506×208 MarketCard, and at 1007×600 this panel is a section, not a tile.", "insteadUse": "Region / Market / MarketCard [grid]", "pairsWith": [ "Region / Masthead", "Control / ChipRow", "Surface / OutcomeCard", "Display / Feedback / AlertStrip" ] }, { "id": "control-field", "sourceId": "6232:83", "name": "Control / Field", "class": "Control", "domain": "Market", "size": { "w": 491, "h": 90 }, "exportBox": null, "figma": { "nodeId": "6232:83", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6232-83", "sheet": "07 · Inputs" }, "authored": true, "description": "ONE field, five states. StakeInput and SearchField are the same 491×90 plate (GAPS §1.2), the USDC suffix is the only difference, and both draw exactly one state: filled. Empty, focus, invalid and disabled were never designed, and the money path needs all four.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6232-83.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": ".pc-field{\n box-sizing:border-box; display:inline-flex; align-items:center;\n width:491px; height:90px; padding:0 39px;\n background:url(\"assets/svg/shape/market-stakeinput.svg\") 50%/100% 100% no-repeat;\n font:italic 800 34px/1 \"Barlow Condensed\",Impact,sans-serif;\n color:var(--pc-ink,#141414);\n}\n.pc-field[data-state=\"empty\"] .value{ opacity:.42 }\n\n/* G10, the ring is the silhouette; on a background-image plate this is the fallback */\n.pc-field:focus-within{ outline:5px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* G11, and NEVER on its own. The stroke says something is wrong;\n only the message beneath can say what. */\n.pc-field[aria-invalid=\"true\"]{ box-shadow:inset 0 0 0 2px var(--pc-color-danger,#EA2A46) }\n.pc-field-hint{ display:block; margin-top:6px; font:400 11px/1.5 var(--mono);\n color:var(--pc-color-danger,#EA2A46) }\n\n.pc-field[disabled]{ filter:grayscale(1); opacity:.45; cursor:not-allowed }", "plannedProps": [], "use": "Use for any text or amount input, including the stake field on the money path, it is the only field in the system with more than one state. A form is built label, input, error, submit, the label above the control at gap 8, the error replacing the help text in the same slot rather than pushing layout, and the submit button right-aligned.", "notUse": "Not for the drawn StakeInput or SearchField plates, which remain in the library as the artwork record but ship a single filled state.", "insteadUse": null, "pairsWith": [ "Display / Feedback / AlertStrip", "Control / Market / YesNoButton", "Control / Market / ClaimAction" ] }, { "id": "surface-feedback-errorpanel", "sourceId": "6233:38", "name": "Surface / Feedback / ErrorPanel", "class": "Surface", "domain": "Feedback", "size": { "w": 1007, "h": 300 }, "exportBox": null, "figma": { "nodeId": "6233:38", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6233-38", "sheet": "18 · Feedback" }, "authored": true, "description": "The panel 15 shipped error states had no drawing for. AlertStrip is a banner capped at section width (G9), so it can sit above a failed grid but never replace one. This is the region-filling form, and it carries the retry action, which did not exist in the library either.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6233-38.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": ".pc-errorpanel{\n box-sizing:border-box; width:1007px; min-height:300px; padding:56px 60px;\n background:url(\"assets/svg/shape/primitive-torn-panel.svg\") 50%/100% 100% no-repeat;\n display:flex; flex-direction:column; gap:16px; align-items:flex-start;\n color:var(--pc-ink,#141414);\n}\n.pc-errorpanel h2{ margin:0; font:italic 800 46px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase }\n.pc-errorpanel p { margin:0; font:italic 500 20px/1.4 \"Barlow Condensed\",sans-serif; opacity:.8 }\n\n/* notFound ships without retry on purpose, retrying a 404 is theatre */\n.pc-errorpanel[data-kind=\"notFound\"] .pc-btn{ display:none }", "plannedProps": [], "use": "Use where a whole region failed to load and the user needs to know it failed rather than that it is empty, a dead grid, a dead page, a dead panel. Pick the feedback component by HOW MUCH OF THE SCREEN the message is about: a field takes a 2px #EA2A46 border and an inline strip, a section takes AlertStrip, a region takes ErrorPanel or EmptyState. A page-level failure has no drawing yet.", "notUse": "Not for a genuinely empty list, and not while data is still arriving; three shipped errors are currently pixel-identical to their empty state, which teaches the user there is nothing there rather than that we failed to fetch it.", "insteadUse": "Surface / Feedback / EmptyState", "pairsWith": [ "Control / Button", "Foundation / Skeleton", "Surface / Feedback / EmptyState" ] }, { "id": "control-market-claimaction", "sourceId": "6234:89", "name": "Control / Market / ClaimAction", "class": "Control", "domain": "Market", "size": { "w": 127, "h": 57 }, "exportBox": { "w": 131, "h": 60, "sourceNodeId": "6234:71", "includesStrokeAndShadow": true }, "figma": { "nodeId": "6234:89", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6234-89", "sheet": "05 · Buttons" }, "authored": true, "description": "The payout control. A voided market with a refundable position and a settled win with money waiting both end at the same place, a control that hands the user their money, and the coverage audit found a story for that state and no drawing for it.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/r2-claimaction.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": ".pc-claim{\n box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;\n width:260px; height:66px; padding:0 20px;\n background:url(\"assets/svg/shape/button-loadmore.svg\") 50%/100% 100% no-repeat;\n font:italic 800 22px/1 \"Barlow Condensed\",Impact,sans-serif;\n color:var(--pc-ink,#141414); cursor:pointer;\n transition:transform .16s cubic-bezier(.16,1,.3,1);\n}\n.pc-claim:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-claim:active{ transform:translate(var(--press,3px), var(--press,3px)) }\n.pc-claim:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* in flight, dimmed, not disabled. It is working, not refusing. */\n.pc-claim[data-status=\"pending\"]{ opacity:.6; pointer-events:none }\n/* terminal, nothing left to do, so disabled is the honest reading */\n.pc-claim[data-status=\"claimed\"]{ filter:grayscale(1); opacity:.45; pointer-events:none }\n\n@media (prefers-reduced-motion:reduce){ .pc-claim{ transition:none } }", "plannedProps": [], "use": "Use wherever money is waiting for the user: a settled win, or a refundable position on a voided market. Put the amount in the label so pressing it needs no other reading.", "notUse": "Not styled as disabled while a transaction is in flight, pending is working, and disabled reads as refusing.", "insteadUse": null, "pairsWith": [ "Surface / OutcomeCard", "Display / Profile / ResultStamp [won]", "Display / Market / StatusBadge" ] }, { "id": "control-auth-codeinput", "sourceId": "6234:131", "name": "Control / Auth / CodeInput", "class": "Control", "domain": "Auth", "size": { "w": 444, "h": 78 }, "exportBox": null, "figma": { "nodeId": "6234:131", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6234-131", "sheet": "07 · Inputs" }, "authored": true, "description": "Six-digit email code. Built from the system rather than invented: 2px ink (the stroke/2 step G6 added), a hard +4/+4 shadow at zero blur like every other plate, and the focus ring on the NEXT EMPTY cell, which is the one thing a row of identical boxes cannot say on its own.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6234-131.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": ".pc-code{ display:flex; gap:12px }\n.pc-code .cell{\n display:flex; align-items:center; justify-content:center;\n width:64px; height:78px; background:#fff;\n border:2px solid var(--pc-ink,#141414); /* stroke/2, the step G6 added */\n box-shadow:4px 4px 0 #000; /* hard, zero blur, like every plate */\n font:italic 800 30px/1 \"Barlow Condensed\",Impact,sans-serif;\n}\n/* the ring goes on the NEXT EMPTY cell, not the row */\n.pc-code .cell[data-caret]{ border-color:var(--pc-color-accent,#FFA800); border-width:5px }\n/* a wrong code is wrong as a whole */\n.pc-code[aria-invalid=\"true\"] .cell{ border-color:var(--pc-color-danger,#EA2A46) }", "plannedProps": [], "use": "Use for the six-digit email sign-in code; the ring marks the next empty cell, which is what tells the user where they are.", "notUse": "Not with a single cell reddened to point at a wrong digit, a wrong code is wrong as a whole, and highlighting one would be a lie about which.", "insteadUse": null, "pairsWith": [ "Display / Feedback / AlertStrip", "Region / Auth / SignInModal", "Control / Auth / WalletOption" ] }, { "id": "region-share-pnlcard", "sourceId": "6244:1138", "name": "Region / Share / PnlCard", "class": "Region", "domain": "Share", "size": { "w": 770, "h": 838 }, "exportBox": null, "figma": { "nodeId": "6244:1138", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6244-1138", "sheet": "22 · Share" }, "authored": false, "description": "The real share card, taken from the running product rather than redrawn, resolved SVG at its shipped 770×838, three states. Two import artefacts were repaired: the outcome amount arrived SOLID BLACK because the SVG fills it with a gradient reference the import could not resolve, and all 57 text nodes arrived in Inter upright, making it the only display artefact in the library not set in the display face.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6244-1138.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": ".pc-pnlcard{ display:block; width:770px; max-width:100%; height:auto }\n\n/* Never stretched. The ratio is 0.918:1 and no platform shares it, so the card\n is scaled and centred inside the frame; the frame changes, the card does not. */\n.pc-share-frame{\n display:grid; place-items:center;\n background:#0A0A0A; padding:7%;\n}\n.pc-share-frame[data-size=\"ig-square\"] { aspect-ratio:1/1 }\n.pc-share-frame[data-size=\"ig-portrait\"]{ aspect-ratio:4/5 }\n.pc-share-frame[data-size=\"story\"] { aspect-ratio:9/16 }\n.pc-share-frame[data-size=\"x-post\"] { aspect-ratio:16/9 }\n.pc-share-frame .pc-pnlcard{ max-height:100%; width:auto }\n\n/* the disclaimer the shipped card has nowhere to put, the reframe makes the room */\n.pc-share-frame::after{\n content:\"PUMPCADE.COM · NOT FINANCIAL ADVICE · 18+\";\n align-self:end;\n font:italic 500 clamp(11px,1.6vw,18px)/1 \"Barlow Condensed\",sans-serif;\n letter-spacing:.06em; color:#9e9ea6;\n}", "plannedProps": [], "use": "Use as the shareable result artefact; it is the only thing in the system designed to leave the product, and it ships at 770×838 with won, lost and hidden states.", "notUse": "Not posted at its native size to a social platform, 0.918:1 is not a platform ratio and it crops badly to all four; reframe it at 1080×1080, 1080×1350, 1080×1920 or 1600×900, scaled and centred, never stretched.", "insteadUse": null, "pairsWith": [ "Display / Profile / ResultStamp [won]", "Surface / OutcomeCard", "Control / Market / ClaimAction" ] }, { "id": "display-glyph-check", "sourceId": "6260:140", "name": "Display / Glyph / Check", "class": "Display", "domain": "Core", "size": { "w": 25, "h": 19 }, "exportBox": null, "figma": { "nodeId": "6260:140", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6260-140", "sheet": "03 · Typography" }, "authored": false, "description": "The affirmative mark, extracted from YesNoButton rather than invented. G11 makes it load-bearing: it is why the YES/NO pair survives colour being removed, which answers the red/green colour-blindness objection.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6260-140.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use for every affirmative, toggle-on, selected menu row, completed checklist marker.", "notUse": "Never use colour alone to say checked; that is the failure G11 exists to prevent.", "insteadUse": null, "pairsWith": [] }, { "id": "layout-stage", "sourceId": "6267:1001", "name": "Layout / Stage", "class": "Region", "domain": "Layout", "size": { "w": 1820, "h": 591 }, "exportBox": null, "figma": { "nodeId": "6267:1001", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6267-1001", "sheet": "23 · Layout" }, "authored": false, "description": "The container every page in the product re-invents. Code carries eight different max-widths and none of them is 1820. Desktop 1820 / mobile 412, the stage is the width of the nav bar, confirmed on 15 of 15 frames.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6267-1001.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use as the outermost container of any page; it supplies the margin, the top offset and the 40px section rhythm.", "notUse": "Not for a region inside a page, that is a band from the width ladder.", "insteadUse": null, "pairsWith": [] }, { "id": "layout-cardgrid", "sourceId": "6266:281", "name": "Layout / CardGrid", "class": "Region", "domain": "Layout", "size": { "w": 1654, "h": 208 }, "exportBox": null, "figma": { "nodeId": "6266:281", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6266-281", "sheet": "23 · Layout" }, "authored": false, "description": "The market grid: item 506, gutter 68, band 1654 (3x506 + 2x68). Built at 1650 the third card silently wrapped to a second row, because MarketCard measures 506.4.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6266-281.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use for any grid of equal cards at desktop width.", "notUse": "Not below 768, the artwork replaces the grid with a carousel there. Use Layout / Carousel.", "insteadUse": null, "pairsWith": [] }, { "id": "layout-filterbar", "sourceId": "6266:693", "name": "Layout / FilterBar", "class": "Region", "domain": "Layout", "size": { "w": 1051, "h": 90 }, "exportBox": null, "figma": { "nodeId": "6266:693", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6266-693", "sheet": "23 · Layout" }, "authored": false, "description": "SearchField plus the three DropdownSelect triggers at gap 8, the product's own gap-2.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6266-693.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use above any filtered list or grid.", "notUse": "Not for a row of chips; that is Control / ChipRow, which carries the same gap for a different job.", "insteadUse": null, "pairsWith": [] }, { "id": "layout-sectionheader", "sourceId": "6266:753", "name": "Layout / SectionHeader", "class": "Region", "domain": "Layout", "size": { "w": 1650, "h": 69 }, "exportBox": null, "figma": { "nodeId": "6266:753", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6266-753", "sheet": "23 · Layout" }, "authored": false, "description": "Wraps Surface / Type / SectionHeading. The plate existed; the align variant did not, and mobile centres it.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/r2-sectionheader.svg", "preview": null, "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use above each section of a page.", "notUse": "Not as the page's own header, that is Region / Masthead.", "insteadUse": null, "pairsWith": [] }, { "id": "layout-carousel", "sourceId": "6266:754", "name": "Layout / Carousel", "class": "Region", "domain": "Layout", "size": { "w": 412, "h": 131 }, "exportBox": null, "figma": { "nodeId": "6266:754", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6266-754", "sheet": "23 · Layout" }, "authored": false, "description": "The mobile pattern 9 of 13 mobile frames need and nobody drew: one centred card with its siblings peeking, hard-clipped at 412.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6266-754.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use below 768 wherever desktop shows a card grid.", "notUse": "Not on desktop, the artwork draws three columns at every desktop width.", "insteadUse": null, "pairsWith": [] }, { "id": "layout-modalhost", "sourceId": "6266:956", "name": "Layout / ModalHost", "class": "Region", "domain": "Layout", "size": { "w": 1920, "h": 1080 }, "exportBox": null, "figma": { "nodeId": "6266:956", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6266-956", "sheet": "23 · Layout" }, "authored": false, "description": "The scrim, which is drawn nowhere in the artwork: black at 55% behind a centred ModalPanel.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6266-956.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use behind every modal so the page reads as blocked rather than replaced.", "notUse": "Not as a page background.", "insteadUse": null, "pairsWith": [] }, { "id": "control-stepper", "sourceId": "6286:1514", "name": "Control / Stepper", "class": "Control", "domain": "Market", "size": { "w": 491, "h": 90 }, "exportBox": null, "figma": { "nodeId": "6286:1514", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6286-1514", "sheet": "07 · Inputs" }, "authored": false, "description": "The number field on the money path. Built on the Field plate with the spinner arrows re-cloned WITH their sibling shadows, the existing SpinnerArrows took the face vectors only, so the true pair box is 38.58 x 78.31, not 31.2 x 71. Seated at 0.79 scale by geometry rather than rescale, so the 2px ink survives.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6286-1514.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use for any amount the user increments, stake, deposit, withdraw.", "notUse": "Not given a hover state: fields do not lift, because the lift fights the caret.", "insteadUse": null, "pairsWith": [ "Control / Field", "Display / Feedback / AlertStrip" ] }, { "id": "control-select", "sourceId": "6291:22434", "name": "Control / Select", "class": "Control", "domain": "Control", "size": { "w": 185, "h": 90 }, "exportBox": null, "figma": { "nodeId": "6291:22434", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6291-22434", "sheet": "08 · Selects" }, "authored": false, "description": "One select, three tones. [sort], [view] and [type] were three drawings of one affordance; they are Tone modes here. The open menu is masked to the torn plate outline, because the plate's right edge swings 146.6 to 162.7 and a full-bleed row band overhangs it.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6291-22434.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use for any menu choice; pick the Tone that matches the filter it belongs to.", "notUse": "Not given an invalid state, a select can only hold one of its own options, so required-but-empty is a form error for AlertStrip.", "insteadUse": null, "pairsWith": [ "Control / Select / Row", "Control / Field" ] }, { "id": "control-select-row", "sourceId": "6288:126", "name": "Control / Select / Row", "class": "Control", "domain": "Control", "size": { "w": 163, "h": 32 }, "exportBox": null, "figma": { "nodeId": "6288:126", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6288-126", "sheet": "08 · Selects" }, "authored": false, "description": "A menu row. Separate from Select because putting the row states on the Select set would have meant a 3x5x4 explosion. Selected carries Display / Glyph / Check, not a fill change.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6288-126.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use inside Control / Select [State=open].", "notUse": "Not standalone, it is transparent by design and needs the menu plate behind it.", "insteadUse": null, "pairsWith": [ "Control / Select", "Display / Glyph / Check" ] }, { "id": "control-toggle", "sourceId": "6292:343", "name": "Control / Toggle", "class": "Control", "domain": "Control", "size": { "w": 92, "h": 52 }, "exportBox": null, "figma": { "nodeId": "6292:343", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6292-343", "sheet": "07 · Inputs" }, "authored": false, "description": "Knob from Badge / Step (42.23, shadow +5.26 snapping to 5), track the same plate at 2x box width. The ON state carries the check glyph on the knob and OFF carries nothing, that is how it says checked without relying on colour.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/r2-toggle.svg", "preview": null, "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use for a binary setting the user can flip freely, such as hiding amounts on a share card.", "notUse": "Not given an invalid state, a switch cannot be wrong; both positions are legal values.", "insteadUse": null, "pairsWith": [ "Display / Glyph / Check", "Display / Badge / Step" ] }, { "id": "control-textarea", "sourceId": "6295:341", "name": "Control / Textarea", "class": "Control", "domain": "Control", "size": { "w": 491, "h": 180 }, "exportBox": null, "figma": { "nodeId": "6295:341", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6295-341", "sheet": "07 · Inputs" }, "authored": false, "description": "The Field plate grown vertically. Legal here where a button's is not: this plate's top and bottom edges are flat (y 7.08 / 77.38), so only the left notch and right tail stretch, and they stay recognisably the same family.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6295-341.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use for multi-line input; minimum three rows.", "notUse": "Not for a single line, that is Control / Field.", "insteadUse": null, "pairsWith": [ "Control / Field", "Display / Feedback / AlertStrip" ] }, { "id": "control-disclosure", "sourceId": "6296:681", "name": "Control / Disclosure", "class": "Control", "domain": "Control", "size": { "w": 299, "h": 61 }, "exportBox": { "w": 300, "h": 61, "sourceNodeId": "6296:658", "includesStrokeAndShadow": true }, "figma": { "nodeId": "6296:681", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6296-681", "sheet": "07 · Inputs" }, "authored": false, "description": "A header row that expands, built on Surface / Label Banner. The body panel is a plain rectangle: no drawn body plate exists at 296 wide, so it is a deliberate simplification and it looks less hand-made than the header.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/r2-disclosure.svg", "preview": null, "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use to hide secondary detail behind a heading the user can open.", "notUse": "Not given hover or pressed, a banner is not a button plate (R1), and a 3px press sits below the distance this system's presses read at.", "insteadUse": null, "pairsWith": [ "Surface / Label Banner" ] }, { "id": "icon-check", "sourceId": "6321:2", "name": "Icon / check", "class": "Foundation", "domain": "Core", "size": { "w": 32, "h": 32 }, "exportBox": null, "figma": { "nodeId": "6321:2", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6321-2", "sheet": "02 · Icons" }, "authored": false, "description": "The affirmative mark. G11 makes it LOAD-BEARING, it is why the YES/NO pair survives colour being removed, which answers the red/green objection.", "shapeSvg": null, "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Icon / check, 32 × 32 */\n.pc-icon-check{ width:32px; height:32px; display:inline-block; vertical-align:middle }\n\n/* INLINE the SVG rather than using if you need to recolour it \n an img cannot take currentColor. */", "plannedProps": [], "use": "Use for every affirmative: toggle-on, selected menu row, completed checklist marker.", "notUse": "Never rely on colour alone to say checked, that is the failure G11 exists to prevent.", "insteadUse": null, "pairsWith": [] }, { "id": "icon-star", "sourceId": "6321:6", "name": "Icon / star", "class": "Foundation", "domain": "Core", "size": { "w": 32, "h": 32 }, "exportBox": null, "figma": { "nodeId": "6321:6", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6321-6", "sheet": "02 · Icons" }, "authored": false, "description": "Lifted from StarBadge's ink. The stars in ★ YOUR PICK ★ are text characters, not geometry; this one is real.", "shapeSvg": null, "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Icon / star, 32 × 32 */\n.pc-icon-star{ width:32px; height:32px; display:inline-block; vertical-align:middle }\n\n/* INLINE the SVG rather than using if you need to recolour it \n an img cannot take currentColor. */", "plannedProps": [], "use": "Use as a rank or favourite mark.", "notUse": null, "insteadUse": null, "pairsWith": [] }, { "id": "icon-copy", "sourceId": "6321:10", "name": "Icon / copy", "class": "Foundation", "domain": "Core", "size": { "w": 32, "h": 32 }, "exportBox": null, "figma": { "nodeId": "6321:10", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6321-10", "sheet": "02 · Icons" }, "authored": false, "description": "Was welded into CopyShareIcons and could not be used alone. CopyShareIcons now instances it.", "shapeSvg": null, "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Icon / copy, 32 × 32 */\n.pc-icon-copy{ width:32px; height:32px; display:inline-block; vertical-align:middle }\n\n/* INLINE the SVG rather than using if you need to recolour it \n an img cannot take currentColor. */", "plannedProps": [], "use": "Use beside anything copyable, a wallet address, a share link.", "notUse": null, "insteadUse": null, "pairsWith": [] }, { "id": "icon-share", "sourceId": "6321:16", "name": "Icon / share", "class": "Foundation", "domain": "Core", "size": { "w": 32, "h": 32 }, "exportBox": null, "figma": { "nodeId": "6321:16", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6321-16", "sheet": "02 · Icons" }, "authored": false, "description": "The other half of the same welded pair.", "shapeSvg": null, "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Icon / share, 32 × 32 */\n.pc-icon-share{ width:32px; height:32px; display:inline-block; vertical-align:middle }\n\n/* INLINE the SVG rather than using if you need to recolour it \n an img cannot take currentColor. */", "plannedProps": [], "use": "Use beside anything shareable.", "notUse": null, "insteadUse": null, "pairsWith": [] }, { "id": "icon-arrow-up", "sourceId": "6321:24", "name": "Icon / arrow-up", "class": "Foundation", "domain": "Core", "size": { "w": 32, "h": 32 }, "exportBox": null, "figma": { "nodeId": "6321:24", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6321-24", "sheet": "02 · Icons" }, "authored": false, "description": "From TrendArrow [up]. 1:2.1 by nature, so it fills the height rather than the width.", "shapeSvg": null, "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Icon / arrow-up, 32 × 32 */\n.pc-icon-arrow-up{ width:32px; height:32px; display:inline-block; vertical-align:middle }\n\n/* INLINE the SVG rather than using if you need to recolour it \n an img cannot take currentColor. */", "plannedProps": [], "use": "Use for upward movement.", "notUse": "Not at 16px, it needs redrawing rather than rescaling below 24.", "insteadUse": null, "pairsWith": [] }, { "id": "icon-arrow-down", "sourceId": "6321:28", "name": "Icon / arrow-down", "class": "Foundation", "domain": "Core", "size": { "w": 32, "h": 32 }, "exportBox": null, "figma": { "nodeId": "6321:28", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6321-28", "sheet": "02 · Icons" }, "authored": false, "description": "From TrendArrow [down].", "shapeSvg": null, "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Icon / arrow-down, 32 × 32 */\n.pc-icon-arrow-down{ width:32px; height:32px; display:inline-block; vertical-align:middle }\n\n/* INLINE the SVG rather than using if you need to recolour it \n an img cannot take currentColor. */", "plannedProps": [], "use": "Use for downward movement.", "notUse": "Not at 16px.", "insteadUse": null, "pairsWith": [] }, { "id": "icon-close", "sourceId": "6322:2", "name": "Icon / close", "class": "Foundation", "domain": "Core", "size": { "w": 32, "h": 32 }, "exportBox": null, "figma": { "nodeId": "6322:2", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6322-2", "sheet": "02 · Icons" }, "authored": false, "description": "From CloseButton, 28.5 square.", "shapeSvg": null, "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Icon / close, 32 × 32 */\n.pc-icon-close{ width:32px; height:32px; display:inline-block; vertical-align:middle }\n\n/* INLINE the SVG rather than using if you need to recolour it \n an img cannot take currentColor. */", "plannedProps": [], "use": "Use to dismiss.", "notUse": null, "insteadUse": null, "pairsWith": [] }, { "id": "icon-chevron-down", "sourceId": "6322:6", "name": "Icon / chevron-down", "class": "Foundation", "domain": "Core", "size": { "w": 32, "h": 32 }, "exportBox": null, "figma": { "nodeId": "6322:6", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6322-6", "sheet": "02 · Icons" }, "authored": false, "description": "From Disclosure. It is the ONLY caret in the file, the DropdownSelect family has none, it is plate plus label plus texture.", "shapeSvg": null, "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Icon / chevron-down, 32 × 32 */\n.pc-icon-chevron-down{ width:32px; height:32px; display:inline-block; vertical-align:middle }\n\n/* INLINE the SVG rather than using if you need to recolour it \n an img cannot take currentColor. */", "plannedProps": [], "use": "Use to expand and collapse.", "notUse": null, "insteadUse": null, "pairsWith": [] }, { "id": "icon-caret-up", "sourceId": "6322:10", "name": "Icon / caret-up", "class": "Foundation", "domain": "Core", "size": { "w": 32, "h": 32 }, "exportBox": null, "figma": { "nodeId": "6322:10", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6322-10", "sheet": "02 · Icons" }, "authored": false, "description": "From SpinnerArrows.", "shapeSvg": null, "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Icon / caret-up, 32 × 32 */\n.pc-icon-caret-up{ width:32px; height:32px; display:inline-block; vertical-align:middle }\n\n/* INLINE the SVG rather than using if you need to recolour it \n an img cannot take currentColor. */", "plannedProps": [], "use": "Use in a stepper.", "notUse": null, "insteadUse": null, "pairsWith": [] }, { "id": "icon-caret-down", "sourceId": "6322:14", "name": "Icon / caret-down", "class": "Foundation", "domain": "Core", "size": { "w": 32, "h": 32 }, "exportBox": null, "figma": { "nodeId": "6322:14", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6322-14", "sheet": "02 · Icons" }, "authored": false, "description": "From SpinnerArrows.", "shapeSvg": null, "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Icon / caret-down, 32 × 32 */\n.pc-icon-caret-down{ width:32px; height:32px; display:inline-block; vertical-align:middle }\n\n/* INLINE the SVG rather than using if you need to recolour it \n an img cannot take currentColor. */", "plannedProps": [], "use": "Use in a stepper.", "notUse": null, "insteadUse": null, "pairsWith": [] }, { "id": "icon-menu", "sourceId": "6322:18", "name": "Icon / menu", "class": "Foundation", "domain": "Core", "size": { "w": 32, "h": 32 }, "exportBox": null, "figma": { "nodeId": "6322:18", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6322-18", "sheet": "02 · Icons" }, "authored": false, "description": "From HamburgerButton. Three bars.", "shapeSvg": null, "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Icon / menu, 32 × 32 */\n.pc-icon-menu{ width:32px; height:32px; display:inline-block; vertical-align:middle }\n\n/* INLINE the SVG rather than using if you need to recolour it \n an img cannot take currentColor. */", "plannedProps": [], "use": "Use for the mobile drawer.", "notUse": "Only once a drawer exists, as drawn it opens nothing.", "insteadUse": null, "pairsWith": [] }, { "id": "icon-wallet", "sourceId": "6322:25", "name": "Icon / wallet", "class": "Foundation", "domain": "Core", "size": { "w": 32, "h": 32 }, "exportBox": null, "figma": { "nodeId": "6322:25", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6322-25", "sheet": "02 · Icons" }, "authored": false, "description": "From WalletButton. Two-tone fill with a keyline.", "shapeSvg": null, "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Icon / wallet, 32 × 32 */\n.pc-icon-wallet{ width:32px; height:32px; display:inline-block; vertical-align:middle }\n\n/* INLINE the SVG rather than using if you need to recolour it \n an img cannot take currentColor. */", "plannedProps": [], "use": "Use for the wallet slot.", "notUse": null, "insteadUse": null, "pairsWith": [] }, { "id": "icon-alert", "sourceId": "6322:33", "name": "Icon / alert", "class": "Foundation", "domain": "Core", "size": { "w": 32, "h": 32 }, "exportBox": null, "figma": { "nodeId": "6322:33", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6322-33", "sheet": "02 · Icons" }, "authored": false, "description": "The exclamation from YesNoButton [Side=no], and the reason NO reads without colour.", "shapeSvg": null, "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Icon / alert, 32 × 32 */\n.pc-icon-alert{ width:32px; height:32px; display:inline-block; vertical-align:middle }\n\n/* INLINE the SVG rather than using if you need to recolour it \n an img cannot take currentColor. */", "plannedProps": [], "use": "Use to mark something wrong.", "notUse": "At 5.5px wide it only reads because of the gap between bar and dot, not below 24.", "insteadUse": null, "pairsWith": [] }, { "id": "icon-dot", "sourceId": "6322:39", "name": "Icon / dot", "class": "Foundation", "domain": "Core", "size": { "w": 32, "h": 32 }, "exportBox": null, "figma": { "nodeId": "6322:39", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6322-39", "sheet": "02 · Icons" }, "authored": false, "description": "From SportsTab [State=live]. Optically sized to 14, not 26, a dot fitted to the full box stops being a dot and becomes a disc.", "shapeSvg": null, "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Icon / dot, 32 × 32 */\n.pc-icon-dot{ width:32px; height:32px; display:inline-block; vertical-align:middle }\n\n/* INLINE the SVG rather than using if you need to recolour it \n an img cannot take currentColor. */", "plannedProps": [], "use": "Use as a live or unread marker.", "notUse": null, "insteadUse": null, "pairsWith": [] }, { "id": "icon-clock", "sourceId": "6322:22444", "name": "Icon / clock", "class": "Foundation", "domain": "Core", "size": { "w": 32, "h": 32 }, "exportBox": null, "figma": { "nodeId": "6322:22444", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6322-22444", "sheet": "02 · Icons" }, "authored": false, "description": "From the PNL ticket, beside PLACED NOW.", "shapeSvg": null, "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Icon / clock, 32 × 32 */\n.pc-icon-clock{ width:32px; height:32px; display:inline-block; vertical-align:middle }\n\n/* INLINE the SVG rather than using if you need to recolour it \n an img cannot take currentColor. */", "plannedProps": [], "use": "Use beside a time.", "notUse": null, "insteadUse": null, "pairsWith": [] }, { "id": "surface-page-ground-app-", "sourceId": "6343:1074", "name": "Surface / Page Ground [app]", "class": "Surface", "domain": "Core", "size": { "w": 1947, "h": 1456 }, "exportBox": null, "figma": { "nodeId": "6343:1074", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/?node-id=6343-1074", "sheet": "04 · Surfaces" }, "authored": false, "description": "The short orange band the application pages sit on, black behind the header to ~130, orange to ~450, black after. Measured off the Markets frame.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/r2m-pageground-app.svg", "preview": null, "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "The short orange band the application pages sit on, black behind the header to ~130, orange to ~450, black after. Measured off the Markets frame.", "notUse": "Not on the landing page, which uses the full 1965px sunset, see Page Ground [landing].", "insteadUse": "Surface / Page Ground [landing]", "pairsWith": [ "Region / Nav / TopNav" ] }, { "id": "surface-page-ground-app-full-", "sourceId": "6343:1092", "name": "Surface / Page Ground [app · full]", "class": "Surface", "domain": "Core", "size": { "w": 1922, "h": 1522 }, "exportBox": null, "figma": { "nodeId": "6343:1092", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/?node-id=6343-1092", "sheet": "04 · Surfaces" }, "authored": false, "description": "Full orange with a torn black edge top and bottom. Measured off the Profile frame, which is the only page that fills.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/r2m-pageground-app-full.svg", "preview": null, "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Full orange with a torn black edge top and bottom. Measured off the Profile frame, which is the only page that fills.", "notUse": "Not on the landing page, which uses the full 1965px sunset, see Page Ground [landing].", "insteadUse": "Surface / Page Ground [landing]", "pairsWith": [ "Region / Nav / TopNav" ] }, { "id": "surface-type-pageheading", "sourceId": "6399:2", "name": "Surface / Type / PageHeading", "class": "Surface", "domain": "Type", "size": { "w": 1252, "h": 212 }, "exportBox": null, "figma": { "nodeId": "6399:2", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6399-2", "sheet": "03 · Typography" }, "authored": false, "description": "The green page heading plate, 1042x177 inside a 1252 bounding box that holds its shadow. Measured off the Markets frame.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6399-2.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use for a page-level line above a list, the Markets page is the reference. Green is the only heading colour the artwork uses at this size.", "notUse": "Not for a section inside a page, which is the small yellow 339x69 plate.", "insteadUse": "Surface / Type / SectionHeading", "pairsWith": [ "Region / Nav / TopNav", "Layout / FilterBar" ] }, { "id": "surface-type-bursttitle", "sourceId": "6405:2", "name": "Surface / Type / BurstTitle", "class": "Surface", "domain": "Type", "size": { "w": 1413, "h": 523 }, "exportBox": null, "figma": { "nodeId": "6405:2", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6405-2", "sheet": "03 · Typography" }, "authored": false, "description": "The page title on a violet burst, 1413x523. Measured off the Create Market frame, the heaviest title treatment in the artwork and the only one that bursts.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6405-2.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use for a page that IS a single task, where the title carries the whole masthead. Create Market is the only page in the artwork that earns it.", "notUse": "Not for a page that lists things, that is the green plate, which sits inside a band rather than replacing it.", "insteadUse": "Surface / Type / PageHeading", "pairsWith": [ "Region / Nav / TopNav", "Display / Badge / Step" ] }, { "id": "region-market-statburst", "sourceId": "6401:2", "name": "Region / Market / StatBurst", "class": "Surface", "domain": "Market", "size": { "w": 589, "h": 382 }, "exportBox": null, "figma": { "nodeId": "6401:2", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6401-2", "sheet": "14 · Market" }, "authored": false, "description": "The two-row stat burst from the Markets masthead, a caption and a value on each row, with an arrow between them.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6401-2.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use when a masthead needs to show two figures at once, which is what the Markets page does with LIVE MARKETS and SETTLED.", "notUse": "Not for a single figure, PoolBurst is the same plate carrying one caption and value, and it is the smaller of the two.", "insteadUse": "Region / Market / PoolBurst", "pairsWith": [ "Surface / Type / PageHeading", "Region / Nav / TopNav" ] }, { "id": "display-sports-statbar", "sourceId": "6402:2", "name": "Display / Sports / StatBar", "class": "Surface", "domain": "Sports", "size": { "w": 553, "h": 114 }, "exportBox": null, "figma": { "nodeId": "6402:2", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6402-2", "sheet": "17 · Sports" }, "authored": false, "description": "A two-sided percentage bar, 545x63, with its caption centred above. Red left, blue right, split at the drawn value.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6402-2.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use for a head-to-head split that adds to 100, the Soccer frame runs two side by side, ATTACKING PRESSURE and POSSESSION.", "notUse": "Not for a market outcome split, which is the YES/NO green-and-red pair at a different scale.", "insteadUse": "Control / Market / OutcomeSlats", "pairsWith": [ "Region / Sports / MatchStatsPanel", "Display / Sports / PlayfieldViz [pitch]" ] }, { "id": "region-sports-matchstatspanel", "sourceId": "6404:2", "name": "Region / Sports / MatchStatsPanel", "class": "Surface", "domain": "Sports", "size": { "w": 553, "h": 284 }, "exportBox": null, "figma": { "nodeId": "6404:2", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6404-2", "sheet": "17 · Sports" }, "authored": false, "description": "Head-to-head match statistics, 553x284, two team columns either side of a VS. divider, one labelled row per statistic, with a commentary line beneath.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6404-2.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use to compare two teams on the same measures. Nothing else in the library puts two entities side by side.", "notUse": "Not for a single team or a single market. The scoreboard components carry the score; this carries the detail behind it.", "insteadUse": "Display / Sports / MatchScoreboard [soccer]", "pairsWith": [ "Display / Sports / StatBar", "Region / Sports / MatchLogPanel" ] }, { "id": "control-durationpicker", "sourceId": "6417:52", "name": "Control / DurationPicker", "class": "Control", "domain": "Core", "size": { "w": 474, "h": 281 }, "exportBox": null, "figma": { "nodeId": "6417:52", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6417-52", "sheet": "07 · Inputs" }, "authored": false, "description": "The 2x2 duration grid from Create Market step 3, four speech-bubble tiles that overlap by design, 474x281. Cloned from the artwork group, minus its step badge and SET TIME header.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6417-52.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use where a duration is picked from a fixed set, Create Market step 3 is the only place the artwork does it. The tiles overlap on purpose; do not lay them out on a grid gap.", "notUse": "Not for a single duration chip in a filter row. Control / Chip / Duration is that tile on its own, in six states.", "insteadUse": "Control / Chip / Duration", "pairsWith": [ "Display / Badge / Step", "Surface / Label Banner", "Display / Data / SummaryBar" ] }, { "id": "display-market-livetag-wide-", "sourceId": "6427:57", "name": "Display / Market / LiveTag [wide]", "class": "Display", "domain": "Market", "size": { "w": 251, "h": 77 }, "exportBox": null, "figma": { "nodeId": "6427:57", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6427-57", "sheet": "11 · Badges & Tags" }, "authored": false, "description": "The filled LIVE banner from the sports frames, red notched plate, white knockout lettering, a filled dot and an exclamation burst hanging off the right edge, 251x77.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6427-57.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use where LIVE has to read against busy artwork, over a pitch, a crowd or a photo. The plate is what makes it survive there.", "notUse": "Not on a plain dark surface, where the bare mark is enough and the plate is noise.", "insteadUse": "Display / Market / LiveTag", "pairsWith": [ "Display / Sports / PlayfieldViz [pitch]", "Region / Sports / LiveGameBurst" ] }, { "id": "display-sports-matchscoreboard-hockey-", "sourceId": "6431:2", "name": "Display / Sports / MatchScoreboard [hockey]", "class": "Display", "domain": "Sports", "size": { "w": 672, "h": 87 }, "exportBox": null, "figma": { "nodeId": "6431:2", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6431-2", "sheet": "17 · Sports" }, "authored": false, "description": "The hockey board, 672x87. Measured off the Hockey frame.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6431-2.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use on the hockey frame. Each sport draws its own board rather than sharing one, periods, sets and rounds do not fit a common shape.", "notUse": "Not for another sport. Soccer, football, MMA, tennis and baseball each have their own.", "insteadUse": "Display / Sports / MatchScoreboard [soccer]", "pairsWith": [ "Display / Sports / PlayfieldViz [rink]", "Display / Sports / TeamBadge" ] }, { "id": "display-sports-matchscoreboard-baseball-", "sourceId": "6431:65", "name": "Display / Sports / MatchScoreboard [baseball]", "class": "Display", "domain": "Sports", "size": { "w": 1099, "h": 307 }, "exportBox": null, "figma": { "nodeId": "6431:65", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6431-65", "sheet": "17 · Sports" }, "authored": false, "description": "The baseball board, 1099x307, the largest of the six, because it carries innings as well as the score. Measured off the Baseball frame.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6431-65.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use on the baseball frame.", "notUse": "Not for another sport; each draws its own board.", "insteadUse": "Display / Sports / MatchScoreboard [soccer]", "pairsWith": [ "Display / Sports / PlayfieldViz [diamond]", "Region / Sports / StrikeZonePanel [baseball]" ] }, { "id": "display-sports-taleofthetape-mma-", "sourceId": "6431:133", "name": "Display / Sports / TaleOfTheTape [mma]", "class": "Display", "domain": "Sports", "size": { "w": 470, "h": 377 }, "exportBox": null, "figma": { "nodeId": "6431:133", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6431-133", "sheet": "17 · Sports" }, "authored": false, "description": "Fighter-versus-fighter physical stats, 470x377. Measured off the MMA frame.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6431-133.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use to compare two fighters before a bout, reach, height, record.", "notUse": "Not for in-play statistics, which is the octagon panel.", "insteadUse": "Region / Sports / FightStatsOctagon [mma]", "pairsWith": [ "Region / Sports / FightStatsOctagon [mma]", "Display / Sports / MatchScoreboard [mma]" ] }, { "id": "region-sports-fightstatsoctagon-mma-", "sourceId": "6431:198", "name": "Region / Sports / FightStatsOctagon [mma]", "class": "Display", "domain": "Sports", "size": { "w": 663, "h": 663 }, "exportBox": null, "figma": { "nodeId": "6431:198", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6431-198", "sheet": "17 · Sports" }, "authored": false, "description": "The octagon with live fight statistics, 663x663. Measured off the MMA frame.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6431-198.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use as the MMA playfield. PlayfieldViz has pitch, gridiron, diamond, rink and court but no octagon, this is that gap.", "notUse": "Not a stats panel on its own; it IS the playfield for this sport.", "insteadUse": "Display / Sports / PlayfieldViz [pitch]", "pairsWith": [ "Display / Sports / TaleOfTheTape [mma]", "Display / Sports / MatchScoreboard [mma]" ] }, { "id": "region-sports-strikezonepanel-baseball-", "sourceId": "6431:292", "name": "Region / Sports / StrikeZonePanel [baseball]", "class": "Display", "domain": "Sports", "size": { "w": 339, "h": 522 }, "exportBox": null, "figma": { "nodeId": "6431:292", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/Pumpcade-All-Pages---GMan?node-id=6431-292", "sheet": "17 · Sports" }, "authored": false, "description": "The strike-zone grid with pitch placement, 339x522. Measured off the Baseball frame.", "shapeSvg": null, "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6431-292.png", "implementation": "source-reference", "sourceKind": "catalogue-reference", "css": null, "plannedProps": [], "use": "Use beside the diamond to show where pitches landed.", "notUse": "Not the playfield itself, that is PlayfieldViz [diamond].", "insteadUse": "Display / Sports / PlayfieldViz [diamond]", "pairsWith": [ "Display / Sports / PlayfieldViz [diamond]", "Display / Sports / MatchScoreboard [baseball]" ] }, { "id": "control-toast", "sourceId": "6543:1671", "name": "Control / Toast", "class": "Display", "domain": "Feedback", "size": { "w": 296, "h": 63 }, "exportBox": null, "figma": { "nodeId": "6543:1671", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/?node-id=6543-1671", "sheet": "18 · Feedback" }, "authored": false, "description": "Transaction feedback on the Label Banner plate, shadow deepened 3 to 5 because it floats. Success olive with the Check glyph; error red per G11 with white stroked type per G26; info blue.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/control-toast.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6543-1671.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / Toast, 296 × 63\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-toast{\n box-sizing:border-box;\n display:inline-flex; align-items:center;\n width:296px; height:63px;\n padding:0px 26px 5px 62px; /* the glyph is drawn into the plate at x24 */\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/control-toast.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 800 28px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the tone IS the plate, one drawn file each, never a CSS recolour,\n because a filter would repaint the drawn shadow along with the face */\n.pc-toast[data-tone=\"error\"]{\n background-image:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/control-toast-error.svg\");\n color:#fff;\n}\n.pc-toast[data-tone=\"info\"]{\n background-image:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/control-toast-info.svg\");\n padding-left:26px; /* info draws no glyph */\n}\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-toast[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-toast[data-loading] > *{ visibility:hidden }\n", "plannedProps": [], "use": "Use for transient confirmations, stake placed, transaction failed, odds updated. One line, one tone, it leaves by itself.", "notUse": "Not for errors that need action. A failure the user must resolve is ErrorPanel or the field error, not a toast.", "insteadUse": "Surface / Feedback / ErrorPanel", "pairsWith": [ "Display / Glyph / Check", "Surface / Label Banner" ] }, { "id": "display-tooltip", "sourceId": "6544:1681", "name": "Display / Tooltip", "class": "Display", "domain": "Feedback", "size": { "w": 260, "h": 78 }, "exportBox": null, "figma": { "nodeId": "6544:1681", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/?node-id=6544-1681", "sheet": "18 · Feedback" }, "authored": false, "description": "A 232x50 Label Banner in paper with a two-copy comic tail, black silhouette offset 3 under the face. Copy is a sentence, so Inter Medium 14.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/display-tooltip.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6544-1681.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Tooltip, 260 × 78\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-tooltip{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:center;\n width:260px; height:78px;\n padding:14px 28px 28px; /* the tail is drawn below the plate */\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/display-tooltip.svg\") 50% 50% / 100% 100% no-repeat;\n /* the one line the artwork sets in Inter, sentence case, not display italic */\n font:500 14px/1.2 \"Inter\",system-ui,sans-serif;\n color:var(--pc-ink,#141414);\n text-align:center;\n}\n/* This file is the Side=bottom variant: tail beneath the plate. The other\n three sides are their own drawings in Figma, not a CSS transform, a\n rotated plate would rotate the hard shadow with it, which nothing here does. */\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-tooltip[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-tooltip[data-loading] > *{ visibility:hidden }\n", "plannedProps": [], "use": "Use for a short explanation on hover or focus. The tail points at what it explains; four sides.", "notUse": "Not for content the user must keep, a tooltip is gone on the next move.", "insteadUse": "Display / Feedback / AlertStrip", "pairsWith": [ "Surface / Label Banner" ] }, { "id": "control-pagination", "sourceId": "6547:1814", "name": "Control / Pagination", "class": "Control", "domain": "Nav", "size": { "w": 393, "h": 73 }, "exportBox": { "w": 397, "h": 76, "sourceNodeId": "6547:1811", "includesStrokeAndShadow": true }, "figma": { "nodeId": "6547:1814", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/?node-id=6547-1814", "sheet": "10 · Navigation" }, "authored": false, "description": "PREV and NEXT on notched chips at the chip's own drawn 11px shadow, the position readout 2 / 14 in Data mono between them.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/r2m-pagination.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / Pagination, 393 × 73\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-pagination{\n box-sizing:border-box;\n display:inline-flex; align-items:center; justify-content:space-between;\n width:393px; height:73px;\n padding:0px 14px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/control-pagination.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 500 40px/1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n\n/* the counter between the chips: the data face, white, on the page ground \n this component has no plate of its own behind the number */\n.pc-pagination b{\n font:800 32px/1 \"JetBrains Mono\",monospace;\n font-variant-numeric:tabular-nums;\n color:#fff;\n}\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, this one draws it at {'k': 'pc-pagination', 'p': '11'}px. */\n.pc-pagination{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-pagination:hover { transform:translate(calc(var(--press,11px) * -1), calc(var(--press,11px) * -1)) }\n.pc-pagination:active { transform:translate(var(--press,11px), var(--press,11px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-pagination:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-pagination[disabled], .pc-pagination[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-pagination{ transition:none } }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-pagination[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-pagination[data-loading] > *{ visibility:hidden }\n", "plannedProps": [], "use": "Use where a list pages. The count is a value, so it is mono; the words are chrome, so they are condensed italic.", "notUse": "Not for steps in a flow, that is the numbered Step badge sequence.", "insteadUse": "Display / Badge / Step", "pairsWith": [ "Control / Chip / Notched", "Display / Data / TableHeader" ] }, { "id": "display-avatar", "sourceId": "6548:1675", "name": "Display / Avatar", "class": "Display", "domain": "Profile", "size": { "w": 68, "h": 78 }, "exportBox": null, "figma": { "nodeId": "6548:1675", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/?node-id=6548-1675", "sheet": "11 · Badges & Tags" }, "authored": false, "description": "The StarHex chassis with the star removed, identity, not achievement, face violet, a unioned head-and-shoulders glyph in white with ink outline. md 68x78, sm 43x50.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/display-avatar.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6548-1675.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Avatar, 68 × 78\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-avatar{\n box-sizing:border-box;\n display:inline-block;\n width:68px; height:78px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/display-avatar.svg\") 50% 50% / 100% 100% no-repeat;\n}\n/* the hex plate and the person glyph are both in the file, there is no text.\n Size=sm is the same drawing at 43 × 49; scale the box, not a border. */\n.pc-avatar[data-size=\"sm\"]{ width:43px; height:49px }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-avatar[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-avatar[data-loading] > *{ visibility:hidden }\n", "plannedProps": [], "use": "Use wherever a wallet or user is shown, rows, headers, podium corners.", "notUse": "Not for achievements; the starred hexagon is StarBadge.", "insteadUse": "Display / Badge / StarHex", "pairsWith": [ "Region / Profile / ProfileHeader", "Region / Data / LeaderboardRow" ] }, { "id": "display-progressbar", "sourceId": "6548:1685", "name": "Display / ProgressBar", "class": "Display", "domain": "Data", "size": { "w": 545, "h": 60 }, "exportBox": null, "figma": { "nodeId": "6548:1685", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/?node-id=6548-1685", "sheet": "12 · Indicators" }, "authored": false, "description": "StatBar's torn track with a single lime fill and the percentage in Data mono riding the fill edge. Determinate only.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/display-progressbar.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6548-1685.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / ProgressBar, 545 × 60\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-progressbar{\n box-sizing:border-box;\n display:inline-flex; align-items:center;\n width:545px; height:60px;\n padding:0px 24px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/display-progressbar.svg\") 50% 50% / 100% 100% no-repeat;\n font:800 31px/1 \"JetBrains Mono\",monospace;\n font-variant-numeric:tabular-nums;\n color:var(--pc-ink,#141414);\n}\n/* The lime fill is DRAWN into this file at its 62% sweep, and the value rides\n the fill's leading edge. A live bar needs the track and fill as separate\n vectors, this file documents the drawing, it is not a variable widget. */\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-progressbar[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-progressbar[data-loading] > *{ visibility:hidden }\n", "plannedProps": [], "use": "Use for progress toward a known end, pool fill, claim windows.", "notUse": "Not for a head-to-head split, which is StatBar; not for indeterminate waiting, which is the skeleton rule.", "insteadUse": "Display / Sports / StatBar", "pairsWith": [ "Display / Sports / StatBar", "Foundation / Skeleton" ] }, { "id": "control-contextmenu", "sourceId": "6548:1727", "name": "Control / ContextMenu", "class": "Display", "domain": "Core", "size": { "w": 175, "h": 204 }, "exportBox": null, "figma": { "nodeId": "6548:1727", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/?node-id=6548-1727", "sheet": "08 · Selects" }, "authored": false, "description": "The DropdownSelect [open] panel recomposed: torn white plate, halftone edge, 11px shadow; yellow squished-banner hover row with no shadow (a highlight is not a plate); dotted divider fencing the destructive row in red per G11.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/control-contextmenu.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6548-1727.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / ContextMenu, 175 × 204\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-contextmenu{\n box-sizing:border-box;\n display:inline-flex; flex-direction:column;\n width:175px; height:204px;\n padding:24px 20px 16px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/control-contextmenu.svg\") 50% 50% / 100% 100% no-repeat;\n font:italic 500 27px/1.1 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n text-align:center;\n}\n/* the yellow row-highlight and the dashed divider are drawn into the plate;\n the destructive action is the library's one red word */\n.pc-contextmenu [data-danger]{ color:var(--pc-color-danger,#EA2A46) }\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, this one draws it at {'k': 'pc-contextmenu', 'p': '11'}px. */\n.pc-contextmenu{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-contextmenu:hover { transform:translate(calc(var(--press,11px) * -1), calc(var(--press,11px) * -1)) }\n.pc-contextmenu:active { transform:translate(var(--press,11px), var(--press,11px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-contextmenu:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-contextmenu[disabled], .pc-contextmenu[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-contextmenu{ transition:none } }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-contextmenu[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-contextmenu[data-loading] > *{ visibility:hidden }\n", "plannedProps": [], "use": "Use for actions on a thing, view, copy, share, report. The destructive action sits below the divider, in red.", "notUse": "Not for choosing a value, that is Select. A menu does things; a select picks things.", "insteadUse": "Control / Select", "pairsWith": [ "Control / DropdownSelect [open]", "Control / Select" ] }, { "id": "display-data-keyvalue", "sourceId": "6548:1738", "name": "Display / Data / KeyValue", "class": "Display", "domain": "Data", "size": { "w": 420, "h": 40 }, "exportBox": null, "figma": { "nodeId": "6548:1738", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/?node-id=6548-1738", "sheet": "15 · Data" }, "authored": false, "description": "Label in condensed italic, dotted leader riding the baseline, value right-anchored in Data mono. The atom every stat surface repeats; paper and dark inks.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/data-keyvalue.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6548-1738.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Data / KeyValue, 420 × 40\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-keyvalue{\n box-sizing:border-box;\n display:inline-flex; align-items:baseline; justify-content:space-between;\n width:420px; height:40px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/data-keyvalue.svg\") 50% 50% / 100% 100% no-repeat;\n /* the label face, the dotted leader between the pair is drawn in the file */\n font:italic 500 28px/1.2 \"Barlow Condensed\",Impact,sans-serif;\n text-transform:uppercase; letter-spacing:.01em;\n color:var(--pc-ink,#141414);\n}\n/* the value is the data face, G28's rule at its smallest */\n.pc-keyvalue b{\n font:800 28px/1.3 \"JetBrains Mono\",monospace;\n font-variant-numeric:tabular-nums;\n}\n/* Ink=dark is the same drawing in cream for the dark ground */\n.pc-keyvalue[data-ink=\"dark\"]{ color:#F0EAD9 }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-keyvalue[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-keyvalue[data-loading] > *{ visibility:hidden }\n", "plannedProps": [], "use": "Use for any label-to-value line, ticket rows, summaries, profile stats.", "notUse": "Not for tabular data with a header, that is TableHeader plus rows.", "insteadUse": "Display / Data / TableHeader", "pairsWith": [ "Region / TicketPanel", "Display / Data / SummaryBar" ] }, { "id": "control-checkbox", "sourceId": "6548:1756", "name": "Control / Checkbox", "class": "Control", "domain": "Core", "size": { "w": 280, "h": 47 }, "exportBox": { "w": 280, "h": 47, "sourceNodeId": "6548:1753", "includesStrokeAndShadow": true }, "figma": { "nodeId": "6548:1756", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/?node-id=6548-1756", "sheet": "07 · Inputs" }, "authored": false, "description": "A 44px torn sticker square from the Label Banner geometry; on-state lime with the drawn Check glyph, the YES treatment. Label is a sentence fragment, so Inter.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/r2m-checkbox.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / Checkbox, 280 × 47\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-checkbox{\n box-sizing:border-box;\n display:inline-flex; align-items:center;\n width:280px; height:47px;\n padding:0px 0px 0px 60px; /* the drawn box occupies the first 47px */\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/control-checkbox.svg\") 50% 50% / 100% 100% no-repeat;\n /* the form-label face: Inter, sentence case, white on the page ground */\n font:500 16px/1.2 \"Inter\",system-ui,sans-serif;\n color:#fff;\n}\n/* State=on draws the check inside the box in Figma; a live control renders\n the glyph over the plate when checked */\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, this one draws it at {'k': 'pc-checkbox', 'p': '3'}px. */\n.pc-checkbox{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-checkbox:hover { transform:translate(calc(var(--press,3px) * -1), calc(var(--press,3px) * -1)) }\n.pc-checkbox:active { transform:translate(var(--press,3px), var(--press,3px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-checkbox:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-checkbox[disabled], .pc-checkbox[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-checkbox{ transition:none } }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-checkbox[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-checkbox[data-loading] > *{ visibility:hidden }\n", "plannedProps": [], "use": "Use for an independent yes/no the user sets, auto-claim, notifications.", "notUse": "Not for either/or between options; that is RadioRow. Not for the money-path YES/NO, which is YesNoButton.", "insteadUse": "Control / RadioRow", "pairsWith": [ "Control / RadioRow", "Control / Toggle" ] }, { "id": "control-radiorow", "sourceId": "6548:1773", "name": "Control / RadioRow", "class": "Display", "domain": "Core", "size": { "w": 280, "h": 48 }, "exportBox": null, "figma": { "nodeId": "6548:1773", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/?node-id=6548-1773", "sheet": "07 · Inputs" }, "authored": false, "description": "The Step badge chassis fully rounded, a square radio collapses into the checkbox, with an 18px ink dot when on, lime, matching the checkbox family.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/control-radiorow.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6548-1773.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / RadioRow, 280 × 48\n The plate is ONE SVG: face, hard offset shadow and outline drawn together.\n Do NOT add a box-shadow, it would double the shadow already in the artwork. */\n.pc-radiorow{\n box-sizing:border-box;\n display:inline-flex; align-items:center;\n width:280px; height:48px;\n padding:0px 0px 0px 63px; /* the drawn circle occupies the first 47px */\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/control-radiorow.svg\") 50% 50% / 100% 100% no-repeat;\n /* the form-label face: Inter, sentence case, white on the page ground */\n font:500 16px/1.2 \"Inter\",system-ui,sans-serif;\n color:#fff;\n}\n/* State=on draws the dot inside the circle in Figma; a live control renders\n it over the plate when selected */\n\n/* the comic press: the face lands ON its own drawn shadow. --press is\n that shadow's offset, per component, this one draws it at {'k': 'pc-radiorow', 'p': '5'}px. */\n.pc-radiorow{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-radiorow:hover { transform:translate(calc(var(--press,5px) * -1), calc(var(--press,5px) * -1)) }\n.pc-radiorow:active { transform:translate(var(--press,5px), var(--press,5px)) }\n\n/* G10, the drawn ring follows the silhouette; a background-image plate\n cannot be stroked, so this is the declared fallback, not the same thing */\n.pc-radiorow:focus-visible{ outline:3px solid var(--pc-color-accent,#FFA800); outline-offset:2px }\n\n/* colour is what carries meaning here, so draining it says \"inert\" */\n.pc-radiorow[disabled], .pc-radiorow[aria-disabled=\"true\"]{\n filter:grayscale(1); opacity:.45; cursor:not-allowed;\n}\n\n@media (prefers-reduced-motion:reduce){ .pc-radiorow{ transition:none } }\n\n/* loading, no separate drawing. The skeleton is this silhouette, flattened. */\n.pc-radiorow[data-loading]{ filter:grayscale(1) brightness(0) invert(1) opacity(.14) }\n.pc-radiorow[data-loading] > *{ visibility:hidden }\n", "plannedProps": [], "use": "Use for one-of-several. Circle means exclusive; square means independent.", "notUse": "Not for an independent toggle, that is Checkbox or Toggle.", "insteadUse": "Control / Checkbox", "pairsWith": [ "Control / Checkbox", "Control / Toggle" ] }, { "id": "display-battle-countdownplate", "sourceId": "6598:38", "name": "Display / Battle / CountdownPlate", "class": "Display", "domain": "Battle", "size": { "w": 320, "h": 130 }, "exportBox": null, "figma": { "nodeId": "6598:38", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/?node-id=6598-38", "sheet": "11 · Badges & Tags" }, "authored": false, "description": "The Meme Madness round clock: the ValuePlate chassis retoned to the battle violet, a JetBrains Mono countdown on the face and the schedule line in ink beneath, it sits off the plate, so it takes the ground’s ink, never the yellow that needs a dark field. The value is data, the schedule is display, the two-face split the type system requires.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-countdownplate.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6598-38.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Battle / CountdownPlate, 320 × 130\n The plate is the ValuePlate vector retoned violet (#9652EF face, lighter\n zigzag accents), drawn shadow included, no box-shadow on top.\n Value: JetBrains Mono ExtraBold 44, white, tabular-nums.\n Schedule: Barlow Condensed SemiBold Italic 16, ink #141414, 0.08em tracking\n , the line sits OFF the plate, on whatever ground the page provides, so it\n is ink, not the yellow that only reads on dark. */\n.pc-battle-countdown{\n position:relative; width:320px; height:130px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-countdownplate.svg\") 50% 50% / 100% 100% no-repeat;\n}\n.pc-battle-countdown .value{\n position:absolute; left:60px; top:29px;\n font:800 44px/58px \"JetBrains Mono\",ui-monospace,monospace;\n font-variant-numeric:tabular-nums; color:#fff;\n}\n.pc-battle-countdown .ends{\n position:absolute; left:108px; top:109px;\n font:italic 600 16px/19px \"Barlow Condensed\",sans-serif;\n letter-spacing:.08em; text-transform:uppercase; color:#141414;\n}", "plannedProps": [], "use": "Use for the time left in a battle round, on the Battle header next to the title. One clock per page; the schedule line says when, the value says how long.", "notUse": "Not for market close times inside a card, those stay in the card's own clock chip. Not a stopwatch: it counts down, never up.", "insteadUse": null, "pairsWith": [ "Surface / Data / ValuePlate", "Display / Type / KickerTag" ] }, { "id": "display-battle-controlsplit", "sourceId": "6601:2", "name": "Display / Battle / ControlSplit", "class": "Display", "domain": "Battle", "size": { "w": 553, "h": 114 }, "exportBox": null, "figma": { "nodeId": "6601:2", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/?node-id=6601-2", "sheet": "14 · Market" }, "authored": false, "description": "The battle's tug-of-war: the StatBar chassis remapped to orange versus violet, one bar per fighter, the CONTROL label above and a JetBrains Mono percentage on each side. The split point is drawn into the two bar paths.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-controlsplit.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6601-2.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Battle / ControlSplit, 553 × 114\n The chassis is StatBar's drawn bars remapped: left #FFA800, right #9652EF,\n black outline and hard offset shadow in the file. In a real build the two\n bar paths resize with the split, the drawn 51/49 seam is the specimen's.\n Label: Barlow Condensed Medium Italic 28.4, white, centred above the seam.\n Values: JetBrains Mono ExtraBold 31.2, white, tabular-nums, one per bar. */\n.pc-battle-split{\n position:relative; width:553px; height:114px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-controlsplit.svg\") 50% 50% / 100% 100% no-repeat;\n}\n.pc-battle-split .label{\n position:absolute; left:0; right:0; top:6px; text-align:center;\n font:italic 500 28.4px/34px \"Barlow Condensed\",sans-serif;\n text-transform:uppercase; color:#fff;\n}\n.pc-battle-split .pct{\n position:absolute; top:55px;\n font:800 31.2px/41px \"JetBrains Mono\",ui-monospace,monospace;\n font-variant-numeric:tabular-nums; color:#fff;\n}\n.pc-battle-split .pct.left{ left:107px }\n.pc-battle-split .pct.right{ left:378px }", "plannedProps": [], "use": "Use for the volume split between the two fighters, the page's centrepiece under the VS. Left bar is always the left fighter's colour (orange), right is violet.", "notUse": "Not for YES/NO odds, that pair is green/red and belongs to OutcomeSlats. Not a progress bar: it has two ends, not one.", "insteadUse": "Control / Market / OutcomeSlats", "pairsWith": [ "Display / Sports / StatBar", "Region / Battle / FighterCard" ] }, { "id": "region-battle-fightercard", "sourceId": "6602:2", "name": "Region / Battle / FighterCard", "class": "Region", "domain": "Battle", "size": { "w": 454, "h": 263 }, "exportBox": null, "figma": { "nodeId": "6602:2", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/?node-id=6602-2", "sheet": "13 · Cards" }, "authored": false, "description": "One competitor in a battle, on the Torn Panel: seed in the display face, the token mint and prediction volume in the data face, PREDICTION VOLUME as the tracked eyebrow between them. Two of these flank the VS burst.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-fightercard.svg", "preview": "https://pumpcade-design-system.netlify.app/assets/preview/6602-2.png", "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Region / Battle / FighterCard, 454 × 263\n The plate is the Torn Panel (paper on ink, drawn shadow in the file).\n Seed: Barlow Condensed ExtraBold Italic 44, ink.\n Mint: JetBrains Mono Medium 17, ink, mixed case, never uppercase an address.\n Eyebrow: Barlow Condensed SemiBold Italic 15, 0.10em tracking, ink.\n Volume: JetBrains Mono ExtraBold 46, ink, tabular-nums. */\n.pc-fighter{\n position:relative; width:454px; height:263px; color:var(--pc-ink,#141414);\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-fightercard.svg\") 50% 50% / 100% 100% no-repeat;\n}\n.pc-fighter .seed{ position:absolute; left:44px; top:36px;\n font:italic 800 44px/53px \"Barlow Condensed\",sans-serif; text-transform:uppercase }\n.pc-fighter .mint{ position:absolute; left:46px; top:92px;\n font:500 17px/22px \"JetBrains Mono\",ui-monospace,monospace }\n.pc-fighter .eyebrow{ position:absolute; left:46px; top:138px;\n font:italic 600 15px/18px \"Barlow Condensed\",sans-serif;\n letter-spacing:.10em; text-transform:uppercase }\n.pc-fighter .volume{ position:absolute; left:44px; top:162px;\n font:800 46px/61px \"JetBrains Mono\",ui-monospace,monospace;\n font-variant-numeric:tabular-nums }", "plannedProps": [], "use": "Use for each of the two tokens in a battle, always in a pair, left and right of the VS. The mint keeps its mixed case; the volume is the number the battle is decided on.", "notUse": "Not a market card, it carries no question and no YES/NO. A tradable market under the battle is MarketCard [grid].", "insteadUse": "Region / Market / MarketCard [grid]", "pairsWith": [ "Surface / Torn Panel", "Display / Battle / ControlSplit" ] }, { "id": "control-battle-slatbutton", "sourceId": "6645:109", "name": "Control / Battle / SlatButton", "class": "Control", "domain": "Battle", "size": { "w": 250, "h": 77 }, "exportBox": null, "figma": { "nodeId": "6645:109", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/?node-id=6645-109", "sheet": "05 · Buttons" }, "authored": false, "description": "The battle wager pair. A slat with an arrow-notch cut INTO the leading edge - higher notches left and points right, lower is the mirror. Face #91BB4F (higher) / #EA2A46 (lower), drawn black shadow at +12.2,+12.2 (lg) or +8.2,+8.2 (sm). Label is Barlow Condensed SemiBold, white over a black offset copy - the comic double-print. Taken 1:1 from the Battle v3 dashboard.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-slatbutton.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / Battle / SlatButton - lg 250 x 77 (sm 168 x 52) */\n.pc-slatbtn{ position:relative; width:250px; height:77px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-slatbutton.svg\") 50% 50% / 100% 100% no-repeat;\n display:inline-flex; align-items:center; justify-content:center;\n font:600 30px/1 \"Barlow Condensed\",Impact,sans-serif; letter-spacing:.06em;\n text-transform:uppercase; color:#fff; text-shadow:1.5px 1.5px 0 #000; }\n.pc-slatbtn{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-slatbtn:hover { transform:translate(-4px,-4px) }\n.pc-slatbtn:active { transform:translate(0,0) }\n@media (prefers-reduced-motion:reduce){ .pc-slatbtn{ transition:none } }\n.pc-slatbtn:focus-visible{ outline:3px solid #FFA800; outline-offset:2px }", "plannedProps": [], "use": "The only pair allowed on a battle market row: higher on the left, lower on the right, notches facing each other.", "notUse": "Never recolour the pair - the green/red is doubled by the notch direction, so the pair survives colour-blindness. Not a generic button: use Button / Burst for CTAs.", "insteadUse": null, "pairsWith": [ "Display / Battle / DurationChip", "Region / Battle / MarketRow" ] }, { "id": "control-battle-ctaslat", "sourceId": "6650:86", "name": "Control / Battle / CTASlat", "class": "Control", "domain": "Battle", "size": { "w": 423, "h": 72 }, "exportBox": null, "figma": { "nodeId": "6650:86", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/?node-id=6650-86", "sheet": "05 · Buttons" }, "authored": false, "description": "The Meme Madness call-to-action slat: a long plate with lightning-notched ends, drawn shadow at +6,+6. Orange #FF7A00 face with ink label for primary actions; ink #141414 face with yellow label for secondary. Lifted 1:1 from the Qualifier hero ('VIEW THE QUALIFIER'), the vote ticket ('CAST MY ONE VOTE') and the Lineup hero.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-ctaslat.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Control / Battle / CTASlat - lg 423 x 72 */\n.pc-ctaslat{ position:relative; width:423px; height:72px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-ctaslat.svg\") 50% 50% / 100% 100% no-repeat;\n display:inline-flex; align-items:center; justify-content:center;\n font:600 30px/1 \"Barlow Condensed\",Impact,sans-serif; letter-spacing:.03em;\n text-transform:uppercase; color:#141414; }\n.pc-ctaslat{ cursor:pointer; transition:transform .16s cubic-bezier(.16,1,.3,1) }\n.pc-ctaslat:hover { transform:translate(-4px,-4px) }\n.pc-ctaslat:active { transform:translate(0,0) }\n@media (prefers-reduced-motion:reduce){ .pc-ctaslat{ transition:none } }", "plannedProps": [], "use": "One primary CTASlat per page section; the orange face is the page's single loudest action.", "notUse": "Not for in-card actions - cards use SlatButton. Two orange slats in one viewport fight each other.", "insteadUse": null, "pairsWith": [ "Region / Battle / TicketPlate" ] }, { "id": "display-battle-durationchip", "sourceId": "6648:65", "name": "Display / Battle / DurationChip", "class": "Display", "domain": "Battle", "size": { "w": 104, "h": 42 }, "exportBox": { "w": 112, "h": 50, "sourceNodeId": "6648:65", "includesStrokeAndShadow": true }, "figma": { "nodeId": "6648:65", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/?node-id=6648-65", "sheet": "06 · Chips" }, "authored": false, "description": "The live market clock. A dsPlate chassis, ink face, seed-tone outline (orange #FFA800 for Seed 01, violet #BBA8FF for Seed 02) and a JetBrains-Mono [MM:SS] countdown that ticks every second and resets at zero. On the shipped pages this chip is what proves time-left can update live.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-durationchip.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Display / Battle / DurationChip - 104 x 42 */\n.pc-durchip{ position:relative; width:104px; height:42px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-durationchip.svg\") 50% 50% / 100% 100% no-repeat;\n display:inline-flex; align-items:center; justify-content:center;\n font:600 18px/1 \"Barlow Condensed\",Impact,sans-serif; letter-spacing:.5px;\n color:#FFA800; font-variant-numeric:tabular-nums; }", "plannedProps": [], "use": "One chip per market row, always leading the row; the tone must match the seed column it sits in.", "notUse": "Never show a static duration label ([1 MIN]) where the live countdown is available - the ticking chip is the component.", "insteadUse": null, "pairsWith": [ "Control / Battle / SlatButton", "Region / Battle / MarketRow" ] }, { "id": "region-battle-seedband", "sourceId": "mm:seedband", "name": "Region / Battle / SeedBand", "class": "Region", "domain": "Battle", "size": { "w": 640, "h": 64 }, "exportBox": null, "figma": { "nodeId": "mm:seedband", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/", "sheet": "14 · Market" }, "authored": false, "description": "The section header band for one seed's market column: notched slat, seed gradient (orange #FFC94D-#E85D00 / violet #A66BFF-#6330D3), halftone dot patch and a live volume total on the right. Recreated to the v2/v3 markets-section spec.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-seedband.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": ".pc-seedband{ position:relative; width:640px; height:64px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-seedband.svg\") 50% 50% / 100% 100% no-repeat;\n display:flex; align-items:center; justify-content:space-between; padding:0 44px 0 40px;\n font:800 26px/1 \"Barlow Condensed\",Impact,sans-serif; font-style:italic; text-transform:uppercase; }\n.pc-seedband .value{ font:700 24px/1 \"JetBrains Mono\",monospace; font-variant-numeric:tabular-nums }", "plannedProps": [], "use": "Tops a seed's market column; the live volume total on the band is the column's score.", "notUse": "Not a page header - it belongs to a column of markets, never alone.", "insteadUse": null, "pairsWith": [ "Region / Battle / MarketRow", "Display / Battle / DurationChip" ] }, { "id": "region-battle-battlebar", "sourceId": "6647:245", "name": "Region / Battle / BattleBar", "class": "Region", "domain": "Battle", "size": { "w": 1298, "h": 94 }, "exportBox": { "w": 1312, "h": 110, "sourceNodeId": "6647:245", "includesStrokeAndShadow": true }, "figma": { "nodeId": "6647:245", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/?node-id=6647-245", "sheet": "14 · Market" }, "authored": false, "description": "The tug-of-war. One bar, two territories: gold gradient vs violet gradient meeting at an arrowhead seam, dot pattern fading on the gold cap, angular bite cuts on both ends, drawn shadow +8. The seam position IS the data - percentages ride the caps. Textures are pattern fills on the bar geometry itself so no browser can leak them past the silhouette.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-battlebar.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "campaign-reference-art", "css": ".pc-battlebar{ position:relative; width:100%; max-width:1298px; aspect-ratio:1298/94;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-battlebar.svg\") 50% 50% / 100% 100% no-repeat; }\n/* In product, draw the two territory paths and move the seam with data;\n the SVG here is the 50/50 reference snapshot. */", "plannedProps": [], "use": "The page's single scoreboard: one bar per battle, full content width, percentages living on the caps.", "notUse": "Never render two battle bars on one page, and never animate the seam without easing - the overshoot (backOut) is part of the language.", "insteadUse": null, "pairsWith": [ "Display / Battle / DurationChip", "Region / Battle / SeedBand" ] }, { "id": "region-battle-marketrow", "sourceId": "mm:marketrow", "name": "Region / Battle / MarketRow", "class": "Region", "domain": "Battle", "size": { "w": 596, "h": 70 }, "exportBox": null, "figma": { "nodeId": "mm:marketrow", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/", "sheet": "14 · Market" }, "authored": false, "description": "One market inside a seed column: DurationChip leading, the market volume in mono, then the higher/lower SlatButton pair (sm). The row is a composition - every part is its own component; this entry documents the layout contract (chip at 0, value at x120, buttons right-aligned at 246/436).", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-marketrow.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": ".pc-marketrow{ display:grid; grid-template-columns:104px 1fr 168px 168px; gap:22px;\n align-items:center; width:596px; }\n.pc-marketrow .vol{ font:700 25px/1 \"JetBrains Mono\",monospace; color:#fff; font-variant-numeric:tabular-nums }", "plannedProps": [], "use": "Three rows per seed column (1/5/10 minute markets), chips toned to the column.", "notUse": "Don't reorder the cells - chip leads, buttons trail; the scan order is duration, stake, act.", "insteadUse": null, "pairsWith": [ "Display / Battle / DurationChip", "Control / Battle / SlatButton" ] }, { "id": "region-battle-winnerbanner", "sourceId": "mm:winnerbanner", "name": "Region / Battle / WinnerBanner", "class": "Region", "domain": "Battle", "size": { "w": 720, "h": 100 }, "exportBox": null, "figma": { "nodeId": "mm:winnerbanner", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/", "sheet": "14 · Market" }, "authored": false, "description": "The paper status strip above the battle: star badge, 'SEED 01 IS WINNING' in ink, and the live gap ('ONLY $8,593 TO TAKE THE LEAD') with the amount in orange mono. Paper #EFE9D8 on the dark stage so the standings read before any card does. Recreated to the v2 spec (the shipped banner is page artwork).", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-winnerbanner.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": ".pc-winnerbanner{ position:relative; width:720px; height:100px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-winnerbanner.svg\") 50% 50% / 100% 100% no-repeat;\n display:flex; align-items:center; gap:18px; padding:0 40px 0 96px;\n font:800 30px/1 \"Barlow Condensed\",Impact,sans-serif; font-style:italic;\n text-transform:uppercase; color:#141414; }\n.pc-winnerbanner .gap{ font:700 22px/1 \"JetBrains Mono\",monospace; color:#FF7A00 }", "plannedProps": [], "use": "Directly under the hero, updated live with the volume race; the star flips to the leading seed's tone.", "notUse": "Not a toast and not an alert - it never disappears, it re-words.", "insteadUse": null, "pairsWith": [ "Region / Battle / BattleBar" ] }, { "id": "region-battle-votecard", "sourceId": "6651:22", "name": "Region / Battle / VoteCard", "class": "Region", "domain": "Battle", "size": { "w": 432, "h": 400 }, "exportBox": null, "figma": { "nodeId": "6651:22", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/?node-id=6651-22", "sheet": "13 · Cards" }, "authored": false, "description": "The qualifier vote card. One torn-edge silhouette (19-vertex path, 1:1 from Figma) in two states: unselected - near-black #161514 face, grey outline, violet RANK ribbon, coin octagon rimmed in the coin's tone; selected - gold gradient #FAD140-#EB660D, orange outline and ribbon, check badge, sparkle. Decor lightning bands are clipped to the card path with offsets baked into the path data (Safari ignores clipPath transforms).", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-votecard.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "campaign-reference-art", "css": ".pc-votecard{ position:relative; width:432px; height:400px; cursor:pointer;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-votecard.svg\") 50% 50% / 100% 100% no-repeat; }\n/* hover: draw an orange ring ON the card path (an SVG stroke), never an outline box */", "plannedProps": [], "use": "Exactly one card is selected at all times; clicking another card moves the full gold treatment there and returns the old one to dark.", "notUse": "Never mark selection with only a ring or only colour - the state swap is face + ribbon + badge + rim together.", "insteadUse": null, "pairsWith": [ "Display / Battle / RankRibbon", "Display / Battle / CheckBadge", "Display / Battle / CoinBadge" ] }, { "id": "region-battle-ticketplate", "sourceId": "6651:98", "name": "Region / Battle / TicketPlate", "class": "Region", "domain": "Battle", "size": { "w": 1266, "h": 300 }, "exportBox": null, "figma": { "nodeId": "6651:98", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/?node-id=6651-98", "sheet": "13 · Cards" }, "authored": false, "description": "The 'YOUR PICK' ticket at the bottom of the qualifier: a full-width torn panel that mirrors the current selection - coin octagon, coin letter and name in display caps, the CAST MY ONE VOTE CTASlat, and the immutability line. The plate here is the dsPanel chassis at ticket size; on the shipped page the interior updates live when a vote card is clicked.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-ticketplate.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "campaign-reference-art", "css": ".pc-ticketplate{ position:relative; width:100%; max-width:1266px; aspect-ratio:1266/300;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-ticketplate.svg\") 50% 50% / 100% 100% no-repeat; }", "plannedProps": [], "use": "One per qualifier page, pinned after the vote grid; it is the receipt of the current selection.", "notUse": "The ticket never scrolls away from its CTA - plate and CAST button live together.", "insteadUse": null, "pairsWith": [ "Control / Battle / CTASlat", "Display / Battle / CoinBadge" ] }, { "id": "display-battle-coinbadge", "sourceId": "mm:coinbadge", "name": "Display / Battle / CoinBadge", "class": "Display", "domain": "Battle", "size": { "w": 160, "h": 160 }, "exportBox": null, "figma": { "nodeId": "mm:coinbadge", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/", "sheet": "11 · Badges & Tags" }, "authored": false, "description": "A meme coin as a badge: regular octagon (rotated -67.5deg so a flat edge sits top), near-black face, 6px rim in the coin's tone, the ticker letter in Barlow 800 italic. Selected state swaps the rim to orange and the letter to white. The same octagon at small size plus the lock icon forms the locked All-Stars row.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-coinbadge.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": ".pc-coinbadge{ position:relative; width:160px; height:160px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-coinbadge.svg\") 50% 50% / 100% 100% no-repeat;\n display:flex; align-items:center; justify-content:center;\n font:italic 800 64px/1 \"Barlow Condensed\",Impact,sans-serif; }", "plannedProps": [], "use": "Anywhere a coin is an actor: vote cards, All-Stars roster, battle corners, the pick ticket.", "notUse": "The octagon is the coin frame - do not put coins in circles or hexes; those mean other things in this system.", "insteadUse": null, "pairsWith": [ "Region / Battle / VoteCard", "Display / Battle / RankRibbon" ] }, { "id": "display-battle-rankribbon", "sourceId": "mm:rankribbon", "name": "Display / Battle / RankRibbon", "class": "Display", "domain": "Battle", "size": { "w": 98, "h": 46 }, "exportBox": null, "figma": { "nodeId": "mm:rankribbon", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/", "sheet": "11 · Badges & Tags" }, "authored": false, "description": "The swallow-tail rank flag pinned to a vote card's top-left, breaking the card edge by design. RANK eyebrow + #N in display caps. Violet #6330D3 at rest; the selected card's ribbon turns orange #FF7A00 with ink text.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-rankribbon.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": ".pc-rankribbon{ position:relative; width:98px; height:46px; padding:6px 0 0 10px;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-rankribbon.svg\") 0 0 / 100% 100% no-repeat;\n color:#fff; font-family:\"Barlow Condensed\",Impact,sans-serif; text-transform:uppercase; }\n.pc-rankribbon .eyebrow{ font-size:14px; font-weight:600; letter-spacing:2px; display:block }\n.pc-rankribbon .n{ font-size:23px; font-weight:800; font-style:italic }", "plannedProps": [], "use": "Pinned overlapping the card's left edge at y+20 - the overlap is the point, it staples the flag to the card.", "notUse": "Not a badge for arbitrary numbers: RANK is ordinal standing only.", "insteadUse": null, "pairsWith": [ "Region / Battle / VoteCard" ] }, { "id": "display-battle-checkbadge", "sourceId": "mm:checkbadge", "name": "Display / Battle / CheckBadge", "class": "Display", "domain": "Battle", "size": { "w": 52, "h": 52 }, "exportBox": null, "figma": { "nodeId": "mm:checkbadge", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/", "sheet": "11 · Badges & Tags" }, "authored": false, "description": "The selection seal: orange hexagon, black comic outline, ink check. Appears only on the selected VoteCard's top-right corner, paired with a small sparkle. It is a stamp, not a control - clicking it does nothing.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-checkbadge.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": ".pc-checkbadge{ width:52px; height:52px; display:inline-block;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-checkbadge.svg\") 50% 50% / 100% 100% no-repeat; }", "plannedProps": [], "use": "Only ever on the selected card, top-right, with the sparkle at its lower-left.", "notUse": "Never use as a checkbox - selection is made by clicking the card, the badge just certifies it.", "insteadUse": null, "pairsWith": [ "Region / Battle / VoteCard" ] }, { "id": "display-battle-livetag", "sourceId": "mm:livetag", "name": "Display / Battle / LiveTag", "class": "Display", "domain": "Battle", "size": { "w": 256, "h": 79 }, "exportBox": null, "figma": { "nodeId": "mm:livetag", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/", "sheet": "11 · Badges & Tags" }, "authored": false, "description": "The LIVE lockup from the battle hero: plate-red slat, white LIVE caps and the white dot that blinks at 600ms - on the shipped pages the dot is a live overlay pulsing on top of the baked artwork dot, pixel-aligned by sampling. 1:1 export from the v2 hero.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-livetag.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": ".pc-livetag{ width:256px; height:79px; display:inline-block; position:relative;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-livetag.svg\") 50% 50% / 100% 100% no-repeat; }\n.pc-livetag::after{ content:\"\"; position:absolute; left:13.5%; top:47%;\n width:16px; height:16px; border-radius:50%; background:#fff;\n animation:pc-blink 1.2s steps(1) infinite; }\n@keyframes pc-blink{ 50%{ opacity:.25 } }\n@media (prefers-reduced-motion:reduce){ .pc-livetag::after{ animation:none } }", "plannedProps": [], "use": "One per live surface, in the hero; the blink is the only motion the tag is allowed.", "notUse": "Never show LIVE without the blinking dot wired to real liveness - a static LIVE tag is a lie.", "insteadUse": null, "pairsWith": [ "Display / Battle / DurationChip" ] }, { "id": "display-battle-medallion", "sourceId": "mm:medallion", "name": "Display / Battle / Medallion", "class": "Display", "domain": "Battle", "size": { "w": 425, "h": 436 }, "exportBox": null, "figma": { "nodeId": "mm:medallion", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/", "sheet": "12 · Indicators" }, "authored": false, "description": "The qualifier's sun medallion: spiked burst in the two golds, split octagon core (orange halftone / violet halftone) and the yellow bolt. 1:1 export from the hero artwork. On the page it carries a 3.2s heartbeat scale (1 to 1.03) - the only motion, nothing rotates.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-medallion.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": ".pc-medallion{ width:425px; height:436px; display:inline-block;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-medallion.svg\") 50% 50% / 100% 100% no-repeat;\n transform-origin:center; animation:pc-beat 3.2s ease-in-out 1s infinite; }\n@keyframes pc-beat{ 0%,100%{transform:scale(1)} 5%{transform:scale(1.03)} 10%{transform:scale(1)} }\n@media (prefers-reduced-motion:reduce){ .pc-medallion{ animation:none } }", "plannedProps": [], "use": "The qualifier hero's emblem, right side, over the ray field.", "notUse": "Nothing in this system rotates - the medallion beats, it never spins.", "insteadUse": null, "pairsWith": [ "Region / Battle / VoteCard" ] }, { "id": "display-battle-kicker", "sourceId": "mm:kicker", "name": "Display / Battle / Kicker", "class": "Display", "domain": "Battle", "size": { "w": 319, "h": 108 }, "exportBox": null, "figma": { "nodeId": "mm:kicker", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/", "sheet": "12 · Indicators" }, "authored": false, "description": "The 'MEME MADNESS' kicker plate from the battle hero - masked title plate with the tone overlay baked, 1:1 export from the v2 artwork.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-kicker.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": ".pc-kicker{ width:319px; height:108px; display:inline-block;\n background:url(\"https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-kicker.svg\") 50% 50% / 100% 100% no-repeat; }", "plannedProps": [], "use": "Tops the battle hero as the franchise mark.", "notUse": "Not a page title - it kicks the title, it isn't one.", "insteadUse": null, "pairsWith": [ "Display / Battle / LiveTag" ] }, { "id": "foundation-battle-lightningband", "sourceId": "mm:lightningband", "name": "Foundation / Battle / LightningBand", "class": "Foundation", "domain": "Battle", "size": { "w": 228, "h": 320 }, "exportBox": null, "figma": { "nodeId": "mm:lightningband", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/", "sheet": "01 · Foundations" }, "authored": false, "description": "The diagonal lightning decor band: a kinked 30px band that climbs the card with knees at 44% and 52% of its length. Drawn in pairs (one light, one lighter, +58px apart), always clipped to the parent plate's path - offsets baked into the path data so WebKit clips it too. Gold pair on selected cards, near-black pair on dark cards.", "shapeSvg": "https://pumpcade-design-system.netlify.app/assets/svg/shape/battle-lightningband.svg", "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Foundation - always clip to the host plate's silhouette */\n.pc-lightningband{ position:absolute; inset:0; pointer-events:none; }\n/* build: bandQ(x, yBottom, length) - knees at 44%/52% of length, 30px wide */", "plannedProps": [], "use": "Decor inside plates and cards, in pairs, low contrast against the face.", "notUse": "Never let a band escape its plate - if you can see it past the torn edge, the clip is wrong.", "insteadUse": null, "pairsWith": [ "Region / Battle / VoteCard" ] }, { "id": "icon-chevron-right", "sourceId": "mm:icon-chevron-right", "name": "Icon / chevron-right", "class": "Foundation", "domain": "Core", "size": { "w": 32, "h": 32 }, "exportBox": null, "figma": { "nodeId": "mm:icon-chevron-right", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/", "sheet": "02 · Icons" }, "authored": false, "description": "The forward glyph - the '›' that ends every CTASlat label and points a market row onward.", "shapeSvg": null, "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Icon / chevron-right - 32 x 32 */\n.pc-icon-chevron-right{ width:32px; height:32px; display:inline-block; vertical-align:middle }\n\n/* INLINE the SVG rather than using if you need to recolour it. */", "plannedProps": [], "use": "Ends CTA labels; points forward in rows and breadcrumbs.", "notUse": "Not a caret for dropdowns - that is caret-down's job.", "insteadUse": null, "pairsWith": [] }, { "id": "icon-lock", "sourceId": "mm:icon-lock", "name": "Icon / lock", "class": "Foundation", "domain": "Core", "size": { "w": 32, "h": 32 }, "exportBox": null, "figma": { "nodeId": "mm:icon-lock", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/", "sheet": "02 · Icons" }, "authored": false, "description": "Locked state for All-Stars coins that are not in today's battle. Body ink, yellow keyhole.", "shapeSvg": null, "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Icon / lock - 32 x 32 */\n.pc-icon-lock{ width:32px; height:32px; display:inline-block; vertical-align:middle }\n\n/* INLINE the SVG rather than using if you need to recolour it. */", "plannedProps": [], "use": "On a CoinBadge corner to say 'not in play today'.", "notUse": "Never lock a control the user could otherwise press - hide or disable it instead.", "insteadUse": null, "pairsWith": [] }, { "id": "icon-bolt", "sourceId": "mm:icon-bolt", "name": "Icon / bolt", "class": "Foundation", "domain": "Core", "size": { "w": 32, "h": 32 }, "exportBox": null, "figma": { "nodeId": "mm:icon-bolt", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/", "sheet": "02 · Icons" }, "authored": false, "description": "The battle bolt from the medallion core - energy, a strike, the tournament itself.", "shapeSvg": null, "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Icon / bolt - 32 x 32 */\n.pc-icon-bolt{ width:32px; height:32px; display:inline-block; vertical-align:middle }\n\n/* INLINE the SVG rather than using if you need to recolour it. */", "plannedProps": [], "use": "Brand accents, the medallion core, empty-state flair.", "notUse": "Not a warning glyph - alert keeps that job.", "insteadUse": null, "pairsWith": [] }, { "id": "icon-spark", "sourceId": "mm:icon-spark", "name": "Icon / spark", "class": "Foundation", "domain": "Core", "size": { "w": 32, "h": 32 }, "exportBox": null, "figma": { "nodeId": "mm:icon-spark", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/", "sheet": "02 · Icons" }, "authored": false, "description": "The 4-point sparkle used for clash bursts and the selected-card glint.", "shapeSvg": null, "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Icon / spark - 32 x 32 */\n.pc-icon-spark{ width:32px; height:32px; display:inline-block; vertical-align:middle }\n\n/* INLINE the SVG rather than using if you need to recolour it. */", "plannedProps": [], "use": "Clash FX, selection glints, celebratory accents.", "notUse": "Not a loading indicator.", "insteadUse": null, "pairsWith": [] }, { "id": "icon-refresh", "sourceId": "mm:icon-refresh", "name": "Icon / refresh", "class": "Foundation", "domain": "Core", "size": { "w": 32, "h": 32 }, "exportBox": null, "figma": { "nodeId": "mm:icon-refresh", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/", "sheet": "02 · Icons" }, "authored": false, "description": "Manual refresh for live volumes; the arc never spins on its own - nothing in this system rotates.", "shapeSvg": null, "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Icon / refresh - 32 x 32 */\n.pc-icon-refresh{ width:32px; height:32px; display:inline-block; vertical-align:middle }\n\n/* INLINE the SVG rather than using if you need to recolour it. */", "plannedProps": [], "use": "A manual re-fetch affordance next to live data.", "notUse": "Never auto-rotate it as a spinner - use the skeleton treatment for loading.", "insteadUse": null, "pairsWith": [] }, { "id": "icon-octagon", "sourceId": "mm:icon-octagon", "name": "Icon / octagon", "class": "Foundation", "domain": "Core", "size": { "w": 32, "h": 32 }, "exportBox": null, "figma": { "nodeId": "mm:icon-octagon", "url": "https://www.figma.com/design/6E7Dfwlfl3mHJ7T5NeWNbu/", "sheet": "02 · Icons" }, "authored": false, "description": "The coin frame outline - the CoinBadge silhouette as a bare icon.", "shapeSvg": null, "preview": null, "implementation": "historical-css-specimen", "sourceKind": "catalogue-reference", "css": "/* Icon / octagon - 32 x 32 */\n.pc-icon-octagon{ width:32px; height:32px; display:inline-block; vertical-align:middle }\n\n/* INLINE the SVG rather than using if you need to recolour it. */", "plannedProps": [], "use": "Placeholders and pickers that reference a coin slot.", "notUse": "Not a stop sign - it is a frame, not a signal.", "insteadUse": null, "pairsWith": [] } ], "currentImplementation": { "package": "packages/cade-v2", "preview": "https://pumpcade-design-system.netlify.app/preview/", "components": "https://pumpcade-design-system.netlify.app/preview/components", "integration": "Presentation components with typed fixtures and callbacks; client data/auth/trading adapters are separate." }, "deliveryManifest": "https://pumpcade-design-system.netlify.app/data/delivery.json" }