# give me comprehensive website feedback for http://dashimetric…

[Open the live Fudge conversation](https://design.withfudge.com/share/2diacexdyp/give_me_comprehensive_website_feedback_for_http_dashimetric/)

Last updated: 2026-07-31

# Dashi — comprehensive website feedback

Dashi is a landing page for a "lofi analytics on the globe" product whose strongest choice is the 3D globe hero with an orange radial glow — it earns attention in the first second and signals the product's core differentiator before any copy is read.

## What works

- **The globe hero is genuinely distinctive.** A full-bleed 3D canvas with an orange atmospheric glow (`color(srgb 1 0.352941 0.121569 / 0.32) 0px 0px 28px`) and small visitor avatars orbiting it is a memorable visual hook. The "LIVE ON A 3D GLOBE" eyebrow in orange (`#ff5a1f`) at 12px / weight 300 / 2.16px tracking reads as a confident category label.
- **Typography hierarchy is well-considered.** Geist at weight 200 with negative tracking (`-1.3px` on the H1, `-1.06px` on the H2) gives the display copy a distinctive editorial feel that separates it from the generic Geist-at-400 look. The 21.6px / weight 300 body line at -0.54px tracking reads as deliberate, not default.
- **The overlay card pattern is smart.** A semi-transparent card (`rgba(8, 12, 22, 0.95)`) with a triple-layer shadow (`0px 2px 10px` + `0px 0px 0px 2px` white ring + `0px 0px 0px 4px` white halo) sits over the globe without killing it — the white ring gives the card a "lifted off the surface" quality that works on the dark canvas.

## Priority issues

### 1. The hero has no real primary CTA — three text links compete for the click
The left column offers `new? claim your globe →`, `existing? drop back in →`, and `continue with google →` as plain text with arrows. None of them is a button. The only actual button on the page is a small `next →` on the overlay card that advances a carousel. A visitor arriving here cannot tell what the primary action is. **Fix:** make `claim your globe` a filled orange button (`#ff5a1f` background, white text, ~14px height, 9999px radius to match the existing pill language) and demote the other two to secondary text links below it.

### 2. The headline weight is too light for the dark canvas
The H1 uses Geist at weight 200, 52px, on `#070b18`. Extra-light strokes on near-black backgrounds lose definition — the "w" and "r" in "watch your revenue land" read as ghostly rather than confident. The H2 at 42.4px weight 200 has the same problem. **Fix:** bump the display weight to 300 (still distinctive, still not 400-default) and increase letter-spacing slightly toward zero (`-0.8px` instead of `-1.3px`) to open up the counters.

### 3. Secondary text likely fails WCAG AA
The body paragraph uses white at 55% opacity (`oklab(0.999994 ... / 0.55)`) on `#070b18`. At 21.6px / weight 300, this is borderline for AA (4.5:1 for normal text). The eyebrow label at 12px / weight 300 / 2.16px tracking is even more at risk. **Fix:** raise secondary text to 70% opacity minimum, and verify the eyebrow label passes AA at its rendered size — if not, increase to 80%.

### 4. The "continue with google →" link is misleading
It reads as a Google OAuth entry point but is styled identically to the other two text links. If it doesn't actually federate through Google, this is a trust-eroding pattern. If it does, it deserves a Google "G" mark and button styling. **Fix:** either remove it, or make it visually distinct as a federated auth option.

### 5. Mobile layout buries the value proposition
On mobile (390px), the globe canvas occupies the full viewport above the fold, then the headline appears below. The mobile screenshot shows a "bringing the globe online..." loading state — meaning the 3D scene is heavy enough to delay the actual pitch. A visitor on a slow connection sees a spinner, not "watch your revenue land." **Fix:** on mobile, lead with the headline and a single CTA above the globe, then let the globe load below as a secondary visual. Or compress the globe to ~40% of viewport height on mobile.

### 6. Vibe-coded defaults are visible
The lowercase headline, Geist font, orange-on-near-black palette, 3D globe hero, "LIVE ON A 3D GLOBE" eyebrow, and three-arrow CTA stack are all recognizable AI-generation patterns. The site reads as "another lofi analytics tool" rather than a product with a specific point of view. **Fix:** pick one of these patterns and break it deliberately — for example, keep the globe but switch the headline to sentence case, or keep the lowercase headline but drop the eyebrow label and let the typography do the work.

## First change to make

Convert `claim your globe →` from a text link into a filled orange pill button. This single change gives the page a clear primary action, fixes the "no CTA" problem, and costs almost nothing to implement.

## Contrast evidence

| Element | Foreground | Background | Size / weight | WCAG | AA | AAA | APCA |
|---|---|---|---|---|---|---|---|
| Body text (default) | `#1a1a1a` | `#070b18` | 16px / 400 | 1.13 | Fail | Fail | 0 |
| Display headline | white 92% | `#070b18` | 52px / 200 | unresolved (complex backdrop) | — | — | — |
| Body paragraph | white 55% | `#070b18` | 21.6px / 300 | unresolved (foreground transparency) | — | — | — |
| Eyebrow label | `#ff5a1f` | `#070b18` | 12px / 500 | unresolved (foreground transparency) | — | — | — |

The body default `#1a1a1a` on `#070b18` is a 1.13:1 failure — but this is overridden everywhere by white text. The unresolved rows need a deterministic check once the foreground opacity is applied to the backdrop; the eyebrow orange on dark navy is the highest-risk pair and should be verified before launch.

## Design tokens

## Colors

- `#070b18`
- `#1a1a1a`
- `#ff5a1f`
- `#ffffff`

## Typography on dashimetrics.com

- **Geist** — weight 200 · size 52px
- **Geist** — weight 300 · size 21.6px
- **Geist** — weight 500 · size 12px

```fudge-values
{"title":"Useful design values","values":[{"category":"Color","label":"Canvas","value":"#070b18"},{"category":"Color","label":"Accent","value":"#ff5a1f"},{"category":"Color","label":"Primary text","value":"rgba(255,255,255,0.92)"},{"category":"Color","label":"Secondary text","value":"rgba(255,255,255,0.55)"},{"category":"Type scale","label":"Display H1","value":"52px / 200 / -1.3px"},{"category":"Type scale","label":"Display H2","value":"42.4px / 200 / -1.06px"},{"category":"Type scale","label":"Body","value":"21.6px / 300 / -0.54px"},{"category":"Type scale","label":"Eyebrow","value":"12px / 300 / 2.16px tracking"},{"category":"Type scale","label":"Button","value":"14px / 400 / 0.35px tracking"},{"category":"Shape","label":"Pill radius","value":"9999px"},{"category":"Shape","label":"Card radius","value":"0px"},{"category":"Effects","label":"Card shadow","value":"0 2px 10px rgba(0,0,0,0.28) + 0 0 0 2px rgba(255,255,255,0.72) + 0 0 0 4px rgba(255,255,255,0.12)"},{"category":"Effects","label":"Globe glow","value":"0 0 28px color(srgb 1 0.352941 0.121569 / 0.32)"}]}
```

## Reference directions

The closest saved references for the dark-canvas + globe + orange-accent pattern are privacy-focused analytics tools with similar hero compositions:

## Captured pages

[![Kobbe — Web analytics that respect your visitors](https://pin.fontofweb.com/10113?format=jpg)](https://design.withfudge.com/share/pin-10113)

[Kobbe — Web analytics that respect your visitors](https://design.withfudge.com/share/pin-10113)

[![Visitors — Privacy-friendly Google Analytics alternative](https://pin.fontofweb.com/5285?format=jpg)](https://design.withfudge.com/share/pin-5285)

[Visitors — Privacy-friendly Google Analytics alternative](https://design.withfudge.com/share/pin-5285)

[![DataFast | Find out which marketing channels drive your revenue](https://pin.fontofweb.com/4490?format=jpg)](https://design.withfudge.com/share/pin-4490)

[DataFast | Find out which marketing channels drive your revenue](https://design.withfudge.com/share/pin-4490)

## One question worth answering before the next pass

Is `continue with google →` an actual Google OAuth entry, or is it a placeholder that survived from a template? If it's the latter, removing it is the cheapest credibility fix on the page.