# How americanhistory.si.edu is designed

[Open the live Fudge conversation](https://design.withfudge.com/share/americanhistory.si.edu-design)

Last updated: 2026-08-08

## Captured pages

[![Blue mission hero with centered statement, red button, and edge utility tab](https://pin.fontofweb.com/3940?format=jpg)](https://design.withfudge.com/share/pin-3940)

[Blue mission hero with centered statement, red button, and edge utility tab](https://design.withfudge.com/share/pin-3940)

[![Yellow civic portrait grid with staggered names and square image tiles](https://pin.fontofweb.com/3939?format=jpg)](https://design.withfudge.com/share/pin-3939)

[Yellow civic portrait grid with staggered names and square image tiles](https://design.withfudge.com/share/pin-3939)

[![Blue support band with a left-aligned callout and large documentary image](https://pin.fontofweb.com/3938?format=jpg)](https://design.withfudge.com/share/pin-3938)

[Blue support band with a left-aligned callout and large documentary image](https://design.withfudge.com/share/pin-3938)

## Overview

American History uses a direct civic voice built from large color fields, compact heavy type, and a small set of clear actions. The homepage feels authoritative without becoming formal in a dry way. It reads like a sequence of large public panels: a mission statement at the top, a bright portrait field in the middle, a support callout below, and a dark utility footer at the bottom. The design depends on contrast between those bands more than on decorative detail.

The page’s personality comes from that structure. The opening band is calm and declarative, so the institution can speak in a single strong sentence before the rest of the site asks for attention. The yellow middle section is busier and more social, with named people and images arranged in a lively spread that feels closer to a civic wall than a product grid. The lower callout returns to a steadier tone and keeps the focus on participation, while the footer compresses all the practical information into one dense black block. Red actions are reserved for the most important taps, which gives them immediate weight against every other surface.

This is a museum homepage that wants to feel public, current, and credible. It does that through scale, flat color, and a single sturdy type family rather than through ornament. The result is simple to scan at a distance and still distinct when read closely.

## Colors

| token | hex | use |
|---|---|---|
| ink | #000000 | Primary text on light surfaces and the base for utility text |
| rule | #000000 | Thin dividers, hairline marks, and quiet separators |
| neutral-surface | #000000 | The dark footer block and other dense utility surfaces |

The published token set is intentionally narrow. It records the shared black roles that are visible in the page system and keeps the guide from inventing extra exact values. In the live page, the large blue, yellow, and red areas do the expressive work, while the dark footer carries the practical text and links. White space and photography provide the lightest moments, so the site does not need many published surface tokens to explain its visual structure.

Use the darkest token for the footer and utility clusters, the rule token for the thin divider line, and ink for text wherever the page needs maximum legibility. Accent moments are still present in the page story through the visible red actions, but they are treated as part of the site’s surface language rather than as a published token set. That keeps the guide grounded in the values that are actually retained here while still explaining how the color system behaves.

## Typography

American History reads as a one-family system. The same sturdy sans family carries the hero, the civic names, the action labels, and the footer copy. The hierarchy comes from size, weight, and tracking rather than from switching to different faces. That gives the page a unified public tone and helps the large colored bands feel like parts of one institution instead of separate modules.

Verify licensing for these families before production use.

| token | family | size | weight | leading | tracking | use |
|---|---|---:|---:|---:|---:|---:|
| hero-display | Webfont | 3.5rem | 700 | 1 | -0.02em | Mission statement in the opening band |
| section-display | Webfont | 3rem | 700 | 1 | -0.015em | Large support headline and section lead-ins |
| panel-display | Webfont | 2rem | 700 | 1.02 | -0.01em | Civic grid heading and prominent panel labels |
| body | Webfont | 1rem | 400 | 1.5 | 0em | Admission text, explanatory copy, and utility paragraphs |
| body-strong | Webfont | 1rem | 700 | 1.35 | 0em | Button text, compact callouts, and emphasized lines |
| label | Webfont | 1rem | 700 | 1.1 | 0.06em | Short names, links, tabs, and small navigation marks |
| legal | Webfont | 1rem | 400 | 1.4 | 0em | Footer legal text and secondary site links |

The display roles should stay tight and confident. The hero line is the largest text on the page and should remain the first reading target. The section display keeps enough size to feel like a headline, but it must not crowd the images or buttons around it. Smaller lines should open their leading just enough to keep the page breathable inside the dark footer and the blue support band. The label role is especially important in the yellow portrait field, where the underlined names need to stay readable beside the images without overpowering them.

The single-family approach also gives the interface a strong rhythm. Bold text creates the sense of a poster headline; regular text softens the practical details; and small all-caps-like labeling behavior, even when it is not literally all caps, helps the page feel civic and navigable. Because the family list is simple, weight contrast and line length do most of the work.

## Layout

The page is built from broad horizontal bands, each with a distinct job. The opening band is a centered mission hero that occupies a lot of breathing room. Its job is to announce the institution with confidence, not to show everything at once. The copy sits alone, the action sits beneath it, and the rest of the interface stays out of the way. That emptiness is important: it makes the statement feel public and ceremonial.

The middle section shifts into a bright civic field. The layout behaves less like a standard grid and more like a poster wall with staggered portrait tiles and names placed close to the images. The image blocks do not form a strict matrix. Instead, they step across the surface with uneven placement that keeps the eye moving. The large heading on the left provides an anchor, while the portraits and names extend rightward and downward. This gives the page a social and historical energy that feels active but still orderly.

The support band returns to a calmer, more directive tone. It uses a split composition with text on one side and a large documentary image on the other. That structure gives the band a strong point of emphasis without forcing the reader through a complicated hierarchy. It also creates a useful balance: words on one side, image on the other, with enough open space to keep each part legible. The footer is the densest area of the page. It compresses identity, hours, contact details, social links, and legal text into a compact black block. The clusters inside the footer need to stay clearly separated so the section remains practical rather than cluttered.

A flat corner treatment supports all of this. Square tiles in the civic field and straight-edged utility blocks keep the page from feeling decorative or soft. The composition is direct and public-facing, which fits a museum site that wants to feel grounded in access and stewardship rather than in retail polish.

## Visual language

The visual language is poster-like and civic. Large fields of color establish the structure, and the imagery carries the human and historical detail. The site avoids ornamental framing, heavy shadows, and layered surfaces. Instead, it relies on contrast, scale, underlines, and bold type to create a clear sequence of reading moments. That approach keeps the page feeling institutional in a good way: steady, direct, and confident.

The hero band has the quality of a banner. It sets a tone before the rest of the page starts to speak. The portrait field feels more like a public wall or campaign board than a conventional product list. Names are treated as anchors, which makes the people in the images feel central rather than decorative. The support band feels more editorial and documentary, with a larger image and a clear statement that invites participation. The footer turns everything practical: it becomes a utility desk with links, details, and social channels arranged for quick scanning.

Shape is controlled and simple. Buttons are pill-shaped, portraits are square, and the footer divider is a thin straight line. Those choices keep the design from becoming playful or casual. The strongest visual signals are still color, type, and spacing. The system feels serious without feeling rigid, because the large fields and open gaps leave room for the page to breathe.

## Components

### Hero banner

- **Anatomy:** One centered mission statement, a short supporting line, and a single primary action.
- **Surface:** A full-width color band with the text isolated from surrounding navigation noise.
- **Typography:** Use the hero display role for the statement and the body-strong role for the action.
- **Shape:** The action should be a pill, while the band itself stays edge-to-edge and rectangular.
- **Composition:** Keep the copy centered and given enough empty space to feel ceremonial rather than crowded.
- **Visible state:** The button must remain the most attention-grabbing control in the band.

### Civic portrait grid

- **Anatomy:** A left-aligned headline, then staggered portrait tiles with names and directional marks.
- **Surface:** A bright solid field that lets the images and labels carry the interest.
- **Typography:** Use the panel display role for the main heading and the label role for the names.
- **Shape:** The portrait tiles stay square with flat corners, and the names sit close to the images.
- **Composition:** Avoid equal-card repetition. Let the arrangement step across the page so it feels like a living civic wall.
- **Visible state:** Underlines and arrows make the names feel interactive without adding a second button style.

### Support band

- **Anatomy:** A large headline, a short explanatory line, one action, and a documentary image.
- **Surface:** A calm color band with a strong image split on one side.
- **Typography:** Use the section display role for the headline and body text for the explanatory copy.
- **Shape:** Keep the action bold and rounded, but avoid extra framing around the image.
- **Composition:** Give the copy and the image distinct zones so neither side feels crowded.
- **Visible state:** The action should stand out through color and weight alone.

### Footer band

- **Anatomy:** Museum identity, hours, contact details, newsletter and donation links, social icons, divider line, and legal links.
- **Surface:** A dense dark block with light text.
- **Typography:** Body and legal roles dominate, with a slightly heavier mark treatment for identity.
- **Shape:** The divider is a thin straight rule; utility controls stay compact and clean.
- **Composition:** Organize the footer into clusters so each task is readable at a glance.
- **Visible state:** The footer should feel quieter than the rest of the page while still staying clear and legible.

### Utility controls

- **Anatomy:** Right-edge feedback tab, small social icons, and a round back-to-top control.
- **Surface:** Monochrome controls with the brightest accent reserved for the tab.
- **Typography:** Use label-sized text only where it is needed.
- **Shape:** Keep these controls narrow, compact, and clearly separate from the main content flow.
- **Composition:** Treat them as edge-bound helpers rather than central content.

## Responsive behavior

On narrower screens, the page should stack in a clear reading order: hero first, then the civic grid, then the support band, and then the footer. The hero must keep its message readable without depending on side margins that only work on wide screens. The portrait wall should collapse into a cleaner vertical rhythm so the names remain close to their images and the collage does not become a loose set of unrelated blocks. Buttons can grow to fit the available width, but they should keep their pill shape.

The support band should also shift into a simpler stack when space gets tight, with the image moving below the text or above it depending on which ordering keeps the message easiest to scan. In the footer, the utility clusters should turn into a single-column stack while preserving the divider and the most important links. Edge controls should stay detached from the reading path so they do not cover the main content. The main goal on smaller screens is not to recreate the desktop composition exactly, but to preserve the same hierarchy and the same public tone.

## Practical implementation guidance

### Preserve

- Keep the page divided into a mission hero, a civic portrait field, a support band, and a dark utility footer.
- Preserve the one-family typographic system and let weight, size, and tracking create the hierarchy.
- Keep the red action style reserved for the most important tasks so the interaction hierarchy stays obvious.
- Maintain the square treatment for portrait tiles and other flat-corner panels.
- Keep names, links, and utility items close to the images or details they belong with.

### Avoid

- Avoid soft shadows, beveled edges, and decorative framing that would weaken the poster-like feel.
- Avoid adding a second accent color for important actions.
- Avoid turning the civic grid into a generic equal-card deck with wide gutters.
- Avoid over-lightening the footer; it should stay dense and practical.
- Avoid introducing behavior claims or states that are not part of the visible interface.

### Recommended build order

1. Set the dark utility roles, the flat corner token, and the base type scale.
2. Build the hero with centered copy and a single pill action.
3. Recreate the civic portrait wall with square tiles and close labels.
4. Add the support band with its split layout.
5. Finish with the dark footer, divider line, and utility controls.
6. Check the narrow-screen stack so the hierarchy still reads in order.

### Accessibility

- Keep contrast high for text on dark surfaces and for labels placed over busy imagery.
- Make portrait names and utility links unmistakable through underline, spacing, and weight, not through color alone.
- Preserve visible keyboard focus on the main action, portrait names, and footer links.
- Give every portrait and documentary image useful alternative text that identifies the person or scene.
- Keep tap targets large enough for the main action and the edge controls.

## Scope note

This guide covers the homepage hero, the civic portrait grid, the support band, and the footer utility area. It does not define alternate templates, motion, or small-screen breakpoint values.

## More website design guides

[Browse website design guides by pattern and website](/design-guides).