Library of Congress (LOC) — Design System Deep Dive

1. Brand Overview

The Library of Congress website (loc.gov) is the digital front door to the largest library in the world. Its audience is broad: researchers, historians, educators, students, and the general public who want to access materials, archives, and cultural records. This isn’t a lifestyle brand; it’s a national institution. The design reflects that—practical, direct, and avoiding unnecessary ornamentation.

The vibe is utilitarian with a hint of warmth. There’s no flashy gradients or over-engineered animations. Everything is built to serve content first. Typography is clean and system-based—no custom display fonts screaming for attention. The color palette is extremely restrained: a single strong accent hue plus functional link colors. This is rare for a major institution’s site, but it works here because content is king.

The orange accent (#dc7018) is the only “brand” color in the extracted data aside from link blue and hover orange. That tells me they rely heavily on imagery and the U.S. government’s identity rather than a sprawling color system. The blue link color (rgb(0, 81, 195)) is functional, not decorative—it says “this is clickable” in the most web-native way possible. Hover states shift to a warmer orange (rgb(238, 115, 10)), tying back into the brand accent.

Spacing is built on a strict 8px grid. Layout breakpoints are minimal—only one at 720px—so they’re not chasing complex responsive tiers. Borders are functional: thick solid dark for emphasis (4px solid rgb(49, 49, 49)) and a single light grey top divider (rgb(217, 217, 217)) for separation. There are no shadows. This is a flat design approach—depth comes from spacing and border contrast.

In short: LOC’s design system is content-first, color-minimal, grid-strict, and interaction-focused. They nailed clarity. No wasted pixels.

2. Color System

2.1 Primary Colors

The primary accent is #dc7018 (rgb(220, 112, 24)). It’s warm, earthy, and authoritative without being aggressive. This hue sits between burnt orange and copper—it evokes heritage and tradition. Against a white or off-white background, it draws attention without screaming. Perfect for subtle CTAs or hover states.

The blue link color (rgb(0, 81, 195)) is pure function. It’s close to a “web blue” but slightly deeper, giving more contrast on light backgrounds. Hover states swap to rgb(238, 115, 10) — a lighter, brighter orange than the primary accent, creating a clear interaction cue.

2.2 Complete Palette

2.3 Color Relationships

Contrast is strong across the board. Link blue vs. white background is well above WCAG AA. The orange accent also passes easily on white. The dark border (#313131) is very high contrast, useful for enclosing content areas. The light border (#d9d9d9) is low contrast, intended for subtle separation rather than emphasis.

No dark mode values are in the data. Given the flat, high-contrast scheme, a dark mode could easily invert these without loss of clarity, but it’s not implemented.

2.4 Usage Guide

• Blue links: Always use #0051c3 for default state, #ee730a for hover. Avoid using the orange hover color for static text—it’s interaction-only.
• Accent orange (#dc7018): Reserve for key interactive states (hover/focus) and small highlights. Overuse will dilute its impact.
• Dark borders (#313131): Only for strong visual separation (e.g., enclosing a search bar or a key info block).
• Light borders (#d9d9d9): Use sparingly for gentle dividers—top borders in lists or sections.
• Avoid mixing brand orange and link hover orange in the same element—the hue difference is intentional, signalling different layers of interaction.

3. Typography

3.1 Font Families

LOC uses system-ui as the base font family with a full modern fallback stack:

-apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

No Google Fonts. No Adobe Fonts. This is a “performance first” choice—system fonts render instantly, match the OS UI, and require no external calls.

3.2 Type Scale

3.3 Hierarchy

Interesting choice: two H1 sizes (40px and 24px) both at weight 500. This suggests situational use—40px for hero/page titles, 24px for subpage titles or mobile contexts. Captions and links share the same size (12px), likely for consistency in small text elements. The lack of heavier weights keeps the tone approachable. Line height at 1.5 across the board improves readability for dense content.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px. Everything is a multiple of eight.

4.2 Layout

One breakpoint at 720px. That’s a simple mobile/desktop split. No complex tablet tier. This means layouts probably stack below 720px and go multi-column above it. Easy to maintain but less fine-grained than modern responsive frameworks.

5. Visual Elements

• Border Radius: Only 50% found, used 4 times on div elements. That’s full rounding—likely for circular avatars or icons. No other radius values. No subtle rounding—either square or perfect circle.
• Shadows: None. This is flat design. All depth is via borders and spacing.
• Borders:
  • 4px solid #313131 — heavy, authoritative. Used sparingly.
  • 1px 0px 0px solid none none #d9d9d9 — light top divider.

6. Components

6.1 Buttons

No button styles were extracted. This suggests buttons are either link-styled or generated dynamically with inline styles. Given the data, there’s no dedicated button color scheme—likely reuses link blue/orange patterns.

6.2 Links

Default:

• Color: #0051c3
• Text-decoration: none
• Weight: 400

Hover:

• Color: #ee730a
• Text-decoration: underline

This is strict and consistent. No visited state styling in extracted data.

6.3 Forms

No input styles extracted—likely native browser defaults with minimal overrides.

6.4 Cards

No card-specific data. Given the lack of shadows and small border usage, cards probably rely on spacing and possibly light borders.

7. Design Tokens — CSS Variables

:root {
  /* Colors */
  --color-accent: #dc7018;
  --color-link-default: #0051c3;
  --color-link-hover: #ee730a;
  --color-border-dark: #313131;
  --color-border-light: #d9d9d9;

  /* Typography */
  --font-family-base: -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --font-size-h1-lg: 2.50rem; /* 40px */
  --font-size-h1-sm: 1.50rem; /* 24px */
  --font-size-caption: 0.75rem; /* 12px */
  --font-size-link: 0.75rem; /* 12px */
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  --line-height-default: 1.5;

  /* Spacing */
  --space-1: 0.5rem;  /* 8px */
  --space-2: 1rem;    /* 16px */
  --space-4: 2rem;    /* 32px */
  --space-16: 8rem;   /* 128px */

  /* Borders */
  --border-radius-full: 50%;
  --border-dark: 4px solid var(--color-border-dark);
  --border-light-top: 1px solid var(--color-border-light);

  /* Breakpoints */
  --breakpoint-sm: 720px;
}

8. AI Coding Assistant Prompt

# Library of Congress Design System Specification

You are a Library of Congress (LOC) design expert. Build UIs matching their visual language exactly.

## Brand Context
LOC's design is content-first, minimal color, and grid-strict. It uses system fonts for speed and clarity. Depth is achieved via spacing and borders, not shadows.

## Color Palette
- Brand Accent: #dc7018 — Hover/focus states, emphasis highlights
- Link Blue: #0051c3 — Default hyperlink text
- Link Hover Orange: #ee730a — Link hover state
- Border Dark: #313131 — Strong enclosing borders
- Border Light: #d9d9d9 — Subtle dividers

## Typography
Font family: -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

| Level       | Size       | Weight | Line Height | Use For                |
|-------------|------------|--------|-------------|------------------------|
| H1 Large    | 40px       | 500    | 1.5         | Hero/page titles       |
| H1 Small    | 24px       | 500    | 1.5         | Subpage titles         |
| Caption     | 12px       | 400    | 1.5         | Small descriptive text |
| Link        | 12px       | 400    | 1.5         | Inline hyperlinks      |

## Spacing & Grid
Base: 8px grid. Scale: 8px, 16px, 32px, 128px. All spacing must be multiples of 8px.

## Border Radius
- full: 50% — Circular avatars/icons

## Shadows & Depth
Flat design—no shadows. Use borders and spacing for separation.

## Component Specifications

### Navigation Links
```css
a {
  color: #0051c3;
  text-decoration: none;
  font-weight: 400;
}
a:hover {
  color: #ee730a;
  text-decoration: underline;
}
```

### Circular Avatar
```css
.avatar {
  border-radius: 50%;
}
```

### Divider
```css
.divider {
  border-top: 1px solid #d9d9d9;
}
```

## Layout & Responsive Rules
- Breakpoint at 720px: Below stacks, above multi-column
- Maintain consistent section padding using 32px (2rem)
- Large spacing (128px) for hero sections

## Interaction Rules
- Hover color change on links only
- No animated transitions in extracted data—keep state changes instant

## DO List
- Use ONLY colors from the palette
- Maintain 8px grid for all spacing
- Use system font stack for all text
- Keep borders consistent—either dark thick or light thin
- Reserve accent orange for interaction cues

## DON'T List
- Don't add shadows
- Don't introduce new border-radius values
- Don't use custom fonts
- Don't invent new colors

## Code Examples

### Link
```css
.link {
  color: #0051c3;
  text-decoration: none;
}
.link:hover {
  color: #ee730a;
  text-decoration: underline;
}
```

### Circular Icon
```css
.icon {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
```

### Divider
```css
.divider {
  border-top: 1px solid #d9d9d9;
  margin-top: 32px;
}
```

9. Summary

TL;DR — LOC’s design system is pure function: minimal color palette, system fonts, strict 8px grid, and flat borders. Interaction cues are clear and consistent. No fluff, just clean delivery.

Brand Keywords:

• heritage-functional
• grid-strict
• flat-accessible
• content-first