49 lines
4.3 KiB
Markdown
49 lines
4.3 KiB
Markdown
[INFO] INDEPENDENT DESIGN & CODE REVIEW
|
|
Verdict: The 'Blowout' concept effectively shatters boring MSP templates, but heavily overshoots "trust" into "retail clearance" territory. It requires strategic dialing back to balance radical boldness with B2B stability.
|
|
|
|
---
|
|
|
|
### 1. DIAL-BACK STRATEGY (Ranked)
|
|
1. [ERROR] Overshoot: 13rem poster-typography (`radical.css:54`). Screams "event poster", refuting stability.
|
|
> Alternative: Cap clamp at ~5-6rem. Keep Anton, but size it for authority, not alarm.
|
|
2. [ERROR] Overshoot: Drenched signal-orange background blocks (`radical.css:80`, `radical.css:143`). Triggers urgency/warning semantics.
|
|
> Alternative: Restrict orange exclusively to interactive elements/accents. Use `--ink` for section backgrounds.
|
|
3. [WARN] Overshoot: 8.5rem blowout price numerals (`radical.css:128`). Reads as a discount warehouse.
|
|
> Alternative: Scale down to 3-4rem. Keep the transparent grid, but refine the typography.
|
|
4. [WARN] Overshoot: Infinite scrolling marquee (`radical.html:36`). Associated with aggressive retail.
|
|
> Alternative: Replace with a static, horizontal trust bar (logos or key features) below the hero.
|
|
5. [INFO] Overshoot: 16rem transparent ghost numerals (`radical.css:102`). Adds meaningless visual noise.
|
|
> Alternative: Remove entirely. Rely on the stark grid and whitespace.
|
|
|
|
### 2. WHAT TO KEEP
|
|
[OK] The `--ink` and `--bone` palette foundation: highly premium and tech-forward.
|
|
[OK] The brutalist structural borders (`2px solid var(--bone)`): communicates transparency and zero-BS.
|
|
[OK] Direct, no-fluff copywriting ("Everything, handled", "No games").
|
|
[OK] JetBrains Mono for metadata: adds legitimate engineering credibility.
|
|
|
|
### 3. WCAG AA CONTRAST
|
|
[ERROR] Orange text on `--ink`: `#FF5A1F` on `#0C0A09` yields ~4.3:1. Fails AA for body text.
|
|
> Corrected hex: Use `--hot-2` (`#FF8A4D`) for all orange text on dark backgrounds. Confidence: High.
|
|
[ERROR] Black on `#FF5A1F` (`rx-price--pop` unit text): `#0C0A09` on `#FF5A1F` at `opacity: 0.7` (`radical.css:131`). Fails functional contrast.
|
|
> Corrected hex: Remove opacity. Use solid `#0C0A09`. Confidence: High.
|
|
[ERROR] Stroke headline (`radical.css:57`): Transparent fill with 2px stroke fails functional contrast for low-vision users. Shape is lost.
|
|
> Corrected hex: Replace `color: transparent;` with solid `color: #F4EDE1;` (`var(--bone)`). Confidence: High.
|
|
[WARN] Bone-2 on `--ink`: `#B8AE9E` on `#0C0A09`. Technically passes (~7.3:1), but thin font (`radical.css:13`) makes it functionally weak.
|
|
> Corrected hex: Lighten to `#C9C1B5` or increase font-weight to 500. Confidence: Medium.
|
|
|
|
### 4. ACCESSIBILITY
|
|
[ERROR] Marquee data loss (`radical.html:35`): Claim: `aria-hidden="true"` is fine for decorative elements. Refutation: The values ("Since 2001", "No offshore") are not exposed to screen readers *anywhere else* in the DOM. Core value propositions are completely lost. Confidence: High.
|
|
[WARN] Focus management (`radical.css:76`): Claim: Global `:focus-visible` outline is visible. Refutation: Uses `--hot`. For `.rx-btn--hot` placed on a `--hot` background (like the CTA section), the outline relies entirely on `outline-offset`, becoming invisible. Confidence: High.
|
|
[OK] `prefers-reduced-motion` (`radical.css:21`): Correctly zeroes out animations.
|
|
[OK] Decorative image (`radical.html:26`): `alt=""` and `aria-hidden="true"` correctly implemented.
|
|
|
|
### 5. RESPONSIVE RISKS
|
|
[ERROR] Layout break (`radical.css:122`): 3-column pricing grid persists down to 761px. At ~761px-950px, 8.5rem text will overflow column bounds.
|
|
[WARN] Hover reflow (`radical.css:112`): `.rx-svc:hover` increases `padding-left: 1rem;` without initial padding compensation, causing text to abruptly jump right.
|
|
[WARN] Viewport overflow (`radical.css:54`): `clamp(3.5rem, ...)` sets a 56px minimum. The word "picks" may exceed a 320px width viewport, triggering horizontal scroll.
|
|
|
|
### 6. REAL CODE / MARKUP BUGS
|
|
[ERROR] Negative margin clip (`radical.css:55`): `margin-left: -0.06em;` on `h1` risks clipping the first letter ("I") outside the scrollable area.
|
|
[WARN] Inline styles (`radical.html:46`): `<div class="rx-svc-list" style="margin-top:2.5rem;">` violates structural separation.
|
|
[INFO] Legacy prefixing (`radical.css:58`): `text-stroke` is non-standard. `-webkit-text-stroke` is sufficient for all modern engines.
|