6 CSS Minimalist UI Designs05 / 06

Pure CSSMIT licensed

Elara FinTech

A minimalist mobile fintech app UI rendered inside a realistic phone frame — proving that small-screen mobile interfaces win by stripping visual noise and exposing primary data in a single glance. Phone outer with rounded corners, notch (camera + speaker), and inner status bar (9:41 + battery/signal SVGs). Inside the screen: greeting header ("Good morning, Elara") with avatar, gradient balance card with $24,832.49 total + glow gradient corners + four wallet actions (Send / Receive / Swap / More), two-up quick stat cards (Portfolio +4.2% / Savings Goal 76%), animated SVG spending chart with gradient fill area + active dot, recent transactions list with iconified merchant rows + debit/credit amounts, and a frosted bottom dock nav with floating center "+" action button. Beside the phone: three context cards (Design Principles, AI Insights with three insight rows, Quick Actions 2x2 grid). Typography pairs Plus Jakarta Sans (UI) with Space Mono (numbers). Best for fintech mobile apps, banking apps, crypto wallets, budgeting UIs, neobank landing pages, mobile-first product showcases.

Published

Live Demo
Try it

The code

<section class="mu-fn" aria-label="Elara FinTech mobile app demo">
  <div class="layout">

    <div class="phone-outer">
      <div class="phone-notch" aria-hidden="true">
        <div class="notch-camera"></div>
        <div class="notch-speaker"></div>
      </div>
      <div class="phone-screen">
        <div class="status-bar">
          <div class="status-time">9:41</div>
          <div class="notch-space"></div>
          <div class="status-icons">
            <svg width="16" height="12" viewBox="0 0 16 12" aria-hidden="true"><rect x="0" y="4" width="3" height="8" rx="1" fill="currentColor" opacity="0.4"/><rect x="4" y="2" width="3" height="10" rx="1" fill="currentColor" opacity="0.6"/><rect x="8" y="0" width="3" height="12" rx="1" fill="currentColor" opacity="0.8"/><rect x="12" y="0" width="3" height="12" rx="1" fill="currentColor"/></svg>
            <svg width="14" height="12" viewBox="0 0 14 12" aria-hidden="true"><path d="M7 10 C3 10 0 7 0 7 S3 2 7 2 S14 7 14 7 S11 10 7 10Z" fill="none" stroke="currentColor" stroke-width="1.2"/><circle cx="7" cy="7" r="2" fill="currentColor"/></svg>
            <svg width="26" height="12" viewBox="0 0 26 12" aria-hidden="true"><rect x="0" y="1" width="22" height="10" rx="3" fill="none" stroke="currentColor" stroke-width="1.2"/><rect x="22" y="4" width="2" height="4" rx="1" fill="currentColor" opacity="0.4"/><rect x="1.5" y="2.5" width="16" height="7" rx="2" fill="currentColor"/></svg>
          </div>
        </div>

        <div class="screen-content">
          <div class="app-header">
            <div class="greeting-row">
              <div>
                <div class="greeting">Good morning,</div>
                <div class="user-name-main">Elara 👋</div>
              </div>
              <div class="header-avatar">EK</div>
            </div>
          </div>

          <div class="balance-card">
            <div class="balance-label">Total Balance</div>
            <div class="balance-amount">$24,832<span class="balance-cents">.49</span></div>
            <div class="balance-change">
              <span class="chg-arrow">↑</span>
              +$1,204.20
              <span class="chg-period">this month</span>
            </div>
            <div class="balance-actions">
              <button class="bal-action" type="button"><div class="bal-action-icon">↑</div><div class="bal-action-label">Send</div></button>
              <button class="bal-action" type="button"><div class="bal-action-icon">↓</div><div class="bal-action-label">Receive</div></button>
              <button class="bal-action" type="button"><div class="bal-action-icon">⇄</div><div class="bal-action-label">Swap</div></button>
              <button class="bal-action" type="button"><div class="bal-action-icon">⋯</div><div class="bal-action-label">More</div></button>
            </div>
          </div>

          <div class="stats-row">
            <div class="stat-card">
              <div class="stat-top">
                <div class="stat-icon-wrap stat-icon-green">💹</div>
                <div class="stat-change up">+4.2%</div>
              </div>
              <div class="stat-label">Portfolio</div>
              <div class="stat-value stat-value-green">$8,440</div>
            </div>
            <div class="stat-card">
              <div class="stat-top">
                <div class="stat-icon-wrap stat-icon-blue">🎯</div>
                <div class="stat-change up">+12%</div>
              </div>
              <div class="stat-label">Savings Goal</div>
              <div class="stat-value">76%</div>
            </div>
          </div>

          <div class="chart-section">
            <div class="chart-card">
              <div class="chart-header">
                <div class="chart-title">Spending</div>
                <div class="chart-period-group">
                  <div class="chart-period">1W</div>
                  <div class="chart-period active">1M</div>
                  <div class="chart-period">3M</div>
                </div>
              </div>
              <div class="chart-total">$3,214</div>
              <div class="chart-sub">↓ $380 vs last month</div>
              <svg class="chart-svg" viewBox="0 0 300 80" preserveAspectRatio="none" aria-hidden="true">
                <defs>
                  <linearGradient id="mu-fn-chartGrad" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stop-color="#00e5a0" stop-opacity="0.3"/>
                    <stop offset="100%" stop-color="#00e5a0" stop-opacity="0"/>
                  </linearGradient>
                </defs>
                <path d="M0,60 C20,50 30,40 50,45 C70,50 80,30 100,25 C120,20 130,35 150,30 C170,25 180,15 200,18 C220,21 230,35 250,28 C270,21 280,10 300,8 L300,80 L0,80 Z" fill="url(#mu-fn-chartGrad)"/>
                <path d="M0,60 C20,50 30,40 50,45 C70,50 80,30 100,25 C120,20 130,35 150,30 C170,25 180,15 200,18 C220,21 230,35 250,28 C270,21 280,10 300,8" fill="none" stroke="#00e5a0" stroke-width="2" stroke-linecap="round"/>
                <circle cx="300" cy="8" r="4" fill="#00e5a0"/>
              </svg>
            </div>
          </div>

          <div class="transactions">
            <div class="tx-header">
              <div class="tx-title">Recent</div>
              <div class="tx-see-all">See all →</div>
            </div>
            <div class="tx-item">
              <div class="tx-icon tx-icon-blue">🛒</div>
              <div class="tx-info"><div class="tx-name">Whole Foods Market</div><div class="tx-date">Today, 8:24 AM</div></div>
              <div class="tx-amount debit">−$62.40</div>
            </div>
            <div class="tx-item">
              <div class="tx-icon tx-icon-green">💰</div>
              <div class="tx-info"><div class="tx-name">Salary Deposit</div><div class="tx-date">Yesterday</div></div>
              <div class="tx-amount credit">+$5,200.00</div>
            </div>
            <div class="tx-item">
              <div class="tx-icon tx-icon-yellow">☕</div>
              <div class="tx-info"><div class="tx-name">Blue Bottle Coffee</div><div class="tx-date">Mon, May 26</div></div>
              <div class="tx-amount debit">−$7.80</div>
            </div>
            <div class="tx-item">
              <div class="tx-icon tx-icon-red">🎬</div>
              <div class="tx-info"><div class="tx-name">Netflix</div><div class="tx-date">May 25</div></div>
              <div class="tx-amount debit">−$18.99</div>
            </div>
          </div>
        </div>

        <div class="bottom-nav">
          <button class="nav-btn active" type="button">
            <div class="nav-btn-icon">⌂</div>
            <div class="nav-btn-label">Home</div>
          </button>
          <button class="nav-btn" type="button">
            <div class="nav-btn-icon">◫</div>
            <div class="nav-btn-label">Cards</div>
          </button>
          <button class="nav-center-btn" type="button">+</button>
          <button class="nav-btn" type="button">
            <div class="nav-btn-icon">◎</div>
            <div class="nav-btn-label">Invest</div>
          </button>
          <button class="nav-btn" type="button">
            <div class="nav-btn-icon">◉</div>
            <div class="nav-btn-label">Profile</div>
          </button>
        </div>
      </div>
    </div>

    <div class="context-wrap">
      <div class="context-card">
        <div class="ctx-label">Design Principles</div>
        <div class="ctx-title">Zero-friction<br>money flows</div>
        <div class="ctx-desc">Every interaction is designed to reduce cognitive load. Primary data is always one glance away, secondary actions one tap, tertiary flows never more than two steps deep.</div>
      </div>
      <div class="context-card">
        <div class="ctx-label">AI Insights</div>
        <div class="insight-row">
          <div class="insight-icon insight-icon-green">📈</div>
          <div class="insight-text"><div class="insight-name">Spending down</div><div class="insight-sub">vs. 3-month avg</div></div>
          <div class="insight-val insight-val-green">−11%</div>
        </div>
        <div class="insight-row">
          <div class="insight-icon insight-icon-blue">🎯</div>
          <div class="insight-text"><div class="insight-name">Goal on track</div><div class="insight-sub">House fund · $40K</div></div>
          <div class="insight-val insight-val-blue">76%</div>
        </div>
        <div class="insight-row">
          <div class="insight-icon insight-icon-yellow">⚡</div>
          <div class="insight-text"><div class="insight-name">Bill due soon</div><div class="insight-sub">Rent · Jun 1</div></div>
          <div class="insight-val insight-val-yellow">3d</div>
        </div>
      </div>
      <div class="context-card">
        <div class="ctx-label">Quick Actions</div>
        <div class="quick-grid">
          <div class="quick-tile"><div class="quick-icon">💳</div><div class="quick-label">Virtual Card</div></div>
          <div class="quick-tile"><div class="quick-icon">📊</div><div class="quick-label">Analytics</div></div>
          <div class="quick-tile"><div class="quick-icon">🔐</div><div class="quick-label">Security</div></div>
          <div class="quick-tile quick-tile-accent"><div class="quick-icon">✨</div><div class="quick-label quick-label-accent">Upgrade</div></div>
        </div>
      </div>
    </div>
  </div>
