Finance Dashboard - Free HTML/CSS UI Kit
Premium wealth management and trading dashboard components featuring portfolio cards, sparkline metrics, transaction tables, and deep-green sidebar navigation.
Download Full Kit (.zip)
Complete kit with all components & styles
Just need one component?
Download base.css and add the following line to your HTML:
<link rel="stylesheet" href="base.css">
Then grab a component below and add it to your HTML.
Color Palette
Forest Green
#064E3B
Emerald
#059669
Amber Gold
#D97706
Warm Stone
#FAFAF9
Warm Slate
#78716C
Typography
Hero Sections
Portfolio Overview Hero
HTML
<div class="fd-portfolio-hero fd-card">
<div class="fd-portfolio-header">
<div>
<p class="fd-portfolio-label">Total Portfolio Value</p>
<div class="fd-portfolio-value-row">
<h1 class="fd-portfolio-value">$284,920.48</h1>
<span class="fd-badge fd-badge-success">▲ 2.34% today</span>
</div>
<p class="fd-portfolio-sub">+$6,512.20 today · All-time gain: <span class="text-success">+$48,240 (20.4%)</span></p>
</div>
<div class="fd-portfolio-actions">
<button class="fd-btn fd-btn-outline fd-btn-sm">
<svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
Export
</button>
<button class="fd-btn fd-btn-primary fd-btn-sm">
<svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
Add Position
</button>
</div>
</div>
<!-- Simulated sparkline chart -->
<div class="fd-chart-area">
<svg class="fd-sparkline-chart" viewBox="0 0 800 120" preserveAspectRatio="none">
<defs>
<linearGradient id="chartGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#059669" stop-opacity="0.18"/>
<stop offset="100%" stop-color="#059669" stop-opacity="0"/>
</linearGradient>
</defs>
<path d="M0,90 C50,85 80,70 130,65 C180,60 200,55 250,50 C310,44 330,48 380,40 C440,32 460,36 510,28 C560,20 590,24 640,18 C680,14 730,10 800,8"
fill="none" stroke="#059669" stroke-width="2.5" stroke-linecap="round"/>
<path d="M0,90 C50,85 80,70 130,65 C180,60 200,55 250,50 C310,44 330,48 380,40 C440,32 460,36 510,28 C560,20 590,24 640,18 C680,14 730,10 800,8 L800,120 L0,120 Z"
fill="url(#chartGrad)"/>
</svg>
<!-- Chart axis labels -->
<div class="fd-chart-labels">
<span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span><span>May</span><span>Jun</span>
</div>
</div>
<!-- KPI strip -->
<div class="fd-portfolio-kpis">
<div class="fd-kpi">
<span class="fd-kpi-label">Day's P&L</span>
<span class="fd-kpi-value text-success">+$6,512</span>
</div>
<div class="fd-kpi-sep"></div>
<div class="fd-kpi">
<span class="fd-kpi-label">Unrealised Gain</span>
<span class="fd-kpi-value text-success">+$48,240</span>
</div>
<div class="fd-kpi-sep"></div>
<div class="fd-kpi">
<span class="fd-kpi-label">Beta</span>
<span class="fd-kpi-value">1.12</span>
</div>
<div class="fd-kpi-sep"></div>
<div class="fd-kpi">
<span class="fd-kpi-label">Sharpe Ratio</span>
<span class="fd-kpi-value">2.38</span>
</div>
<div class="fd-kpi-sep"></div>
<div class="fd-kpi">
<span class="fd-kpi-label">Positions</span>
<span class="fd-kpi-value">14</span>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Portfolio Overview Hero */
/* NOTE: This component requires base.css to be included in your page. */
.fd-portfolio-hero {
max-width: 1100px;
margin: 0 auto;
padding: 2.25rem !important;
display: flex;
flex-direction: column;
gap: 2rem;
}
.fd-portfolio-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.fd-portfolio-label {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.5rem;
color: var(--fd-text-muted);
}
.fd-portfolio-value-row {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 0.5rem;
}
.fd-portfolio-value {
font-size: 2.85rem;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
}
.fd-portfolio-sub {
font-size: 0.88rem;
font-weight: 500;
}
.fd-portfolio-actions {
display: flex;
gap: 0.75rem;
flex-shrink: 0;
align-self: flex-start;
}
/* Chart area */
.fd-chart-area {
position: relative;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.fd-sparkline-chart {
width: 100%;
height: 120px;
display: block;
}
.fd-chart-labels {
display: flex;
justify-content: space-between;
padding: 0 4px;
}
.fd-chart-labels span {
font-size: 0.72rem;
font-weight: 600;
color: var(--fd-text-light);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* KPI strip */
.fd-portfolio-kpis {
display: flex;
align-items: center;
gap: 0;
border-top: 1px solid var(--fd-border);
padding-top: 1.5rem;
flex-wrap: wrap;
}
.fd-kpi {
display: flex;
flex-direction: column;
gap: 0.3rem;
flex: 1;
min-width: 100px;
padding: 0 1.5rem 0 0;
}
.fd-kpi:first-child { padding-left: 0; }
.fd-kpi-label {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--fd-text-muted);
}
.fd-kpi-value {
font-family: var(--fd-font-heading);
font-size: 1.15rem;
font-weight: 800;
color: var(--fd-text);
letter-spacing: -0.02em;
}
.fd-kpi-sep {
width: 1px;
height: 40px;
background-color: var(--fd-border);
flex-shrink: 0;
margin-right: 1.5rem;
align-self: center;
}
@media (max-width: 768px) {
.fd-portfolio-value { font-size: 2.1rem; }
.fd-portfolio-kpis { gap: 1rem; }
.fd-kpi-sep { display: none; }
.fd-kpi { padding: 0; flex: 0 1 calc(50% - 0.5rem); }
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
/* ===========================
Finance Dashboard Design System
=========================== */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
/* Surfaces */
--fd-bg: #FAFAF9;
--fd-surface: #FFFFFF;
--fd-surface-2: #F5F5F4;
--fd-sidebar-bg: #064E3B;
--fd-sidebar-hover: #065F46;
--fd-sidebar-active:#059669;
/* Brand */
--fd-primary: #059669;
--fd-primary-hover: #047857;
--fd-primary-muted: #D1FAE5;
--fd-gold: #D97706;
--fd-gold-muted: #FEF3C7;
--fd-success: #16A34A;
--fd-success-muted: #DCFCE7;
--fd-danger: #DC2626;
--fd-danger-muted: #FEE2E2;
--fd-warning: #D97706;
--fd-warning-muted: #FEF3C7;
--fd-info: #0284C7;
--fd-info-muted: #E0F2FE;
/* Text */
--fd-text: #1C1917;
--fd-text-muted: #78716C;
--fd-text-light: #A8A29E;
--fd-sidebar-text: #A7F3D0;
--fd-sidebar-label: rgba(167,243,208,0.45);
/* Borders */
--fd-border: #E7E5E4;
--fd-border-strong: #D6D3D1;
/* Radius */
--fd-radius-sm: 8px;
--fd-radius: 12px;
--fd-radius-lg: 16px;
--fd-radius-pill: 100px;
/* Fonts */
--fd-font-heading: 'Plus Jakarta Sans', sans-serif;
--fd-font-body: 'Inter', sans-serif;
--fd-font-mono: 'Courier New', monospace;
/* Shadows */
--fd-shadow-xs: 0 1px 2px rgba(28,25,23,0.05);
--fd-shadow-sm: 0 1px 3px rgba(28,25,23,0.07), 0 4px 16px rgba(28,25,23,0.04);
--fd-shadow: 0 4px 8px rgba(28,25,23,0.08), 0 12px 32px rgba(28,25,23,0.06);
--fd-shadow-lg: 0 8px 20px rgba(28,25,23,0.10), 0 24px 48px rgba(28,25,23,0.08);
/* Transition */
--fd-transition: all 0.18s ease;
}
body {
margin: 0;
font-family: var(--fd-font-body);
color: var(--fd-text);
background-color: var(--fd-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.fd-card {
background-color: var(--fd-surface);
border: 1px solid var(--fd-border);
border-radius: var(--fd-radius);
box-shadow: var(--fd-shadow-sm);
padding: 1.75rem;
transition: var(--fd-transition);
}
.fd-card:hover {
box-shadow: var(--fd-shadow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--fd-font-heading);
font-weight: 700;
margin: 0;
color: var(--fd-text);
letter-spacing: -0.015em;
line-height: 1.25;
}
p {
font-family: var(--fd-font-body);
color: var(--fd-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.fd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.6rem 1.25rem;
font-family: var(--fd-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--fd-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--fd-transition);
white-space: nowrap;
user-select: none;
line-height: 1.4;
letter-spacing: -0.01em;
}
.fd-btn:focus-visible {
outline: 2px solid var(--fd-primary);
outline-offset: 2px;
}
.fd-btn-primary {
background-color: var(--fd-primary);
color: #fff;
border-color: var(--fd-primary);
}
.fd-btn-primary:hover {
background-color: var(--fd-primary-hover);
border-color: var(--fd-primary-hover);
box-shadow: 0 4px 14px rgba(5,150,105,0.35);
transform: translateY(-1px);
}
.fd-btn-primary:active {
transform: translateY(0);
box-shadow: none;
}
.fd-btn-gold {
background-color: var(--fd-gold);
color: #fff;
border-color: var(--fd-gold);
}
.fd-btn-gold:hover {
background-color: #B45309;
box-shadow: 0 4px 14px rgba(217,119,6,0.35);
transform: translateY(-1px);
}
.fd-btn-danger {
background-color: var(--fd-danger);
color: #fff;
border-color: var(--fd-danger);
}
.fd-btn-danger:hover {
background-color: #B91C1C;
box-shadow: 0 4px 14px rgba(220,38,38,0.35);
transform: translateY(-1px);
}
.fd-btn-outline {
background-color: var(--fd-surface);
color: var(--fd-text);
border-color: var(--fd-border-strong);
}
.fd-btn-outline:hover {
background-color: var(--fd-surface-2);
border-color: var(--fd-text-light);
transform: translateY(-1px);
}
.fd-btn-ghost {
background-color: transparent;
color: var(--fd-text-muted);
border-color: transparent;
}
.fd-btn-ghost:hover {
background-color: var(--fd-surface-2);
color: var(--fd-text);
}
.fd-btn-sm { padding: 0.4rem 0.85rem; font-size: 0.8rem; }
.fd-btn-lg { padding: 0.8rem 1.75rem; font-size: 1rem; }
.fd-btn-block { width: 100%; }
.fd-btn-icon { width: 36px; height: 36px; padding: 0; }
/* ── Form Controls ────────────── */
.fd-input {
width: 100%;
padding: 0.65rem 0.95rem;
border: 1px solid var(--fd-border-strong);
border-radius: var(--fd-radius-sm);
font-family: var(--fd-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--fd-text);
background-color: var(--fd-surface);
outline: none;
transition: var(--fd-transition);
}
.fd-input::placeholder { color: var(--fd-text-light); }
.fd-input:focus {
border-color: var(--fd-primary);
box-shadow: 0 0 0 3px rgba(5,150,105,0.12);
}
.fd-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--fd-font-heading);
font-weight: 700;
font-size: 0.82rem;
color: var(--fd-text);
letter-spacing: -0.01em;
}
.fd-select {
width: 100%;
padding: 0.65rem 2rem 0.65rem 0.95rem;
border: 1px solid var(--fd-border-strong);
border-radius: var(--fd-radius-sm);
font-family: var(--fd-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--fd-text);
background-color: var(--fd-surface);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378716C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--fd-transition);
}
.fd-select:focus {
border-color: var(--fd-primary);
box-shadow: 0 0 0 3px rgba(5,150,105,0.12);
}
/* ── Badges ───────────────────── */
.fd-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.65rem;
border-radius: var(--fd-radius-pill);
font-family: var(--fd-font-heading);
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
letter-spacing: -0.01em;
}
.fd-badge-success { background-color: var(--fd-success-muted); color: #14532D; }
.fd-badge-danger { background-color: var(--fd-danger-muted); color: #7F1D1D; }
.fd-badge-gold { background-color: var(--fd-gold-muted); color: #78350F; }
.fd-badge-info { background-color: var(--fd-info-muted); color: #0C4A6E; }
.fd-badge-default { background-color: var(--fd-surface-2); color: var(--fd-text-muted); border: 1px solid var(--fd-border); }
/* ── Toggle ───────────────────── */
.fd-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.fd-toggle input { opacity: 0; width: 0; height: 0; }
.fd-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--fd-border-strong); border-radius: 24px; transition: var(--fd-transition); }
.fd-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--fd-transition); box-shadow: var(--fd-shadow-xs); }
.fd-toggle input:checked + .fd-toggle-slider { background-color: var(--fd-primary); }
.fd-toggle input:checked + .fd-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.fd-divider { border: none; border-top: 1px solid var(--fd-border); margin: 0; }
/* ── Logo ─────────────────────── */
.fd-logo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
font-family: var(--fd-font-heading);
font-weight: 800;
font-size: 1.1rem;
color: #fff;
letter-spacing: -0.02em;
}
.fd-logo-icon {
width: 34px;
height: 34px;
background: linear-gradient(135deg, #34D399, #059669);
border-radius: var(--fd-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* ── Utility ──────────────────── */
.text-success { color: var(--fd-success) !important; }
.text-danger { color: var(--fd-danger) !important; }
.text-gold { color: var(--fd-gold) !important; }
.text-muted { color: var(--fd-text-muted) !important; }
.text-light { color: var(--fd-text-light) !important; }
.text-white { color: #fff !important; }
.font-mono { font-family: var(--fd-font-mono) !important; }
/* --- COMPONENT STYLES --- */
.fd-portfolio-hero {
max-width: 1100px;
margin: 0 auto;
padding: 2.25rem !important;
display: flex;
flex-direction: column;
gap: 2rem;
}
.fd-portfolio-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.fd-portfolio-label {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.5rem;
color: var(--fd-text-muted);
}
.fd-portfolio-value-row {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 0.5rem;
}
.fd-portfolio-value {
font-size: 2.85rem;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
}
.fd-portfolio-sub {
font-size: 0.88rem;
font-weight: 500;
}
.fd-portfolio-actions {
display: flex;
gap: 0.75rem;
flex-shrink: 0;
align-self: flex-start;
}
/* Chart area */
.fd-chart-area {
position: relative;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.fd-sparkline-chart {
width: 100%;
height: 120px;
display: block;
}
.fd-chart-labels {
display: flex;
justify-content: space-between;
padding: 0 4px;
}
.fd-chart-labels span {
font-size: 0.72rem;
font-weight: 600;
color: var(--fd-text-light);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* KPI strip */
.fd-portfolio-kpis {
display: flex;
align-items: center;
gap: 0;
border-top: 1px solid var(--fd-border);
padding-top: 1.5rem;
flex-wrap: wrap;
}
.fd-kpi {
display: flex;
flex-direction: column;
gap: 0.3rem;
flex: 1;
min-width: 100px;
padding: 0 1.5rem 0 0;
}
.fd-kpi:first-child { padding-left: 0; }
.fd-kpi-label {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--fd-text-muted);
}
.fd-kpi-value {
font-family: var(--fd-font-heading);
font-size: 1.15rem;
font-weight: 800;
color: var(--fd-text);
letter-spacing: -0.02em;
}
.fd-kpi-sep {
width: 1px;
height: 40px;
background-color: var(--fd-border);
flex-shrink: 0;
margin-right: 1.5rem;
align-self: center;
}
@media (max-width: 768px) {
.fd-portfolio-value { font-size: 2.1rem; }
.fd-portfolio-kpis { gap: 1rem; }
.fd-kpi-sep { display: none; }
.fd-kpi { padding: 0; flex: 0 1 calc(50% - 0.5rem); }
}
Market Snapshot Split
HTML
<div class="fd-split-hero">
<div class="fd-split-content fd-card">
<div class="fd-split-symbol-row">
<div class="fd-symbol-chip">
<div class="fd-symbol-icon">📈</div>
<div>
<div class="fd-symbol-ticker">AAPL</div>
<div class="fd-symbol-name text-muted">Apple Inc.</div>
</div>
</div>
<span class="fd-badge fd-badge-success">NASDAQ · Live</span>
</div>
<div class="fd-split-price-block">
<h2 class="fd-split-price">$189.42</h2>
<div class="fd-split-change">
<span class="text-success" style="font-size:1.05rem;font-weight:700;">▲ $4.18 (2.26%)</span>
<span class="text-muted" style="font-size:0.85rem;">Today</span>
</div>
</div>
<div class="fd-split-metrics">
<div class="fd-mini-metric">
<span class="fd-mini-label">Open</span>
<span class="fd-mini-val">$185.80</span>
</div>
<div class="fd-mini-metric">
<span class="fd-mini-label">52W High</span>
<span class="fd-mini-val">$199.62</span>
</div>
<div class="fd-mini-metric">
<span class="fd-mini-label">52W Low</span>
<span class="fd-mini-val">$164.08</span>
</div>
<div class="fd-mini-metric">
<span class="fd-mini-label">Mkt Cap</span>
<span class="fd-mini-val">$2.94T</span>
</div>
</div>
<div class="fd-split-actions">
<button class="fd-btn fd-btn-primary">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
Buy Shares
</button>
<button class="fd-btn fd-btn-danger">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/><polyline points="17 18 23 18 23 12"/></svg>
Sell
</button>
<button class="fd-btn fd-btn-outline">Watchlist</button>
</div>
</div>
<div class="fd-split-sidebar">
<div class="fd-order-card fd-card">
<h4 class="fd-order-title">Quick Order</h4>
<div class="fd-order-type-tabs">
<button class="fd-tab-btn active">Market</button>
<button class="fd-tab-btn">Limit</button>
<button class="fd-tab-btn">Stop</button>
</div>
<div class="fd-order-form">
<div class="fd-form-group">
<label class="fd-label">Quantity (Shares)</label>
<input type="number" class="fd-input" value="10" min="1">
</div>
<div class="fd-order-summary">
<div class="fd-order-row">
<span class="text-muted">Est. Cost</span>
<span style="font-weight:700;">$1,894.20</span>
</div>
<div class="fd-order-row">
<span class="text-muted">Commission</span>
<span class="text-success">$0.00</span>
</div>
<div class="fd-order-row fd-order-total">
<span>Total</span>
<span style="font-family:var(--fd-font-mono); font-weight:700;">$1,894.20</span>
</div>
</div>
<button class="fd-btn fd-btn-primary fd-btn-block">Place Buy Order</button>
</div>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Market Snapshot Split */
/* NOTE: This component requires base.css to be included in your page. */
.fd-split-hero {
display: grid;
grid-template-columns: 1fr 320px;
gap: 1.5rem;
max-width: 1100px;
margin: 0 auto;
align-items: start;
}
/* Left content card */
.fd-split-content {
padding: 2.25rem !important;
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.fd-split-symbol-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.fd-symbol-chip {
display: flex;
align-items: center;
gap: 0.75rem;
}
.fd-symbol-icon {
font-size: 1.5rem;
width: 44px;
height: 44px;
background-color: var(--fd-primary-muted);
border-radius: var(--fd-radius-sm);
display: flex;
align-items: center;
justify-content: center;
}
.fd-symbol-ticker {
font-family: var(--fd-font-heading);
font-size: 1.1rem;
font-weight: 800;
color: var(--fd-text);
letter-spacing: -0.01em;
}
.fd-symbol-name {
font-size: 0.8rem;
font-weight: 500;
}
.fd-split-price-block {
display: flex;
align-items: baseline;
gap: 1.25rem;
flex-wrap: wrap;
}
.fd-split-price {
font-size: 3rem;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
}
.fd-split-change {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
/* Mini metrics row */
.fd-split-metrics {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
padding-top: 1.25rem;
border-top: 1px solid var(--fd-border);
}
.fd-mini-metric {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.fd-mini-label {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--fd-text-muted);
}
.fd-mini-val {
font-family: var(--fd-font-heading);
font-size: 1rem;
font-weight: 700;
color: var(--fd-text);
letter-spacing: -0.01em;
}
.fd-split-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
padding-top: 0.25rem;
}
/* Right order card */
.fd-order-card {
padding: 1.75rem !important;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.fd-order-title {
font-size: 1rem;
font-weight: 700;
}
.fd-order-type-tabs {
display: flex;
gap: 0;
border: 1px solid var(--fd-border);
border-radius: var(--fd-radius-sm);
overflow: hidden;
}
.fd-tab-btn {
flex: 1;
padding: 0.5rem;
border: none;
background: transparent;
font-family: var(--fd-font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--fd-text-muted);
cursor: pointer;
transition: var(--fd-transition);
border-right: 1px solid var(--fd-border);
}
.fd-tab-btn:last-child { border-right: none; }
.fd-tab-btn.active {
background-color: var(--fd-primary);
color: #fff;
}
.fd-tab-btn:not(.active):hover {
background-color: var(--fd-surface-2);
color: var(--fd-text);
}
.fd-order-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.fd-form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.fd-order-summary {
display: flex;
flex-direction: column;
gap: 0.6rem;
background-color: var(--fd-surface-2);
border: 1px solid var(--fd-border);
border-radius: var(--fd-radius-sm);
padding: 1rem;
}
.fd-order-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
}
.fd-order-total {
border-top: 1px solid var(--fd-border);
padding-top: 0.6rem;
margin-top: 0.2rem;
font-size: 0.95rem;
}
@media (max-width: 900px) {
.fd-split-hero { grid-template-columns: 1fr; }
.fd-split-metrics { grid-template-columns: repeat(2, 1fr); }
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
/* ===========================
Finance Dashboard Design System
=========================== */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
/* Surfaces */
--fd-bg: #FAFAF9;
--fd-surface: #FFFFFF;
--fd-surface-2: #F5F5F4;
--fd-sidebar-bg: #064E3B;
--fd-sidebar-hover: #065F46;
--fd-sidebar-active:#059669;
/* Brand */
--fd-primary: #059669;
--fd-primary-hover: #047857;
--fd-primary-muted: #D1FAE5;
--fd-gold: #D97706;
--fd-gold-muted: #FEF3C7;
--fd-success: #16A34A;
--fd-success-muted: #DCFCE7;
--fd-danger: #DC2626;
--fd-danger-muted: #FEE2E2;
--fd-warning: #D97706;
--fd-warning-muted: #FEF3C7;
--fd-info: #0284C7;
--fd-info-muted: #E0F2FE;
/* Text */
--fd-text: #1C1917;
--fd-text-muted: #78716C;
--fd-text-light: #A8A29E;
--fd-sidebar-text: #A7F3D0;
--fd-sidebar-label: rgba(167,243,208,0.45);
/* Borders */
--fd-border: #E7E5E4;
--fd-border-strong: #D6D3D1;
/* Radius */
--fd-radius-sm: 8px;
--fd-radius: 12px;
--fd-radius-lg: 16px;
--fd-radius-pill: 100px;
/* Fonts */
--fd-font-heading: 'Plus Jakarta Sans', sans-serif;
--fd-font-body: 'Inter', sans-serif;
--fd-font-mono: 'Courier New', monospace;
/* Shadows */
--fd-shadow-xs: 0 1px 2px rgba(28,25,23,0.05);
--fd-shadow-sm: 0 1px 3px rgba(28,25,23,0.07), 0 4px 16px rgba(28,25,23,0.04);
--fd-shadow: 0 4px 8px rgba(28,25,23,0.08), 0 12px 32px rgba(28,25,23,0.06);
--fd-shadow-lg: 0 8px 20px rgba(28,25,23,0.10), 0 24px 48px rgba(28,25,23,0.08);
/* Transition */
--fd-transition: all 0.18s ease;
}
body {
margin: 0;
font-family: var(--fd-font-body);
color: var(--fd-text);
background-color: var(--fd-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.fd-card {
background-color: var(--fd-surface);
border: 1px solid var(--fd-border);
border-radius: var(--fd-radius);
box-shadow: var(--fd-shadow-sm);
padding: 1.75rem;
transition: var(--fd-transition);
}
.fd-card:hover {
box-shadow: var(--fd-shadow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--fd-font-heading);
font-weight: 700;
margin: 0;
color: var(--fd-text);
letter-spacing: -0.015em;
line-height: 1.25;
}
p {
font-family: var(--fd-font-body);
color: var(--fd-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.fd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.6rem 1.25rem;
font-family: var(--fd-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--fd-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--fd-transition);
white-space: nowrap;
user-select: none;
line-height: 1.4;
letter-spacing: -0.01em;
}
.fd-btn:focus-visible {
outline: 2px solid var(--fd-primary);
outline-offset: 2px;
}
.fd-btn-primary {
background-color: var(--fd-primary);
color: #fff;
border-color: var(--fd-primary);
}
.fd-btn-primary:hover {
background-color: var(--fd-primary-hover);
border-color: var(--fd-primary-hover);
box-shadow: 0 4px 14px rgba(5,150,105,0.35);
transform: translateY(-1px);
}
.fd-btn-primary:active {
transform: translateY(0);
box-shadow: none;
}
.fd-btn-gold {
background-color: var(--fd-gold);
color: #fff;
border-color: var(--fd-gold);
}
.fd-btn-gold:hover {
background-color: #B45309;
box-shadow: 0 4px 14px rgba(217,119,6,0.35);
transform: translateY(-1px);
}
.fd-btn-danger {
background-color: var(--fd-danger);
color: #fff;
border-color: var(--fd-danger);
}
.fd-btn-danger:hover {
background-color: #B91C1C;
box-shadow: 0 4px 14px rgba(220,38,38,0.35);
transform: translateY(-1px);
}
.fd-btn-outline {
background-color: var(--fd-surface);
color: var(--fd-text);
border-color: var(--fd-border-strong);
}
.fd-btn-outline:hover {
background-color: var(--fd-surface-2);
border-color: var(--fd-text-light);
transform: translateY(-1px);
}
.fd-btn-ghost {
background-color: transparent;
color: var(--fd-text-muted);
border-color: transparent;
}
.fd-btn-ghost:hover {
background-color: var(--fd-surface-2);
color: var(--fd-text);
}
.fd-btn-sm { padding: 0.4rem 0.85rem; font-size: 0.8rem; }
.fd-btn-lg { padding: 0.8rem 1.75rem; font-size: 1rem; }
.fd-btn-block { width: 100%; }
.fd-btn-icon { width: 36px; height: 36px; padding: 0; }
/* ── Form Controls ────────────── */
.fd-input {
width: 100%;
padding: 0.65rem 0.95rem;
border: 1px solid var(--fd-border-strong);
border-radius: var(--fd-radius-sm);
font-family: var(--fd-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--fd-text);
background-color: var(--fd-surface);
outline: none;
transition: var(--fd-transition);
}
.fd-input::placeholder { color: var(--fd-text-light); }
.fd-input:focus {
border-color: var(--fd-primary);
box-shadow: 0 0 0 3px rgba(5,150,105,0.12);
}
.fd-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--fd-font-heading);
font-weight: 700;
font-size: 0.82rem;
color: var(--fd-text);
letter-spacing: -0.01em;
}
.fd-select {
width: 100%;
padding: 0.65rem 2rem 0.65rem 0.95rem;
border: 1px solid var(--fd-border-strong);
border-radius: var(--fd-radius-sm);
font-family: var(--fd-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--fd-text);
background-color: var(--fd-surface);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378716C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--fd-transition);
}
.fd-select:focus {
border-color: var(--fd-primary);
box-shadow: 0 0 0 3px rgba(5,150,105,0.12);
}
/* ── Badges ───────────────────── */
.fd-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.65rem;
border-radius: var(--fd-radius-pill);
font-family: var(--fd-font-heading);
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
letter-spacing: -0.01em;
}
.fd-badge-success { background-color: var(--fd-success-muted); color: #14532D; }
.fd-badge-danger { background-color: var(--fd-danger-muted); color: #7F1D1D; }
.fd-badge-gold { background-color: var(--fd-gold-muted); color: #78350F; }
.fd-badge-info { background-color: var(--fd-info-muted); color: #0C4A6E; }
.fd-badge-default { background-color: var(--fd-surface-2); color: var(--fd-text-muted); border: 1px solid var(--fd-border); }
/* ── Toggle ───────────────────── */
.fd-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.fd-toggle input { opacity: 0; width: 0; height: 0; }
.fd-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--fd-border-strong); border-radius: 24px; transition: var(--fd-transition); }
.fd-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--fd-transition); box-shadow: var(--fd-shadow-xs); }
.fd-toggle input:checked + .fd-toggle-slider { background-color: var(--fd-primary); }
.fd-toggle input:checked + .fd-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.fd-divider { border: none; border-top: 1px solid var(--fd-border); margin: 0; }
/* ── Logo ─────────────────────── */
.fd-logo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
font-family: var(--fd-font-heading);
font-weight: 800;
font-size: 1.1rem;
color: #fff;
letter-spacing: -0.02em;
}
.fd-logo-icon {
width: 34px;
height: 34px;
background: linear-gradient(135deg, #34D399, #059669);
border-radius: var(--fd-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* ── Utility ──────────────────── */
.text-success { color: var(--fd-success) !important; }
.text-danger { color: var(--fd-danger) !important; }
.text-gold { color: var(--fd-gold) !important; }
.text-muted { color: var(--fd-text-muted) !important; }
.text-light { color: var(--fd-text-light) !important; }
.text-white { color: #fff !important; }
.font-mono { font-family: var(--fd-font-mono) !important; }
/* --- COMPONENT STYLES --- */
.fd-split-hero {
display: grid;
grid-template-columns: 1fr 320px;
gap: 1.5rem;
max-width: 1100px;
margin: 0 auto;
align-items: start;
}
/* Left content card */
.fd-split-content {
padding: 2.25rem !important;
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.fd-split-symbol-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.fd-symbol-chip {
display: flex;
align-items: center;
gap: 0.75rem;
}
.fd-symbol-icon {
font-size: 1.5rem;
width: 44px;
height: 44px;
background-color: var(--fd-primary-muted);
border-radius: var(--fd-radius-sm);
display: flex;
align-items: center;
justify-content: center;
}
.fd-symbol-ticker {
font-family: var(--fd-font-heading);
font-size: 1.1rem;
font-weight: 800;
color: var(--fd-text);
letter-spacing: -0.01em;
}
.fd-symbol-name {
font-size: 0.8rem;
font-weight: 500;
}
.fd-split-price-block {
display: flex;
align-items: baseline;
gap: 1.25rem;
flex-wrap: wrap;
}
.fd-split-price {
font-size: 3rem;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
}
.fd-split-change {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
/* Mini metrics row */
.fd-split-metrics {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
padding-top: 1.25rem;
border-top: 1px solid var(--fd-border);
}
.fd-mini-metric {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.fd-mini-label {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--fd-text-muted);
}
.fd-mini-val {
font-family: var(--fd-font-heading);
font-size: 1rem;
font-weight: 700;
color: var(--fd-text);
letter-spacing: -0.01em;
}
.fd-split-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
padding-top: 0.25rem;
}
/* Right order card */
.fd-order-card {
padding: 1.75rem !important;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.fd-order-title {
font-size: 1rem;
font-weight: 700;
}
.fd-order-type-tabs {
display: flex;
gap: 0;
border: 1px solid var(--fd-border);
border-radius: var(--fd-radius-sm);
overflow: hidden;
}
.fd-tab-btn {
flex: 1;
padding: 0.5rem;
border: none;
background: transparent;
font-family: var(--fd-font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--fd-text-muted);
cursor: pointer;
transition: var(--fd-transition);
border-right: 1px solid var(--fd-border);
}
.fd-tab-btn:last-child { border-right: none; }
.fd-tab-btn.active {
background-color: var(--fd-primary);
color: #fff;
}
.fd-tab-btn:not(.active):hover {
background-color: var(--fd-surface-2);
color: var(--fd-text);
}
.fd-order-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.fd-form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.fd-order-summary {
display: flex;
flex-direction: column;
gap: 0.6rem;
background-color: var(--fd-surface-2);
border: 1px solid var(--fd-border);
border-radius: var(--fd-radius-sm);
padding: 1rem;
}
.fd-order-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
}
.fd-order-total {
border-top: 1px solid var(--fd-border);
padding-top: 0.6rem;
margin-top: 0.2rem;
font-size: 0.95rem;
}
@media (max-width: 900px) {
.fd-split-hero { grid-template-columns: 1fr; }
.fd-split-metrics { grid-template-columns: repeat(2, 1fr); }
}
Forms
Secure Login Panel
HTML
<div class="fd-login-wrap">
<div class="fd-login-card fd-card">
<div class="fd-login-brand">
<a href="#" class="fd-login-logo-link">
<div class="fd-logo-icon">
<svg viewBox="0 0 24 24" width="18" height="18" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
</div>
<span class="fd-login-logo-name">Finvault</span>
</a>
<h2 class="fd-login-title">Secure Sign In</h2>
<p class="fd-login-sub">Access your portfolio and market data.</p>
</div>
<form class="fd-login-form" onsubmit="return false;">
<div class="fd-form-group">
<label class="fd-label" for="fin-email">Email</label>
<div class="fd-input-wrap">
<svg class="fd-input-ico" viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
<input type="email" id="fin-email" class="fd-input fd-input-pad" placeholder="[email protected]" value="[email protected]">
</div>
</div>
<div class="fd-form-group">
<div class="fd-label-row">
<label class="fd-label" for="fin-password">Password</label>
<a href="#" class="fd-link-sm">Forgot?</a>
</div>
<div class="fd-input-wrap">
<svg class="fd-input-ico" viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
<input type="password" id="fin-password" class="fd-input fd-input-pad" placeholder="••••••••••" value="••••••••••">
</div>
</div>
<div class="fd-login-mfa">
<div class="fd-mfa-badge">
<svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
2-Factor Authentication enabled
</div>
</div>
<button type="submit" class="fd-btn fd-btn-primary fd-btn-block fd-btn-lg">Sign In to Dashboard</button>
</form>
<div class="fd-login-footer">
<svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
256-bit encryption · SOC 2 certified · FINRA compliant
</div>
</div>
</div>
CSS (Component Only)
/* Component: Secure Login Panel */
/* NOTE: This component requires base.css to be included in your page. */
.fd-login-wrap { display: flex; align-items: center; justify-content: center; min-height: 560px; background-color: var(--fd-bg); padding: 2rem; }
.fd-login-card { width: 100%; max-width: 420px; padding: 2.5rem !important; display: flex; flex-direction: column; gap: 1.5rem; }
.fd-login-brand { display: flex; flex-direction: column; gap: 0.75rem; }
.fd-login-logo-link {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
font-family: var(--fd-font-heading);
font-weight: 800;
font-size: 1.15rem;
color: var(--fd-text);
letter-spacing: -0.02em;
}
.fd-login-logo-name { color: var(--fd-text); }
.fd-login-title { font-size: 1.5rem; margin-top: 0.25rem; }
.fd-login-sub { font-size: 0.9rem; margin-top: -0.25rem; }
.fd-login-form { display: flex; flex-direction: column; gap: 1.1rem; }
.fd-form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.fd-label-row { display: flex; justify-content: space-between; align-items: center; }
.fd-link-sm {
font-family: var(--fd-font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--fd-primary);
text-decoration: none;
transition: var(--fd-transition);
}
.fd-link-sm:hover { color: var(--fd-primary-hover); }
.fd-input-wrap { position: relative; }
.fd-input-ico { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--fd-text-light); pointer-events: none; }
.fd-input-pad { padding-left: 2.35rem; }
/* 2FA badge */
.fd-login-mfa { display: flex; }
.fd-mfa-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background-color: var(--fd-primary-muted);
color: #064E3B;
border: 1px solid rgba(5,150,105,0.2);
border-radius: var(--fd-radius-pill);
padding: 0.3rem 0.85rem;
font-family: var(--fd-font-heading);
font-size: 0.78rem;
font-weight: 700;
}
/* Footer disclaimer */
.fd-login-footer {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
font-size: 0.76rem;
font-weight: 500;
color: var(--fd-text-light);
text-align: center;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
/* ===========================
Finance Dashboard Design System
=========================== */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
/* Surfaces */
--fd-bg: #FAFAF9;
--fd-surface: #FFFFFF;
--fd-surface-2: #F5F5F4;
--fd-sidebar-bg: #064E3B;
--fd-sidebar-hover: #065F46;
--fd-sidebar-active:#059669;
/* Brand */
--fd-primary: #059669;
--fd-primary-hover: #047857;
--fd-primary-muted: #D1FAE5;
--fd-gold: #D97706;
--fd-gold-muted: #FEF3C7;
--fd-success: #16A34A;
--fd-success-muted: #DCFCE7;
--fd-danger: #DC2626;
--fd-danger-muted: #FEE2E2;
--fd-warning: #D97706;
--fd-warning-muted: #FEF3C7;
--fd-info: #0284C7;
--fd-info-muted: #E0F2FE;
/* Text */
--fd-text: #1C1917;
--fd-text-muted: #78716C;
--fd-text-light: #A8A29E;
--fd-sidebar-text: #A7F3D0;
--fd-sidebar-label: rgba(167,243,208,0.45);
/* Borders */
--fd-border: #E7E5E4;
--fd-border-strong: #D6D3D1;
/* Radius */
--fd-radius-sm: 8px;
--fd-radius: 12px;
--fd-radius-lg: 16px;
--fd-radius-pill: 100px;
/* Fonts */
--fd-font-heading: 'Plus Jakarta Sans', sans-serif;
--fd-font-body: 'Inter', sans-serif;
--fd-font-mono: 'Courier New', monospace;
/* Shadows */
--fd-shadow-xs: 0 1px 2px rgba(28,25,23,0.05);
--fd-shadow-sm: 0 1px 3px rgba(28,25,23,0.07), 0 4px 16px rgba(28,25,23,0.04);
--fd-shadow: 0 4px 8px rgba(28,25,23,0.08), 0 12px 32px rgba(28,25,23,0.06);
--fd-shadow-lg: 0 8px 20px rgba(28,25,23,0.10), 0 24px 48px rgba(28,25,23,0.08);
/* Transition */
--fd-transition: all 0.18s ease;
}
body {
margin: 0;
font-family: var(--fd-font-body);
color: var(--fd-text);
background-color: var(--fd-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.fd-card {
background-color: var(--fd-surface);
border: 1px solid var(--fd-border);
border-radius: var(--fd-radius);
box-shadow: var(--fd-shadow-sm);
padding: 1.75rem;
transition: var(--fd-transition);
}
.fd-card:hover {
box-shadow: var(--fd-shadow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--fd-font-heading);
font-weight: 700;
margin: 0;
color: var(--fd-text);
letter-spacing: -0.015em;
line-height: 1.25;
}
p {
font-family: var(--fd-font-body);
color: var(--fd-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.fd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.6rem 1.25rem;
font-family: var(--fd-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--fd-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--fd-transition);
white-space: nowrap;
user-select: none;
line-height: 1.4;
letter-spacing: -0.01em;
}
.fd-btn:focus-visible {
outline: 2px solid var(--fd-primary);
outline-offset: 2px;
}
.fd-btn-primary {
background-color: var(--fd-primary);
color: #fff;
border-color: var(--fd-primary);
}
.fd-btn-primary:hover {
background-color: var(--fd-primary-hover);
border-color: var(--fd-primary-hover);
box-shadow: 0 4px 14px rgba(5,150,105,0.35);
transform: translateY(-1px);
}
.fd-btn-primary:active {
transform: translateY(0);
box-shadow: none;
}
.fd-btn-gold {
background-color: var(--fd-gold);
color: #fff;
border-color: var(--fd-gold);
}
.fd-btn-gold:hover {
background-color: #B45309;
box-shadow: 0 4px 14px rgba(217,119,6,0.35);
transform: translateY(-1px);
}
.fd-btn-danger {
background-color: var(--fd-danger);
color: #fff;
border-color: var(--fd-danger);
}
.fd-btn-danger:hover {
background-color: #B91C1C;
box-shadow: 0 4px 14px rgba(220,38,38,0.35);
transform: translateY(-1px);
}
.fd-btn-outline {
background-color: var(--fd-surface);
color: var(--fd-text);
border-color: var(--fd-border-strong);
}
.fd-btn-outline:hover {
background-color: var(--fd-surface-2);
border-color: var(--fd-text-light);
transform: translateY(-1px);
}
.fd-btn-ghost {
background-color: transparent;
color: var(--fd-text-muted);
border-color: transparent;
}
.fd-btn-ghost:hover {
background-color: var(--fd-surface-2);
color: var(--fd-text);
}
.fd-btn-sm { padding: 0.4rem 0.85rem; font-size: 0.8rem; }
.fd-btn-lg { padding: 0.8rem 1.75rem; font-size: 1rem; }
.fd-btn-block { width: 100%; }
.fd-btn-icon { width: 36px; height: 36px; padding: 0; }
/* ── Form Controls ────────────── */
.fd-input {
width: 100%;
padding: 0.65rem 0.95rem;
border: 1px solid var(--fd-border-strong);
border-radius: var(--fd-radius-sm);
font-family: var(--fd-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--fd-text);
background-color: var(--fd-surface);
outline: none;
transition: var(--fd-transition);
}
.fd-input::placeholder { color: var(--fd-text-light); }
.fd-input:focus {
border-color: var(--fd-primary);
box-shadow: 0 0 0 3px rgba(5,150,105,0.12);
}
.fd-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--fd-font-heading);
font-weight: 700;
font-size: 0.82rem;
color: var(--fd-text);
letter-spacing: -0.01em;
}
.fd-select {
width: 100%;
padding: 0.65rem 2rem 0.65rem 0.95rem;
border: 1px solid var(--fd-border-strong);
border-radius: var(--fd-radius-sm);
font-family: var(--fd-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--fd-text);
background-color: var(--fd-surface);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378716C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--fd-transition);
}
.fd-select:focus {
border-color: var(--fd-primary);
box-shadow: 0 0 0 3px rgba(5,150,105,0.12);
}
/* ── Badges ───────────────────── */
.fd-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.65rem;
border-radius: var(--fd-radius-pill);
font-family: var(--fd-font-heading);
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
letter-spacing: -0.01em;
}
.fd-badge-success { background-color: var(--fd-success-muted); color: #14532D; }
.fd-badge-danger { background-color: var(--fd-danger-muted); color: #7F1D1D; }
.fd-badge-gold { background-color: var(--fd-gold-muted); color: #78350F; }
.fd-badge-info { background-color: var(--fd-info-muted); color: #0C4A6E; }
.fd-badge-default { background-color: var(--fd-surface-2); color: var(--fd-text-muted); border: 1px solid var(--fd-border); }
/* ── Toggle ───────────────────── */
.fd-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.fd-toggle input { opacity: 0; width: 0; height: 0; }
.fd-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--fd-border-strong); border-radius: 24px; transition: var(--fd-transition); }
.fd-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--fd-transition); box-shadow: var(--fd-shadow-xs); }
.fd-toggle input:checked + .fd-toggle-slider { background-color: var(--fd-primary); }
.fd-toggle input:checked + .fd-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.fd-divider { border: none; border-top: 1px solid var(--fd-border); margin: 0; }
/* ── Logo ─────────────────────── */
.fd-logo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
font-family: var(--fd-font-heading);
font-weight: 800;
font-size: 1.1rem;
color: #fff;
letter-spacing: -0.02em;
}
.fd-logo-icon {
width: 34px;
height: 34px;
background: linear-gradient(135deg, #34D399, #059669);
border-radius: var(--fd-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* ── Utility ──────────────────── */
.text-success { color: var(--fd-success) !important; }
.text-danger { color: var(--fd-danger) !important; }
.text-gold { color: var(--fd-gold) !important; }
.text-muted { color: var(--fd-text-muted) !important; }
.text-light { color: var(--fd-text-light) !important; }
.text-white { color: #fff !important; }
.font-mono { font-family: var(--fd-font-mono) !important; }
/* --- COMPONENT STYLES --- */
.fd-login-wrap { display: flex; align-items: center; justify-content: center; min-height: 560px; background-color: var(--fd-bg); padding: 2rem; }
.fd-login-card { width: 100%; max-width: 420px; padding: 2.5rem !important; display: flex; flex-direction: column; gap: 1.5rem; }
.fd-login-brand { display: flex; flex-direction: column; gap: 0.75rem; }
.fd-login-logo-link {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
font-family: var(--fd-font-heading);
font-weight: 800;
font-size: 1.15rem;
color: var(--fd-text);
letter-spacing: -0.02em;
}
.fd-login-logo-name { color: var(--fd-text); }
.fd-login-title { font-size: 1.5rem; margin-top: 0.25rem; }
.fd-login-sub { font-size: 0.9rem; margin-top: -0.25rem; }
.fd-login-form { display: flex; flex-direction: column; gap: 1.1rem; }
.fd-form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.fd-label-row { display: flex; justify-content: space-between; align-items: center; }
.fd-link-sm {
font-family: var(--fd-font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--fd-primary);
text-decoration: none;
transition: var(--fd-transition);
}
.fd-link-sm:hover { color: var(--fd-primary-hover); }
.fd-input-wrap { position: relative; }
.fd-input-ico { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--fd-text-light); pointer-events: none; }
.fd-input-pad { padding-left: 2.35rem; }
/* 2FA badge */
.fd-login-mfa { display: flex; }
.fd-mfa-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background-color: var(--fd-primary-muted);
color: #064E3B;
border: 1px solid rgba(5,150,105,0.2);
border-radius: var(--fd-radius-pill);
padding: 0.3rem 0.85rem;
font-family: var(--fd-font-heading);
font-size: 0.78rem;
font-weight: 700;
}
/* Footer disclaimer */
.fd-login-footer {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
font-size: 0.76rem;
font-weight: 500;
color: var(--fd-text-light);
text-align: center;
}
Account Preferences
HTML
<div class="fd-settings-panel">
<div class="fd-settings-header">
<div>
<h3>Account Preferences</h3>
<p>Manage your profile, currency display, and alert settings.</p>
</div>
<div class="fd-settings-acts">
<button class="fd-btn fd-btn-outline fd-btn-sm">Discard</button>
<button class="fd-btn fd-btn-primary fd-btn-sm">Save Changes</button>
</div>
</div>
<div class="fd-settings-body">
<section class="fd-settings-sec fd-card">
<div class="fd-sec-title-row">
<div>
<h4>Profile</h4>
<p>Your public name and contact details.</p>
</div>
<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=80&h=80&q=80" alt="Profile" class="fd-avatar fd-avatar-lg">
</div>
<hr class="fd-divider">
<div class="fd-settings-grid">
<div class="fd-form-group">
<label class="fd-label" for="fn-first">First Name</label>
<input type="text" id="fn-first" class="fd-input" value="Sarah">
</div>
<div class="fd-form-group">
<label class="fd-label" for="fn-last">Last Name</label>
<input type="text" id="fn-last" class="fd-input" value="Jenkins">
</div>
<div class="fd-form-group">
<label class="fd-label" for="fn-email">Email</label>
<input type="email" id="fn-email" class="fd-input" value="[email protected]">
</div>
<div class="fd-form-group">
<label class="fd-label" for="fn-currency">Base Currency</label>
<select id="fn-currency" class="fd-select">
<option selected>USD — US Dollar</option>
<option>EUR — Euro</option>
<option>GBP — British Pound</option>
</select>
</div>
</div>
</section>
<section class="fd-settings-sec fd-card">
<h4>Alert Preferences</h4>
<p style="margin-bottom:1.5rem;">Control which price and news alerts you receive.</p>
<div class="fd-toggle-list">
<div class="fd-toggle-row">
<div>
<div class="fd-toggle-label">Price Movement Alerts</div>
<div class="fd-toggle-desc">Notify when a holding moves ±5% intraday.</div>
</div>
<label class="fd-toggle"><input type="checkbox" checked><span class="fd-toggle-slider"></span></label>
</div>
<hr class="fd-divider">
<div class="fd-toggle-row">
<div>
<div class="fd-toggle-label">Daily Portfolio Digest</div>
<div class="fd-toggle-desc">Email summary of P&L every market close.</div>
</div>
<label class="fd-toggle"><input type="checkbox" checked><span class="fd-toggle-slider"></span></label>
</div>
<hr class="fd-divider">
<div class="fd-toggle-row">
<div>
<div class="fd-toggle-label">Earnings Reminders</div>
<div class="fd-toggle-desc">24h notice before held companies report earnings.</div>
</div>
<label class="fd-toggle"><input type="checkbox"><span class="fd-toggle-slider"></span></label>
</div>
</div>
</section>
</div>
</div>
CSS (Component Only)
/* Component: Account Preferences */
/* NOTE: This component requires base.css to be included in your page. */
.fd-settings-panel { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.75rem; }
.fd-settings-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.fd-settings-header h3 { font-size: 1.35rem; margin-bottom: 0.3rem; }
.fd-settings-acts { display: flex; gap: 0.75rem; flex-shrink: 0; }
.fd-settings-body { display: flex; flex-direction: column; gap: 1.25rem; }
.fd-settings-sec { padding: 2rem !important; display: flex; flex-direction: column; gap: 1.25rem; }
.fd-settings-sec h4 { font-size: 1rem; }
.fd-settings-sec > p { font-size: 0.88rem; margin-top: -0.75rem; }
.fd-sec-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; }
.fd-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
/* Toggles */
.fd-toggle-list { display: flex; flex-direction: column; gap: 1.1rem; }
.fd-toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; }
.fd-toggle-label { font-family: var(--fd-font-heading); font-size: 0.92rem; font-weight: 700; color: var(--fd-text); margin-bottom: 0.2rem; }
.fd-toggle-desc { font-size: 0.83rem; color: var(--fd-text-muted); font-weight: 500; line-height: 1.5; }
@media (max-width: 600px) {
.fd-settings-grid { grid-template-columns: 1fr; }
.fd-settings-header { flex-direction: column; }
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
/* ===========================
Finance Dashboard Design System
=========================== */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
/* Surfaces */
--fd-bg: #FAFAF9;
--fd-surface: #FFFFFF;
--fd-surface-2: #F5F5F4;
--fd-sidebar-bg: #064E3B;
--fd-sidebar-hover: #065F46;
--fd-sidebar-active:#059669;
/* Brand */
--fd-primary: #059669;
--fd-primary-hover: #047857;
--fd-primary-muted: #D1FAE5;
--fd-gold: #D97706;
--fd-gold-muted: #FEF3C7;
--fd-success: #16A34A;
--fd-success-muted: #DCFCE7;
--fd-danger: #DC2626;
--fd-danger-muted: #FEE2E2;
--fd-warning: #D97706;
--fd-warning-muted: #FEF3C7;
--fd-info: #0284C7;
--fd-info-muted: #E0F2FE;
/* Text */
--fd-text: #1C1917;
--fd-text-muted: #78716C;
--fd-text-light: #A8A29E;
--fd-sidebar-text: #A7F3D0;
--fd-sidebar-label: rgba(167,243,208,0.45);
/* Borders */
--fd-border: #E7E5E4;
--fd-border-strong: #D6D3D1;
/* Radius */
--fd-radius-sm: 8px;
--fd-radius: 12px;
--fd-radius-lg: 16px;
--fd-radius-pill: 100px;
/* Fonts */
--fd-font-heading: 'Plus Jakarta Sans', sans-serif;
--fd-font-body: 'Inter', sans-serif;
--fd-font-mono: 'Courier New', monospace;
/* Shadows */
--fd-shadow-xs: 0 1px 2px rgba(28,25,23,0.05);
--fd-shadow-sm: 0 1px 3px rgba(28,25,23,0.07), 0 4px 16px rgba(28,25,23,0.04);
--fd-shadow: 0 4px 8px rgba(28,25,23,0.08), 0 12px 32px rgba(28,25,23,0.06);
--fd-shadow-lg: 0 8px 20px rgba(28,25,23,0.10), 0 24px 48px rgba(28,25,23,0.08);
/* Transition */
--fd-transition: all 0.18s ease;
}
body {
margin: 0;
font-family: var(--fd-font-body);
color: var(--fd-text);
background-color: var(--fd-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.fd-card {
background-color: var(--fd-surface);
border: 1px solid var(--fd-border);
border-radius: var(--fd-radius);
box-shadow: var(--fd-shadow-sm);
padding: 1.75rem;
transition: var(--fd-transition);
}
.fd-card:hover {
box-shadow: var(--fd-shadow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--fd-font-heading);
font-weight: 700;
margin: 0;
color: var(--fd-text);
letter-spacing: -0.015em;
line-height: 1.25;
}
p {
font-family: var(--fd-font-body);
color: var(--fd-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.fd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.6rem 1.25rem;
font-family: var(--fd-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--fd-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--fd-transition);
white-space: nowrap;
user-select: none;
line-height: 1.4;
letter-spacing: -0.01em;
}
.fd-btn:focus-visible {
outline: 2px solid var(--fd-primary);
outline-offset: 2px;
}
.fd-btn-primary {
background-color: var(--fd-primary);
color: #fff;
border-color: var(--fd-primary);
}
.fd-btn-primary:hover {
background-color: var(--fd-primary-hover);
border-color: var(--fd-primary-hover);
box-shadow: 0 4px 14px rgba(5,150,105,0.35);
transform: translateY(-1px);
}
.fd-btn-primary:active {
transform: translateY(0);
box-shadow: none;
}
.fd-btn-gold {
background-color: var(--fd-gold);
color: #fff;
border-color: var(--fd-gold);
}
.fd-btn-gold:hover {
background-color: #B45309;
box-shadow: 0 4px 14px rgba(217,119,6,0.35);
transform: translateY(-1px);
}
.fd-btn-danger {
background-color: var(--fd-danger);
color: #fff;
border-color: var(--fd-danger);
}
.fd-btn-danger:hover {
background-color: #B91C1C;
box-shadow: 0 4px 14px rgba(220,38,38,0.35);
transform: translateY(-1px);
}
.fd-btn-outline {
background-color: var(--fd-surface);
color: var(--fd-text);
border-color: var(--fd-border-strong);
}
.fd-btn-outline:hover {
background-color: var(--fd-surface-2);
border-color: var(--fd-text-light);
transform: translateY(-1px);
}
.fd-btn-ghost {
background-color: transparent;
color: var(--fd-text-muted);
border-color: transparent;
}
.fd-btn-ghost:hover {
background-color: var(--fd-surface-2);
color: var(--fd-text);
}
.fd-btn-sm { padding: 0.4rem 0.85rem; font-size: 0.8rem; }
.fd-btn-lg { padding: 0.8rem 1.75rem; font-size: 1rem; }
.fd-btn-block { width: 100%; }
.fd-btn-icon { width: 36px; height: 36px; padding: 0; }
/* ── Form Controls ────────────── */
.fd-input {
width: 100%;
padding: 0.65rem 0.95rem;
border: 1px solid var(--fd-border-strong);
border-radius: var(--fd-radius-sm);
font-family: var(--fd-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--fd-text);
background-color: var(--fd-surface);
outline: none;
transition: var(--fd-transition);
}
.fd-input::placeholder { color: var(--fd-text-light); }
.fd-input:focus {
border-color: var(--fd-primary);
box-shadow: 0 0 0 3px rgba(5,150,105,0.12);
}
.fd-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--fd-font-heading);
font-weight: 700;
font-size: 0.82rem;
color: var(--fd-text);
letter-spacing: -0.01em;
}
.fd-select {
width: 100%;
padding: 0.65rem 2rem 0.65rem 0.95rem;
border: 1px solid var(--fd-border-strong);
border-radius: var(--fd-radius-sm);
font-family: var(--fd-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--fd-text);
background-color: var(--fd-surface);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378716C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--fd-transition);
}
.fd-select:focus {
border-color: var(--fd-primary);
box-shadow: 0 0 0 3px rgba(5,150,105,0.12);
}
/* ── Badges ───────────────────── */
.fd-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.65rem;
border-radius: var(--fd-radius-pill);
font-family: var(--fd-font-heading);
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
letter-spacing: -0.01em;
}
.fd-badge-success { background-color: var(--fd-success-muted); color: #14532D; }
.fd-badge-danger { background-color: var(--fd-danger-muted); color: #7F1D1D; }
.fd-badge-gold { background-color: var(--fd-gold-muted); color: #78350F; }
.fd-badge-info { background-color: var(--fd-info-muted); color: #0C4A6E; }
.fd-badge-default { background-color: var(--fd-surface-2); color: var(--fd-text-muted); border: 1px solid var(--fd-border); }
/* ── Toggle ───────────────────── */
.fd-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.fd-toggle input { opacity: 0; width: 0; height: 0; }
.fd-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--fd-border-strong); border-radius: 24px; transition: var(--fd-transition); }
.fd-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--fd-transition); box-shadow: var(--fd-shadow-xs); }
.fd-toggle input:checked + .fd-toggle-slider { background-color: var(--fd-primary); }
.fd-toggle input:checked + .fd-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.fd-divider { border: none; border-top: 1px solid var(--fd-border); margin: 0; }
/* ── Logo ─────────────────────── */
.fd-logo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
font-family: var(--fd-font-heading);
font-weight: 800;
font-size: 1.1rem;
color: #fff;
letter-spacing: -0.02em;
}
.fd-logo-icon {
width: 34px;
height: 34px;
background: linear-gradient(135deg, #34D399, #059669);
border-radius: var(--fd-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* ── Utility ──────────────────── */
.text-success { color: var(--fd-success) !important; }
.text-danger { color: var(--fd-danger) !important; }
.text-gold { color: var(--fd-gold) !important; }
.text-muted { color: var(--fd-text-muted) !important; }
.text-light { color: var(--fd-text-light) !important; }
.text-white { color: #fff !important; }
.font-mono { font-family: var(--fd-font-mono) !important; }
/* --- COMPONENT STYLES --- */
.fd-settings-panel { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.75rem; }
.fd-settings-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.fd-settings-header h3 { font-size: 1.35rem; margin-bottom: 0.3rem; }
.fd-settings-acts { display: flex; gap: 0.75rem; flex-shrink: 0; }
.fd-settings-body { display: flex; flex-direction: column; gap: 1.25rem; }
.fd-settings-sec { padding: 2rem !important; display: flex; flex-direction: column; gap: 1.25rem; }
.fd-settings-sec h4 { font-size: 1rem; }
.fd-settings-sec > p { font-size: 0.88rem; margin-top: -0.75rem; }
.fd-sec-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; }
.fd-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
/* Toggles */
.fd-toggle-list { display: flex; flex-direction: column; gap: 1.1rem; }
.fd-toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; }
.fd-toggle-label { font-family: var(--fd-font-heading); font-size: 0.92rem; font-weight: 700; color: var(--fd-text); margin-bottom: 0.2rem; }
.fd-toggle-desc { font-size: 0.83rem; color: var(--fd-text-muted); font-weight: 500; line-height: 1.5; }
@media (max-width: 600px) {
.fd-settings-grid { grid-template-columns: 1fr; }
.fd-settings-header { flex-direction: column; }
}
Cards
Portfolio Metric Cards
HTML
<div class="fd-stats-grid">
<div class="fd-stat-card fd-card">
<div class="fd-stat-head">
<div class="fd-stat-ico" style="background:var(--fd-primary-muted);color:var(--fd-primary);">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
</div>
<span class="fd-badge fd-badge-success">▲ 2.34%</span>
</div>
<div class="fd-stat-val">$284,920</div>
<div class="fd-stat-lbl">Portfolio Value</div>
<div class="fd-stat-bar-wrap">
<div class="fd-stat-bar" style="width:78%;background:var(--fd-primary);"></div>
</div>
</div>
<div class="fd-stat-card fd-card">
<div class="fd-stat-head">
<div class="fd-stat-ico" style="background:var(--fd-success-muted);color:var(--fd-success);">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
</div>
<span class="fd-badge fd-badge-success">▲ 20.4%</span>
</div>
<div class="fd-stat-val text-success">+$48,240</div>
<div class="fd-stat-lbl">Total Gain</div>
<div class="fd-stat-bar-wrap">
<div class="fd-stat-bar" style="width:62%;background:var(--fd-success);"></div>
</div>
</div>
<div class="fd-stat-card fd-card">
<div class="fd-stat-head">
<div class="fd-stat-ico" style="background:var(--fd-gold-muted);color:var(--fd-gold);">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
</div>
<span class="fd-badge fd-badge-gold">Moderate</span>
</div>
<div class="fd-stat-val">1.12</div>
<div class="fd-stat-lbl">Portfolio Beta</div>
<div class="fd-stat-bar-wrap">
<div class="fd-stat-bar" style="width:45%;background:var(--fd-gold);"></div>
</div>
</div>
<div class="fd-stat-card fd-card">
<div class="fd-stat-head">
<div class="fd-stat-ico" style="background:var(--fd-info-muted);color:var(--fd-info);">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
</div>
<span class="fd-badge fd-badge-info">Strong</span>
</div>
<div class="fd-stat-val">2.38</div>
<div class="fd-stat-lbl">Sharpe Ratio</div>
<div class="fd-stat-bar-wrap">
<div class="fd-stat-bar" style="width:85%;background:var(--fd-info);"></div>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Portfolio Metric Cards */
/* NOTE: This component requires base.css to be included in your page. */
.fd-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.25rem;
max-width: 1100px;
margin: 0 auto;
}
.fd-stat-card { display: flex; flex-direction: column; gap: 0.65rem; padding: 1.5rem !important; }
.fd-stat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.15rem; }
.fd-stat-ico {
width: 36px;
height: 36px;
border-radius: var(--fd-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.fd-stat-val {
font-family: var(--fd-font-heading);
font-size: 1.85rem;
font-weight: 800;
color: var(--fd-text);
letter-spacing: -0.025em;
line-height: 1;
}
.fd-stat-lbl {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--fd-text-muted);
}
.fd-stat-bar-wrap {
height: 4px;
background-color: var(--fd-border);
border-radius: 4px;
overflow: hidden;
margin-top: 0.5rem;
}
.fd-stat-bar {
height: 100%;
border-radius: 4px;
transition: width 0.6s ease;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
/* ===========================
Finance Dashboard Design System
=========================== */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
/* Surfaces */
--fd-bg: #FAFAF9;
--fd-surface: #FFFFFF;
--fd-surface-2: #F5F5F4;
--fd-sidebar-bg: #064E3B;
--fd-sidebar-hover: #065F46;
--fd-sidebar-active:#059669;
/* Brand */
--fd-primary: #059669;
--fd-primary-hover: #047857;
--fd-primary-muted: #D1FAE5;
--fd-gold: #D97706;
--fd-gold-muted: #FEF3C7;
--fd-success: #16A34A;
--fd-success-muted: #DCFCE7;
--fd-danger: #DC2626;
--fd-danger-muted: #FEE2E2;
--fd-warning: #D97706;
--fd-warning-muted: #FEF3C7;
--fd-info: #0284C7;
--fd-info-muted: #E0F2FE;
/* Text */
--fd-text: #1C1917;
--fd-text-muted: #78716C;
--fd-text-light: #A8A29E;
--fd-sidebar-text: #A7F3D0;
--fd-sidebar-label: rgba(167,243,208,0.45);
/* Borders */
--fd-border: #E7E5E4;
--fd-border-strong: #D6D3D1;
/* Radius */
--fd-radius-sm: 8px;
--fd-radius: 12px;
--fd-radius-lg: 16px;
--fd-radius-pill: 100px;
/* Fonts */
--fd-font-heading: 'Plus Jakarta Sans', sans-serif;
--fd-font-body: 'Inter', sans-serif;
--fd-font-mono: 'Courier New', monospace;
/* Shadows */
--fd-shadow-xs: 0 1px 2px rgba(28,25,23,0.05);
--fd-shadow-sm: 0 1px 3px rgba(28,25,23,0.07), 0 4px 16px rgba(28,25,23,0.04);
--fd-shadow: 0 4px 8px rgba(28,25,23,0.08), 0 12px 32px rgba(28,25,23,0.06);
--fd-shadow-lg: 0 8px 20px rgba(28,25,23,0.10), 0 24px 48px rgba(28,25,23,0.08);
/* Transition */
--fd-transition: all 0.18s ease;
}
body {
margin: 0;
font-family: var(--fd-font-body);
color: var(--fd-text);
background-color: var(--fd-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.fd-card {
background-color: var(--fd-surface);
border: 1px solid var(--fd-border);
border-radius: var(--fd-radius);
box-shadow: var(--fd-shadow-sm);
padding: 1.75rem;
transition: var(--fd-transition);
}
.fd-card:hover {
box-shadow: var(--fd-shadow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--fd-font-heading);
font-weight: 700;
margin: 0;
color: var(--fd-text);
letter-spacing: -0.015em;
line-height: 1.25;
}
p {
font-family: var(--fd-font-body);
color: var(--fd-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.fd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.6rem 1.25rem;
font-family: var(--fd-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--fd-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--fd-transition);
white-space: nowrap;
user-select: none;
line-height: 1.4;
letter-spacing: -0.01em;
}
.fd-btn:focus-visible {
outline: 2px solid var(--fd-primary);
outline-offset: 2px;
}
.fd-btn-primary {
background-color: var(--fd-primary);
color: #fff;
border-color: var(--fd-primary);
}
.fd-btn-primary:hover {
background-color: var(--fd-primary-hover);
border-color: var(--fd-primary-hover);
box-shadow: 0 4px 14px rgba(5,150,105,0.35);
transform: translateY(-1px);
}
.fd-btn-primary:active {
transform: translateY(0);
box-shadow: none;
}
.fd-btn-gold {
background-color: var(--fd-gold);
color: #fff;
border-color: var(--fd-gold);
}
.fd-btn-gold:hover {
background-color: #B45309;
box-shadow: 0 4px 14px rgba(217,119,6,0.35);
transform: translateY(-1px);
}
.fd-btn-danger {
background-color: var(--fd-danger);
color: #fff;
border-color: var(--fd-danger);
}
.fd-btn-danger:hover {
background-color: #B91C1C;
box-shadow: 0 4px 14px rgba(220,38,38,0.35);
transform: translateY(-1px);
}
.fd-btn-outline {
background-color: var(--fd-surface);
color: var(--fd-text);
border-color: var(--fd-border-strong);
}
.fd-btn-outline:hover {
background-color: var(--fd-surface-2);
border-color: var(--fd-text-light);
transform: translateY(-1px);
}
.fd-btn-ghost {
background-color: transparent;
color: var(--fd-text-muted);
border-color: transparent;
}
.fd-btn-ghost:hover {
background-color: var(--fd-surface-2);
color: var(--fd-text);
}
.fd-btn-sm { padding: 0.4rem 0.85rem; font-size: 0.8rem; }
.fd-btn-lg { padding: 0.8rem 1.75rem; font-size: 1rem; }
.fd-btn-block { width: 100%; }
.fd-btn-icon { width: 36px; height: 36px; padding: 0; }
/* ── Form Controls ────────────── */
.fd-input {
width: 100%;
padding: 0.65rem 0.95rem;
border: 1px solid var(--fd-border-strong);
border-radius: var(--fd-radius-sm);
font-family: var(--fd-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--fd-text);
background-color: var(--fd-surface);
outline: none;
transition: var(--fd-transition);
}
.fd-input::placeholder { color: var(--fd-text-light); }
.fd-input:focus {
border-color: var(--fd-primary);
box-shadow: 0 0 0 3px rgba(5,150,105,0.12);
}
.fd-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--fd-font-heading);
font-weight: 700;
font-size: 0.82rem;
color: var(--fd-text);
letter-spacing: -0.01em;
}
.fd-select {
width: 100%;
padding: 0.65rem 2rem 0.65rem 0.95rem;
border: 1px solid var(--fd-border-strong);
border-radius: var(--fd-radius-sm);
font-family: var(--fd-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--fd-text);
background-color: var(--fd-surface);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378716C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--fd-transition);
}
.fd-select:focus {
border-color: var(--fd-primary);
box-shadow: 0 0 0 3px rgba(5,150,105,0.12);
}
/* ── Badges ───────────────────── */
.fd-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.65rem;
border-radius: var(--fd-radius-pill);
font-family: var(--fd-font-heading);
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
letter-spacing: -0.01em;
}
.fd-badge-success { background-color: var(--fd-success-muted); color: #14532D; }
.fd-badge-danger { background-color: var(--fd-danger-muted); color: #7F1D1D; }
.fd-badge-gold { background-color: var(--fd-gold-muted); color: #78350F; }
.fd-badge-info { background-color: var(--fd-info-muted); color: #0C4A6E; }
.fd-badge-default { background-color: var(--fd-surface-2); color: var(--fd-text-muted); border: 1px solid var(--fd-border); }
/* ── Toggle ───────────────────── */
.fd-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.fd-toggle input { opacity: 0; width: 0; height: 0; }
.fd-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--fd-border-strong); border-radius: 24px; transition: var(--fd-transition); }
.fd-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--fd-transition); box-shadow: var(--fd-shadow-xs); }
.fd-toggle input:checked + .fd-toggle-slider { background-color: var(--fd-primary); }
.fd-toggle input:checked + .fd-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.fd-divider { border: none; border-top: 1px solid var(--fd-border); margin: 0; }
/* ── Logo ─────────────────────── */
.fd-logo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
font-family: var(--fd-font-heading);
font-weight: 800;
font-size: 1.1rem;
color: #fff;
letter-spacing: -0.02em;
}
.fd-logo-icon {
width: 34px;
height: 34px;
background: linear-gradient(135deg, #34D399, #059669);
border-radius: var(--fd-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* ── Utility ──────────────────── */
.text-success { color: var(--fd-success) !important; }
.text-danger { color: var(--fd-danger) !important; }
.text-gold { color: var(--fd-gold) !important; }
.text-muted { color: var(--fd-text-muted) !important; }
.text-light { color: var(--fd-text-light) !important; }
.text-white { color: #fff !important; }
.font-mono { font-family: var(--fd-font-mono) !important; }
/* --- COMPONENT STYLES --- */
.fd-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.25rem;
max-width: 1100px;
margin: 0 auto;
}
.fd-stat-card { display: flex; flex-direction: column; gap: 0.65rem; padding: 1.5rem !important; }
.fd-stat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.15rem; }
.fd-stat-ico {
width: 36px;
height: 36px;
border-radius: var(--fd-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.fd-stat-val {
font-family: var(--fd-font-heading);
font-size: 1.85rem;
font-weight: 800;
color: var(--fd-text);
letter-spacing: -0.025em;
line-height: 1;
}
.fd-stat-lbl {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--fd-text-muted);
}
.fd-stat-bar-wrap {
height: 4px;
background-color: var(--fd-border);
border-radius: 4px;
overflow: hidden;
margin-top: 0.5rem;
}
.fd-stat-bar {
height: 100%;
border-radius: 4px;
transition: width 0.6s ease;
}
Holdings Allocation Widget
HTML
<div class="fd-widget fd-card">
<div class="fd-widget-head">
<div>
<h4 class="fd-widget-title">Holdings Allocation</h4>
<p class="fd-widget-sub">14 positions across 5 sectors</p>
</div>
<select class="fd-select" style="width:auto;">
<option>By Value</option>
<option>By Weight</option>
</select>
</div>
<!-- Donut chart (CSS only) -->
<div class="fd-donut-wrap">
<div class="fd-donut">
<svg viewBox="0 0 120 120" class="fd-donut-svg">
<!-- Tech 42% -->
<circle class="fd-donut-ring" cx="60" cy="60" r="46" fill="transparent" stroke="#059669"
stroke-width="20" stroke-dasharray="121.3 172.4" stroke-dashoffset="0"/>
<!-- Finance 24% -->
<circle class="fd-donut-ring" cx="60" cy="60" r="46" fill="transparent" stroke="#D97706"
stroke-width="20" stroke-dasharray="69.4 224.3" stroke-dashoffset="-121.3"/>
<!-- Healthcare 18% -->
<circle class="fd-donut-ring" cx="60" cy="60" r="46" fill="transparent" stroke="#0284C7"
stroke-width="20" stroke-dasharray="52.0 241.7" stroke-dashoffset="-190.7"/>
<!-- Other 16% -->
<circle class="fd-donut-ring" cx="60" cy="60" r="46" fill="transparent" stroke="#A8A29E"
stroke-width="20" stroke-dasharray="46.2 247.5" stroke-dashoffset="-242.7"/>
</svg>
<div class="fd-donut-center">
<div class="fd-donut-pct">14</div>
<div class="fd-donut-lbl">Positions</div>
</div>
</div>
<div class="fd-legend">
<div class="fd-legend-item">
<span class="fd-legend-dot" style="background:#059669;"></span>
<div class="fd-legend-info">
<span class="fd-legend-name">Technology</span>
<span class="fd-legend-val">42% · $119,666</span>
</div>
</div>
<div class="fd-legend-item">
<span class="fd-legend-dot" style="background:#D97706;"></span>
<div class="fd-legend-info">
<span class="fd-legend-name">Financials</span>
<span class="fd-legend-val">24% · $68,380</span>
</div>
</div>
<div class="fd-legend-item">
<span class="fd-legend-dot" style="background:#0284C7;"></span>
<div class="fd-legend-info">
<span class="fd-legend-name">Healthcare</span>
<span class="fd-legend-val">18% · $51,285</span>
</div>
</div>
<div class="fd-legend-item">
<span class="fd-legend-dot" style="background:#A8A29E;"></span>
<div class="fd-legend-info">
<span class="fd-legend-name">Other</span>
<span class="fd-legend-val">16% · $45,589</span>
</div>
</div>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Holdings Allocation Widget */
/* NOTE: This component requires base.css to be included in your page. */
.fd-widget {
max-width: 560px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 2rem !important;
}
.fd-widget-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.fd-widget-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.2rem; }
.fd-widget-sub { font-size: 0.82rem; }
/* Donut chart */
.fd-donut-wrap {
display: flex;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
}
.fd-donut {
position: relative;
width: 150px;
height: 150px;
flex-shrink: 0;
}
.fd-donut-svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.fd-donut-ring { transition: stroke-dasharray 0.5s ease; }
.fd-donut-center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.fd-donut-pct {
font-family: var(--fd-font-heading);
font-size: 1.75rem;
font-weight: 800;
color: var(--fd-text);
letter-spacing: -0.02em;
line-height: 1;
}
.fd-donut-lbl {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--fd-text-muted);
margin-top: 0.2rem;
}
/* Legend */
.fd-legend {
display: flex;
flex-direction: column;
gap: 0.85rem;
flex: 1;
min-width: 160px;
}
.fd-legend-item {
display: flex;
align-items: center;
gap: 0.65rem;
transition: var(--fd-transition);
}
.fd-legend-item:hover { transform: translateX(3px); }
.fd-legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.fd-legend-info { display: flex; flex-direction: column; gap: 0.05rem; }
.fd-legend-name {
font-family: var(--fd-font-heading);
font-size: 0.84rem;
font-weight: 700;
color: var(--fd-text);
}
.fd-legend-val {
font-size: 0.77rem;
font-weight: 500;
color: var(--fd-text-muted);
font-family: var(--fd-font-mono);
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
/* ===========================
Finance Dashboard Design System
=========================== */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
/* Surfaces */
--fd-bg: #FAFAF9;
--fd-surface: #FFFFFF;
--fd-surface-2: #F5F5F4;
--fd-sidebar-bg: #064E3B;
--fd-sidebar-hover: #065F46;
--fd-sidebar-active:#059669;
/* Brand */
--fd-primary: #059669;
--fd-primary-hover: #047857;
--fd-primary-muted: #D1FAE5;
--fd-gold: #D97706;
--fd-gold-muted: #FEF3C7;
--fd-success: #16A34A;
--fd-success-muted: #DCFCE7;
--fd-danger: #DC2626;
--fd-danger-muted: #FEE2E2;
--fd-warning: #D97706;
--fd-warning-muted: #FEF3C7;
--fd-info: #0284C7;
--fd-info-muted: #E0F2FE;
/* Text */
--fd-text: #1C1917;
--fd-text-muted: #78716C;
--fd-text-light: #A8A29E;
--fd-sidebar-text: #A7F3D0;
--fd-sidebar-label: rgba(167,243,208,0.45);
/* Borders */
--fd-border: #E7E5E4;
--fd-border-strong: #D6D3D1;
/* Radius */
--fd-radius-sm: 8px;
--fd-radius: 12px;
--fd-radius-lg: 16px;
--fd-radius-pill: 100px;
/* Fonts */
--fd-font-heading: 'Plus Jakarta Sans', sans-serif;
--fd-font-body: 'Inter', sans-serif;
--fd-font-mono: 'Courier New', monospace;
/* Shadows */
--fd-shadow-xs: 0 1px 2px rgba(28,25,23,0.05);
--fd-shadow-sm: 0 1px 3px rgba(28,25,23,0.07), 0 4px 16px rgba(28,25,23,0.04);
--fd-shadow: 0 4px 8px rgba(28,25,23,0.08), 0 12px 32px rgba(28,25,23,0.06);
--fd-shadow-lg: 0 8px 20px rgba(28,25,23,0.10), 0 24px 48px rgba(28,25,23,0.08);
/* Transition */
--fd-transition: all 0.18s ease;
}
body {
margin: 0;
font-family: var(--fd-font-body);
color: var(--fd-text);
background-color: var(--fd-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.fd-card {
background-color: var(--fd-surface);
border: 1px solid var(--fd-border);
border-radius: var(--fd-radius);
box-shadow: var(--fd-shadow-sm);
padding: 1.75rem;
transition: var(--fd-transition);
}
.fd-card:hover {
box-shadow: var(--fd-shadow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--fd-font-heading);
font-weight: 700;
margin: 0;
color: var(--fd-text);
letter-spacing: -0.015em;
line-height: 1.25;
}
p {
font-family: var(--fd-font-body);
color: var(--fd-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.fd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.6rem 1.25rem;
font-family: var(--fd-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--fd-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--fd-transition);
white-space: nowrap;
user-select: none;
line-height: 1.4;
letter-spacing: -0.01em;
}
.fd-btn:focus-visible {
outline: 2px solid var(--fd-primary);
outline-offset: 2px;
}
.fd-btn-primary {
background-color: var(--fd-primary);
color: #fff;
border-color: var(--fd-primary);
}
.fd-btn-primary:hover {
background-color: var(--fd-primary-hover);
border-color: var(--fd-primary-hover);
box-shadow: 0 4px 14px rgba(5,150,105,0.35);
transform: translateY(-1px);
}
.fd-btn-primary:active {
transform: translateY(0);
box-shadow: none;
}
.fd-btn-gold {
background-color: var(--fd-gold);
color: #fff;
border-color: var(--fd-gold);
}
.fd-btn-gold:hover {
background-color: #B45309;
box-shadow: 0 4px 14px rgba(217,119,6,0.35);
transform: translateY(-1px);
}
.fd-btn-danger {
background-color: var(--fd-danger);
color: #fff;
border-color: var(--fd-danger);
}
.fd-btn-danger:hover {
background-color: #B91C1C;
box-shadow: 0 4px 14px rgba(220,38,38,0.35);
transform: translateY(-1px);
}
.fd-btn-outline {
background-color: var(--fd-surface);
color: var(--fd-text);
border-color: var(--fd-border-strong);
}
.fd-btn-outline:hover {
background-color: var(--fd-surface-2);
border-color: var(--fd-text-light);
transform: translateY(-1px);
}
.fd-btn-ghost {
background-color: transparent;
color: var(--fd-text-muted);
border-color: transparent;
}
.fd-btn-ghost:hover {
background-color: var(--fd-surface-2);
color: var(--fd-text);
}
.fd-btn-sm { padding: 0.4rem 0.85rem; font-size: 0.8rem; }
.fd-btn-lg { padding: 0.8rem 1.75rem; font-size: 1rem; }
.fd-btn-block { width: 100%; }
.fd-btn-icon { width: 36px; height: 36px; padding: 0; }
/* ── Form Controls ────────────── */
.fd-input {
width: 100%;
padding: 0.65rem 0.95rem;
border: 1px solid var(--fd-border-strong);
border-radius: var(--fd-radius-sm);
font-family: var(--fd-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--fd-text);
background-color: var(--fd-surface);
outline: none;
transition: var(--fd-transition);
}
.fd-input::placeholder { color: var(--fd-text-light); }
.fd-input:focus {
border-color: var(--fd-primary);
box-shadow: 0 0 0 3px rgba(5,150,105,0.12);
}
.fd-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--fd-font-heading);
font-weight: 700;
font-size: 0.82rem;
color: var(--fd-text);
letter-spacing: -0.01em;
}
.fd-select {
width: 100%;
padding: 0.65rem 2rem 0.65rem 0.95rem;
border: 1px solid var(--fd-border-strong);
border-radius: var(--fd-radius-sm);
font-family: var(--fd-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--fd-text);
background-color: var(--fd-surface);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378716C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--fd-transition);
}
.fd-select:focus {
border-color: var(--fd-primary);
box-shadow: 0 0 0 3px rgba(5,150,105,0.12);
}
/* ── Badges ───────────────────── */
.fd-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.65rem;
border-radius: var(--fd-radius-pill);
font-family: var(--fd-font-heading);
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
letter-spacing: -0.01em;
}
.fd-badge-success { background-color: var(--fd-success-muted); color: #14532D; }
.fd-badge-danger { background-color: var(--fd-danger-muted); color: #7F1D1D; }
.fd-badge-gold { background-color: var(--fd-gold-muted); color: #78350F; }
.fd-badge-info { background-color: var(--fd-info-muted); color: #0C4A6E; }
.fd-badge-default { background-color: var(--fd-surface-2); color: var(--fd-text-muted); border: 1px solid var(--fd-border); }
/* ── Toggle ───────────────────── */
.fd-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.fd-toggle input { opacity: 0; width: 0; height: 0; }
.fd-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--fd-border-strong); border-radius: 24px; transition: var(--fd-transition); }
.fd-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--fd-transition); box-shadow: var(--fd-shadow-xs); }
.fd-toggle input:checked + .fd-toggle-slider { background-color: var(--fd-primary); }
.fd-toggle input:checked + .fd-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.fd-divider { border: none; border-top: 1px solid var(--fd-border); margin: 0; }
/* ── Logo ─────────────────────── */
.fd-logo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
font-family: var(--fd-font-heading);
font-weight: 800;
font-size: 1.1rem;
color: #fff;
letter-spacing: -0.02em;
}
.fd-logo-icon {
width: 34px;
height: 34px;
background: linear-gradient(135deg, #34D399, #059669);
border-radius: var(--fd-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* ── Utility ──────────────────── */
.text-success { color: var(--fd-success) !important; }
.text-danger { color: var(--fd-danger) !important; }
.text-gold { color: var(--fd-gold) !important; }
.text-muted { color: var(--fd-text-muted) !important; }
.text-light { color: var(--fd-text-light) !important; }
.text-white { color: #fff !important; }
.font-mono { font-family: var(--fd-font-mono) !important; }
/* --- COMPONENT STYLES --- */
.fd-widget {
max-width: 560px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 2rem !important;
}
.fd-widget-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.fd-widget-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.2rem; }
.fd-widget-sub { font-size: 0.82rem; }
/* Donut chart */
.fd-donut-wrap {
display: flex;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
}
.fd-donut {
position: relative;
width: 150px;
height: 150px;
flex-shrink: 0;
}
.fd-donut-svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.fd-donut-ring { transition: stroke-dasharray 0.5s ease; }
.fd-donut-center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.fd-donut-pct {
font-family: var(--fd-font-heading);
font-size: 1.75rem;
font-weight: 800;
color: var(--fd-text);
letter-spacing: -0.02em;
line-height: 1;
}
.fd-donut-lbl {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--fd-text-muted);
margin-top: 0.2rem;
}
/* Legend */
.fd-legend {
display: flex;
flex-direction: column;
gap: 0.85rem;
flex: 1;
min-width: 160px;
}
.fd-legend-item {
display: flex;
align-items: center;
gap: 0.65rem;
transition: var(--fd-transition);
}
.fd-legend-item:hover { transform: translateX(3px); }
.fd-legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.fd-legend-info { display: flex; flex-direction: column; gap: 0.05rem; }
.fd-legend-name {
font-family: var(--fd-font-heading);
font-size: 0.84rem;
font-weight: 700;
color: var(--fd-text);
}
.fd-legend-val {
font-size: 0.77rem;
font-weight: 500;
color: var(--fd-text-muted);
font-family: var(--fd-font-mono);
}
Tables
Transaction Ledger
HTML
<div class="fd-table-wrap fd-card">
<div class="fd-table-toolbar">
<div class="fd-table-toolbar-left">
<h4>Transaction Ledger</h4>
<span class="fd-badge fd-badge-default">248 transactions</span>
</div>
<div class="fd-table-toolbar-right">
<div class="fd-search-wrap">
<svg class="fd-search-ico" viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<input type="text" class="fd-input fd-search-input" placeholder="Search transactions…">
</div>
<select class="fd-select" style="width:auto;">
<option>All Types</option>
<option>Buy</option>
<option>Sell</option>
<option>Dividend</option>
</select>
<button class="fd-btn fd-btn-outline fd-btn-sm">
<svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
Export
</button>
</div>
</div>
<div class="fd-table-scroll">
<table class="fd-data-table">
<thead>
<tr>
<th>Date</th>
<th>Symbol</th>
<th>Type</th>
<th>Shares</th>
<th>Price</th>
<th>Total</th>
<th>P&L</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="fd-td-mono text-muted">18 May 2026</td>
<td>
<div class="fd-sym-cell">
<div class="fd-sym-ico" style="background:var(--fd-primary-muted);color:var(--fd-primary);">AAPL</div>
</div>
</td>
<td><span class="fd-badge fd-badge-success">Buy</span></td>
<td class="fd-td-mono">10</td>
<td class="fd-td-mono">$189.42</td>
<td class="fd-td-mono" style="font-weight:700;">$1,894.20</td>
<td class="fd-td-mono text-success">+$41.80</td>
<td><button class="fd-btn fd-btn-ghost fd-btn-icon fd-btn-sm"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button></td>
</tr>
<tr>
<td class="fd-td-mono text-muted">15 May 2026</td>
<td>
<div class="fd-sym-cell">
<div class="fd-sym-ico" style="background:var(--fd-info-muted);color:var(--fd-info);">MSFT</div>
</div>
</td>
<td><span class="fd-badge fd-badge-success">Buy</span></td>
<td class="fd-td-mono">5</td>
<td class="fd-td-mono">$412.55</td>
<td class="fd-td-mono" style="font-weight:700;">$2,062.75</td>
<td class="fd-td-mono text-success">+$107.25</td>
<td><button class="fd-btn fd-btn-ghost fd-btn-icon fd-btn-sm"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button></td>
</tr>
<tr>
<td class="fd-td-mono text-muted">12 May 2026</td>
<td>
<div class="fd-sym-cell">
<div class="fd-sym-ico" style="background:var(--fd-danger-muted);color:var(--fd-danger);">TSLA</div>
</div>
</td>
<td><span class="fd-badge fd-badge-danger">Sell</span></td>
<td class="fd-td-mono">8</td>
<td class="fd-td-mono">$172.30</td>
<td class="fd-td-mono" style="font-weight:700;">$1,378.40</td>
<td class="fd-td-mono text-danger">−$214.40</td>
<td><button class="fd-btn fd-btn-ghost fd-btn-icon fd-btn-sm"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button></td>
</tr>
<tr>
<td class="fd-td-mono text-muted">10 May 2026</td>
<td>
<div class="fd-sym-cell">
<div class="fd-sym-ico" style="background:var(--fd-gold-muted);color:var(--fd-gold);">SPY</div>
</div>
</td>
<td><span class="fd-badge fd-badge-gold">Dividend</span></td>
<td class="fd-td-mono">—</td>
<td class="fd-td-mono">—</td>
<td class="fd-td-mono" style="font-weight:700;">+$124.80</td>
<td class="fd-td-mono text-success">+$124.80</td>
<td><button class="fd-btn fd-btn-ghost fd-btn-icon fd-btn-sm"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button></td>
</tr>
</tbody>
</table>
</div>
<div class="fd-table-pagination">
<span class="text-muted" style="font-size:0.85rem;">Showing 1–4 of 248</span>
<div class="fd-pagination-btns">
<button class="fd-btn fd-btn-outline fd-btn-sm" disabled style="opacity:.45;">← Prev</button>
<button class="fd-btn fd-btn-primary fd-btn-sm">1</button>
<button class="fd-btn fd-btn-outline fd-btn-sm">2</button>
<button class="fd-btn fd-btn-outline fd-btn-sm">3</button>
<button class="fd-btn fd-btn-outline fd-btn-sm">Next →</button>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Transaction Ledger */
/* NOTE: This component requires base.css to be included in your page. */
.fd-table-wrap { max-width: 1000px; margin: 0 auto; padding: 0 !important; overflow: hidden; }
.fd-table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--fd-border);
flex-wrap: wrap;
}
.fd-table-toolbar-left { display: flex; align-items: center; gap: 0.75rem; }
.fd-table-toolbar-left h4 { font-size: 1rem; font-weight: 700; }
.fd-table-toolbar-right { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.fd-search-wrap { position: relative; }
.fd-search-ico { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--fd-text-light); pointer-events: none; }
.fd-search-input { padding-left: 2.25rem; width: 190px; }
.fd-table-scroll { overflow-x: auto; }
.fd-data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.fd-data-table thead tr { background-color: var(--fd-surface-2); border-bottom: 1px solid var(--fd-border); }
.fd-data-table th {
padding: 0.75rem 1rem;
font-family: var(--fd-font-heading);
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--fd-text-muted);
text-align: left;
white-space: nowrap;
}
.fd-data-table td {
padding: 1rem;
border-bottom: 1px solid var(--fd-border);
color: var(--fd-text);
font-weight: 500;
vertical-align: middle;
}
.fd-data-table tbody tr:last-child td { border-bottom: none; }
.fd-data-table tbody tr:hover td { background-color: var(--fd-surface-2); }
.fd-td-mono { font-family: var(--fd-font-mono); font-size: 0.84rem; }
.fd-sym-ico {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.25rem 0.55rem;
border-radius: var(--fd-radius-sm);
font-family: var(--fd-font-heading);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.03em;
white-space: nowrap;
}
/* Pagination */
.fd-table-pagination {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
border-top: 1px solid var(--fd-border);
gap: 1rem;
flex-wrap: wrap;
}
.fd-pagination-btns { display: flex; gap: 0.4rem; align-items: center; }
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
/* ===========================
Finance Dashboard Design System
=========================== */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
/* Surfaces */
--fd-bg: #FAFAF9;
--fd-surface: #FFFFFF;
--fd-surface-2: #F5F5F4;
--fd-sidebar-bg: #064E3B;
--fd-sidebar-hover: #065F46;
--fd-sidebar-active:#059669;
/* Brand */
--fd-primary: #059669;
--fd-primary-hover: #047857;
--fd-primary-muted: #D1FAE5;
--fd-gold: #D97706;
--fd-gold-muted: #FEF3C7;
--fd-success: #16A34A;
--fd-success-muted: #DCFCE7;
--fd-danger: #DC2626;
--fd-danger-muted: #FEE2E2;
--fd-warning: #D97706;
--fd-warning-muted: #FEF3C7;
--fd-info: #0284C7;
--fd-info-muted: #E0F2FE;
/* Text */
--fd-text: #1C1917;
--fd-text-muted: #78716C;
--fd-text-light: #A8A29E;
--fd-sidebar-text: #A7F3D0;
--fd-sidebar-label: rgba(167,243,208,0.45);
/* Borders */
--fd-border: #E7E5E4;
--fd-border-strong: #D6D3D1;
/* Radius */
--fd-radius-sm: 8px;
--fd-radius: 12px;
--fd-radius-lg: 16px;
--fd-radius-pill: 100px;
/* Fonts */
--fd-font-heading: 'Plus Jakarta Sans', sans-serif;
--fd-font-body: 'Inter', sans-serif;
--fd-font-mono: 'Courier New', monospace;
/* Shadows */
--fd-shadow-xs: 0 1px 2px rgba(28,25,23,0.05);
--fd-shadow-sm: 0 1px 3px rgba(28,25,23,0.07), 0 4px 16px rgba(28,25,23,0.04);
--fd-shadow: 0 4px 8px rgba(28,25,23,0.08), 0 12px 32px rgba(28,25,23,0.06);
--fd-shadow-lg: 0 8px 20px rgba(28,25,23,0.10), 0 24px 48px rgba(28,25,23,0.08);
/* Transition */
--fd-transition: all 0.18s ease;
}
body {
margin: 0;
font-family: var(--fd-font-body);
color: var(--fd-text);
background-color: var(--fd-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.fd-card {
background-color: var(--fd-surface);
border: 1px solid var(--fd-border);
border-radius: var(--fd-radius);
box-shadow: var(--fd-shadow-sm);
padding: 1.75rem;
transition: var(--fd-transition);
}
.fd-card:hover {
box-shadow: var(--fd-shadow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--fd-font-heading);
font-weight: 700;
margin: 0;
color: var(--fd-text);
letter-spacing: -0.015em;
line-height: 1.25;
}
p {
font-family: var(--fd-font-body);
color: var(--fd-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.fd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.6rem 1.25rem;
font-family: var(--fd-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--fd-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--fd-transition);
white-space: nowrap;
user-select: none;
line-height: 1.4;
letter-spacing: -0.01em;
}
.fd-btn:focus-visible {
outline: 2px solid var(--fd-primary);
outline-offset: 2px;
}
.fd-btn-primary {
background-color: var(--fd-primary);
color: #fff;
border-color: var(--fd-primary);
}
.fd-btn-primary:hover {
background-color: var(--fd-primary-hover);
border-color: var(--fd-primary-hover);
box-shadow: 0 4px 14px rgba(5,150,105,0.35);
transform: translateY(-1px);
}
.fd-btn-primary:active {
transform: translateY(0);
box-shadow: none;
}
.fd-btn-gold {
background-color: var(--fd-gold);
color: #fff;
border-color: var(--fd-gold);
}
.fd-btn-gold:hover {
background-color: #B45309;
box-shadow: 0 4px 14px rgba(217,119,6,0.35);
transform: translateY(-1px);
}
.fd-btn-danger {
background-color: var(--fd-danger);
color: #fff;
border-color: var(--fd-danger);
}
.fd-btn-danger:hover {
background-color: #B91C1C;
box-shadow: 0 4px 14px rgba(220,38,38,0.35);
transform: translateY(-1px);
}
.fd-btn-outline {
background-color: var(--fd-surface);
color: var(--fd-text);
border-color: var(--fd-border-strong);
}
.fd-btn-outline:hover {
background-color: var(--fd-surface-2);
border-color: var(--fd-text-light);
transform: translateY(-1px);
}
.fd-btn-ghost {
background-color: transparent;
color: var(--fd-text-muted);
border-color: transparent;
}
.fd-btn-ghost:hover {
background-color: var(--fd-surface-2);
color: var(--fd-text);
}
.fd-btn-sm { padding: 0.4rem 0.85rem; font-size: 0.8rem; }
.fd-btn-lg { padding: 0.8rem 1.75rem; font-size: 1rem; }
.fd-btn-block { width: 100%; }
.fd-btn-icon { width: 36px; height: 36px; padding: 0; }
/* ── Form Controls ────────────── */
.fd-input {
width: 100%;
padding: 0.65rem 0.95rem;
border: 1px solid var(--fd-border-strong);
border-radius: var(--fd-radius-sm);
font-family: var(--fd-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--fd-text);
background-color: var(--fd-surface);
outline: none;
transition: var(--fd-transition);
}
.fd-input::placeholder { color: var(--fd-text-light); }
.fd-input:focus {
border-color: var(--fd-primary);
box-shadow: 0 0 0 3px rgba(5,150,105,0.12);
}
.fd-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--fd-font-heading);
font-weight: 700;
font-size: 0.82rem;
color: var(--fd-text);
letter-spacing: -0.01em;
}
.fd-select {
width: 100%;
padding: 0.65rem 2rem 0.65rem 0.95rem;
border: 1px solid var(--fd-border-strong);
border-radius: var(--fd-radius-sm);
font-family: var(--fd-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--fd-text);
background-color: var(--fd-surface);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378716C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--fd-transition);
}
.fd-select:focus {
border-color: var(--fd-primary);
box-shadow: 0 0 0 3px rgba(5,150,105,0.12);
}
/* ── Badges ───────────────────── */
.fd-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.65rem;
border-radius: var(--fd-radius-pill);
font-family: var(--fd-font-heading);
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
letter-spacing: -0.01em;
}
.fd-badge-success { background-color: var(--fd-success-muted); color: #14532D; }
.fd-badge-danger { background-color: var(--fd-danger-muted); color: #7F1D1D; }
.fd-badge-gold { background-color: var(--fd-gold-muted); color: #78350F; }
.fd-badge-info { background-color: var(--fd-info-muted); color: #0C4A6E; }
.fd-badge-default { background-color: var(--fd-surface-2); color: var(--fd-text-muted); border: 1px solid var(--fd-border); }
/* ── Toggle ───────────────────── */
.fd-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.fd-toggle input { opacity: 0; width: 0; height: 0; }
.fd-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--fd-border-strong); border-radius: 24px; transition: var(--fd-transition); }
.fd-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--fd-transition); box-shadow: var(--fd-shadow-xs); }
.fd-toggle input:checked + .fd-toggle-slider { background-color: var(--fd-primary); }
.fd-toggle input:checked + .fd-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.fd-divider { border: none; border-top: 1px solid var(--fd-border); margin: 0; }
/* ── Logo ─────────────────────── */
.fd-logo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
font-family: var(--fd-font-heading);
font-weight: 800;
font-size: 1.1rem;
color: #fff;
letter-spacing: -0.02em;
}
.fd-logo-icon {
width: 34px;
height: 34px;
background: linear-gradient(135deg, #34D399, #059669);
border-radius: var(--fd-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* ── Utility ──────────────────── */
.text-success { color: var(--fd-success) !important; }
.text-danger { color: var(--fd-danger) !important; }
.text-gold { color: var(--fd-gold) !important; }
.text-muted { color: var(--fd-text-muted) !important; }
.text-light { color: var(--fd-text-light) !important; }
.text-white { color: #fff !important; }
.font-mono { font-family: var(--fd-font-mono) !important; }
/* --- COMPONENT STYLES --- */
.fd-table-wrap { max-width: 1000px; margin: 0 auto; padding: 0 !important; overflow: hidden; }
.fd-table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--fd-border);
flex-wrap: wrap;
}
.fd-table-toolbar-left { display: flex; align-items: center; gap: 0.75rem; }
.fd-table-toolbar-left h4 { font-size: 1rem; font-weight: 700; }
.fd-table-toolbar-right { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.fd-search-wrap { position: relative; }
.fd-search-ico { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--fd-text-light); pointer-events: none; }
.fd-search-input { padding-left: 2.25rem; width: 190px; }
.fd-table-scroll { overflow-x: auto; }
.fd-data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.fd-data-table thead tr { background-color: var(--fd-surface-2); border-bottom: 1px solid var(--fd-border); }
.fd-data-table th {
padding: 0.75rem 1rem;
font-family: var(--fd-font-heading);
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--fd-text-muted);
text-align: left;
white-space: nowrap;
}
.fd-data-table td {
padding: 1rem;
border-bottom: 1px solid var(--fd-border);
color: var(--fd-text);
font-weight: 500;
vertical-align: middle;
}
.fd-data-table tbody tr:last-child td { border-bottom: none; }
.fd-data-table tbody tr:hover td { background-color: var(--fd-surface-2); }
.fd-td-mono { font-family: var(--fd-font-mono); font-size: 0.84rem; }
.fd-sym-ico {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.25rem 0.55rem;
border-radius: var(--fd-radius-sm);
font-family: var(--fd-font-heading);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.03em;
white-space: nowrap;
}
/* Pagination */
.fd-table-pagination {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
border-top: 1px solid var(--fd-border);
gap: 1rem;
flex-wrap: wrap;
}
.fd-pagination-btns { display: flex; gap: 0.4rem; align-items: center; }
Lists
Transaction Activity Feed
HTML
<div class="fd-activity-card fd-card">
<div class="fd-activity-head">
<h4>Recent Activity</h4>
<button class="fd-btn fd-btn-ghost fd-btn-sm">View all</button>
</div>
<div class="fd-activity-list">
<div class="fd-activity-item">
<div class="fd-act-ico" style="background:var(--fd-success-muted);color:var(--fd-success);">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
</div>
<div class="fd-act-content">
<div class="fd-act-top">
<span class="fd-act-label">Bought <strong>AAPL</strong></span>
<span class="fd-act-amount text-success">+$1,894.20</span>
</div>
<span class="fd-act-meta">10 shares · $189.42 · Today 09:32am</span>
</div>
</div>
<hr class="fd-divider">
<div class="fd-activity-item">
<div class="fd-act-ico" style="background:var(--fd-gold-muted);color:var(--fd-gold);">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
</div>
<div class="fd-act-content">
<div class="fd-act-top">
<span class="fd-act-label">Dividend received from <strong>SPY</strong></span>
<span class="fd-act-amount text-success">+$124.80</span>
</div>
<span class="fd-act-meta">Q2 distribution · 10 May 2026</span>
</div>
</div>
<hr class="fd-divider">
<div class="fd-activity-item">
<div class="fd-act-ico" style="background:var(--fd-danger-muted);color:var(--fd-danger);">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/><polyline points="17 18 23 18 23 12"/></svg>
</div>
<div class="fd-act-content">
<div class="fd-act-top">
<span class="fd-act-label">Sold <strong>TSLA</strong></span>
<span class="fd-act-amount text-danger">−$1,378.40</span>
</div>
<span class="fd-act-meta">8 shares · $172.30 · 12 May 2026</span>
</div>
</div>
<hr class="fd-divider">
<div class="fd-activity-item">
<div class="fd-act-ico" style="background:var(--fd-primary-muted);color:var(--fd-primary);">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
</div>
<div class="fd-act-content">
<div class="fd-act-top">
<span class="fd-act-label">Portfolio alert triggered</span>
<span class="fd-badge fd-badge-gold" style="font-size:0.7rem;">Warning</span>
</div>
<span class="fd-act-meta">NVDA moved ±7.2% intraday · 9 May 2026</span>
</div>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Transaction Activity Feed */
/* NOTE: This component requires base.css to be included in your page. */
.fd-activity-card { max-width: 520px; margin: 0 auto; padding: 0 !important; overflow: hidden; }
.fd-activity-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--fd-border);
}
.fd-activity-head h4 { font-size: 1rem; font-weight: 700; }
.fd-activity-list {
display: flex;
flex-direction: column;
gap: 0.85rem;
padding: 1.25rem 1.5rem;
}
.fd-activity-list .fd-divider { margin: 0; }
.fd-activity-item {
display: flex;
align-items: flex-start;
gap: 0.85rem;
transition: var(--fd-transition);
}
.fd-activity-item:hover { transform: translateX(3px); }
.fd-act-ico {
width: 32px;
height: 32px;
border-radius: var(--fd-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.fd-act-content { flex: 1; min-width: 0; }
.fd-act-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.2rem;
}
.fd-act-label {
font-family: var(--fd-font-heading);
font-size: 0.875rem;
font-weight: 600;
color: var(--fd-text);
}
.fd-act-label strong { font-weight: 800; }
.fd-act-amount {
font-family: var(--fd-font-mono);
font-size: 0.875rem;
font-weight: 700;
flex-shrink: 0;
}
.fd-act-meta {
font-size: 0.77rem;
color: var(--fd-text-light);
font-weight: 500;
display: block;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
/* ===========================
Finance Dashboard Design System
=========================== */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
/* Surfaces */
--fd-bg: #FAFAF9;
--fd-surface: #FFFFFF;
--fd-surface-2: #F5F5F4;
--fd-sidebar-bg: #064E3B;
--fd-sidebar-hover: #065F46;
--fd-sidebar-active:#059669;
/* Brand */
--fd-primary: #059669;
--fd-primary-hover: #047857;
--fd-primary-muted: #D1FAE5;
--fd-gold: #D97706;
--fd-gold-muted: #FEF3C7;
--fd-success: #16A34A;
--fd-success-muted: #DCFCE7;
--fd-danger: #DC2626;
--fd-danger-muted: #FEE2E2;
--fd-warning: #D97706;
--fd-warning-muted: #FEF3C7;
--fd-info: #0284C7;
--fd-info-muted: #E0F2FE;
/* Text */
--fd-text: #1C1917;
--fd-text-muted: #78716C;
--fd-text-light: #A8A29E;
--fd-sidebar-text: #A7F3D0;
--fd-sidebar-label: rgba(167,243,208,0.45);
/* Borders */
--fd-border: #E7E5E4;
--fd-border-strong: #D6D3D1;
/* Radius */
--fd-radius-sm: 8px;
--fd-radius: 12px;
--fd-radius-lg: 16px;
--fd-radius-pill: 100px;
/* Fonts */
--fd-font-heading: 'Plus Jakarta Sans', sans-serif;
--fd-font-body: 'Inter', sans-serif;
--fd-font-mono: 'Courier New', monospace;
/* Shadows */
--fd-shadow-xs: 0 1px 2px rgba(28,25,23,0.05);
--fd-shadow-sm: 0 1px 3px rgba(28,25,23,0.07), 0 4px 16px rgba(28,25,23,0.04);
--fd-shadow: 0 4px 8px rgba(28,25,23,0.08), 0 12px 32px rgba(28,25,23,0.06);
--fd-shadow-lg: 0 8px 20px rgba(28,25,23,0.10), 0 24px 48px rgba(28,25,23,0.08);
/* Transition */
--fd-transition: all 0.18s ease;
}
body {
margin: 0;
font-family: var(--fd-font-body);
color: var(--fd-text);
background-color: var(--fd-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.fd-card {
background-color: var(--fd-surface);
border: 1px solid var(--fd-border);
border-radius: var(--fd-radius);
box-shadow: var(--fd-shadow-sm);
padding: 1.75rem;
transition: var(--fd-transition);
}
.fd-card:hover {
box-shadow: var(--fd-shadow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--fd-font-heading);
font-weight: 700;
margin: 0;
color: var(--fd-text);
letter-spacing: -0.015em;
line-height: 1.25;
}
p {
font-family: var(--fd-font-body);
color: var(--fd-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.fd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.6rem 1.25rem;
font-family: var(--fd-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--fd-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--fd-transition);
white-space: nowrap;
user-select: none;
line-height: 1.4;
letter-spacing: -0.01em;
}
.fd-btn:focus-visible {
outline: 2px solid var(--fd-primary);
outline-offset: 2px;
}
.fd-btn-primary {
background-color: var(--fd-primary);
color: #fff;
border-color: var(--fd-primary);
}
.fd-btn-primary:hover {
background-color: var(--fd-primary-hover);
border-color: var(--fd-primary-hover);
box-shadow: 0 4px 14px rgba(5,150,105,0.35);
transform: translateY(-1px);
}
.fd-btn-primary:active {
transform: translateY(0);
box-shadow: none;
}
.fd-btn-gold {
background-color: var(--fd-gold);
color: #fff;
border-color: var(--fd-gold);
}
.fd-btn-gold:hover {
background-color: #B45309;
box-shadow: 0 4px 14px rgba(217,119,6,0.35);
transform: translateY(-1px);
}
.fd-btn-danger {
background-color: var(--fd-danger);
color: #fff;
border-color: var(--fd-danger);
}
.fd-btn-danger:hover {
background-color: #B91C1C;
box-shadow: 0 4px 14px rgba(220,38,38,0.35);
transform: translateY(-1px);
}
.fd-btn-outline {
background-color: var(--fd-surface);
color: var(--fd-text);
border-color: var(--fd-border-strong);
}
.fd-btn-outline:hover {
background-color: var(--fd-surface-2);
border-color: var(--fd-text-light);
transform: translateY(-1px);
}
.fd-btn-ghost {
background-color: transparent;
color: var(--fd-text-muted);
border-color: transparent;
}
.fd-btn-ghost:hover {
background-color: var(--fd-surface-2);
color: var(--fd-text);
}
.fd-btn-sm { padding: 0.4rem 0.85rem; font-size: 0.8rem; }
.fd-btn-lg { padding: 0.8rem 1.75rem; font-size: 1rem; }
.fd-btn-block { width: 100%; }
.fd-btn-icon { width: 36px; height: 36px; padding: 0; }
/* ── Form Controls ────────────── */
.fd-input {
width: 100%;
padding: 0.65rem 0.95rem;
border: 1px solid var(--fd-border-strong);
border-radius: var(--fd-radius-sm);
font-family: var(--fd-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--fd-text);
background-color: var(--fd-surface);
outline: none;
transition: var(--fd-transition);
}
.fd-input::placeholder { color: var(--fd-text-light); }
.fd-input:focus {
border-color: var(--fd-primary);
box-shadow: 0 0 0 3px rgba(5,150,105,0.12);
}
.fd-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--fd-font-heading);
font-weight: 700;
font-size: 0.82rem;
color: var(--fd-text);
letter-spacing: -0.01em;
}
.fd-select {
width: 100%;
padding: 0.65rem 2rem 0.65rem 0.95rem;
border: 1px solid var(--fd-border-strong);
border-radius: var(--fd-radius-sm);
font-family: var(--fd-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--fd-text);
background-color: var(--fd-surface);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378716C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--fd-transition);
}
.fd-select:focus {
border-color: var(--fd-primary);
box-shadow: 0 0 0 3px rgba(5,150,105,0.12);
}
/* ── Badges ───────────────────── */
.fd-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.65rem;
border-radius: var(--fd-radius-pill);
font-family: var(--fd-font-heading);
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
letter-spacing: -0.01em;
}
.fd-badge-success { background-color: var(--fd-success-muted); color: #14532D; }
.fd-badge-danger { background-color: var(--fd-danger-muted); color: #7F1D1D; }
.fd-badge-gold { background-color: var(--fd-gold-muted); color: #78350F; }
.fd-badge-info { background-color: var(--fd-info-muted); color: #0C4A6E; }
.fd-badge-default { background-color: var(--fd-surface-2); color: var(--fd-text-muted); border: 1px solid var(--fd-border); }
/* ── Toggle ───────────────────── */
.fd-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.fd-toggle input { opacity: 0; width: 0; height: 0; }
.fd-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--fd-border-strong); border-radius: 24px; transition: var(--fd-transition); }
.fd-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--fd-transition); box-shadow: var(--fd-shadow-xs); }
.fd-toggle input:checked + .fd-toggle-slider { background-color: var(--fd-primary); }
.fd-toggle input:checked + .fd-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.fd-divider { border: none; border-top: 1px solid var(--fd-border); margin: 0; }
/* ── Logo ─────────────────────── */
.fd-logo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
font-family: var(--fd-font-heading);
font-weight: 800;
font-size: 1.1rem;
color: #fff;
letter-spacing: -0.02em;
}
.fd-logo-icon {
width: 34px;
height: 34px;
background: linear-gradient(135deg, #34D399, #059669);
border-radius: var(--fd-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* ── Utility ──────────────────── */
.text-success { color: var(--fd-success) !important; }
.text-danger { color: var(--fd-danger) !important; }
.text-gold { color: var(--fd-gold) !important; }
.text-muted { color: var(--fd-text-muted) !important; }
.text-light { color: var(--fd-text-light) !important; }
.text-white { color: #fff !important; }
.font-mono { font-family: var(--fd-font-mono) !important; }
/* --- COMPONENT STYLES --- */
.fd-activity-card { max-width: 520px; margin: 0 auto; padding: 0 !important; overflow: hidden; }
.fd-activity-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--fd-border);
}
.fd-activity-head h4 { font-size: 1rem; font-weight: 700; }
.fd-activity-list {
display: flex;
flex-direction: column;
gap: 0.85rem;
padding: 1.25rem 1.5rem;
}
.fd-activity-list .fd-divider { margin: 0; }
.fd-activity-item {
display: flex;
align-items: flex-start;
gap: 0.85rem;
transition: var(--fd-transition);
}
.fd-activity-item:hover { transform: translateX(3px); }
.fd-act-ico {
width: 32px;
height: 32px;
border-radius: var(--fd-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.fd-act-content { flex: 1; min-width: 0; }
.fd-act-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.2rem;
}
.fd-act-label {
font-family: var(--fd-font-heading);
font-size: 0.875rem;
font-weight: 600;
color: var(--fd-text);
}
.fd-act-label strong { font-weight: 800; }
.fd-act-amount {
font-family: var(--fd-font-mono);
font-size: 0.875rem;
font-weight: 700;
flex-shrink: 0;
}
.fd-act-meta {
font-size: 0.77rem;
color: var(--fd-text-light);
font-weight: 500;
display: block;
}
Modals
Trade Confirmation Modal
HTML
<div class="fd-modal-backdrop">
<div class="fd-modal fd-card">
<div class="fd-modal-head">
<div class="fd-modal-title-row">
<div class="fd-modal-ico" style="background:var(--fd-primary-muted);color:var(--fd-primary);">
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
</div>
<div>
<h4>Confirm Trade Order</h4>
<p class="fd-modal-meta">Review your order before it's placed.</p>
</div>
</div>
<button class="fd-btn fd-btn-ghost fd-btn-icon" aria-label="Close">
<svg viewBox="0 0 24 24" width="15" height="15" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div class="fd-modal-body">
<div class="fd-trade-summary">
<div class="fd-trade-row">
<span class="text-muted">Action</span>
<span class="fd-badge fd-badge-success">Market Buy</span>
</div>
<div class="fd-trade-row">
<span class="text-muted">Symbol</span>
<strong>AAPL — Apple Inc.</strong>
</div>
<div class="fd-trade-row">
<span class="text-muted">Shares</span>
<span class="font-mono">10</span>
</div>
<div class="fd-trade-row">
<span class="text-muted">Est. Price</span>
<span class="font-mono">$189.42</span>
</div>
<div class="fd-trade-row">
<span class="text-muted">Commission</span>
<span class="text-success font-mono">$0.00</span>
</div>
<hr class="fd-divider">
<div class="fd-trade-row fd-trade-total">
<span>Est. Total</span>
<strong class="font-mono" style="font-size:1.15rem;">$1,894.20</strong>
</div>
</div>
<p class="fd-modal-disclaimer">Market orders execute at the best available price. Final price may differ slightly from the estimate shown.</p>
</div>
<div class="fd-modal-foot">
<button class="fd-btn fd-btn-outline">Cancel</button>
<button class="fd-btn fd-btn-primary">Confirm Buy Order</button>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Trade Confirmation Modal */
/* NOTE: This component requires base.css to be included in your page. */
.fd-modal-backdrop { background-color: rgba(28,25,23,0.55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 2rem; border-radius: var(--fd-radius); max-width: 700px; margin: 0 auto; }
.fd-modal { width: 100%; max-width: 460px; padding: 0 !important; overflow: hidden; }
.fd-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem; border-bottom: 1px solid var(--fd-border); }
.fd-modal-title-row { display: flex; align-items: center; gap: 0.85rem; }
.fd-modal-ico { width: 40px; height: 40px; border-radius: var(--fd-radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fd-modal-head h4 { font-size: 1rem; font-weight: 700; margin-bottom: 0.15rem; }
.fd-modal-meta { font-size: 0.8rem; font-weight: 500; }
.fd-modal-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.fd-trade-summary { display: flex; flex-direction: column; gap: 0.8rem; background-color: var(--fd-surface-2); border: 1px solid var(--fd-border); border-radius: var(--fd-radius-sm); padding: 1.25rem; }
.fd-trade-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; font-weight: 600; }
.fd-trade-total { font-size: 1rem; padding-top: 0.5rem; margin-top: 0.2rem; }
.fd-modal-disclaimer { font-size: 0.78rem; color: var(--fd-text-light); font-weight: 500; line-height: 1.5; }
.fd-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; padding: 1.25rem 1.5rem; border-top: 1px solid var(--fd-border); background-color: var(--fd-surface-2); }
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
/* ===========================
Finance Dashboard Design System
=========================== */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
/* Surfaces */
--fd-bg: #FAFAF9;
--fd-surface: #FFFFFF;
--fd-surface-2: #F5F5F4;
--fd-sidebar-bg: #064E3B;
--fd-sidebar-hover: #065F46;
--fd-sidebar-active:#059669;
/* Brand */
--fd-primary: #059669;
--fd-primary-hover: #047857;
--fd-primary-muted: #D1FAE5;
--fd-gold: #D97706;
--fd-gold-muted: #FEF3C7;
--fd-success: #16A34A;
--fd-success-muted: #DCFCE7;
--fd-danger: #DC2626;
--fd-danger-muted: #FEE2E2;
--fd-warning: #D97706;
--fd-warning-muted: #FEF3C7;
--fd-info: #0284C7;
--fd-info-muted: #E0F2FE;
/* Text */
--fd-text: #1C1917;
--fd-text-muted: #78716C;
--fd-text-light: #A8A29E;
--fd-sidebar-text: #A7F3D0;
--fd-sidebar-label: rgba(167,243,208,0.45);
/* Borders */
--fd-border: #E7E5E4;
--fd-border-strong: #D6D3D1;
/* Radius */
--fd-radius-sm: 8px;
--fd-radius: 12px;
--fd-radius-lg: 16px;
--fd-radius-pill: 100px;
/* Fonts */
--fd-font-heading: 'Plus Jakarta Sans', sans-serif;
--fd-font-body: 'Inter', sans-serif;
--fd-font-mono: 'Courier New', monospace;
/* Shadows */
--fd-shadow-xs: 0 1px 2px rgba(28,25,23,0.05);
--fd-shadow-sm: 0 1px 3px rgba(28,25,23,0.07), 0 4px 16px rgba(28,25,23,0.04);
--fd-shadow: 0 4px 8px rgba(28,25,23,0.08), 0 12px 32px rgba(28,25,23,0.06);
--fd-shadow-lg: 0 8px 20px rgba(28,25,23,0.10), 0 24px 48px rgba(28,25,23,0.08);
/* Transition */
--fd-transition: all 0.18s ease;
}
body {
margin: 0;
font-family: var(--fd-font-body);
color: var(--fd-text);
background-color: var(--fd-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card ─────────────────────── */
.fd-card {
background-color: var(--fd-surface);
border: 1px solid var(--fd-border);
border-radius: var(--fd-radius);
box-shadow: var(--fd-shadow-sm);
padding: 1.75rem;
transition: var(--fd-transition);
}
.fd-card:hover {
box-shadow: var(--fd-shadow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--fd-font-heading);
font-weight: 700;
margin: 0;
color: var(--fd-text);
letter-spacing: -0.015em;
line-height: 1.25;
}
p {
font-family: var(--fd-font-body);
color: var(--fd-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.fd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.6rem 1.25rem;
font-family: var(--fd-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--fd-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--fd-transition);
white-space: nowrap;
user-select: none;
line-height: 1.4;
letter-spacing: -0.01em;
}
.fd-btn:focus-visible {
outline: 2px solid var(--fd-primary);
outline-offset: 2px;
}
.fd-btn-primary {
background-color: var(--fd-primary);
color: #fff;
border-color: var(--fd-primary);
}
.fd-btn-primary:hover {
background-color: var(--fd-primary-hover);
border-color: var(--fd-primary-hover);
box-shadow: 0 4px 14px rgba(5,150,105,0.35);
transform: translateY(-1px);
}
.fd-btn-primary:active {
transform: translateY(0);
box-shadow: none;
}
.fd-btn-gold {
background-color: var(--fd-gold);
color: #fff;
border-color: var(--fd-gold);
}
.fd-btn-gold:hover {
background-color: #B45309;
box-shadow: 0 4px 14px rgba(217,119,6,0.35);
transform: translateY(-1px);
}
.fd-btn-danger {
background-color: var(--fd-danger);
color: #fff;
border-color: var(--fd-danger);
}
.fd-btn-danger:hover {
background-color: #B91C1C;
box-shadow: 0 4px 14px rgba(220,38,38,0.35);
transform: translateY(-1px);
}
.fd-btn-outline {
background-color: var(--fd-surface);
color: var(--fd-text);
border-color: var(--fd-border-strong);
}
.fd-btn-outline:hover {
background-color: var(--fd-surface-2);
border-color: var(--fd-text-light);
transform: translateY(-1px);
}
.fd-btn-ghost {
background-color: transparent;
color: var(--fd-text-muted);
border-color: transparent;
}
.fd-btn-ghost:hover {
background-color: var(--fd-surface-2);
color: var(--fd-text);
}
.fd-btn-sm { padding: 0.4rem 0.85rem; font-size: 0.8rem; }
.fd-btn-lg { padding: 0.8rem 1.75rem; font-size: 1rem; }
.fd-btn-block { width: 100%; }
.fd-btn-icon { width: 36px; height: 36px; padding: 0; }
/* ── Form Controls ────────────── */
.fd-input {
width: 100%;
padding: 0.65rem 0.95rem;
border: 1px solid var(--fd-border-strong);
border-radius: var(--fd-radius-sm);
font-family: var(--fd-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--fd-text);
background-color: var(--fd-surface);
outline: none;
transition: var(--fd-transition);
}
.fd-input::placeholder { color: var(--fd-text-light); }
.fd-input:focus {
border-color: var(--fd-primary);
box-shadow: 0 0 0 3px rgba(5,150,105,0.12);
}
.fd-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--fd-font-heading);
font-weight: 700;
font-size: 0.82rem;
color: var(--fd-text);
letter-spacing: -0.01em;
}
.fd-select {
width: 100%;
padding: 0.65rem 2rem 0.65rem 0.95rem;
border: 1px solid var(--fd-border-strong);
border-radius: var(--fd-radius-sm);
font-family: var(--fd-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--fd-text);
background-color: var(--fd-surface);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378716C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--fd-transition);
}
.fd-select:focus {
border-color: var(--fd-primary);
box-shadow: 0 0 0 3px rgba(5,150,105,0.12);
}
/* ── Badges ───────────────────── */
.fd-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.65rem;
border-radius: var(--fd-radius-pill);
font-family: var(--fd-font-heading);
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
letter-spacing: -0.01em;
}
.fd-badge-success { background-color: var(--fd-success-muted); color: #14532D; }
.fd-badge-danger { background-color: var(--fd-danger-muted); color: #7F1D1D; }
.fd-badge-gold { background-color: var(--fd-gold-muted); color: #78350F; }
.fd-badge-info { background-color: var(--fd-info-muted); color: #0C4A6E; }
.fd-badge-default { background-color: var(--fd-surface-2); color: var(--fd-text-muted); border: 1px solid var(--fd-border); }
/* ── Toggle ───────────────────── */
.fd-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.fd-toggle input { opacity: 0; width: 0; height: 0; }
.fd-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--fd-border-strong); border-radius: 24px; transition: var(--fd-transition); }
.fd-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: #fff; border-radius: 50%; transition: var(--fd-transition); box-shadow: var(--fd-shadow-xs); }
.fd-toggle input:checked + .fd-toggle-slider { background-color: var(--fd-primary); }
.fd-toggle input:checked + .fd-toggle-slider::before { transform: translateX(20px); }
/* ── Divider ──────────────────── */
.fd-divider { border: none; border-top: 1px solid var(--fd-border); margin: 0; }
/* ── Logo ─────────────────────── */
.fd-logo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
font-family: var(--fd-font-heading);
font-weight: 800;
font-size: 1.1rem;
color: #fff;
letter-spacing: -0.02em;
}
.fd-logo-icon {
width: 34px;
height: 34px;
background: linear-gradient(135deg, #34D399, #059669);
border-radius: var(--fd-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* ── Utility ──────────────────── */
.text-success { color: var(--fd-success) !important; }
.text-danger { color: var(--fd-danger) !important; }
.text-gold { color: var(--fd-gold) !important; }
.text-muted { color: var(--fd-text-muted) !important; }
.text-light { color: var(--fd-text-light) !important; }
.text-white { color: #fff !important; }
.font-mono { font-family: var(--fd-font-mono) !important; }
/* --- COMPONENT STYLES --- */
.fd-modal-backdrop { background-color: rgba(28,25,23,0.55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 2rem; border-radius: var(--fd-radius); max-width: 700px; margin: 0 auto; }
.fd-modal { width: 100%; max-width: 460px; padding: 0 !important; overflow: hidden; }
.fd-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem; border-bottom: 1px solid var(--fd-border); }
.fd-modal-title-row { display: flex; align-items: center; gap: 0.85rem; }
.fd-modal-ico { width: 40px; height: 40px; border-radius: var(--fd-radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fd-modal-head h4 { font-size: 1rem; font-weight: 700; margin-bottom: 0.15rem; }
.fd-modal-meta { font-size: 0.8rem; font-weight: 500; }
.fd-modal-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.fd-trade-summary { display: flex; flex-direction: column; gap: 0.8rem; background-color: var(--fd-surface-2); border: 1px solid var(--fd-border); border-radius: var(--fd-radius-sm); padding: 1.25rem; }
.fd-trade-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; font-weight: 600; }
.fd-trade-total { font-size: 1rem; padding-top: 0.5rem; margin-top: 0.2rem; }
.fd-modal-disclaimer { font-size: 0.78rem; color: var(--fd-text-light); font-weight: 500; line-height: 1.5; }
.fd-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; padding: 1.25rem 1.5rem; border-top: 1px solid var(--fd-border); background-color: var(--fd-surface-2); }