Theme Preview
Compare all design tokens across dark and light themes. Toggle between side-by-side view or individual themes.
Sample text in foreground
Muted caption text for secondary info
Interactive link in primary color
Decorative icon/label in primary-muted
Sample text in foreground
Muted caption text for secondary info
Interactive link in primary color
Decorative icon/label in primary-muted
Color Architecture
The Marlowe Keynes UI follows the 60-30-10 rule: 60% dark base surfaces, 30% text and decorative elements, 10% interactive accent colors. Every color pair has been audited against WCAG AA contrast requirements (4.5:1 for normal text, 3:1 for large text and UI components).
Base Surfaces — 60%
Dark navy backgrounds that form the canvas
--backgroundbg-background--cardbg-card--popoverbg-popover--secondarybg-secondary--mutedbg-muted--sidebarbg-sidebarText & Decorative — 30%
Foreground text, muted labels, borders, and decorative icons
--foregroundtext-foreground--muted-foregroundtext-muted-foreground--primary-mutedtext-primary-muted--borderborder-border--card-foregroundtext-card-foregroundInteractive Accent — 10%
Reserved for buttons, links, hover states, and active indicators
--primarytext-primary--accentbg-accent--neon-greentext-neon--neon-amber--neon-red--destructivebg-destructiveAccent Color Rules
Neon Palette
Robinhood-meets-Bloomberg institutional color system. Three semantic neon tokens for interactive feedback.
Success, active, primary interactive
oklch(0.85 0.25 145)Warning, CTA highlight, attention
oklch(0.72 0.22 50)Error, destructive, critical alert
oklch(0.60 0.22 25)Component Playground
Interactive demos of reusable components. Hover, click, and interact to see them in action.
ToolCard — Animated Reveal
Hover over a card to see the content panel rotate in. On mobile, tap once to reveal, tap again to navigate. Each card has a curated gradient preset and supports compact mode for dropdowns.
Full Size
Compare
Side-by-side management comparison across companies
Valuation Lab
DCF, multiples, and scenario analysis
SEC Filings
Deep dive into proxy statements and 10-K filings
Governance
Board independence, audit quality, and risk oversight
Compact (Dropdown)
Compare
Side-by-side management comparison across companies
Valuation Lab
DCF, multiples, and scenario analysis
SEC Filings
Deep dive into proxy statements and 10-K filings
Governance
Board independence, audit quality, and risk oversight
Usage
import { ToolCard } from "@/components/ToolCard";
import { GitCompare } from "lucide-react";
<ToolCard
tool={{
name: "Compare",
href: "/compare",
icon: GitCompare,
description: "Side-by-side management comparison",
gradient: "blue",
}}
compact={false}
/>Animation Showcase
Live demos of the three core animation patterns. Adjust speed with the sliders to find the right feel.
Rotate-In Reveal
Tool card content panel
0.6sCompare Tool
Side-by-side management team comparison with scoring.
CSS
.tool-card {
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.tool-card:hover .tool-card__content {
transform: translate(-50%, -50%) rotate(0deg);
opacity: 1;
}Banter Shuffle
Loading indicator puzzle
1.5sCSS
.banter-loader__box {
animation: banter-loader 1.5s ease infinite;
/* 9 boxes with staggered delays:
box1: 0s, box2: -0.167s, box3: -0.333s... */
}Staggered Fade-In
Content entrance by weight
0.4sCSS
@keyframes fadeSlideUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* Stagger by weight: heaviest first, largest motion */
.headline { animation-delay: 0s; }
.subtitle { animation-delay: 0.12s; }
.cta { animation-delay: 0.24s; }
.body { animation-delay: 0.36s; }Typography Pairing
Four typefaces, each with a distinct role. Never mix roles — headlines stay in Libre Bodoni, data stays in JetBrains Mono.
Libre Bodoni
Headlines & hero text
--font-displayfont-headlineJetBrains Mono
Financial data, scores, tickers
--font-datafont-dataInter
Body text, UI labels, navigation
--font-sansfont-sansCormorant Garamond
Accent serif (quotes, callouts)
--font-seriffont-serifZero CLS Utility Classes
Predefined minimum heights that reserve space for async content. Apply these to containers that load data asynchronously to prevent Cumulative Layout Shift.
| Class | Min Height | Usage | Preview |
|---|---|---|---|
cls-hero | 500px | Hero section above the fold | 500px |
cls-chart | 350px | Chart containers (Recharts, etc.) | 350px |
cls-card | 200px | Standard data cards | 200px |
cls-stat-card | 120px | Compact stat/KPI cards | 120px |
cls-table | 400px | Data tables with pagination | 400px |
cls-data-grid | 300px | Grid layouts of data cards | 300px |
cls-analysis-panel | 600px | Full analysis results panel | 600px |
cls-comparison | 500px | Side-by-side comparison views | 500px |
Performance Budgets
Core Web Vitals thresholds enforced via automated Lighthouse CI. These budgets run on every checkpoint to catch regressions before they ship.
Largest Contentful Paint — hero section render time
Cumulative Layout Shift — layout stability score
First Input Delay — time to interactive responsiveness
Time to First Byte — server response time
Interaction to Next Paint — responsiveness to user input
Total Blocking Time — main thread blocking duration
WCAG AA Audit Results
All 35 color pairs pass WCAG AA contrast requirements. Audit covers both dark and light mode.
Dark mode: 25 · Light mode: 10
0 failures after color adjustments
Border on card (threshold: 3:1)