# Pixelslop Scoring Rubric How you turn browser observations into numbers that mean something. Five pillars. Each scored 1 to 4. Total out of 20. Every single score must cite specific browser evidence -- not vibes, not hunches, not "it feels off." If you cannot point to a concrete observation that justifies the score, you do not have enough information to assign one. A score of 1 is not an insult. It is a measurement. A score of 4 is not a compliment. It is also a measurement. The goal here is accuracy, not kindness. --- ## The Five Pillars ### Pillar 1: Hierarchy (1-4) **What it measures:** Whether the page has clear visual weight distribution -- focal points, heading structure, layout prominence, and whether a user can figure out what matters within seconds of landing. **Score 1 -- No Direction** The page is a flat wall of equally weighted content. Nothing stands out. Multiple elements compete for attention at the same size, color, and position. There is no clear primary action. A user landing here has to work to figure out what to do. Headings are the same size as body text, or close enough that the difference does not register. Layout is a single column of sameness or a grid where every card screams at the same volume. Evidence: heading sizes within 4px of each other, no element with significantly larger font-size or bolder weight, primary CTA same visual weight as secondary elements, no whitespace separation between content sections. **Score 2 -- Attempted but Muddled** There is some size or weight variation, but it does not quite land. The heading is bigger, sure, but three other elements also demand attention. The CTA exists but sits in a visual tie with a decorative element or secondary link. The hierarchy is technically present but does not guide the eye -- you notice structure, but you still have to think about what matters most. Evidence: heading exists at a larger size but competing elements (images, badges, secondary CTAs) draw equal or near-equal visual weight. More than one element could plausibly be "the main thing." **Score 3 -- Clear and Functional** The eye flows to the most important element first. There is a visible primary action that a user can identify within 2-3 seconds. Size, color, and position communicate importance in a way that works. Minor issues -- maybe a secondary element is slightly too prominent, or the visual flow hiccups between sections -- but the fundamentals are solid. Evidence: measurable size difference between heading levels (h1 significantly larger than h2, h2 than h3), primary CTA visually distinct from other interactive elements, whitespace used to separate content groups. **Score 4 -- Intentional and Immediate** The focal point is obvious within 1-2 seconds. The primary action is unmistakable. Size, color, position, and whitespace all work together to create a hierarchy that feels effortless. You do not have to think about what matters -- the design tells you. Secondary content supports the primary without competing. Every level of the hierarchy has a reason to exist. Evidence: clear progressive reduction in visual weight from h1 through body text, primary CTA isolated with whitespace or color contrast, layout sections visually distinct with intentional spacing, no competing focal points. **Key evidence to collect:** - Computed font sizes for all heading levels (h1-h6) and body text - Font weights across heading levels - CTA button sizes, colors, and padding compared to other interactive elements - Whitespace/margin/padding between major content sections - Number of elements with font-size > 24px (if everything is big, nothing is) - Screenshot with viewport at 1440px width -- does one thing dominate? **Interpretation notes for evaluators:** Cognitive load compounds hierarchy problems. A page with decent visual weight distribution can still score 2 if there are 12 CTAs visible at once. Check `personaChecks.cognitiveDensity` — high density pulls the score down by 1. Also: heading structure from the a11y snapshot must match visual hierarchy. If h2 is visually bigger than h1, that's a hierarchy failure regardless of what the CSS says. --- ### Pillar 2: Typography (1-4) **What it measures:** Font selection, scale discipline, weight consistency, and whether the text is actually comfortable to read. This is about the type system as a whole -- not individual font sizes (that is Hierarchy's job) but whether the fonts, spacing, and rhythm form a coherent system. **Score 1 -- System Default or Chaos** The page uses system fonts (Arial, Times New Roman, the browser default serif/sans-serif) with no apparent intentionality behind the choice. Or worse, multiple fonts thrown together with no logic. Line heights are browser defaults. Line lengths run edge-to-edge or are uncomfortably short. Font sizes jump around without a consistent scale. Body text is either too small to read comfortably or too large for the column width. Evidence: `font-family` resolving to system defaults, no custom fonts loaded, line-height at browser default (typically 1.2 or `normal`), body text line-length exceeding 80 characters or under 30 characters, no consistent ratio between font sizes. **Score 2 -- Custom but Undisciplined** A custom font is loaded (probably Google Fonts), but the type system lacks discipline. Too many sizes that do not follow a scale. Weights used inconsistently -- bold where regular would work, or everything at the same weight. Line heights exist but vary without reason. The font choice is fine but generic (Open Sans, Roboto used as-is with no personality). It works, but it does not say anything. Evidence: custom font loaded but fewer than 3 distinct sizes in use, or more than 6 with no modular ratio between them. Inconsistent font-weight values across similar elements. Line heights vary between 1.2 and 2.0 with no pattern. **Score 3 -- Solid System** Fonts are chosen with purpose and paired well if multiple families are used. A clear size scale is in place (even if not mathematically perfect). Weights are used consistently -- bold means something, regular means something else. Line heights are comfortable (1.4-1.6 for body text). Line lengths are reasonable (45-75 characters). The typography supports readability and has some personality. Evidence: consistent modular scale (roughly 1.2x-1.5x between levels), deliberate font pairing (serif + sans-serif, or display + body), line-height in the 1.4-1.6 range for body, line-lengths between 45-75 characters, no more than 3 font families. **Score 4 -- Distinctive and Disciplined** The type system has genuine personality that reinforces the brand. Font pairing is distinctive -- not the same Google Fonts every other site uses. The modular scale is tight and consistent. Weight hierarchy is clear and intentional. Letter-spacing and line-height are tuned, not defaulted. Body text is a pleasure to read. The typography alone gives the page an identity. Evidence: distinctive font pairing (not just Inter/Roboto/Open Sans defaults), consistent modular scale with ratios between 1.2-1.618, deliberate letter-spacing adjustments, line-height tuned per text size, no more than 2-3 font families used with clear roles (display, body, mono), comfortable reading rhythm across paragraphs. **Key evidence to collect:** - All `font-family` values and whether custom fonts are loaded - Computed font sizes for every text element, mapped against a modular scale - Font weight values and where each is used - Line height values for body text and headings - Character count per line at each major viewport width - Letter-spacing values if present - Number of distinct font families in use **Measured signals (from `viewports.desktop.typographyMetrics` and `viewports.mobile.typographyMetrics`):** these are computed off real layout at both viewports, so treat them as hard evidence, not impressions. Each is a concrete readability failure — check both viewports and grade the worse one, naming it in the finding. Line-length and tiny body text almost always fail on mobile first, so a metric that clears desktop but trips at 375px still counts. Fold them into the score and emit a finding when one fires: - **Measure** — `bodyCharsPerLine`. Comfortable is 45–85. Below 45 is cramped, above 85 is a tiring line. Either extreme caps Typography at 2. - **Body size** — `bodyFontSize`. Below 14px is under the readability floor (fail). 14–15px is a warn. 16px+ is the expectation. - **Leading** — `bodyLeadingRatio`. Body wants 1.4–1.7. Below 1.3 is too tight to track lines (fail); above 1.9 drifts apart (warn). - **Tracking** — `bodyTrackingEm`. Body copy wants near-zero. Negative tracking on body (`< -0.02em`) or wide tracking (`> 0.1em`) hurts reading (fail). Wide tracking is fine on short uppercase labels, not body runs. - **Scale** — `flatHierarchy` / `typeScaleRatio`. A largest-to-smallest ratio under 1.5 means headings and body barely differ — the page reads undifferentiated (fail, and it drags Hierarchy too). - **Justified body** — `justifiedBody`. Justified web text with no hyphenation opens rivers of whitespace (warn). - **All-caps body** — `allCapsBody`. A long uppercase run as body copy (not a label) tanks legibility (warn). - **Oversized h1** — `oversizedH1` / `h1FontSize`. A hero heading wider than ~7% of the viewport per character reads as shouty rather than confident (warn). Bold heroes are fine; this only fires on genuinely disproportionate sizing. - **Body at viewport edge** — `bodyAtViewportEdge`. Body text flush to the screen edge (within 16px) has no breathing room and is uncomfortable to read (warn). Full-bleed backgrounds are fine; this measures the text element itself. A single measured failure rarely sinks the whole pillar on its own, but two or more compounding (e.g. tiny body text *and* tight leading *and* an 95-char measure) is a clear Score 1 — the text isn't comfortable to read, which is the whole point of the pillar. **Interpretation notes for evaluators:** A site using Inter as its only font gets a 2 at best — it's the most common AI default and says nothing about brand. But Inter used alongside a distinctive display font as part of a deliberate pairing can score 3. Context matters. Also check `network.failed` for font load failures — a custom font that 404s means the user sees system fallbacks, which changes the score. --- ### Pillar 3: Color (1-4) **What it measures:** Palette cohesion, accent discipline, and whether the color choices feel intentional and distinctive. This is strictly about the palette itself -- contrast ratios and accessibility are scored under Pillar 5. Here we care about whether the colors work together and say something about the brand. **Score 1 -- The AI Palette** You have seen this site before, on every other AI startup landing page from 2024. Cyan on dark. Purple-to-blue gradient. Neon accent on a near-black background. The "futuristic" default that communicates nothing except "an AI generated this." Or: a random collection of colors with no relationship to each other -- clashing hues, no neutral strategy, accents everywhere with no restraint. Evidence: background-color in the #0a-#1a range (near-black), accent colors in the cyan/electric-blue/purple family, gradient backgrounds using blue-to-purple or cyan-to-magenta, more than 3 saturated accent colors with no clear primary, use of neon/glow effects (box-shadow with saturated colors, text-shadow with bright values). **Score 2 -- Safe but Generic** The palette is not offensive but it is not saying anything either. Standard blue primary, gray neutrals, maybe a green for success and red for error. Nothing wrong with it, but also nothing that gives the page an identity. You could swap this palette onto any other site in the same category and nobody would notice. Evidence: primary color is a standard blue (#007bff-ish or similar framework default), neutrals are pure grays (#333, #666, #999, #ccc, #f5f5f5), no tinted neutrals, accent colors limited to standard semantic colors (red/green/yellow), no intentional palette beyond framework defaults. **Score 3 -- Cohesive and Intentional** The palette feels chosen, not defaulted. Colors work together. Neutrals might be tinted to warm or cool the overall feel. There is a clear primary accent and it is used with discipline -- not splashed on everything. The palette has enough personality that you would recognize it if you saw it on a different page of the same site. Evidence: primary color is not a framework default, neutrals show intentional tinting (warm grays, cool grays, or tinted toward the primary), accent color used on 3 or fewer element types, background colors have subtle warmth or coolness, palette limited to 4-6 total colors including neutrals. **Score 4 -- Distinctive and Memorable** The color palette is a design decision, not an afterthought. It has genuine personality. Tinted neutrals create atmosphere. Accents are used sparingly and always draw attention to the right things. The palette would be hard to confuse with competitors. Color usage has clear rules -- you can see the logic in which elements get which colors. Evidence: tinted neutrals (not pure gray), unique primary that is not the standard tech-blue/startup-teal, accent color used with clear restraint (fewer than 5 instances on a given page), consistent color logic (e.g., all interactive elements use the same accent, all backgrounds use the same neutral family), no neon/glow effects unless they serve a specific brand purpose. **Key evidence to collect:** - All unique `background-color`, `color`, `border-color` values - Gradient definitions if present - Count of distinct saturated colors (hue, not neutrals) - Whether neutrals are pure gray or tinted - Box-shadow and text-shadow colors (glow detection) - Whether accent colors are used consistently on specific element types **Interpretation notes for evaluators:** Color is about palette judgment, not contrast ratios — contrast lives in Accessibility. A page can have perfect AA contrast and still score 1 on Color if it's cyan-on-dark with purple gradients everywhere. Look at the `decorations` data for glow indicators. Pure black (#000) or white (#fff) backgrounds are a tell — real designers tint their neutrals. Count unique accent hues: 1-2 is disciplined, 5+ is a rainbow. --- ### Pillar 4: Responsiveness (1-4) **What it measures:** How the layout behaves across three viewport widths -- desktop (1440px), tablet (768px), and mobile (375px). This is not just "does it shrink" but "does it actually adapt." Also covers overflow, touch targets, and whether the mobile experience is a real experience or a shrunken desktop. **Score 1 -- Broken** The site breaks on mobile. Horizontal scroll appears. Text overflows containers. Touch targets are tiny (under 30px). Images or elements extend beyond the viewport. Navigation is inaccessible or unusable at narrow widths. The mobile experience is functionally broken -- a user on a phone would struggle to complete basic tasks. Evidence: `overflow-x` scroll appearing at 375px viewport, elements wider than viewport, touch targets (buttons, links) smaller than 30px in either dimension, text truncated or overlapping at narrow widths, navigation hamburger that does not function. **Score 2 -- Shrinks but Does Not Adapt** The site technically fits on mobile but it is just a compressed desktop layout. Everything gets smaller proportionally. Font sizes might be uncomfortably small. Touch targets are borderline (30-43px). Spacing gets cramped. It is responsive in the CSS sense (things reflow) but not in the design sense (nobody thought about the mobile experience specifically). Evidence: same layout structure at all viewports (just narrower), font sizes below 14px on mobile, touch targets between 30-43px, minimal or no difference in padding/margin between desktop and mobile, images scale down but are not cropped or art-directed. **Score 3 -- Properly Responsive** The layout genuinely adapts. Navigation changes form (hamburger, bottom nav, or other mobile pattern). Content reflows into appropriate mobile layouts. Font sizes remain readable. Touch targets meet the 44px minimum. Spacing adjusts for the viewport. The experience feels considered at each breakpoint, even if it is not perfect. Evidence: different layout at each viewport (grid columns collapse, navigation changes form), touch targets at 44px+, font sizes 16px+ for body text on mobile, padding/margin values differ between desktop and mobile stylesheets, no horizontal overflow. **Score 4 -- Genuine Layout Adaptation** The mobile, tablet, and desktop experiences each feel designed for their context. It is not just reflow -- content priority might shift, navigation patterns change meaningfully, touch targets are generous (48px+), spacing feels right at every width. Images are handled well (art direction, proper sizing, no massive downloads on mobile). The mobile experience is not a compromise -- it is a real product. Evidence: content reordering between viewports (not just reflow), navigation pattern genuinely different on mobile vs desktop, touch targets 48px+, images use `srcset` or art direction, spacing system adapts proportionally, no elements that feel awkward or out of place at any viewport width. **Key evidence to collect:** - Screenshots at 1440px, 768px, and 375px - Presence of horizontal overflow at each viewport - Touch target sizes for all interactive elements at 375px - Font sizes for body text at each viewport - Navigation pattern at each viewport - Whether layout structure actually changes (column count, element order) - Image handling (srcset, sizes, or art direction) **Interpretation notes for evaluators:** The biggest tell is whether the layout genuinely adapts or just shrinks. Compare the 3 viewport screenshots — if mobile looks like a miniaturized desktop, that's a 1-2 regardless of whether overflow is technically fixed. Touch targets under 44px on mobile are an automatic score reduction. Check all three overflow datasets, not just mobile. --- ### Pillar 5: Accessibility (1-4) **What it measures:** Whether the site can be used by people with disabilities. Measured through contrast ratios, semantic HTML structure, ARIA usage, keyboard navigability, and alt text. This is the only pillar that tests contrast -- Color (Pillar 3) is about palette aesthetics, this is about whether people can actually read the text. **Primary evidence:** Contrast ratios (via computed styles), heading hierarchy (via a11y snapshot), landmark regions (via a11y snapshot), alt text presence (via a11y snapshot), semantic HTML (via a11y snapshot). Focus indicators and keyboard navigation are assessed visually from screenshots but not programmatically tested — scores 3 and 4 should note when these claims are observation-based rather than measured. **Score 1 -- Significant Barriers** Key text fails WCAG AA contrast requirements (below 4.5:1 for normal text, below 3:1 for large text). No semantic HTML structure -- divs and spans all the way down, no heading hierarchy. Images missing alt text. No skip-to-content link. Interactive elements unreachable or invisible via keyboard. The site is functionally inaccessible to users who rely on assistive technology. Evidence: contrast ratios below 4.5:1 on body text or navigation, contrast below 3:1 on headings, no `
`, `