Design System
Living reference for every component in the premium UI. All components respect design tokens
(tokens.css), work in both light and dark mode, and are mobile-responsive.
Aesthetic direction: premium fintech 2025 — Linear × Stripe × Bloomberg.
Try: press ⌘K (or CtrlK) to open the command palette. Toggle the theme button in the sidebar to flip between light / dark / auto. Resize the browser narrow to see responsive behaviour.
0. Premium layer (new)
Command Palette
Press ⌘K (or CtrlK) anywhere in the app. Fuzzy search jumps to any page, toggles theme, triggers actions.
Aurora Background
Subtle mesh gradient drifts behind the app. Light mode = pastel;
dark mode = neon-on-black. Respects prefers-reduced-motion.
Glass Surfaces
Sidebar + topbar use frosted backdrop-filter: blur().
Cards layer depth via subtle shadows, not heavy borders.
Live indicators
Pulsing dot for real-time signals.
Gradient headings
Brand gradient for hero page titles.
Springy motion
Click this card — subtle squeeze + release with cubic-bezier spring curve. Hover KPI tiles above — they lift 2px. Card fade-up on page load (staggered).
1. Colour tokens
--color-brand-primary
--color-success-500
--color-warning-500
--color-danger-500
--color-info-500
--color-surface-0
--color-surface-1
--color-surface-2
2. Typography
Page heading (H1) — 30px bold
Section heading (H2) — 24px semibold
Panel heading (H3) — 20px semibold
Block heading (H4) — 18px semibold
Body text — 16px regular. CFOs glance at numbers in meetings; body text stays readable without zoom at any size.
Secondary text — 14px muted. Explanatory notes, captions, metadata.
Tertiary text — 12px subtle. Hints, footnotes, uncommon info.
₹28,33,500.00 — tabular nums so columns align
3. Buttons
Variants + sizes + with / without icons
4. KPI tiles · with sparklines, animated counters, live indicators, gradient hero values
The Home / CEO Dashboard will compose 6–8 of these across one screen. Numbers use tabular figures so MoM comparisons line up vertically. Counter values animate from 0 on first reveal.
5. Badges
6. Alerts (decision-first cards)
This is the core of the CFO-tool experience. Every alert has title + body with specific numbers + verdict + recommended action.
₹12.2L stuck with customers over 60 days
Shreearth Financial (₹4.7L, 87 days), FINREP (₹3.1L, 72 days), D S Dodhiya (₹2.4L, 68 days) — top three = 83% of the 60+ bucket.
DSO rose from 45 to 62 days (MoM)
Days Sales Outstanding worsened by 17 days. At current invoicing pace, that's ₹8.2L of working capital deferred.
Bank balance swung 31% today
Opening: ₹3.6L · Closing: ₹4.7L. Large inflow from FINREP invoice #4521 (₹4.3L).
EBITDA margin improved to 18% (up from 14% last month)
7. Form inputs
We'll send the weekly CFO report here
Must be a positive number
Picks default dashboard template
8. Tabs
9. Data tables
Add class data-table-responsive and data-label="..." on each <td> so the table collapses to cards on mobile (< 640px).
| Customer | Outstanding | Days overdue | Status | |
|---|---|---|---|---|
| Shreearth Financial | ₹4,72,000 | 87 | Critical | |
| FINREP Advisors LLP | ₹3,15,000 | 72 | Critical | |
| D S Dodhiya & Co | ₹2,36,000 | 68 | Warning |
10. Progress bars
11. Loading & empty states
Skeleton (loading)
Empty state
12. Responsive behaviour
Resize your browser to test
Below 960px: sidebar hides, bottom nav appears. Below 640px: grid collapses to single column, tables collapse to card view, KPI values shrink to 3xl.
Usage in new pages
{% extends "base_v2.html" %}
{% import "_components/macros.html" as ui %}
{% block content %}
My new page
{{ ui.kpi("Revenue", "₹12L", delta=8.4) }}
{{ ui.alert("warning", "DSO rising",
verdict="Escalate top 5 overdue accounts") }}
{% call ui.card_open(title="My section") %}
Content here.
{% endcall %}
{% endblock %}