Sample report
“Lumen Notes – AI-powered notes for modern teams” · Audited 5 October 2026 · Homepage only · Rubric v1.0.0
Lumen Notes is a fictional landing page we wrote to show what a report looks like. Every number below was produced by the same audit your site would get.
Consistency score
55 / 100
Needs attention
How consistently the page handles type, color, spacing and structure across 36 checks. It can't judge brand, imagery, copy or whether the design persuades.
26 findings: 7 high, 8 medium, 11 low priority.
Scores by category
Start here
5 typefaces render visible text. Pick one typeface for headings and one for body text (they can be the same family). Replace the rest.
See the evidence
5 typefaces render visible text.
Evidence
Why it matters
Every extra typeface adds a new voice. Past two or three, the page stops feeling like one brand and starts feeling assembled.
Suggested fix
Pick one typeface for headings and one for body text (they can be the same family). Replace the rest.
InterMost paragraph text is set at 13px.
Evidence
Why it matters
Small body text makes people lean in or leave. It reads as dense and is harder for anyone with less than perfect eyesight.
Suggested fix
Set body text to 16px or larger and scale the other sizes up from there.
22 text elements fall below the WCAG AA contrast minimum.
Evidence
Why it matters
Low-contrast text is the first thing to disappear on a dim screen or in sunlight, and it excludes readers with low vision.
Suggested fix
Darken the text or lighten the background until body text reaches 4.5:1 and large headings reach 3:1.
1.7:11.7:11.7:11.7:1100% of spacing values fall off a 4px grid.
Evidence
Why it matters
Spacing that lands on arbitrary values (13px here, 22px there) makes a layout feel slightly off, even to people who can't say why.
Suggested fix
Adopt a 4px spacing scale (4, 8, 12, 16, 24, 32, 48, 64, 96) and round every padding, margin and gap onto it.
The page is 434px wider than the screen.
Evidence
Why it matters
Horizontal scroll on a phone makes the page wobble under the thumb and usually hides content off the right edge.
Suggested fix
Find the element wider than the screen (often an image, table or fixed-width container) and give it max-width: 100%.
3 of 3 images have no alt attribute.
Evidence
Why it matters
Screen readers announce these images as a file name or skip them, and search engines learn nothing from them.
Suggested fix
Add alt text describing what each image shows. Use an empty alt (alt="") only for decoration.
The viewport meta tag prevents pinch-to-zoom.
Evidence
Why it matters
People who need larger text rely on pinch-to-zoom. Blocking it locks them out of the content.
Suggested fix
Remove user-scalable=no and maximum-scale from the viewport meta tag.
5 text elements are smaller than 12px.
Evidence
Why it matters
Text under 12px is hard to read on a phone without zooming, so the information in it is effectively hidden.
Suggested fix
Raise captions, labels and legal text to at least 12px, ideally 13 to 14px.
9px9px9px10pxThe page has 2 h1 headings.
Evidence
Why it matters
The main heading tells visitors, search engines and screen readers what the page is about. Without exactly one, that message is missing or split.
Suggested fix
Mark the headline that states what you offer as the only h1, and use h2 for section titles.
"Supercharge your team's knowledge to…"A section heading (28px) is as large as the main heading (26px).
Evidence
Why it matters
Size contrast is what lets someone scan a page in five seconds. If headings and body are close in size, everything reads at one volume.
Suggested fix
Make the main heading at least 2.5 times the body size, and step each level down clearly (for example 56, 32, 22, 16).
h1 26px3 differently colored filled buttons compete on the first screen.
Evidence
Why it matters
The first screen should answer "what do I do here?". With no prominent button, or several fighting for attention, visitors hesitate.
Suggested fix
Give the first screen one filled button in your accent color for the main action. Style any second action as an outline or text link.
A design opinion based on measurements. Reasonable designers can disagree.
"Sign up""Book a demo""Watch video"4 unrelated accent hues are used across buttons, text and gradients.
Evidence
Why it matters
An accent works because it is rare. Several unrelated accents compete, and visitors can't tell which one marks the main action.
Suggested fix
Choose one primary accent for actions and at most one secondary. Express everything else in neutrals and tints.
A design opinion based on measurements. Reasonable designers can disagree.
1 of 1 form field has no label.
Evidence
Why it matters
A placeholder vanishes as soon as someone types, and assistive technology may not read it at all, so people can't tell what a field is for.
Suggested fix
Give every field a visible <label> connected with for/id, or an aria-label when the design has no room for one.
emailThe html element has no lang attribute.
Evidence
Why it matters
Without a declared language, screen readers may pronounce the page with the wrong accent and browsers can't offer translation reliably.
Suggested fix
Add the language to the html tag, for example <html lang="en">.
5 gradients use the indigo-to-purple range.
Evidence
Why it matters
This gradient is one of the most repeated looks on recent landing pages, so it makes a site harder to tell apart from many others.
Suggested fix
Replace it with a flat brand color, or build a gradient from colors that belong to your own palette.
A widely used default. It says nothing about how this site was made.
Body text has a line-height of 1.30 (16.9px on 13px text).
Evidence
Why it matters
Tight lines blur into a block; very loose lines stop reading as a paragraph. Both slow reading down.
Suggested fix
Set body line-height between 1.45 and 1.65.
1 paragraph runs to about 206 characters per line.
Evidence
Why it matters
Past roughly 80 characters, the eye loses its place when it jumps back to the next line.
Suggested fix
Cap text blocks at 60 to 75 characters per line (a max-width of about 65ch).
~206 chars2 headings skip a level.
Evidence
Why it matters
Heading levels are the page's outline. Skipped levels confuse screen-reader navigation and usually mean headings were chosen for their size, not their role.
Suggested fix
Use levels in order (h1, then h2, then h3) and control the look with CSS instead of the tag.
h2 → h4h1 → h47 distinct text colors are in use.
Evidence
Why it matters
Each text color implies a different meaning. When there are many, none of them reads as intentional.
Suggested fix
Reduce to one main ink, one muted ink, one accent for links and actions, and white for text on dark surfaces.
9 text blocks sit within 8px of the screen edge.
Evidence
Why it matters
Text that runs to the edge of the glass looks unfinished and is harder to read.
Suggested fix
Give page content a side gutter of at least 16px on small screens.
4 different button shapes are in use.
Evidence
Why it matters
Buttons are the most repeated component on a page. When each one is a slightly different shape, the whole interface feels improvised.
Suggested fix
Define two or three sizes with one corner radius, and build every button from them.
8px radius4px radius14px radius1 text element is filled with a gradient.
Evidence
Why it matters
Gradient headlines are a common template flourish. They also reduce legibility, because part of each word has lower contrast.
Suggested fix
Set the headline in a solid color and reserve emphasis for one word or a weight change.
A widely used default. It says nothing about how this site was made.
3 emoji appear in headings, buttons or lists.
Evidence
Why it matters
Emoji look different on every device and can't be styled, so they read as placeholders where an icon set was never chosen.
Suggested fix
Swap them for one consistent icon set drawn in your brand color.
A widely used default. It says nothing about how this site was made.
2 sections are built from rows of identical cards.
Evidence
Why it matters
The three-card feature row is the most familiar block in template landing pages. Several of them in a row make a page feel generic.
Suggested fix
Vary the layout: lead with one feature at full width, pair text with a real screenshot, or use a list where items are simple.
A widely used default. It says nothing about how this site was made.
100% of text blocks are center-aligned.
Evidence
Why it matters
Centering every block is the default when no layout was designed. It removes the left edge that makes text easy to scan.
Suggested fix
Center the hero and short statements only. Left-align paragraphs and anything longer than two lines.
A widely used default. It says nothing about how this site was made.
5 elements use a backdrop blur.
Evidence
Why it matters
Frosted-glass panels are a recognisable trend. Used everywhere, they lower text contrast and date a design quickly.
Suggested fix
Keep the blur for one element that benefits from it, such as a sticky header, and give other panels a solid surface.
A widely used default. It says nothing about how this site was made.
A check that could not run is listed as not evaluated. It never counts as a pass, and a category with nothing evaluated gets no score.
| Check | Category | Viewport | Result |
|---|---|---|---|
| TYP-01 Too many typefaces | Typography | desktop | Finding |
| TYP-02 No consistent type scale | Typography | desktop | Pass |
| TYP-03 Body text is small | Typography | desktop | Finding |
| TYP-04 Body line spacing is off | Typography | desktop | Finding |
| TYP-05 Too many font weights | Typography | desktop | Pass |
| TYP-06 Text too small to read on a phone | Typography | mobile | Finding |
| TYP-07 Lines of text are too long | Typography | desktop | Finding |
| COL-01 Too many text colors | Color | desktop | Finding |
| COL-02 Low-contrast text | Color | desktop | Finding |
| COL-03 Competing accent colors | Color | desktop | Finding |
| SPC-01 Spacing doesn't follow a grid | Spacing | desktop | Finding |
| SPC-02 Too many spacing values | Spacing | desktop | Pass |
| SPC-03 Page scrolls sideways on mobile | Spacing | mobile | Finding |
| SPC-04 Content touches the screen edge on mobile | Spacing | mobile | Finding |
| CMP-01 Buttons come in too many shapes | Consistency | desktop | Finding |
| CMP-02 Inconsistent corner rounding | Consistency | desktop | Pass |
| CMP-03 Too many shadow styles | Consistency | desktop | Pass |
| HIE-01 Page lacks a single main heading | Hierarchy | desktop | Finding |
| HIE-02 Heading levels are skipped | Hierarchy | desktop | Finding |
| HIE-03 Headings don't stand out from body text | Hierarchy | desktop | Finding |
| HIE-04 No clear primary action on the first screen | Hierarchy | desktop | Finding |
| HIE-05 Headline is below the first screen on mobile | Hierarchy | mobile | Pass |
| A11Y-01 Images without alternative text | Accessibility | desktop | Finding |
| A11Y-02 Form fields without labels | Accessibility | desktop | Finding |
| A11Y-03 Tap targets are too small | Accessibility | mobile | Pass |
| A11Y-04 Page language is not declared | Accessibility | desktop | Finding |
| A11Y-05 Zooming is blocked on mobile | Accessibility | mobile | Finding |
| A11Y-06 Buttons or links without a name | Accessibility | desktop | Pass |
| SIG-01 Purple-to-blue gradient | Template signals | desktop | Finding |
| SIG-02 Gradient-filled text | Template signals | desktop | Finding |
| SIG-03 Default typeface | Template signals | desktop | Pass |
| SIG-04 Emoji used as icons | Template signals | desktop | Finding |
| SIG-05 Rows of identical cards | Template signals | desktop | Finding |
| SIG-06 Unmodified framework accent colors | Template signals | desktop | Pass |
| SIG-07 Nearly everything is centered | Template signals | desktop | Finding |
| SIG-08 Heavy use of blurred glass panels | Template signals | desktop | Finding |
We turn audits like this one into finished redesigns. Tell us about the site and we'll reply with a scope and a quote.