</section>
/* ─── 05 Elara FinTech Mobile — minimalist mobile app UI ───────── */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

.mu-fn {
  --mu-fn-bg: #0e0e14;
  --mu-fn-surface: #16161f;
  --mu-fn-surface2: #1e1e2a;
  --mu-fn-border: #26263a;
  --mu-fn-text: #f0f0f8;
  --mu-fn-text-mid: #8888aa;
  --mu-fn-text-dim: #44445a;
  --mu-fn-green: #00e5a0;
  --mu-fn-green-dim: rgba(0,229,160,0.12);
  --mu-fn-blue: #4488ff;
  --mu-fn-blue-dim: rgba(68,136,255,0.1);
  --mu-fn-red: #ff4466;
  --mu-fn-yellow: #ffcc44;
  --mu-fn-sans: 'Plus Jakarta Sans', sans-serif;
  --mu-fn-mono: 'Space Mono', monospace;
  position: relative;
  width: 100%;
  min-height: 900px;
  background: var(--mu-fn-bg);
  color: var(--mu-fn-text);
  font-family: var(--mu-fn-sans);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  overflow: hidden;
  box-sizing: border-box;
}

.mu-fn *,
.mu-fn *::before,
.mu-fn *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* Ambient radial glow — was body::before fixed; scoped. */

