---
name: Congress Kadoa
description: "This site is an excellent example of a 'no-nonsense' data application where the UI recedes completely to let complex financial and political data take center stage."
version: alpha

colors:
  background: "#f4f5f8"
  primary: "#23252a"
  secondary: "#5d5d5f"
  tertiary: "#0f7b3f"
  neutral: "#ababab"
  bg-soft: "#ffffff"
  bg-quiet: "#f2f2f2"
  muted-soft: "#e5e7eb"
  line: "rgba(229, 231, 235, 1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 48px
    lineHeight: 1.05
    fontWeight: 600
    letterSpacing: "-0.02em"
  heading:
    fontFamily: grotesque-sans
    fontSize: 24px
    lineHeight: 1.25
    fontWeight: 600
    letterSpacing: "-0.01em"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 450
    letterSpacing: "normal"
  caption:
    fontFamily: grotesque-sans
    fontSize: 13px
    lineHeight: 1.4
    fontWeight: 450
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

Open-source dashboard monitoring legislative and executive branch stock trading activity

*A clean, data-dense financial terminal reimagined for civic oversight*

## Colors

Neutral canvas with semantic green/red signal colors for financial performance metrics

- **Background (`#f4f5f8`)** — uses `bg` token
- **Primary text (`#23252a`)** — uses `ink` token
- **Secondary text (`#5d5d5f`)** — uses `ink-soft` token
- **Accent (`#0f7b3f`)** — uses `accent` token
- **Muted (`#ababab`)** — uses `muted` token
- **Borders (`rgba(229, 231, 235, 1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

## Layout

Single column data-centric layout with a top navigation bar and stacked content sections containing dense tabular data

*Rhythm:* Standard 4px base grid with vertical rhythm maintained through consistent line-height multiples

## Elevation & Depth

- none visible on cards, relies on borders for separation
- Borders: 1px solid #e5e7eb for cards and table rows, providing subtle containment without heavy shadows

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** Pill-shaped with 9999px radius, minimal borders, and semantic background colors
- **card:** White background with 1px border and 4px radius, containing key performance indicators
- **chip:** Colored backgrounds (green/red/orange) for ticker symbols and status indicators
- **input:** Rounded search input in the top navigation with a keyboard shortcut indicator
- **hero:** Large left-aligned headline with supporting subtitle and a grid of metric cards below

## Do's and Don'ts

**Don't:**
- don't use heavy drop shadows — screenshot shows clean white cards defined only by 1px borders
- don't use centered headlines — screenshot shows strict left-aligned text hierarchy throughout
- don't use rounded corners on cards — screenshot shows sharp 4px radii on data containers
- don't use serif typography — screenshot shows clean grotesque sans-serif families for all text
- don't use colorful gradients — screenshot shows a flat, neutral background with semantic color chips
- don't use complex multi-column layouts — screenshot shows a linear, single-column data stream

---

## System Prompt (paste into AI agent)

```
This is a data-dense, open-source civic transparency dashboard tracking congressional and executive branch stock trading. It uses a neutral, off-white background (#f4f5f8) with crisp white surfaces and dark charcoal text (#23252a). The typography is a clean grotesque sans-serif (Inter) with a secondary monospace for data. Accent colors are strictly semantic: green (#0f7b3f) for gains, red (#be2929) for losses, and orange for warnings. Key constraints: never center text, never use decorative shadows, always prioritize data legibility over visual flair, and keep interactions subtle with 150ms transitions.
```