Website Restructure Week 2: Typography, Contrast & Hero Layout | Muskan

Muskan Agrawal reports on week two of the Humanitarians AI website restructure: typography refinement, hero concepting, and a link-level audit of the navigation and footer. Week one produced opinions about what was wrong with the site; week two turns those opinions into numbers.

From opinions to measurements

Week one ended with a decision to fix the structural problems first and reassess later, and week two is the first half of delivering on that, starting by making the problem specific enough to argue with. Every claim in the video was measured against the live site rather than estimated by eye. The primary navigation bar carries seven destinations: the logo, four section links, and two buttons, but "About Us" and "Contact Us," the two links a first-time nonprofit visitor typically hunts for, live only in the hero and footer, not the nav bar itself. Mapped out, the bar reads as four content sections and two calls to action competing for the same strip, missing orientation links and duplicating promotional ones.

The footer link audit

The footer was audited at the link level: six columns, thirty-three links inside them, thirty-nine anchors in total, a reasonable place for depth but a poor place to be carrying basic site orientation. The projects column is the largest at eleven links, and six of them are bare proper nouns, names like Dewey, Madison, Medhavi, Musenik, Mycroft, and Popper, that a first-time visitor cannot decode. Week one flagged this same problem, and remeasuring in week two shows it hasn't changed. The audit also turned up duplication: "All Projects" and "Musenik" both appear in two different footer columns, small issues individually that together signal a structure that grew rather than one that was designed.

Fixing the type scale

The homepage currently runs nineteen distinct text styles across eight font sizes within a single type family, with the bold weight used at six of those eight sizes, a hierarchy problem Agrawal states precisely as many sizes with almost no real levels. The proposed fix keeps four sizes, each with a job: sixty pixels for display, thirty-six for headline, twenty for subhead, and sixteen for body, with fourteen reserved for captions and legal text. Bold stops at headline; below that, weight carries meaning instead of decoration. Line length was measured rather than guessed: the longest body paragraphs run eighty-four characters per line, well past the comfortable reading range of forty-five to seventy-five characters. The fix is a maximum width on the text column, which costs nothing to implement and buys back reading speed.

The contrast and hero findings

The sharpest finding of the week is accessibility: the site's secondary text color is a mid-gray measuring 4.12 to 1 contrast against white, below the WCAG-required 4.5 to 1, and it's used in sixty-four elements, fifty-two of them at body text size. Darkening that gray by seven levels clears the standard. The accent color got the same audit: above the fold there are four maroon buttons, all the same fill and height, for YouTube, Donate, About Us, and Contact Us, meaning four equal emphases amount to no emphasis at all. That leads into the hero itself, where the video embed, measured off the same screenshot, occupies 2.1 times the area of the entire message column, while the actual value proposition, who the site is for and what to do next, holds just 26 percent of the frame. The proposed direction is a principle rather than a finished layout: order the hero around what a first-time visitor expects to find first, not around what's easiest to feature.

Key takeaways

• Every finding this week was measured against the live site rather than estimated, turning week one's opinions into arguable specifications.
• Navigation and footer link audits found missing orientation links, duplicated links, and six bare proper noun project names unchanged since week one.
• Nineteen text styles across eight sizes are proposed to collapse into four sizes with defined jobs, with bold reserved for headline level and above.
• The site's secondary gray text fails WCAG contrast at 4.12 to 1 against the required 4.5 to 1, affecting sixty-four elements.
• The hero section gives the video embed over twice the area of the actual value proposition, which the team wants reordered around visitor expectations.

Who this is for

This is for web teams and nonprofit staff running a data-driven site redesign who want a concrete example of auditing typography, contrast, and hero layout with real measurements instead of subjective opinions.