# A History of Racial Injustice — Design System
> A chronological calendar documenting historical events of racial injustice in the United States.
- **Canonical:** https://uiuxskills.com/library/a-history-of-racial-injustice
- **Source:** https://calendar.eji.org/racial-injustice/jun/
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:15:30.787Z

---

---
version: alpha
name: A History of Racial Injustice
description: A chronological calendar documenting historical events of racial injustice in the United States.
tone: Solemn, objective, educational, and direct.
color-scheme: light
colors:
  primary: "#2D3748"
  secondary: "#718096"
  surface: "#FFFFFF"
  surface-dim: "#F7FAFC"
  on-surface: "#1A202C"
  outline: "#E2E8F0"
  error: "#C53030"
  success: "#2F855A"
  info: "#2B6CB0"
  on-primary: "#FFFFFF"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.75rem
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 12px
  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-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.info}"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.info}"
  link:
    textColor: "{colors.info}"
  link-hover:
    textColor: "{colors.primary}"
  badge:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.secondary}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

The visual identity for "A History of Racial Injustice" is sober, academic, and highly legible. It prioritizes the gravity of the historical content through a restrained, high-contrast palette and a clean, vertical layout that keeps the focus entirely on the archival nature of the information.

## Colors

The color strategy relies on a high-contrast, neutral palette to ensure maximum accessibility and to avoid distracting from the serious subject matter.

*   **Primary (inferred) (#2D3748):** Deep slate used for primary headings and navigation elements to maintain authority.
*   **Secondary (inferred) (#718096):** Muted grey used for secondary metadata and date markers.
*   **Surface (inferred) (#FFFFFF):** The primary background color for content readability.
*   **Surface-dim (inferred) (#F7FAFC):** A subtle off-white background used for secondary containers or navigation bars.
*   **On-surface (inferred) (#1A202C):** The primary text color used for body content on light surfaces.
*   **Outline (inferred) (#E2E8F0):** A light grey used for structural dividers and borders between calendar entries.
*   **Info (inferred) (#2B6CB0):** The primary color for all actionable links and interactive elements.
*   **Error (inferred) (#C53030):** Reserved exclusively for critical alerts or status indicators.

## Typography

The typography system uses a clean, sans-serif family to maintain neutrality and readability. Hierarchy is established through size and weight to guide the reader through chronological events.

*   **Display-lg (inferred):** Used for primary page titles.
*   **Headline-lg (inferred):** Used for individual event titles.
*   **Body-md (inferred):** The standard size for all historical event descriptions.
*   **Label-sm (inferred):** Used for metadata, small labels, and secondary UI text.

## Layout

The site uses a vertical, list-based layout optimized for long-form readability. It follows a standard max-width container approach to ensure comfortable line lengths and consistent spacing. The section order is: `nav`, `hero`, `calendar-list`, `footer`. The hero composition is simple, focusing on the title and date navigation. On mobile devices, the layout is responsive, stacking calendar entries to maintain readability.

## Elevation & Depth

Elevation is used sparingly to differentiate interactive elements from the background. The system relies on subtle, single-layer shadows to maintain a clean, flat aesthetic.

*   **Elevation.sm (inferred):** Used for basic card lift.
*   **Elevation.md (inferred):** Used for dropdowns or popover menus.
*   **Elevation.lg (inferred):** Used for modal or drawer overlays.

## Shapes

The design employs subtle rounding on interactive elements to maintain a professional, accessible feel without appearing overly playful or decorative. 

The `rounded.md` token is the standard for card components, while `rounded.sm` is applied to inputs to maintain a consistent, slightly softened geometric language.

## 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
The button system uses `{colors.primary}` for the primary action and a transparent background with a `{colors.primary}` border for secondary actions. Use these to guide users toward chronological navigation or sign-up flows.

### Card
The card component uses `{colors.surface}` with a `{colors.outline}` border and `{rounded.md}` corners. Use these to encapsulate individual historical event entries to provide clear visual separation.

### Badge
Badges use `{colors.surface-dim}` for background and `{colors.secondary}` for text. Use these for categorization or metadata tags. Use `{components.badge-success}` specifically for positive status indicators.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary headings to maintain authority. | Do not use bright or neon colors that distract from the content. |
| Use `{colors.info}` for all actionable links and interactive elements. | Do not use `{typography.display-lg}` for body text. |
| Apply `{typography.body-md}` for all historical event descriptions. | Do not remove the border from `{components.card}`. |
| Use `{spacing.md}` between calendar entries for visual separation. | Do not use excessive shadows that conflict with the flat design. |
| Apply `{rounded.md}` to all card components. | Do not use `{colors.error}` for anything other than critical alerts. |
| Use `{colors.outline}` for all structural dividers. | Do not use `{spacing.xs}` for main content padding. |
| Use `{components.badge-success}` for positive confirmations. | Do not use `{typography.label-sm}` for primary content. |
| Use `{components.input-field-focus}` to show active state. | Do not use `{colors.secondary}` for primary text. |

## Content Style

CTA labels are direct and action-oriented (e.g., "Sign up"). They should be concise, avoiding marketing fluff to maintain the solemn, educational tone of the brand.

Headings are factual and historical, prioritizing clarity over engagement. They should be declarative and objective, reflecting the academic nature of the archive.

Copy density is kept concise with event-focused summaries. Paragraphs should be short and rhythmically consistent, utilizing whitespace to prevent overwhelming the reader with dense historical data.

## Imagery & Icons

Icons are used sparingly, focusing on clean, stroke-based representations to maintain a serious, academic tone. Defer to the brand's existing asset library for any photographic or illustrative needs, ensuring they are minimal and do not detract from the text-heavy layout.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for A History of Racial Injustice, a solemn, educational archive documenting racial injustice in the United States. Match its restrained, academic 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.md}` — never hardcode hex values, font sizes, or pixel values.
2. Use only components defined under `components:`. Do not invent variants, additional states, or composite patterns the spec does not list.
3. Follow the Layout section's section order (`nav`, `hero`, `calendar-list`, `footer`) and vertical, list-based structure when assembling page layouts.
4. Treat the Do's and Don'ts table as authoritative. If a user's request conflicts with it, surface the conflict before proceeding.
5. All color tokens are marked "(inferred)" — if an authoritative token file exists, those values override the spec's hex approximations.

## Output contract

**Must:**
- Use token names for all colors, typography, spacing, radii, and elevation.
- Apply `{rounded.md}` to cards and `{rounded.sm}` to inputs, consistently.
- Include hover, focus, and disabled states for any interactive component the spec defines (e.g., `button-primary-hover`, `input-field-focus`, `link-hover`).
- Maintain minimum 4.5:1 contrast on all body text; the palette is designed to support this.
- Use `{spacing.md}` between calendar entries and respect the full spacing scale for all paddings and gaps.

**Must NOT:**
- Invent colors, radii, or type sizes absent from the spec.
- Substitute generic utility defaults when a named token exists.
- Use `{colors.error}` for anything other than critical alerts.
- Use `{typography.display-lg}` for body text or `{typography.label-sm}` for primary content.
- Add emoji, decorative flourishes, or marketing copy.
- Rewrite page copy, event headings, labels, or navigation items.
- Alter the defined page section order or information architecture.

## When in doubt
- If a value isn't in the spec, ask the product team before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface}`; for secondary containers, use `{colors.surface-dim}`.
- For unspecified breakpoints, use mobile-first layout with a single breakpoint at 768px, stacking calendar entries vertically per the Layout notes.
- Inferred tokens are visual approximations; defer to any authoritative source file if one is available.