VibeCheck
https://poolsuite.net

Page structure & technical metrics

Words

45

Action candidates

50

Images

125

HTML

4 KB

Copy

Title chars
44
Meta chars
129
H1
0
H2
30

Action

Primary

Guestbook

Forms
2/ 2 fields
On-site links
12
Off-site links
29

Security & metadata

HTTPS
yes
HSTS
yes
CSP
no
nosniff
no
viewport
yes
Icon
yes
JSON-LD
yes
Analytics
Plausible

Page

Vue / Tailwind

Scripts
8 ext / 3 inline
Alt
74 missing
Lang
en
Third-party hosts
3

Lighthouse

Simulated mobile · Performance

53 / 100

2026-09-05 · Lab data, not field data.

View details

Simulated mobile · Lab data, not field data
2026-09-05T04:00:53.468Z · Lighthouse 13.4.1

Performance53/ 100
Accessibility73/ 100
Best practices77/ 100
SEO91/ 100
LCP · Largest content13,150 ms
CLS · Layout shift0.001
TBT · Blocking time262 ms
FCP · First content3,572 ms
SI · Speed index12,932 ms

Results vary by server, network and environment, independently of taste/conversion scores. Diagnostics retain Lighthouse wording.

Uses third-party cookies

1 cookie found

Third-party cookies may be blocked in some contexts. Learn more about preparing for third-party cookie restrictions.

Elements & resources
{
  "type": "table",
  "items": [
    {
      "url": "https://www.facebook.com/tr/?id=1671765563059003&ev=PageView&dl=https%3A%2F%2Fpoolsuite.net%2F&rl=&if=false&ts=1788580856184&iw=false&sw=412&sh=823&v=2.9.393&r=stable&ec=0&o=4126&aems=0%3B0&fbp=fb.1.1788580856180.761320593293037177&cs_est=true&ler=empty&cdl=API_unavailable&pmd[title]=Poolsuite%20%E2%98%BC&pmd[locale]=en&pmd[description]=The%20ultra-summer%20internet%20radio%20station%2C%20playing%20an%20infinity%20pool%20of%20summer%20sounds%2024%2F7.%20Swimwear%20optional.%20Formerly%20Poolside%20FM.&plt=1630.7999999970198&iss=1&imft=1&tz=480&it=1788580855308&coo=false&chmd=moto%20g%20power%20(2022)&chpv=11.0&chfv=undefined&expv2[0]=pl0&expv2[1]=el2&expv2[2]=bc1&expv2[3]=ra2&expv2[4]=rp2&expv2[5]=im1&expv2[6]=hf1&expv2[7]=sd1&expv2[8]=sp1&expv2[9]=ek1&expv2[10]=pc1&expv2[11]=gs1&expv2[12]=zs1&expv2[13]=cp1&expv2[14]=es1&expv2[15]=ac1&expv2[16]=so1&expv2[17]=wc1&expv2[18]=la1&expv2[19]=sf1&expv2[20]=da1&expv2[21]=io1&expv2[22]=ae1&expv2[23]=sx1&expv2[24]=if1&expv2[25]=fd1&expv2[26]=bg1&expv2[27]=mg1&expv2[28]=kl1&expv2[29]=sg1&expv2[30]=mk1&expv2[31]=sn1&expv2[32]=ec1&expv2[33]=mp1&expv2[34]=ps1&expv2[35]=fx1&expv2[36]=vt1&expv2[37]=bu0&rqm=GET",
      "name": "fr"
    }
  ],
  "headings": [
    {
      "key": "name",
      "label": "Name",
      "valueType": "text"
    },
    {
      "key": "url",
      "label": "URL",
      "valueType": "url"
    }
  ]
}

Minimize main-thread work

2.1 s

Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this. Learn how to minimize main-thread work

