Redesign: quieter layout, logo-derived palette, technical texture - #39
Open
MrSharky01 wants to merge 9 commits into
Open
MrSharky01 wants to merge 9 commits into
MrSharky01 wants to merge 9 commits into
Conversation
The most common feedback on the site was that it felt too busy. Every surface competed: three stacked background layers, glass cards with blur and glow, gradient headline text, gradient buttons, bordered pill labels on every section, and decorative blur orbs on most pages. This rebuilds the design language so structure, type and data carry the page, and the technical character lands where it means something -- the live network panel, mono data labels, and the coverage table. Palette, sampled from public/logo.svg - gulf runs from the logo's bright cyan-teal (#49c7cc) and mint (#6ed7c8) down to its deep teal (#0d6070) and hull navies. - ink is a navy-tinted neutral built on the same logo navies, so the greys read as brand rather than as grey. - sand is demoted to status only (advisories, "planned"), never decoration. Three accent tokens, because one value cannot do all three jobs at brand brightness without losing contrast somewhere: - --accent for small text: the brightest point on the logo's hue that still clears AA 4.5:1 on white. - --accent-bright for display type, which needs only 3:1, so headline highlights go brighter than body copy is allowed to. - --accent-solid for button fills, always paired with ink-950 text (6.3:1); white on a fill this bright would fail. Hover goes brighter. Surfaces and chrome - Flat cards: one treatment, 1px borders, solid backgrounds, no glass or backdrop blur. Tile hover moves the border, not the card. - Solid buttons. Glow shadows, shimmer/drift/pulse-ring animations, the radial page wash, the fixed grid overlay and the SVG noise layer are gone; display type tops out near 3.5rem instead of 100px. - Header is a solid sticky bar with six destinations and one primary CTA instead of a floating glass pill with two gradient CTAs. Texture - One band declared once in app/layout.tsx under the header, so every page gets it identically: a 44px brand-tinted engineering grid plus a single soft radial wash, both radially masked. The homepage's closing CTA re-uses the grid so the page opens and shuts on the same motif. Homepage - Hero keeps its original headline and the map beside the copy, with the stats it produces in a band underneath. - Get-started cards offer one next step each instead of up to three competing links; coverage is a readable table; one closing CTA band. - Footer regrouped into explore / community / support columns. - Added a skip-to-content link. Fixes found along the way - Partner logos were inverted in dark mode, which flattened an opaque JPEG to a solid white block; they now sit on a light chip. - LiveMap gained a `bare` mode so a caller supplying its own panel header does not stack two headers on one map. - `hover:bg-white` inverted cards in dark mode once backgrounds became theme tokens. - Footer contact address corrected to support@gulfcoastmesh.org, matching the privacy page. Docs updated to describe the new system. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
cleans up ui
updates background
next 16.2.6 -> 16.3.4, sharp, postcss, browserslist, nanoid, brace-expansion, babel — all within existing package.json semver ranges, no code changes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
refreshed the site.