.mu-fn::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(0,229,160,0.06) 0%,transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
  z-index: 0;
}

.mu-fn .layout {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 40px;
  align-items: center;
}

.mu-fn .phone-outer {
  position: relative;
  background: linear-gradient(160deg,#2a2a3a,#1a1a28);
  border-radius: 54px;
  padding: 14px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 40px 120px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.04);
  width: 380px;
  flex-shrink: 0;
}

.mu-fn .phone-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 28px;
  background: #0e0e14;
  border-radius: 0 0 20px 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.mu-fn .notch-camera {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1a1a24;
  border: 2px solid #252535;
}

.mu-fn .notch-speaker {
  width: 48px;
  height: 5px;
  border-radius: 3px;
  background: #1a1a24;
}

.mu-fn .phone-screen {
  background: var(--mu-fn-bg);
  border-radius: 42px;
  overflow: hidden;
  height: 780px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.mu-fn .status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px 0;
  position: relative;
  z-index: 5;
}

.mu-fn .status-time {
  font-family: var(--mu-fn-mono);
  font-size: 13px;
  font-weight: 700;
}

.mu-fn .notch-space {
  width: 120px;
}

.mu-fn .status-icons {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--mu-fn-text-mid);
}

.mu-fn .screen-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 80px;
  scroll-behavior: smooth;
}

.mu-fn .screen-content::-webkit-scrollbar {
  display: none;
}

.mu-fn .app-header {
  padding: 16px 24px 20px;
}

.mu-fn .greeting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.mu-fn .greeting {
  font-size: 13px;
  color: var(--mu-fn-text-mid);
  font-weight: 400;
}

.mu-fn .header-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg,var(--mu-fn-green),#008860);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #0a0a0a;
}

.mu-fn .user-name-main {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.mu-fn .balance-card {
  margin: 0 20px 20px;
  background: linear-gradient(135deg,#0f1f18 0%,#0a1810 50%,#0f1f18 100%);
  border: 1px solid rgba(0,229,160,0.15);
  border-radius: 24px;
  padding: 28px 28px 24px;
  position: relative;
  overflow: hidden;
  animation: mu-fn-cardin 0.5s ease 0.1s both;
}

.mu-fn .balance-card::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(0,229,160,0.1) 0%,transparent 70%);
}

.mu-fn .balance-card::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(0,229,160,0.05) 0%,transparent 70%);
}

.mu-fn .balance-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgba(0,229,160,0.6);
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 500;
  position: relative;
}

.mu-fn .balance-amount {
  font-family: var(--mu-fn-mono);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--mu-fn-text);
  line-height: 1;
  margin-bottom: 6px;
  position: relative;
}

.mu-fn .balance-cents {
  font-size: 24px;
  opacity: 0.5;
}

.mu-fn .balance-change {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--mu-fn-green);
  font-weight: 600;
  margin-bottom: 24px;
  position: relative;
}

.mu-fn .chg-arrow {
  font-size: 14px;
}

.mu-fn .chg-period {
  color: var(--mu-fn-text-mid);
  font-weight: 400;
}

.mu-fn .balance-actions {
  display: flex;
  gap: 10px;
  position: relative;
}

.mu-fn .bal-action {
  flex: 1;
  background: rgba(0,229,160,0.1);
  border: 1px solid rgba(0,229,160,0.15);
  border-radius: 14px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  color: inherit;
}

.mu-fn .bal-action:hover {
  background: rgba(0,229,160,0.18);
}

.mu-fn .bal-action-icon {
  font-size: 18px;
}

.mu-fn .bal-action-label {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mu-fn-text-mid);
  font-weight: 600;
}

.mu-fn .stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 20px 20px;
  animation: mu-fn-cardin 0.5s ease 0.2s both;
}

.mu-fn .stat-card {
  background: var(--mu-fn-surface);
  border: 1px solid var(--mu-fn-border);
  border-radius: 20px;
  padding: 18px 18px;
}

.mu-fn .stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.mu-fn .stat-icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.mu-fn .stat-icon-green {
  background: var(--mu-fn-green-dim);
}

.mu-fn .stat-icon-blue {
  background: var(--mu-fn-blue-dim);
}

.mu-fn .stat-change {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 20px;
}

.mu-fn .stat-change.up {
  background: var(--mu-fn-green-dim);
  color: var(--mu-fn-green);
}

.mu-fn .stat-label {
  font-size: 11px;
  color: var(--mu-fn-text-mid);
  margin-bottom: 4px;
  font-weight: 500;
}

