# Mosby’s Files — Design System
> A research-driven archive exploring the architects who built American Modernism independently of Europe.
- **Canonical:** https://uiuxskills.com/library/mosby-s-files
- **Source:** https://www.mosbyfiles.com/
- **Category:** Media & Consumer Tech
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 81%
- **License:** MIT
- **Last updated:** 2026-08-14T02:10:23.671Z

---

---
version: alpha
name: Mosby’s Files
tagline: American Modernist Architecture
description: >-
  A research-driven archive exploring the architects who built American Modernism independently of
  Europe.
tone: Radical, academic, structured, and uncompromisingly modernist.
color-scheme: light
colors:
  primary: "#1E4BD7"
  secondary: "#D71E1E"
  tertiary: "#FFE927"
  neutral: "#000000"
  surface: "#FFFFFF"
  surface-dim: "#F5F5F5"
  on-primary: "#FFFFFF"
  on-secondary: "#FFFFFF"
  on-surface: "#000000"
  outline: "#000000"
  accent-purple: "#581E70"
  accent-teal: "#0C7866"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 4.5rem
    fontWeight: 700
    lineHeight: "1.1"
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: sans-serif
    fontSize: 3rem
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: "-0.01em"
  headline-lg:
    fontFamily: sans-serif
    fontSize: 2.25rem
    fontWeight: 600
    lineHeight: "1.25"
    letterSpacing: 0em
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.75rem
    fontWeight: 600
    lineHeight: "1.3"
    letterSpacing: 0em
  headline-sm:
    fontFamily: sans-serif
    fontSize: 1.25rem
    fontWeight: 600
    lineHeight: "1.4"
    letterSpacing: 0em
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
    fontWeight: 400
    lineHeight: "1.6"
    letterSpacing: 0em
  body-sm:
    fontFamily: sans-serif
    fontSize: 0.875rem
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: 0em
  label-md:
    fontFamily: sans-serif
    fontSize: 0.875rem
    fontWeight: 600
    lineHeight: "1.2"
    letterSpacing: 0.05em
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.75rem
    fontWeight: 600
    lineHeight: "1.2"
    letterSpacing: 0.08em
