# How e360.yale.edu is designed

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

Last updated: 2026-08-08

## Captured pages

[![Lead story hero with centered serif title and thick rule](https://pin.fontofweb.com/9924?format=jpg)](https://design.withfudge.com/share/pin-9924)

[Lead story hero with centered serif title and thick rule](https://design.withfudge.com/share/pin-9924)

[![Topic index grid and black footer with centered brand block](https://pin.fontofweb.com/9925?format=jpg)](https://design.withfudge.com/share/pin-9925)

[Topic index grid and black footer with centered brand block](https://design.withfudge.com/share/pin-9925)

## Overview

E360 uses a classic editorial structure: a compact masthead, a single high-priority lead story, a dense topic index, and a deep black footer that closes the page with institutional weight. The system is calm rather than flashy. It trusts headline rhythm, restrained color, and careful spacing more than decoration. Most of the page sits on a bright reading field, so the black footer and coral labels feel deliberate instead of loud.

The design reads as a publication first and a browsing hub second. Story titles carry the voice, topic labels organize the archive, and the page never lets the interface outshine the writing. The strongest visual signals are the serif headline style, the coral accent, the thin horizontal rules, and the centered footer block.

## Colors

| token | value | use |
|---|---|---|
| `action` | `#FF6654` | Topic labels, section cues, and small navigational highlights |
| `ink` | `#1D1C1D` | Primary story text and serif headlines on the light page |
| `ink-strong` | `#000000` | The heaviest text weight, logo treatment, and strong rules |
| `ink-soft` | `#7C7363` | Secondary metadata, author lines, and quieter supporting copy |
| `canvas` | `#FFFFFF` | The main reading field behind stories and topic lists |
| `border` | `#CAC6BF` | Thin dividers, underline rules, and hairline section separation |
| `footer-canvas` | `#000000` | The closing footer field |
| `footer-ink` | `#FFFFFF` | Footer logo, footer navigation, and the publisher line on black |
| `footer-muted` | `#CAC6BF` | Secondary footer copy and subdued footer contrast |

The palette is intentionally small. White keeps the editorial page open and breathable, near-black carries most of the reading load, and the coral accent appears only where the site needs a firm cue. The footer flips the contrast completely: black ground, white type, and the same restrained neutral family for quieter text. That switch gives the page a strong ending without adding a second accent system. The thin border tone keeps rules visible without turning the page into a boxed layout.

## Typography

E360 relies on a serif editorial voice for the content and a compact sans voice for labels, navigation, and utility text. The combination gives the page a newspaper-like clarity with a contemporary web finish. Verify licensing for these families before production use.

| token | family | size | weight | leading | tracking | use |
|---|---|---:|---:|---:|---:|---|
| `hero-display` | Ashbury | 3rem | 700 | 1.05 | -0.02em | Lead story headline in the split hero |
| `section-display` | Ashbury | 2.25rem | 700 | 1.1 | -0.015em | Strong section titles and major story headers |
| `story-title` | Ashbury | 1.5rem | 700 | 1.15 | -0.01em | Article titles in the topic grid and stacked story lists |
| `body` | Ashbury | 1rem | 400 | 1.6 | 0em | Deck copy and paragraph text |
| `deck` | Ashbury | 0.875rem | 400 | 1.55 | 0em | Short supporting lines under headlines |
| `label` | Moderat | 0.75rem | 700 | 1.2 | 0.12em | Coral topic labels, category tags, and small section cues |
| `navigation` | Moderat | 0.875rem | 700 | 1.2 | 0.04em | Top navigation, footer navigation, and compact site links |
| `footer-copy` | Applesystem | 0.875rem | 400 | 1.4 | 0em | The publisher line and footer support text |
| `legal` | System | 0.75rem | 400 | 1.4 | 0em | Small legal and institutional text |

The hierarchy depends on weight, leading, and spacing more than on type size alone. Headlines are tight and confident, with just enough negative tracking to hold together across multiple lines. Body copy opens up so the page can carry long article summaries without feeling crowded. Small uppercase labels are the sharpest typographic contrast on the page; they use color and tracking instead of size to organize the archive.

## Layout

The desktop page is built on a centered reading column with large side gutters and generous internal padding. The first screen places the masthead at the top, then a bold black rule, then a split lead story: a wide image block on the left and a narrower text block on the right. That right-hand column is not decorative filler; it acts as the page’s anchor for the headline, deck, and byline. The lead image carries the visual motion, while the text remains still and disciplined.

Below the hero, the page switches into a quieter story matrix. A thin wavy divider softens the transition, then a row of smaller stories spreads into balanced columns. The lower topic area becomes denser: four topic columns across, each with a heading, a small graphic at the right edge of the heading line, and a stack of article links underneath. The structure repeats with steady logic, which makes the archive feel easy to scan even when the content list is long.

Spacing is one of the most important layout tools. Small internal gaps sit around 10–20px, the major chapter breaks sit around 60–70px, and the page leaves a deeper 100px of breathing room before the footer. The wider centered modules also use a much larger left/right inset, which keeps the content measured rather than edge-to-edge. The result is a page with clear pauses and a strong editorial cadence.

The footer is centered and compact. It uses a black field, a stacked logo block, a row of utility links, a thin white divider, and the publisher line beneath. Because the footer is visually isolated from the reading field above it, it feels like an institutional closing panel rather than another content block.

## Visual language

The visual language is plain in the best sense: paper-like backgrounds, black rules, coral labels, and serif article titles. The page avoids chromatic noise. Instead, it creates rhythm through section changes and through the alternation of image-heavy and text-heavy areas. The lead story gives the page its highest contrast, while the topic index turns the same system into a compact browsing tool.

A few small graphic emblems appear beside the topic headings. They are decorative but disciplined, sitting on the same horizontal axis as the heading rather than becoming stand-alone illustrations. That keeps them in the service of the layout. The page also uses a thin wavy separator in place of a heavy border. That choice softens the transition between major story groups and gives the editorial field a slightly printed feel.

The footer makes the clearest contrast move on the site: it replaces the bright reading field with a dense black block, then uses white navigation and a centered publisher mark to keep the section readable. The page never needs gradients, shadows, or glossy surfaces to create depth. It gets depth from the contrast between image, rule, label, and headline.

## Components

### Masthead

**Anatomy:** Site logo at left, publication line nearby, and utility navigation at the right.  
**Surface:** White or near-white background with a strong black rule beneath.  
**Typography:** The logo is heavier and more condensed than the article text; the utility links are small, crisp, and spaced for scanning.  
**Shape:** Straight edges and no visible rounding.  
**Spacing:** Wide side gutters, then a clear band of empty space before the lead story.  
**Composition:** The masthead is stable and horizontal, and it never competes with the lead story for attention.  
**Visible states:** Use the coral accent sparingly for active or emphasized links; the rest should stay neutral.

### Lead story

**Anatomy:** Large landscape image on one side, label, headline, deck, and byline on the other.  
**Surface:** Bright background with no card enclosure.  
**Typography:** The headline is the largest serif element on the page and sits above a compact deck.  
**Shape:** Rectangular image crop and square layout edges.  
**Spacing:** Generous separation between the image and the text column, with tight internal line spacing inside the copy block.  
**Composition:** The image carries the atmosphere; the headline carries the editorial claim.  
**Visible states:** The text column should remain legible at a glance, with coral limited to the topic label or section cue.

### Topic grid

**Anatomy:** Four topic columns, each with a heading, a small graphic marker, a thin rule, and a stack of story links.  
**Surface:** Same bright page canvas as the rest of the reading area.  
**Typography:** Topic headings are larger than the labels but smaller than the lead headline; story titles are serif and easy to scan in short stacks.  
**Shape:** No framed panels; the grid depends on alignment and rules.  
**Spacing:** Moderate gaps inside each column and deeper gaps between rows of topics.  
**Composition:** The column structure lets the page show many stories without feeling dense.  
**Visible states:** The coral label is the strongest color inside each topic block, so it should remain the primary scan cue.

### Footer

**Anatomy:** Centered brand mark, utility links, a thin divider, and the publisher line.  
**Surface:** Pure black field.  
**Typography:** White navigation and a quieter institutional line beneath it.  
**Shape:** Straight-edged block with no special rounding.  
**Spacing:** Tight centered stack with a clear gap before the publisher line.  
**Composition:** The footer is symmetrical and calm, giving the page a formal ending.  
**Visible states:** Keep all links readable on black; do not depend on color alone for link meaning.

## Responsive behavior

On smaller screens, the content should collapse in the same order it reads on desktop: masthead, lead story, supporting stories, topic index, then footer. The lead story should stack before the image is cropped too tightly, because the text is the page’s main editorial entry point. Topic columns should compress into fewer columns or into single-column blocks, but the heading-label-link rhythm should stay intact. The black footer should remain centered and readable, with the utility links allowed to wrap cleanly rather than shrinking into illegible text.

## Practical implementation guidance

### Preserve

- Keep the page editorial and restrained; the content should do the talking.
- Preserve the coral accent as a narrow signal, not a broad fill color.
- Keep the thin rules, centered measure, and large chapter spacing.
- Let story headlines stay serif and highly legible.
- Keep the footer as a black institutional block with white navigation.

### Avoid

- Avoid heavy shadows, rounded cards, and glossy surface effects.
- Avoid adding more accent colors.
- Avoid treating the topic emblems as main illustrations.
- Avoid turning the topic grid into a dense news dashboard.
- Avoid breaking the lead story into equal visual parts; the image and headline should not compete.

### Recommended build order

1. Build the masthead and horizontal rule.
2. Add the split lead story with image, label, headline, deck, and byline.
3. Add the story list sections with thin separators.
4. Build the topic grid with repeated column structure.
5. Finish with the black footer and centered publisher block.

### Accessibility

- Keep the coral label readable against the white field.
- Use strong contrast for all footer links on black.
- Make headline line lengths comfortable so long titles do not break awkwardly.
- Give each image useful alternative text that describes the story subject.
- Preserve a visible keyboard focus style on all navigation and story links.
- Do not rely on color alone to show what is active or clickable.

## Scope note

This guide covers the desktop home page structure shown here: masthead, lead story, story lists, topic grid, and footer. It does not define mobile breakpoints, motion, hover behavior, loading states, or print styles. The four type families listed here should be licensed and confirmed before production use.

## Related design patterns

- [Muted chroma](/share/designs-with-color.chroma.muted)
- [Orange hue](/share/designs-with-color.hue.orange)
- [Accent color](/share/designs-with-color.role.accent)
- [Primary text color](/share/designs-with-color.role.text_primary)
- [Secondary text color](/share/designs-with-color.role.text_secondary)
- [Moderate density](/share/designs-with-density.moderate)
- [Media and publishing](/share/designs-with-industry.media_publishing)
- [Populated state](/share/designs-with-interaction.data_state.populated)

## More website design guides

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