Guard Lite · methodology
A narrow check should make a narrow claim.
Guard Lite compares literal values in pasted CSS or HTML text with five groups of approved values. It reports only what that method can support.
What the tool receives
The first input is a small contract containing approved colours, font families, font sizes, spacing values and corner radii. The second input is CSS or HTML text selected by the user.
The browser processes both inputs in memory. Guard Lite does not submit a form, call an API, save the text to local storage or place pasted HTML into the rendered document.
What the tool removes or skips
Script blocks and CSS comments are removed from the analysis while line breaks are preserved. Expressions using var(), calc(), clamp(), min() or max() are skipped because their final value cannot be decided safely from the pasted line alone.
That is deliberate. A missed finding is preferable to a confident but unsupported statement.
How a result is classified
| Label | Meaning |
|---|---|
| Violation | The contract contains approved values for that category and a different literal value appears in a supported CSS declaration. |
| Review | A relevant literal value was found, but the contract did not provide enough approved values for a firm decision. |
| No outside literal value found | The five checks found no mismatch. This is not a complete pass for the rendered interface. |
What Guard Lite cannot establish
The checker does not calculate the browser’s final computed style. It does not know whether a declaration is overridden, inherited, scoped to an unused component or changed at runtime. It does not open routes, test interface states, compare screenshots or inspect mobile reflow.
It also does not prove accessibility. Contrast depends on the actual foreground and background at render time. Focus behaviour, keyboard order, touch targets, labels and reduced motion require browser-level testing.
Why there is no design score
A percentage would hide the difference between an unused one-pixel value and a primary action that abandons the brand colour. Guard Lite therefore returns discrete findings with the line, property, value and repair guidance. The user decides priority from the role and context.
Privacy boundary
The current Guard Lite page contains no analytics and makes no network request from its JavaScript. Pasted code is not intentionally collected or stored. Users should still avoid pasting credentials, API keys, customer information or any code they do not have permission to inspect.
What full contract testing would require
A complete Guard release check would need a declared design source, supported routes and states, browser rendering at selected widths, computed styles, element evidence, exceptions, source mapping where permitted and a recheck after repair. That broader product is a separate gated roadmap. Guard Lite does not pretend that it already exists.