A clean, data-dense financial terminal reimagined for civic oversight
02
Color
#0f7b3fAccent
#23252aInk
#5d5d5fInk soft
#f4f5f8BG
#ffffffBG soft
#f2f2f2BG quiet
#abababMuted
rgba(229, 231, 235, 1)Line
Neutral canvas with semantic green/red signal colors for financial performance metrics
03
Typography
grotesque-sans · monospace
display48px · 600
heading24px · 600
body16px · 450
caption13px · 450
04
Spacing
4px
8px
12px
16px
24px
32px
48px
64px
Standard 4px base grid with vertical rhythm maintained through consistent line-height multiples
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 9999px
1px solid #e5e7eb for cards and table rows, providing subtle containment without heavy shadows
none visible on cards, relies on borders for separation
06
Layout
1200container
12columns
24pxgutter
768 / 1024breakpoints
Single column data-centric layout with a top navigation bar and stacked content sections containing dense tabular data
07
Motion & Interaction
150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Uniform 150ms transitions for all interactive states including color, background, and borders
Subtle background color transitions on interactive elements like table rows and buttons · Immediate visual feedback with state changes, cursor defaults to pointer
08
Components
buttonPill-shaped with 9999px radius, minimal borders, and semantic background colors
cardWhite background with 1px border and 4px radius, containing key performance indicators
chipColored backgrounds (green/red/orange) for ticker symbols and status indicators
inputRounded search input in the top navigation with a keyboard shortcut indicator
heroLarge left-aligned headline with supporting subtitle and a grid of metric cards below
09
Voice & Don'ts
ToneObjective, analytical, and serious, focusing on raw data presentation without editorial bias
HeadlinesDirect and declarative statements about data coverage and specific metrics
CTAsFunctional navigation links like 'See all →' and 'Star on GitHub'
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
Avoid: Marketing jargon
Avoid: Emotional language
Avoid: Hype
Avoid: Vague descriptions
11
System prompt
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.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