.mu-fn .stat-value {
  font-family: var(--mu-fn-mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.mu-fn .stat-value-green {
  color: var(--mu-fn-green);
}

.mu-fn .chart-section {
  margin: 0 20px 20px;
}

.mu-fn .chart-card {
  background: var(--mu-fn-surface);
  border: 1px solid var(--mu-fn-border);
  border-radius: 20px;
  padding: 20px;
  animation: mu-fn-cardin 0.5s ease 0.3s both;
}

.mu-fn .chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.mu-fn .chart-title {
  font-size: 14px;
  font-weight: 700;
}

.mu-fn .chart-period-group {
  display: flex;
  gap: 2px;
  background: var(--mu-fn-surface2);
  border-radius: 8px;
  padding: 2px;
}

.mu-fn .chart-period {
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--mu-fn-text-dim);
  font-weight: 600;
}

.mu-fn .chart-period.active {
  background: var(--mu-fn-border);
  color: var(--mu-fn-text);
}

.mu-fn .chart-total {
  font-family: var(--mu-fn-mono);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.mu-fn .chart-sub {
  font-size: 11px;
  color: var(--mu-fn-green);
  font-weight: 600;
  margin-bottom: 18px;
}

.mu-fn .chart-svg {
  width: 100%;
  height: 90px;
}

.mu-fn .transactions {
  padding: 0 20px;
}

.mu-fn .tx-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.mu-fn .tx-title {
  font-size: 15px;
  font-weight: 700;
}

.mu-fn .tx-see-all {
  font-size: 12px;
  color: var(--mu-fn-green);
  font-weight: 600;
  cursor: pointer;
}

.mu-fn .tx-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--mu-fn-border);
}

.mu-fn .tx-item:last-child {
  border-bottom: none;
}

.mu-fn .tx-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.mu-fn .tx-icon-blue {
  background: var(--mu-fn-blue-dim);
}

.mu-fn .tx-icon-green {
  background: var(--mu-fn-green-dim);
}

.mu-fn .tx-icon-yellow {
  background: rgba(255,204,68,0.1);
}

.mu-fn .tx-icon-red {
  background: rgba(255,68,102,0.1);
}

.mu-fn .tx-info {
  flex: 1;
  min-width: 0;
}

.mu-fn .tx-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}

.mu-fn .tx-date {
  font-size: 11px;
  color: var(--mu-fn-text-mid);
}

.mu-fn .tx-amount {
  font-family: var(--mu-fn-mono);
  font-size: 14px;
  font-weight: 700;
}

.mu-fn .tx-amount.debit {
  color: var(--mu-fn-text);
}

.mu-fn .tx-amount.credit {
  color: var(--mu-fn-green);
}

.mu-fn .bottom-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(14,14,20,0.95);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--mu-fn-border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 12px 8px 20px;
}

.mu-fn .nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  flex: 1;
  padding: 4px;
  border: none;
  background: transparent;
  font-family: inherit;
  color: inherit;
}

.mu-fn .nav-btn-icon {
  font-size: 22px;
  transition: transform 0.2s;
}

.mu-fn .nav-btn-label {
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mu-fn-text-dim);
  font-weight: 600;
}

.mu-fn .nav-btn.active .nav-btn-label {
  color: var(--mu-fn-green);
}

.mu-fn .nav-btn.active .nav-btn-icon {
  transform: scale(1.1);
}

.mu-fn .nav-center-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg,var(--mu-fn-green),#00aa78);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(0,229,160,0.3);
  transition: transform 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
  margin-top: -18px;
  border: none;
  font-family: inherit;
  color: inherit;
}

.mu-fn .nav-center-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 32px rgba(0,229,160,0.4);
}

.mu-fn .context-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 280px;
}

.mu-fn .context-card {
  background: var(--mu-fn-surface);
  border: 1px solid var(--mu-fn-border);
  border-radius: 20px;
  padding: 22px;
}

.mu-fn .ctx-label {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mu-fn-text-mid);
  font-weight: 600;
  margin-bottom: 12px;
}

.mu-fn .ctx-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.mu-fn .ctx-desc {
  font-size: 12px;
  color: var(--mu-fn-text-mid);
  line-height: 1.7;
  font-weight: 300;
}

.mu-fn .insight-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--mu-fn-border);
}

.mu-fn .insight-row:last-child {
  border-bottom: none;
}

.mu-fn .insight-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.mu-fn .insight-icon-green {
  background: var(--mu-fn-green-dim);
}

.mu-fn .insight-icon-blue {
  background: var(--mu-fn-blue-dim);
}

.mu-fn .insight-icon-yellow {
  background: rgba(255,204,68,0.1);
}

.mu-fn .insight-text {
  flex: 1;
}

.mu-fn .insight-name {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 1px;
}

.mu-fn .insight-sub {
  font-size: 10px;
  color: var(--mu-fn-text-mid);
}

.mu-fn .insight-val {
  font-family: var(--mu-fn-mono);
  font-size: 12px;
  font-weight: 700;
}

.mu-fn .insight-val-green {
  color: var(--mu-fn-green);
}

.mu-fn .insight-val-blue {
  color: var(--mu-fn-blue);
}

.mu-fn .insight-val-yellow {
  color: var(--mu-fn-yellow);
}

.mu-fn .quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.mu-fn .quick-tile {
  background: var(--mu-fn-surface2);
  border: 1px solid var(--mu-fn-border);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  text-align: center;
}

.mu-fn .quick-tile.quick-tile-accent {
  background: var(--mu-fn-green-dim);
  border-color: rgba(0,229,160,0.2);
}

.mu-fn .quick-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.mu-fn .quick-label {
  font-size: 11px;
  color: var(--mu-fn-text-mid);
  font-weight: 600;
}

.mu-fn .quick-label.quick-label-accent {
  color: var(--mu-fn-green);
}