rounded:
  sm: 0px
  md: 2px
  lg: 4px
  xl: 8px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: "{spacing.md} {spacing.lg}"
    borderColor: "{colors.outline}"
  button-primary-hover:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: "{spacing.md} {spacing.lg}"
    borderColor: "{colors.outline}"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.neutral}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: "{spacing.md} {spacing.lg}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    padding: "{spacing.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    padding: "{spacing.lg}"
    borderColor: "{colors.outline}"
  card-flat:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    padding: "{spacing.lg}"
    borderColor: "{colors.outline}"
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: "{spacing.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: "{spacing.md}"
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
  link-hover:
    textColor: "{colors.secondary}"
    typography: "{typography.label-md}"
  badge:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: "{spacing.xs} {spacing.sm}"
  badge-warning:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.neutral}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: "{spacing.xs} {spacing.sm}"
  badge-purple:
    backgroundColor: "{colors.accent-purple}"
    textColor: "{colors.surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: "{spacing.xs} {spacing.sm}"
  badge-teal:
    backgroundColor: "{colors.accent-teal}"
    textColor: "{colors.surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: "{spacing.xs} {spacing.sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  header-nav:
    backgroundColor: "{colors.surface}"
    padding: "{spacing.md} {spacing.lg}"
    borderColor: "{colors.outline}"
motion:
  duration-short: 150ms
  duration-medium: 300ms
  easing-standard: cubic-bezier(0.4, 0, 0.2, 1)
elevation:
  sm: "2px 2px 0px #000000"
  md: "4px 4px 0px #000000"
  lg: "8px 8px 0px #000000"
---

## Overview

Mosby’s Files is a highly structured, editorial archive dedicated to American Modernist Architecture. The design channels the radical, functionalist spirit of the movement through bold primary colors, stark grid layouts, and high-contrast typography that mirrors architectural blueprints. It evokes an uncompromisingly modernist, academic, and structured emotional response.

## Colors

The color strategy relies on a high-contrast, primary-driven palette that evokes classic modernist design and architectural blueprints. Bold primary tones are balanced by stark black and white structural elements, ensuring high readability and a commanding editorial presence.

* **Primary (`{colors.primary}`):** #1E4BD7. Electric Blue used as the primary brand identifier and interactive element color.
* **Secondary (`{colors.secondary}`):** #D71E1E. Bold Red used for high-contrast accents, highlighting radical movements and key architectural case studies.
* **Tertiary (`{colors.tertiary}`):** #FFE927. Bright Yellow used as a secondary accent color to evoke classic modernist primary palettes.
* **Neutral (`{colors.neutral}`):** #000000. Deep black used for primary typography, structural borders, and heavy layout dividers.
* **Surface (`{colors.surface}`):** #FFFFFF. Pure white background to maintain a clean, high-contrast editorial canvas.
* **Surface-dim (inferred) (`{colors.surface-dim}`):** #F5F5F5. Light gray surface variant for subtle structural containment and background shifts.
* **On-primary (inferred) (`{colors.on-primary}`):** #FFFFFF. High-contrast white text for placement on top of the primary electric blue background.
* **On-secondary (inferred) (`{colors.on-secondary}`):** #FFFFFF. High-contrast white text for placement on top of the secondary red background.
* **On-surface (inferred) (`{colors.on-surface}`):** #000000. Stark black text for maximum readability on white surfaces.
* **Outline (inferred) (`{colors.outline}`):** #000000. Solid black borders defining structural grids and component boundaries.
* **Accent-purple (`{colors.accent-purple}`):** #581E70. Deep purple accent color used for specific category tags.
* **Accent-teal (`{colors.accent-teal}`):** #0C7866. Teal accent color used for environmental and contextual tags.

## Typography

The typography is strictly sans-serif, prioritizing legibility, structure, and high-impact editorial hierarchy. The scale ranges from massive display headlines to tight, technical labels.

* **Display Large (inferred) (`{typography.display-lg}`):** Massive, high-impact sans-serif headlines for main landing page titles.
* **Display Medium (inferred) (`{typography.display-md}`):** Large sans-serif section headers introducing major architectural eras.
* **Headline Large (inferred) (`{typography.headline-lg}`):** Sans-serif sub-section headers and prominent architect names.
* **Headline Medium (inferred) (`{typography.headline-md}`):** Sans-serif medium headers for card titles and case study callouts.
* **Headline Small (inferred) (`{typography.headline-sm}`):** Sans-serif small headers for metadata and secondary content groupings.
* **Body Medium (inferred) (`{typography.body-md}`):** Standard sans-serif body copy for highly readable historical and architectural analysis.
* **Body Small (inferred) (`{typography.body-sm}`):** Smaller sans-serif body copy for captions, footnotes, and secondary descriptions.
* **Label Medium (inferred) (`{typography.label-md}`):** Sans-serif interactive labels, button text, and navigation links.
* **Label Small (inferred) (`{typography.label-sm}`):** Sans-serif micro-labels, tags, and copyright notices.

## Layout

The layout is built on a strict, high-contrast grid system that mirrors architectural blueprints, utilizing spacing tokens such as `{spacing.lg}` and `{spacing.xl}` for structural margins and `{spacing.2xl}` to preserve architectural breathing room. Distinct content blocks are separated by solid dividers to emphasize structural form over decorative elements. The page pattern follows a top-to-bottom sequence of `nav`, `hero`, `features`, `gallery`, and `footer`. The hero composition features a bold, left-aligned typographic headline introducing American Modernism, paired with a high-contrast introductory paragraph. On mobile viewports, a fluid grid collapses into a single-column stack while maintaining high typographic contrast and readable line lengths.

## Elevation & Depth

Hard-edged, solid offset block shadows convey depth across three distinct levels, maintaining a physical, structural presence instead of soft, blurry gradients (all values are inferred).

* **`elevation.sm`:** Applied to small interactive components and subtle card lifts.
* **`elevation.md`:** Used for primary cards and mid-level structural containment.
* **`elevation.lg`:** Reserved for prominent, highly elevated elements and modal overlays.

## Shapes

True to modernist architectural principles, the shape language is overwhelmingly orthogonal, sharp, and geometric. Rounded corners are avoided or kept to an absolute minimum to preserve the clean, structural lines of the layout.

Most structural components, buttons, and cards rely strictly on `{rounded.sm}` (0px) to maintain a hard-edged, blueprint-like aesthetic. Subtle rounding up to `{rounded.md}` (2px) or `{rounded.lg}` (4px) is used sparingly, while `{rounded.full}` (9999px) is reserved strictly for non-structural, functional elements like badges and tags.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`

### button-primary
The primary action button uses a solid `{colors.primary}` background with `{colors.on-primary}` text styled in `{typography.label-md}`. It features a sharp `{rounded.sm}` corner radius, `{colors.outline}` border, and generous padding of `{spacing.md} {spacing.lg}`. Use this for the main call to action on a page.

### button-primary-hover
The hover state of the primary button transitions to a `{colors.neutral}` background with `{colors.surface}` text. It maintains the `{rounded.sm}` corners, `{colors.outline}` border, and `{typography.label-md}` styling. Use this to provide immediate, high-contrast visual feedback on hover.

### button-secondary
The secondary button features a `{colors.surface}` background with `{colors.neutral}` text and a solid `{colors.outline}` border. It uses `{typography.label-md}` and `{rounded.sm}` corners. Use this for secondary or alternative actions within a section.

### card
The standard card container uses a `{colors.surface}` background with `{colors.on-surface}` text, bounded by a solid `{colors.outline}` border. It features sharp `{rounded.sm}` corners and internal padding of `{spacing.lg}`. Use this to group related architectural case studies or articles.

### card-elevated
The elevated card variant uses a `{colors.surface}` background and `{colors.outline}` border, but adds a hard-edged offset shadow using `{elevation.md}`. It features `{rounded.sm}` corners and `{spacing.lg}` padding. Use this to highlight featured architects or prominent editorial content.

### card-flat
The flat card variant uses a `{colors.surface-dim}` background to create a subtle visual shift without relying on borders or shadows. It features `{rounded.sm}` corners and `{spacing.lg}` padding. Use this for secondary content blocks or metadata groupings.

### input-field
The standard text input field uses a `{colors.surface}` background with `{colors.neutral}` text and a solid `{colors.outline}` border. It features `{rounded.sm}` corners and `{spacing.md}` padding. Use this for search queries and newsletter signups.

### input-field-focus
The focus state of the input field transitions the border color to `{colors.primary}` to indicate active user input. It maintains the `{colors.surface}` background, `{colors.neutral}` text, and `{rounded.sm}` corners. Use this to guide user focus during form interaction.

### link
The standard inline link uses `{colors.primary}` text styled in `{typography.label-md}`. It is unadorned and relies on color and typography for distinction. Use this for inline navigation and references to case studies.

### link-hover
The hover state of the inline link transitions the text color to `{colors.secondary}` while maintaining the `{typography.label-md}` styling. Use this to provide clear interactive feedback on text links.

### badge
The standard badge uses a `{colors.secondary}` background with `{colors.on-secondary}` text styled in `{typography.label-sm}`. It features a fully rounded shape of `{rounded.full}` and tight padding of `{spacing.xs} {spacing.sm}`. Use this for high-priority category tags or status indicators.

### badge-warning
The warning badge uses a `{colors.tertiary}` background with `{colors.neutral}` text styled in `{typography.label-sm}`. It features `{rounded.full}` corners and `{spacing.xs} {spacing.sm}` padding. Use this for secondary alerts or historical status updates.

### badge-purple
The purple badge uses an `{colors.accent-purple}` background with `{colors.surface}` text styled in `{typography.label-sm}`. It features `{rounded.full}` corners and `{spacing.xs} {spacing.sm}` padding. Use this for specific architectural category tags.

### badge-teal
The teal badge uses an `{colors.accent-teal}` background with `{colors.surface}` text styled in `{typography.label-sm}`. It features `{rounded.full}` corners and `{spacing.xs} {spacing.sm}` padding. Use this for environmental or contextual tags.

### divider
The divider is a solid horizontal rule with a `{colors.outline}` background and a height of `1px`. Use this to separate major structural sections and content blocks on the grid.

### header-nav
The navigation header uses a `{colors.surface}` background with a solid `{colors.outline}` bottom border. It features padding of `{spacing.md} {spacing.lg}` to house the brand mark and primary navigation links. Use this at the top of all pages.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary interactive elements and key architectural highlights. | Do not use soft, blurry drop shadows; stick to flat borders or hard-edged offsets like `{elevation.sm}`. |
| Maintain a strict grid alignment using `{spacing.lg}` and `{spacing.xl}` for structural margins. | Do not crowd elements; preserve the architectural breathing room defined by `{spacing.2xl}`. |
| Set body text in clean, highly legible sans-serif using `{typography.body-md}`. | Avoid mixing multiple expressive font families; rely strictly on the established modernist sans-serif scale. |
| Separate distinct content sections with a solid `{components.divider}`. | Do not introduce gradient fills or decorative patterns that distract from the functionalist layout. |
| Apply `{colors.secondary}` sparingly as an accent color to draw attention to radical architectural movements. | Never use organic or highly rounded shapes like `{rounded.full}` for structural containers. |
| Ensure all cards and containers use sharp corners matching `{rounded.sm}`. | Avoid low-contrast text pairings; always ensure text on `{colors.surface}` meets high accessibility standards. |
| Style secondary actions with `{components.button-secondary}` using `{colors.surface}` and an `{colors.outline}` border. | Do not style primary buttons with rounded corners larger than `{rounded.sm}`. |
| Use `{colors.accent-purple}` or `{colors.accent-teal}` with `{rounded.full}` strictly for category tags and badges. | Do not use `{colors.tertiary}` for primary body text or structural borders. |

## Content Style

The call to action style is direct, academic, and informative. It avoids marketing hyperbole, opting instead for simple, unadorned links and case study titles that invite intellectual exploration.

Headlines are phrased in an assertive, historical, and analytical tone. They focus heavily on architectural philosophy, structural impact, and the historical context of the modernist movement, establishing a serious and authoritative voice.

The copy density is high, featuring rich, detailed editorial prose. This academic depth is balanced visually by large, full-width imagery, solid dividers, and a clear typographic hierarchy that allows the text to breathe structurally on the page.

## Imagery & Icons

The imagery style combines high-contrast architectural photography, structural blueprints, and clean SVG diagrams illustrating scale, form, and geometric relationships. Photographic assets should focus on raw materials, sharp angles, and structural integrity, avoiding soft focus or romanticized filters. Icons and diagrams must use clean, minimal vector lines that align with the grid, reinforcing the blueprint-like, functionalist aesthetic of the archive.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Mosby's Files, a minimal, bold, and accessible editorial archive of American Modernist Architecture — radical, academic, and uncompromisingly structured in tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{spacing.xl}` — never hardcode hex values, sizes, or font stacks.
2. Use only the sixteen components listed under `components:` — `button-primary`, `card`, `badge`, `divider`, `header-nav`, etc. Do not invent variants the spec doesn't define.
3. Follow the Layout notes: align all blocks to the strict grid using `{spacing.lg}` and `{spacing.xl}` for structural margins; separate sections with `{components.divider}`.
4. Follow the Shapes notes: all containers and cards must use `{rounded.sm}` (0px) as the default; never exceed `{rounded.lg}` (4px) on structural elements.
5. Treat the Do's and Don'ts as authoritative. If a user request conflicts — gradients, rounded containers, soft shadows, mixed font families — surface the conflict before proceeding.

## Output contract

**Must:**
- Use token names for every color, spacing, radius, and typography decision.
- Cover hover, focus, and disabled states for any interactive component the spec defines (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Use `{spacing.xs}` through `{spacing.2xl}` exclusively for all padding, margin, and gap values.
- Apply `{colors.secondary}` sparingly — only as a high-contrast accent, never as a base surface or dominant fill.
- Match the assertive, analytical heading tone and direct CTA style defined in Voice and Content when generating any copy placeholder.

**Must NOT:**
- Invent colors, radii, or font roles outside the spec; `{rounded.full}` is never used on structural containers.
- Use soft drop shadows or gradient fills; flat `{colors.outline}` borders and hard-edged offsets only.
- Add decorative patterns, expressive typefaces, or low-contrast text pairings.
- Rewrite, replace, or invent page copy, headings, navigation items, or content hierarchy.

## When in doubt
- If a value is unspecified, ask before inventing one; do not assume.
- Prefer composing existing components over introducing new tokens.
- For ambiguous background roles, default to `{colors.surface}`; text on it defaults to `{colors.on-surface}`.
- For unspecified breakpoints, apply mobile-first layout with one breakpoint at 768px, consistent with the grid-forward layout notes.
- Tokens marked "(inferred)" in any spec prose are approximations; if an authoritative token file exists, it takes precedence.