Elements & resources
{
  "type": "table",
  "items": [
    {
      "group": "scriptEvaluation",
      "duration": 1097.5919999999953,
      "groupLabel": "Script Evaluation"
    },
    {
      "group": "other",
      "duration": 486.13600000000577,
      "groupLabel": "Other"
    },
    {
      "group": "scriptParseCompile",
      "duration": 301.596,
      "groupLabel": "Script Parsing & Compilation"
    },
    {
      "group": "styleLayout",
      "duration": 140.8880000000002,
      "groupLabel": "Style & Layout"
    },
    {
      "group": "paintCompositeRender",
      "duration": 47.063999999999965,
      "groupLabel": "Rendering"
    },
    {
      "group": "parseHTML",
      "duration": 15.355999999999995,
      "groupLabel": "Parse HTML & CSS"
    },
    {
      "group": "garbageCollection",
      "duration": 9.775999999999993,
      "groupLabel": "Garbage Collection"
    }
  ],
  "headings": [
    {
      "key": "groupLabel",
      "label": "Category",
      "valueType": "text"
    },
    {
      "key": "duration",
      "label": "Time Spent",
      "valueType": "ms",
      "granularity": 1
    }
  ],
  "sortedBy": [
    "duration"
  ]
}

Image elements do not have explicit `width` and `height`

Set an explicit width and height on image elements to reduce layout shifts and improve CLS. Learn how to set image dimensions

Elements & resources
{
  "type": "table",
  "items": [
    {
      "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAQCAYAAAAvf+5AAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAA…",
      "node": {
        "lhId": "1-4-IMG",
        "path": "1,HTML,1,BODY,1,DIV,0,DIV,3,HEADER,1,ASIDE,0,A,1,IMG",
        "type": "node",
        "snippet": "<img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAQCAYAAAAvf+5AAAAACXBI…\" alt=\"Get the app\">",
        "selector": "header.h-8 > aside.h-full > a.button-component > img",
        "nodeLabel": "Get the app",
        "boundingRect": {
          "top": 12,
          "left": 312,
          "right": 322,
          "width": 10,
          "bottom": 28,
          "height": 16
        }
      }
    },
    {
      "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABlBMVEUAAAAAAAClZ7nPAAAAAXRST…",
      "node": {
        "lhId": "1-2-IMG",
        "path": "1,HTML,1,BODY,1,DIV,0,DIV,7,DIV,0,DIV,0,BUTTON,1,IMG",
        "type": "node",
        "snippet": "<img class=\"w-[5px] pointer-events-none -rotate-90 md:rotate-0\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABlBM…\">",
        "selector": "div.min-w-[372px] > div.h-full > button.button-component > img.w-[5px]",
        "nodeLabel": "div.min-w-[372px] > div.h-full > button.button-component > img.w-[5px]",
        "boundingRect": {
          "top": 776,
          "left": 18,
          "right": 23,
          "width": 5,
          "bottom": 781,
          "height": 5
        }
      }
    },
    {
      "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABlBMVEUAAAAAAAClZ7nPAAAAAXRST…",
      "node": {
        "lhId": "1-3-IMG",
        "path": "1,HTML,1,BODY,1,DIV,0,DIV,7,DIV,0,DIV,2,BUTTON,1,IMG",
        "type": "node",
        "snippet": "<img class=\"w-[5px] -rotate-90 md:rotate-0\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABlBM…\">",
        "selector": "div.min-w-[372px] > div.h-full > button.button-component > img.w-[5px]",
        "nodeLabel": "div.min-w-[372px] > div.h-full > button.button-component > img.w-[5px]",
        "boundingRect": {
          "top": 776,
          "left": 390,
          "right": 395,
          "width": 5,
          "bottom": 781,
          "height": 5
        }
      }
    }
  ],
  "headings": [
    {
      "key": "node",
      "label": "",
      "valueType": "node"
    },
    {
      "key": "url",
      "label": "URL",
      "valueType": "url"
    }
  ]
}

Missing source maps for large first-party JavaScript

Source maps translate minified code to the original source code. This helps developers debug in production. In addition, Lighthouse is able to provide further insights. Consider deploying source maps to take advantage of these benefits. Learn more about source maps.

Elements & resources
{
  "type": "table",
  "items": [
    {
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "error": "Large JavaScript file is missing a source map"
          }
        ]
      },
      "scriptUrl": "https://poolsuite.net/js/view-DefaultPage-vue.809c33fa.js"
    }
  ],
  "headings": [
    {
      "key": "scriptUrl",
      "label": "URL",
      "valueType": "url",
      "subItemsHeading": {
        "key": "error"
      }
    },
    {
      "key": "sourceMapUrl",
      "label": "Map URL",
      "valueType": "url"
    }
  ]
}

Buttons do not have an accessible name

When a button doesn't have an accessible name, screen readers announce it as "button", making it unusable for users who rely on screen readers. Learn how to make buttons more accessible.

Elements & resources
{
  "type": "table",
  "items": [
    {
      "node": {
        "lhId": "1-0-BUTTON",
        "path": "1,HTML,1,BODY,1,DIV,0,DIV,7,DIV,0,DIV,0,BUTTON",
        "type": "node",
        "snippet": "<button class=\"button-component focus:outline-none group active:top-px active:border-b-0 …\" disabled=\"\">",
        "selector": "div.flex > div.min-w-[372px] > div.h-full > button.button-component",
        "nodeLabel": "div.flex > div.min-w-[372px] > div.h-full > button.button-component",
        "explanation": "Fix any of the following:\n  Element does not have inner text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element does not have an implicit (wrapped) <label>\n  Element does not have an explicit <label>\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\"",
        "boundingRect": {
          "top": 745,
          "left": 12,
          "right": 28,
          "width": 16,
          "bottom": 811,
          "height": 66
        }
      }
    },
    {
      "node": {
        "lhId": "1-1-BUTTON",
        "path": "1,HTML,1,BODY,1,DIV,0,DIV,7,DIV,0,DIV,2,BUTTON",
        "type": "node",
        "snippet": "<button class=\"button-component focus:outline-none group active:top-px active:border-b-0 …\">",
        "selector": "div.flex > div.min-w-[372px] > div.h-full > button.button-component",
        "nodeLabel": "div.flex > div.min-w-[372px] > div.h-full > button.button-component",
        "explanation": "Fix any of the following:\n  Element does not have inner text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element does not have an implicit (wrapped) <label>\n  Element does not have an explicit <label>\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\"",
        "boundingRect": {
          "top": 745,
          "left": 384,
          "right": 400,
          "width": 16,
          "bottom": 811,
          "height": 66
        }
      }
    }
  ],
  "headings": [
    {
      "key": "node",
      "label": "Failing Elements",
      "valueType": "node",
      "subItemsHeading": {
        "key": "relatedNode",
        "valueType": "node"
      }
    }
  ],
  "debugData": {
    "tags": [
      "cat.name-role-value",
      "wcag2a",
      "wcag412",
      "section508",
      "section508.22.a",
      "TTv5",
      "TT6.a",
      "EN-301-549",
      "EN-9.4.1.2",
      "ACT",
      "RGAAv4",
      "RGAA-11.9.1"
    ],
    "type": "debugdata",
    "impact": "critical"
  }
}

Image elements do not have `[alt]` attributes

Informative elements should aim for short, descriptive alternate text. Decorative elements can be ignored with an empty alt attribute. Learn more about the `alt` attribute.

Elements & resources
{
  "type": "table",
  "items": [
    {
      "node": {
        "lhId": "1-2-IMG",
        "path": "1,HTML,1,BODY,1,DIV,0,DIV,7,DIV,0,DIV,0,BUTTON,1,IMG",
        "type": "node",
        "snippet": "<img class=\"w-[5px] pointer-events-none -rotate-90 md:rotate-0\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABlBM…\">",
        "selector": "div.min-w-[372px] > div.h-full > button.button-component > img.w-[5px]",
        "nodeLabel": "div.min-w-[372px] > div.h-full > button.button-component > img.w-[5px]",
        "explanation": "Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\"",
        "boundingRect": {
          "top": 776,
          "left": 18,
          "right": 23,
          "width": 5,
          "bottom": 781,
          "height": 5
        }
      }
    },
    {
      "node": {
        "lhId": "1-3-IMG",
        "path": "1,HTML,1,BODY,1,DIV,0,DIV,7,DIV,0,DIV,2,BUTTON,1,IMG",
        "type": "node",
        "snippet": "<img class=\"w-[5px] -rotate-90 md:rotate-0\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABlBM…\">",
        "selector": "div.min-w-[372px] > div.h-full > button.button-component > img.w-[5px]",
        "nodeLabel": "div.min-w-[372px] > div.h-full > button.button-component > img.w-[5px]",
        "explanation": "Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\"",
        "boundingRect": {
          "top": 776,
          "left": 390,
          "right": 395,
          "width": 5,
          "bottom": 781,
          "height": 5
        }
      }
    }
  ],
  "headings": [
    {
      "key": "node",
      "label": "Failing Elements",
      "valueType": "node",
      "subItemsHeading": {
        "key": "relatedNode",
        "valueType": "node"
      }
    }
  ],
  "debugData": {
    "tags": [
      "cat.text-alternatives",
      "wcag2a",
      "wcag111",
      "section508",
      "section508.22.a",
      "TTv5",
      "TT7.a",
      "TT7.b",
      "EN-301-549",
      "EN-9.1.1.1",
      "ACT",
      "RGAAv4",
      "RGAA-1.1.1"
    ],
    "type": "debugdata",
    "impact": "critical"
  }
}

Document does not have a main landmark.

One main landmark helps screen reader users navigate a web page. Learn more about landmarks.

Elements & resources
{
  "type": "table",
  "items": [
    {
      "node": {
        "lhId": "1-5-HTML",
        "path": "1,HTML",
        "type": "node",
        "snippet": "<html lang=\"en\" style=\"--primary: #F9F0E9; --secondary: #F9F0E9; --tertiary: #FCF4C5;\">",
        "selector": "html",
        "nodeLabel": "html",
        "explanation": "Fix all of the following:\n  Document does not have a main landmark",
        "boundingRect": {
          "top": 0,
          "left": 0,
          "right": 412,
          "width": 412,
          "bottom": 823,
          "height": 823
        }
      }
    }
  ],
  "headings": [
    {
      "key": "node",
      "label": "Failing Elements",
      "valueType": "node",
      "subItemsHeading": {
        "key": "relatedNode",
        "valueType": "node"
      }
    }
  ],
  "debugData": {
    "tags": [
      "cat.semantics",
      "best-practice"
    ],
    "type": "debugdata",
    "impact": "moderate"
  }
}

Touch targets do not have sufficient size or spacing.

Touch targets with sufficient size and spacing help users who may have difficulty targeting small controls to activate the targets. Learn more about touch targets.

Elements & resources
{
  "type": "table",
  "items": [
    {
      "node": {
        "lhId": "1-6-BUTTON",
        "path": "1,HTML,1,BODY,1,DIV,0,DIV,6,SECTION,0,DIV,0,DIV,0,DIV,0,DIV,0,BUTTON",
        "type": "node",
        "snippet": "<button class=\"w-[18px] h-[18px] flex items-center justify-center -ml-px active:bg-white …\">",
        "selector": "div.h-full > div#component-is-fm > div.drag-header > button.w-[18px]",
        "nodeLabel": "Close icon",
        "explanation": "Fix any of the following:\n  Target has insufficient size (18px by 18px, should be at least 24px by 24px)\n  Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 18px instead of at least 24px.",
        "boundingRect": {
          "top": 66,
          "left": 43,
          "right": 61,
          "width": 18,
          "bottom": 84,
          "height": 18
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "relatedNode": {
              "lhId": "1-7-BUTTON",
              "path": "1,HTML,1,BODY,1,DIV,0,DIV,6,SECTION,0,DIV,0,DIV,0,DIV,0,DIV,1,BUTTON",
              "type": "node",
              "snippet": "<button class=\"w-[18px] h-[18px] flex items-center group justify-center ml-[3px] rounded-…\">",
              "selector": "div.h-full > div#component-is-fm > div.drag-header > button.w-[18px]",
              "nodeLabel": "Toggle TV icon",
              "boundingRect": {
                "top": 66,
                "left": 64,
                "right": 82,
                "width": 18,
                "bottom": 84,
                "height": 18
              }
            }
          }
        ]
      }
    },
    {
      "node": {
        "lhId": "1-7-BUTTON",
        "path": "1,HTML,1,BODY,1,DIV,0,DIV,6,SECTION,0,DIV,0,DIV,0,DIV,0,DIV,1,BUTTON",
        "type": "node",
        "snippet": "<button class=\"w-[18px] h-[18px] flex items-center group justify-center ml-[3px] rounded-…\">",
        "selector": "div.h-full > div#component-is-fm > div.drag-header > button.w-[18px]",
        "nodeLabel": "Toggle TV icon",
        "explanation": "Fix any of the following:\n  Target has insufficient size (18px by 18px, should be at least 24px by 24px)\n  Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 18px instead of at least 24px.",
        "boundingRect": {
          "top": 66,
          "left": 64,
          "right": 82,
          "width": 18,
          "bottom": 84,
          "height": 18
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "relatedNode": {
              "lhId": "1-6-BUTTON",
              "path": "1,HTML,1,BODY,1,DIV,0,DIV,6,SECTION,0,DIV,0,DIV,0,DIV,0,DIV,0,BUTTON",
              "type": "node",
              "snippet": "<button class=\"w-[18px] h-[18px] flex items-center justify-center -ml-px active:bg-white …\">",
              "selector": "div.h-full > div#component-is-fm > div.drag-header > button.w-[18px]",
              "nodeLabel": "Close icon",
              "boundingRect": {
                "top": 66,
                "left": 43,
                "right": 61,
                "width": 18,
                "bottom": 84,
                "height": 18
              }
            }
          }
        ]
      }
    }
  ],
  "headings": [
    {
      "key": "node",
      "label": "Failing Elements",
      "valueType": "node",
      "subItemsHeading": {
        "key": "relatedNode",
        "valueType": "node"
      }
    }
  ],
  "debugData": {
    "tags": [
      "cat.sensory-and-visual-cues",
      "wcag22aa",
      "wcag258"
    ],
    "type": "debugdata",
    "impact": "serious"
  }
}

Avoid enormous network payloads

Total size was 3,139 KiB

Large network payloads cost users real money and are highly correlated with long load times. Learn how to reduce payload sizes.

Elements & resources
{
  "type": "table",
  "items": [
    {
      "url": "https://poolsuite.net/js/view-DefaultPage-vue.809c33fa.js",
      "totalBytes": 853664
    },
    {
      "url": "https://poolsuite.net/vacation/4.jpg",
      "totalBytes": 424805
    },
    {
      "url": "https://poolsuite.net/vacation/1.jpg",
      "totalBytes": 392706
    },
    {
      "url": "https://poolsuite.net/vacation/3.jpg",
      "totalBytes": 248364
    },
    {
      "url": "https://poolsuite.net/vacation/2.jpg",
      "totalBytes": 192205
    },
    {
      "url": "https://poolsuite.net/vacation/5.jpg",
      "totalBytes": 164521
    },
    {
      "url": "https://api.poolsuite.net/playlists",
      "totalBytes": 139905
    },
    {
      "url": "https://poolsuite.net/js/3099.2ed6c467.js",
      "totalBytes": 122484
    },
    {
      "url": "https://connect.facebook.net/en_US/fbevents.js",
      "totalBytes": 111611
    },
    {
      "url": "https://poolsuite.net/js/chunk-vendors.324363d8.js",
      "totalBytes": 94941
    }
  ],
  "headings": [
    {
      "key": "url",
      "label": "URL",
      "valueType": "url"
    },
    {
      "key": "totalBytes",
      "label": "Transfer Size",
      "valueType": "bytes"
    }
  ],
  "sortedBy": [
    "totalBytes"
  ]
}

Reduce unused CSS

Est savings of 47 KiB

Reduce unused rules from stylesheets and defer CSS not used for above-the-fold content to decrease bytes consumed by network activity. Learn how to reduce unused CSS.

Elements & resources
{
  "type": "opportunity",
  "items": [
    {
      "url": "https://poolsuite.net/css/index.5278903b.css",
      "totalBytes": 53474,
      "wastedBytes": 47742,
      "wastedPercent": 89.28069521323889
    }
  ],
  "headings": [
    {
      "key": "url",
      "label": "URL",
      "valueType": "url"
    },
    {
      "key": "totalBytes",
      "label": "Transfer Size",
      "valueType": "bytes"
    },
    {
      "key": "wastedBytes",
      "label": "Est Savings",
      "valueType": "bytes"
    }
  ],
  "sortedBy": [
    "wastedBytes"
  ],
  "debugData": {
    "type": "debugdata",
    "metricSavings": {
      "FCP": 920,
      "LCP": 0
    }
  },
  "overallSavingsMs": 0,
  "overallSavingsBytes": 47742
}
Environment & raw metrics
{
  "finalUrl": "https://poolsuite.net/",
  "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/151.0.0.0 Safari/537.36",
  "formFactor": "mobile",
  "throttlingMethod": "simulate",
  "throttling": {
    "rttMs": 150,
    "throughputKbps": 1638.4,
    "requestLatencyMs": 562.5,
    "uploadThroughputKbps": 675,
    "cpuSlowdownMultiplier": 4,
    "downloadThroughputKbps": 1474.5600000000002
  },
  "metrics": [
    {
      "id": "largest-contentful-paint",
      "unit": "millisecond",
      "value": 13150.319850000003
    },
    {
      "id": "cumulative-layout-shift",
      "unit": "unitless",
      "value": 0.0005903560804755639
    },
    {
      "id": "total-blocking-time",
      "unit": "millisecond",
      "value": 262
    },
    {
      "id": "first-contentful-paint",
      "unit": "millisecond",
      "value": 3571.975381188965
    },
    {
      "id": "speed-index",
      "unit": "millisecond",
      "value": 12932.44853983232
    }
  ]
}

01 / WHAT WORKS

What makes it work

A consistent interface metaphor

Window chrome, pixel icons, volume slider and channel selector consistently use vintage desktop conventions.

Whitespace supports a leisurely mood

Broad pink space keeps the player dominant while bottom icons invite exploration without competing with it.

02 / NEXT STEPS

Where to go next

  1. 01

    Give small controls larger touch targets

    Playback and channel controls are compact on mobile; their visible borders should not constrain touch targets.

    Preserve pixel styling while enlarging hit areas for playback, volume and Dock items; add visible keyboard focus and verify touch accuracy.

03 / DESIGN LANGUAGE

A design system you can reuse

Colors

Background

#f6d5d5

Text

#000000

Accent

#f9f0e9

Typography

Display font
Apple Color Emoji
Body font
Apple Color Emoji
Heading / body
50px / 16px

Spacing & shape

Section gap
32px
Component inset
—
Card radius
—
Button radius
0px 0px 4px

Parameters are element samples. Empty values are unknown, and individual samples are not site-wide rules.

04 / EVIDENCE

The detail behind the report

Values come from one capture. Fonts, radii and spacing are element samples, not a universal site-wide specification. Empty values are unknown. HTML bytes are source size, not compressed transfer size; script counts are DOM tags, not network requests.

Conversion1 observations

Give small controls larger touch targets

Playback and channel controls are compact on mobile; their visible borders should not constrain touch targets.

Preserve pixel styling while enlarging hit areas for playback, volume and Dock items; add visible keyboard focus and verify touch accuracy.

mobile.png: compact playback controls
Launch3 observations

No Content-Security-Policy

A CSP is the standard way to limit script sources. Vibe-coded pages often load anything, including injected scripts.

Start with a report-only CSP, then default-src 'self' and an explicit script-src.

content-security-policy missing

No X-Content-Type-Options

Without nosniff, browsers may interpret a file as a different type than you sent. It is a one-line header.

Set X-Content-Type-Options: nosniff.

x-content-type-options missing

No Referrer-Policy

The default referrer can leak internal paths and query strings to third parties.

Set Referrer-Policy: strict-origin-when-cross-origin.

referrer-policy missing
Link preview

Poolsuite ☼

The ultra-summer internet radio station, playing an infinity pool of summer sounds 24/7. Swimwear optional. Formerly Poolside FM.

05 / MAKE IT HAPPEN

Give your AI a clear next step

Use the improvement prompt for this page, or the design prompt to borrow its visual language. “Recreate” includes references and implementation steps. Paste either into your coding assistant.

Preview full instructions
Improve the current project using the 2026-09-05T03:22:02.599Z snapshot of https://poolsuite.net. First identify changes since capture; do not revert newer behavior to the old snapshot.

Design baseline
Membership and a decorative date sit in the top bar. The central window combines video, track information, playback controls and channel selection, with a bottom Dock for Player, Mixtapes and Members. Mobile retains the window and horizontal Dock. Treat window hierarchy, beveled controls and narrow typography as one system; dates and tracks must use the target project’s own data.
{
  "colors": [
    {
      "role": "bg",
      "hex": "#f6d5d5"
    },
    {
      "role": "ink",
      "hex": "#000000"
    },
    {
      "role": "accent",
      "hex": "#f9f0e9"
    }
  ],
  "fonts": {
    "body": "Apple Color Emoji",
    "display": "Apple Color Emoji",
    "stack": [
      "ui-sans-serif",
      "Pixolde",
      "Ishmeria",
      "Everyday"
    ]
  },
  "radius": {
    "button": "0px 0px 4px",
    "card": "",
    "field": ""
  },
  "space": {
    "section": "32px",
    "card": ""
  },
  "type": {
    "h1": "50px",
    "body": "16px",
    "weight": "",
    "lineHeight": "24px",
    "letterSpacing": ""
  }
}
Values come from one capture. Fonts, radii and spacing are element samples, not a universal site-wide specification. Empty values are unknown. HTML bytes are source size, not compressed transfer size; script counts are DOM tags, not network requests.

Actions
1. Give small controls larger touch targets
Preserve pixel styling while enlarging hit areas for playback, volume and Dock items; add visible keyboard focus and verify touch accuracy.
Evidence: mobile.png: compact playback controls

2. No Content-Security-Policy
Start with a report-only CSP, then default-src 'self' and an explicit script-src.
Evidence: content-security-policy missing

3. No X-Content-Type-Options
Set X-Content-Type-Options: nosniff.
Evidence: x-content-type-options missing

4. No Referrer-Policy
Set Referrer-Policy: strict-origin-when-cross-origin.
Evidence: referrer-policy missing

Acceptance
- Check text, layout and the main action “Guestbook” at 1440×900 and 390×844.
- Preserve branding, authentication and business behavior. A screenshot does not prove broken interaction.
- Change only evidence-backed issues. Validate security headers against existing resources and authentication in report-only mode where supported.
- Compare before/after screenshots and run relevant functional tests. Do not claim untested behavior passed.