@keyframes mu-fn-cardin {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .mu-fn .layout {
    flex-direction: column;
    gap: 24px;
    align-items: stretch;
  }

  .mu-fn .context-wrap {
    max-width: 380px;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mu-fn .balance-card,
    .mu-fn .stats-row,
    .mu-fn .chart-card {
    animation: none !important;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Minimalist UI Design from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Elara FinTech
Source: https://codefronts.com/design-styles/css-minimalist-ui/elara-fintech/

A minimalist mobile fintech app UI rendered inside a realistic phone frame — proving that small-screen mobile interfaces win by stripping visual noise and exposing primary data in a single glance. Phone outer with rounded corners, notch (camera + speaker), and inner status bar (9:41 + battery/signal SVGs). Inside the screen: greeting header ("Good morning, Elara") with avatar, gradient balance card with $24,832.49 total + glow gradient corners + four wallet actions (Send / Receive / Swap / More), two-up quick stat cards (Portfolio +4.2% / Savings Goal 76%), animated SVG spending chart with gradient fill area + active dot, recent transactions list with iconified merchant rows + debit/credit amounts, and a frosted bottom dock nav with floating center "+" action button. Beside the phone: three context cards (Design Principles, AI Insights with three insight rows, Quick Actions 2x2 grid). Typography pairs Plus Jakarta Sans (UI) with Space Mono (numbers). Best for fintech mobile apps, banking apps, crypto wallets, budgeting UIs, neobank landing pages, mobile-first product showcases.
## HTML
```html
<section class="mu-fn" aria-label="Elara FinTech mobile app demo">
  <div class="layout">

    <div class="phone-outer">
      <div class="phone-notch" aria-hidden="true">
        <div class="notch-camera"></div>
        <div class="notch-speaker"></div>
      </div>
      <div class="phone-screen">
        <div class="status-bar">
          <div class="status-time">9:41</div>
          <div class="notch-space"></div>
          <div class="status-icons">
            <svg width="16" height="12" viewBox="0 0 16 12" aria-hidden="true"><rect x="0" y="4" width="3" height="8" rx="1" fill="currentColor" opacity="0.4"/><rect x="4" y="2" width="3" height="10" rx="1" fill="currentColor" opacity="0.6"/><rect x="8" y="0" width="3" height="12" rx="1" fill="currentColor" opacity="0.8"/><rect x="12" y="0" width="3" height="12" rx="1" fill="currentColor"/></svg>
            <svg width="14" height="12" viewBox="0 0 14 12" aria-hidden="true"><path d="M7 10 C3 10 0 7 0 7 S3 2 7 2 S14 7 14 7 S11 10 7 10Z" fill="none" stroke="currentColor" stroke-width="1.2"/><circle cx="7" cy="7" r="2" fill="currentColor"/></svg>
            <svg width="26" height="12" viewBox="0 0 26 12" aria-hidden="true"><rect x="0" y="1" width="22" height="10" rx="3" fill="none" stroke="currentColor" stroke-width="1.2"/><rect x="22" y="4" width="2" height="4" rx="1" fill="currentColor" opacity="0.4"/><rect x="1.5" y="2.5" width="16" height="7" rx="2" fill="currentColor"/></svg>
          </div>
        </div>

        <div class="screen-content">
          <div class="app-header">
            <div class="greeting-row">
              <div>
                <div class="greeting">Good morning,</div>
                <div class="user-name-main">Elara 👋</div>
              </div>
              <div class="header-avatar">EK</div>
            </div>
          </div>

          <div class="balance-card">
            <div class="balance-label">Total Balance</div>
            <div class="balance-amount">$24,832<span class="balance-cents">.49</span></div>
            <div class="balance-change">
              <span class="chg-arrow">↑</span>
              +$1,204.20
              <span class="chg-period">this month</span>
            </div>
            <div class="balance-actions">
              <button class="bal-action" type="button"><div class="bal-action-icon">↑</div><div class="bal-action-label">Send</div></button>
              <button class="bal-action" type="button"><div class="bal-action-icon">↓</div><div class="bal-action-label">Receive</div></button>
              <button class="bal-action" type="button"><div class="bal-action-icon">⇄</div><div class="bal-action-label">Swap</div></button>
              <button class="bal-action" type="button"><div class="bal-action-icon">⋯</div><div class="bal-action-label">More</div></button>
            </div>
          </div>

          <div class="stats-row">
            <div class="stat-card">
              <div class="stat-top">
                <div class="stat-icon-wrap stat-icon-green">💹</div>
                <div class="stat-change up">+4.2%</div>
              </div>
              <div class="stat-label">Portfolio</div>
              <div class="stat-value stat-value-green">$8,440</div>
            </div>
            <div class="stat-card">
              <div class="stat-top">
                <div class="stat-icon-wrap stat-icon-blue">🎯</div>
                <div class="stat-change up">+12%</div>
              </div>
              <div class="stat-label">Savings Goal</div>
              <div class="stat-value">76%</div>
            </div>
          </div>

          <div class="chart-section">
            <div class="chart-card">
              <div class="chart-header">
                <div class="chart-title">Spending</div>
                <div class="chart-period-group">
                  <div class="chart-period">1W</div>
                  <div class="chart-period active">1M</div>
                  <div class="chart-period">3M</div>
                </div>
              </div>
              <div class="chart-total">$3,214</div>
              <div class="chart-sub">↓ $380 vs last month</div>
              <svg class="chart-svg" viewBox="0 0 300 80" preserveAspectRatio="none" aria-hidden="true">
                <defs>
                  <linearGradient id="mu-fn-chartGrad" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stop-color="#00e5a0" stop-opacity="0.3"/>
                    <stop offset="100%" stop-color="#00e5a0" stop-opacity="0"/>
                  </linearGradient>
                </defs>
                <path d="M0,60 C20,50 30,40 50,45 C70,50 80,30 100,25 C120,20 130,35 150,30 C170,25 180,15 200,18 C220,21 230,35 250,28 C270,21 280,10 300,8 L300,80 L0,80 Z" fill="url(#mu-fn-chartGrad)"/>
                <path d="M0,60 C20,50 30,40 50,45 C70,50 80,30 100,25 C120,20 130,35 150,30 C170,25 180,15 200,18 C220,21 230,35 250,28 C270,21 280,10 300,8" fill="none" stroke="#00e5a0" stroke-width="2" stroke-linecap="round"/>
                <circle cx="300" cy="8" r="4" fill="#00e5a0"/>
              </svg>
            </div>
          </div>

          <div class="transactions">
            <div class="tx-header">
              <div class="tx-title">Recent</div>
              <div class="tx-see-all">See all →</div>
            </div>
            <div class="tx-item">
              <div class="tx-icon tx-icon-blue">🛒</div>
              <div class="tx-info"><div class="tx-name">Whole Foods Market</div><div class="tx-date">Today, 8:24 AM</div></div>
              <div class="tx-amount debit">−$62.40</div>
            </div>
            <div class="tx-item">
              <div class="tx-icon tx-icon-green">💰</div>
              <div class="tx-info"><div class="tx-name">Salary Deposit</div><div class="tx-date">Yesterday</div></div>
              <div class="tx-amount credit">+$5,200.00</div>
            </div>
            <div class="tx-item">
              <div class="tx-icon tx-icon-yellow">☕</div>
              <div class="tx-info"><div class="tx-name">Blue Bottle Coffee</div><div class="tx-date">Mon, May 26</div></div>
              <div class="tx-amount debit">−$7.80</div>
            </div>
            <div class="tx-item">
              <div class="tx-icon tx-icon-red">🎬</div>
              <div class="tx-info"><div class="tx-name">Netflix</div><div class="tx-date">May 25</div></div>
              <div class="tx-amount debit">−$18.99</div>
            </div>
          </div>
        </div>

        <div class="bottom-nav">
          <button class="nav-btn active" type="button">
            <div class="nav-btn-icon">⌂</div>
            <div class="nav-btn-label">Home</div>
          </button>
          <button class="nav-btn" type="button">
            <div class="nav-btn-icon">◫</div>
            <div class="nav-btn-label">Cards</div>
          </button>
          <button class="nav-center-btn" type="button">+</button>
          <button class="nav-btn" type="button">
            <div class="nav-btn-icon">◎</div>
            <div class="nav-btn-label">Invest</div>
          </button>
          <button class="nav-btn" type="button">
            <div class="nav-btn-icon">◉</div>
            <div class="nav-btn-label">Profile</div>
          </button>
        </div>
      </div>
    </div>

    <div class="context-wrap">
      <div class="context-card">
        <div class="ctx-label">Design Principles</div>
        <div class="ctx-title">Zero-friction<br>money flows</div>
        <div class="ctx-desc">Every interaction is designed to reduce cognitive load. Primary data is always one glance away, secondary actions one tap, tertiary flows never more than two steps deep.</div>
      </div>
      <div class="context-card">
        <div class="ctx-label">AI Insights</div>
        <div class="insight-row">
          <div class="insight-icon insight-icon-green">📈</div>
          <div class="insight-text"><div class="insight-name">Spending down</div><div class="insight-sub">vs. 3-month avg</div></div>
          <div class="insight-val insight-val-green">−11%</div>
        </div>
        <div class="insight-row">
          <div class="insight-icon insight-icon-blue">🎯</div>
          <div class="insight-text"><div class="insight-name">Goal on track</div><div class="insight-sub">House fund · $40K</div></div>
          <div class="insight-val insight-val-blue">76%</div>
        </div>
        <div class="insight-row">
          <div class="insight-icon insight-icon-yellow">⚡</div>
          <div class="insight-text"><div class="insight-name">Bill due soon</div><div class="insight-sub">Rent · Jun 1</div></div>
          <div class="insight-val insight-val-yellow">3d</div>
        </div>
      </div>
      <div class="context-card">
        <div class="ctx-label">Quick Actions</div>
        <div class="quick-grid">
          <div class="quick-tile"><div class="quick-icon">💳</div><div class="quick-label">Virtual Card</div></div>
          <div class="quick-tile"><div class="quick-icon">📊</div><div class="quick-label">Analytics</div></div>
          <div class="quick-tile"><div class="quick-icon">🔐</div><div class="quick-label">Security</div></div>
          <div class="quick-tile quick-tile-accent"><div class="quick-icon">✨</div><div class="quick-label quick-label-accent">Upgrade</div></div>
        </div>
      </div>
    </div>
  </div>
</section>
```
## CSS
```css
/* ─── 05 Elara FinTech Mobile — minimalist mobile app UI ───────── */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

.mu-fn {
  --mu-fn-bg: #0e0e14;
  --mu-fn-surface: #16161f;
  --mu-fn-surface2: #1e1e2a;
  --mu-fn-border: #26263a;
  --mu-fn-text: #f0f0f8;
  --mu-fn-text-mid: #8888aa;
  --mu-fn-text-dim: #44445a;
  --mu-fn-green: #00e5a0;
  --mu-fn-green-dim: rgba(0,229,160,0.12);
  --mu-fn-blue: #4488ff;
  --mu-fn-blue-dim: rgba(68,136,255,0.1);
  --mu-fn-red: #ff4466;
  --mu-fn-yellow: #ffcc44;
  --mu-fn-sans: 'Plus Jakarta Sans', sans-serif;
  --mu-fn-mono: 'Space Mono', monospace;
  position: relative;
  width: 100%;
  min-height: 900px;
  background: var(--mu-fn-bg);
  color: var(--mu-fn-text);
  font-family: var(--mu-fn-sans);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  overflow: hidden;
  box-sizing: border-box;
}

.mu-fn *,
.mu-fn *::before,
.mu-fn *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* Ambient radial glow — was body::before fixed; scoped. */

.mu-fn::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(0,229,160,0.06) 0%,transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
  z-index: 0;
}

.mu-fn .layout {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 40px;
  align-items: center;
}

.mu-fn .phone-outer {
  position: relative;
  background: linear-gradient(160deg,#2a2a3a,#1a1a28);
  border-radius: 54px;
  padding: 14px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 40px 120px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.04);
  width: 380px;
  flex-shrink: 0;
}

.mu-fn .phone-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 28px;
  background: #0e0e14;
  border-radius: 0 0 20px 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.mu-fn .notch-camera {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1a1a24;
  border: 2px solid #252535;
}

.mu-fn .notch-speaker {
  width: 48px;
  height: 5px;
  border-radius: 3px;
  background: #1a1a24;
}

.mu-fn .phone-screen {
  background: var(--mu-fn-bg);
  border-radius: 42px;
  overflow: hidden;
  height: 780px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.mu-fn .status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px 0;
  position: relative;
  z-index: 5;
}

.mu-fn .status-time {
  font-family: var(--mu-fn-mono);
  font-size: 13px;
  font-weight: 700;
}

.mu-fn .notch-space {
  width: 120px;
}

.mu-fn .status-icons {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--mu-fn-text-mid);
}

.mu-fn .screen-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 80px;
  scroll-behavior: smooth;
}

.mu-fn .screen-content::-webkit-scrollbar {
  display: none;
}

.mu-fn .app-header {
  padding: 16px 24px 20px;
}

.mu-fn .greeting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.mu-fn .greeting {
  font-size: 13px;
  color: var(--mu-fn-text-mid);
  font-weight: 400;
}

.mu-fn .header-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg,var(--mu-fn-green),#008860);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #0a0a0a;
}

.mu-fn .user-name-main {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.mu-fn .balance-card {
  margin: 0 20px 20px;
  background: linear-gradient(135deg,#0f1f18 0%,#0a1810 50%,#0f1f18 100%);
  border: 1px solid rgba(0,229,160,0.15);
  border-radius: 24px;
  padding: 28px 28px 24px;
  position: relative;
  overflow: hidden;
  animation: mu-fn-cardin 0.5s ease 0.1s both;
}

.mu-fn .balance-card::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(0,229,160,0.1) 0%,transparent 70%);
}

.mu-fn .balance-card::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(0,229,160,0.05) 0%,transparent 70%);
}

.mu-fn .balance-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgba(0,229,160,0.6);
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 500;
  position: relative;
}

.mu-fn .balance-amount {
  font-family: var(--mu-fn-mono);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--mu-fn-text);
  line-height: 1;
  margin-bottom: 6px;
  position: relative;
}

.mu-fn .balance-cents {
  font-size: 24px;
  opacity: 0.5;
}

.mu-fn .balance-change {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--mu-fn-green);
  font-weight: 600;
  margin-bottom: 24px;
  position: relative;
}

.mu-fn .chg-arrow {
  font-size: 14px;
}

.mu-fn .chg-period {
  color: var(--mu-fn-text-mid);
  font-weight: 400;
}

.mu-fn .balance-actions {
  display: flex;
  gap: 10px;
  position: relative;
}

.mu-fn .bal-action {
  flex: 1;
  background: rgba(0,229,160,0.1);
  border: 1px solid rgba(0,229,160,0.15);
  border-radius: 14px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  color: inherit;
}

.mu-fn .bal-action:hover {
  background: rgba(0,229,160,0.18);
}

.mu-fn .bal-action-icon {
  font-size: 18px;
}

.mu-fn .bal-action-label {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mu-fn-text-mid);
  font-weight: 600;
}

.mu-fn .stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 20px 20px;
  animation: mu-fn-cardin 0.5s ease 0.2s both;
}

.mu-fn .stat-card {
  background: var(--mu-fn-surface);
  border: 1px solid var(--mu-fn-border);
  border-radius: 20px;
  padding: 18px 18px;
}

.mu-fn .stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.mu-fn .stat-icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.mu-fn .stat-icon-green {
  background: var(--mu-fn-green-dim);
}

.mu-fn .stat-icon-blue {
  background: var(--mu-fn-blue-dim);
}

.mu-fn .stat-change {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 20px;
}

.mu-fn .stat-change.up {
  background: var(--mu-fn-green-dim);
  color: var(--mu-fn-green);
}

.mu-fn .stat-label {
  font-size: 11px;
  color: var(--mu-fn-text-mid);
  margin-bottom: 4px;
  font-weight: 500;
}

.mu-fn .stat-value {
  font-family: var(--mu-fn-mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.mu-fn .stat-value-green {
  color: var(--mu-fn-green);
}

.mu-fn .chart-section {
  margin: 0 20px 20px;
}

.mu-fn .chart-card {
  background: var(--mu-fn-surface);
  border: 1px solid var(--mu-fn-border);
  border-radius: 20px;
  padding: 20px;
  animation: mu-fn-cardin 0.5s ease 0.3s both;
}

.mu-fn .chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.mu-fn .chart-title {
  font-size: 14px;
  font-weight: 700;
}

.mu-fn .chart-period-group {
  display: flex;
  gap: 2px;
  background: var(--mu-fn-surface2);
  border-radius: 8px;
  padding: 2px;
}

.mu-fn .chart-period {
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--mu-fn-text-dim);
  font-weight: 600;
}

.mu-fn .chart-period.active {
  background: var(--mu-fn-border);
  color: var(--mu-fn-text);
}

.mu-fn .chart-total {
  font-family: var(--mu-fn-mono);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.mu-fn .chart-sub {
  font-size: 11px;
  color: var(--mu-fn-green);
  font-weight: 600;
  margin-bottom: 18px;
}

.mu-fn .chart-svg {
  width: 100%;
  height: 90px;
}

.mu-fn .transactions {
  padding: 0 20px;
}

.mu-fn .tx-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.mu-fn .tx-title {
  font-size: 15px;
  font-weight: 700;
}

.mu-fn .tx-see-all {
  font-size: 12px;
  color: var(--mu-fn-green);
  font-weight: 600;
  cursor: pointer;
}

.mu-fn .tx-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--mu-fn-border);
}

.mu-fn .tx-item:last-child {
  border-bottom: none;
}

.mu-fn .tx-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.mu-fn .tx-icon-blue {
  background: var(--mu-fn-blue-dim);
}

.mu-fn .tx-icon-green {
  background: var(--mu-fn-green-dim);
}

.mu-fn .tx-icon-yellow {
  background: rgba(255,204,68,0.1);
}

.mu-fn .tx-icon-red {
  background: rgba(255,68,102,0.1);
}

.mu-fn .tx-info {
  flex: 1;
  min-width: 0;
}

.mu-fn .tx-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}

.mu-fn .tx-date {
  font-size: 11px;
  color: var(--mu-fn-text-mid);
}

.mu-fn .tx-amount {
  font-family: var(--mu-fn-mono);
  font-size: 14px;
  font-weight: 700;
}

.mu-fn .tx-amount.debit {
  color: var(--mu-fn-text);
}

.mu-fn .tx-amount.credit {
  color: var(--mu-fn-green);
}

.mu-fn .bottom-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(14,14,20,0.95);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--mu-fn-border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 12px 8px 20px;
}

.mu-fn .nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  flex: 1;
  padding: 4px;
  border: none;
  background: transparent;
  font-family: inherit;
  color: inherit;
}

.mu-fn .nav-btn-icon {
  font-size: 22px;
  transition: transform 0.2s;
}

.mu-fn .nav-btn-label {
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mu-fn-text-dim);
  font-weight: 600;
}

.mu-fn .nav-btn.active .nav-btn-label {
  color: var(--mu-fn-green);
}

.mu-fn .nav-btn.active .nav-btn-icon {
  transform: scale(1.1);
}

.mu-fn .nav-center-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg,var(--mu-fn-green),#00aa78);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(0,229,160,0.3);
  transition: transform 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
  margin-top: -18px;
  border: none;
  font-family: inherit;
  color: inherit;
}

.mu-fn .nav-center-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 32px rgba(0,229,160,0.4);
}

.mu-fn .context-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 280px;
}

.mu-fn .context-card {
  background: var(--mu-fn-surface);
  border: 1px solid var(--mu-fn-border);
  border-radius: 20px;
  padding: 22px;
}

.mu-fn .ctx-label {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mu-fn-text-mid);
  font-weight: 600;
  margin-bottom: 12px;
}

.mu-fn .ctx-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.mu-fn .ctx-desc {
  font-size: 12px;
  color: var(--mu-fn-text-mid);
  line-height: 1.7;
  font-weight: 300;
}

.mu-fn .insight-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--mu-fn-border);
}

.mu-fn .insight-row:last-child {
  border-bottom: none;
}

.mu-fn .insight-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.mu-fn .insight-icon-green {
  background: var(--mu-fn-green-dim);
}

.mu-fn .insight-icon-blue {
  background: var(--mu-fn-blue-dim);
}

.mu-fn .insight-icon-yellow {
  background: rgba(255,204,68,0.1);
}

.mu-fn .insight-text {
  flex: 1;
}

.mu-fn .insight-name {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 1px;
}

.mu-fn .insight-sub {
  font-size: 10px;
  color: var(--mu-fn-text-mid);
}

.mu-fn .insight-val {
  font-family: var(--mu-fn-mono);
  font-size: 12px;
  font-weight: 700;
}

.mu-fn .insight-val-green {
  color: var(--mu-fn-green);
}

.mu-fn .insight-val-blue {
  color: var(--mu-fn-blue);
}

.mu-fn .insight-val-yellow {
  color: var(--mu-fn-yellow);
}

.mu-fn .quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.mu-fn .quick-tile {
  background: var(--mu-fn-surface2);
  border: 1px solid var(--mu-fn-border);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  text-align: center;
}

.mu-fn .quick-tile.quick-tile-accent {
  background: var(--mu-fn-green-dim);
  border-color: rgba(0,229,160,0.2);
}

.mu-fn .quick-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.mu-fn .quick-label {
  font-size: 11px;
  color: var(--mu-fn-text-mid);
  font-weight: 600;
}

.mu-fn .quick-label.quick-label-accent {
  color: var(--mu-fn-green);
}

@keyframes mu-fn-cardin {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .mu-fn .layout {
    flex-direction: column;
    gap: 24px;
    align-items: stretch;
  }

  .mu-fn .context-wrap {
    max-width: 380px;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mu-fn .balance-card,
    .mu-fn .stats-row,
    .mu-fn .chart-card {
    animation: none !important;
  }
}
```

Techniques used in this demo

backdrop-filterMDN ↗radial-gradient()MDN ↗grid-templateMDN ↗@keyframesMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →