Purpose
Extract the visual brand identity of binlp.pe, including recurring colors, CSS variables, loaded web fonts, typography applied to key elements, and logo assets.
When to Use
Use for requests to identify the site's main colors, fonts, or other directly inspectable brand-style properties. The result is based on the live homepage and its same-origin stylesheets rather than visual guesswork.
Workflow
- Navigate directly to
https://binlp.pe/. - On the loaded page, run this evaluator once:
(() => {
const cssTexts = [];
const stylesheetUrls = [];
for (const sheet of [...document.styleSheets]) {
if (sheet.href) stylesheetUrls.push(sheet.href);
try {
cssTexts.push([...sheet.cssRules].map((rule) => rule.cssText).join("\n"));
} catch (_) {
cssTexts.push("");
}
}
const css = cssTexts.join("\n");
const colorMatches =
css.match(/#[0-9a-fA-F]{3,8}\b|rgba?\([^)]*\)|hsla?\([^)]*\)/g) || [];
const colorCounts = {};
for (const value of colorMatches) {
const normalized = value.toLowerCase().replace(/\s+/g, " ");
colorCounts[normalized] = (colorCounts[normalized] || 0) + 1;
}
const cssColors = Object.entries(colorCounts)
.sort((a, b) => b[1] - a[1])
.map(([color, occurrences]) => ({ color, occurrences }));
const cssVariables = {};
for (const sheet of [...document.styleSheets]) {
try {
for (const rule of [...sheet.cssRules]) {
if (!rule.style) continue;
for (const property of [...rule.style]) {
if (property.startsWith("--")) {
cssVariables[property] = rule.style.getPropertyValue(property).trim();
}
}
}
} catch (_) {}
}
const fontFaces = [];
for (const match of css.matchAll(/@font-face\\s*\\{([\\s\\S]*?)\\}/gi)) {
const block = match[1];
const family = block
.match(/font-family\\s*:\\s*["']?([^;"'}]+)["']?/i)?.[1]
?.trim();
const weight = block.match(/font-weight\\s*:\\s*([^;}]*)/i)?.[1]?.trim();
const style = block.match(/font-style\\s*:\\s*([^;}]*)/i)?.[1]?.trim();
if (family)
fontFaces.push({
family,
weight: weight || "normal",
style: style || "normal",
});
}
const loadedFonts = [...document.fonts].map((font) => ({
family: font.family,
weight: font.weight,
style: font.style,
status: font.status,
}));
const selectors = [
"body",
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"a",
"button",
"input",
".elementor-button",
".logo",
];
const computedTypography = {};
for (const selector of selectors) {
const element = document.querySelector(selector);
if (!element) continue;
const style = getComputedStyle(element);
computedTypography[selector] = {
fontFamily: style.fontFamily,
fontSize: style.fontSize,
fontWeight: style.fontWeight,
lineHeight: style.lineHeight,
letterSpacing: style.letterSpacing,
textTransform: style.textTransform,
color: style.color,
backgroundColor: style.backgroundColor,
};
}
const assets = [...document.images]
.map((image) => ({
src: image.currentSrc || image.src,
alt: image.alt,
className: String(image.className),
}))
.filter(
(image) =>
image.src &&
/logo|brand/i.test(`${image.src} ${image.alt} ${image.className}`),
);
return {
url: location.href,
title: document.title,
stylesheetUrls,
primaryColors: cssColors.slice(0, 20),
cssVariables,
fontFaces,
loadedFonts,
computedTypography,
logoAssets: assets,
};
})();- Treat the most frequent non-neutral CSS colors and relevant CSS variables as the primary palette; use
computedTypographyandfontFacesto report the typography actually used on the page.
Site-Specific Gotchas
- The homepage loads same-origin stylesheets including
/css/vendors.css,/css/fonts.css,/css/main.css,/css/jquery.sweet-modal.min.css, and/css/waitMe.min.css; inspect all of them because the brand declarations are not necessarily in the document HTML. - The principal logo asset is named
/images/logo_ligth.png(withligthmisspelled), so do not assume a conventionallogo_lightfilename. - Some third-party/vendor CSS can dominate raw color frequency. Prefer colors repeated in
/css/main.css, CSS variables, and visible semantic elements over vendor-only colors. - Stylesheet CSS rules may be inaccessible if the site changes a stylesheet to another origin; the evaluator safely skips inaccessible rules and still returns computed styles and loaded fonts.
Expected Output
Return an object containing the page URL and title, stylesheet URLs, ranked CSS colors with occurrence counts, CSS variables, declared @font-face families, loaded browser fonts, computed typography/color properties for representative elements, and matching logo assets.