✦ SmartBiz Admin · Design System v2.0
Built for
8 hours a day.

Un sistema de diseño con dos temas — oscuro para cuartos con poca luz, claro para ambientes brillantes. Mismos tokens, misma lógica, cero distracciones. Cambia con el toggle arriba a la derecha.

Dark + Light WCAG AA DM Sans · Syne · DM Mono Next.js 14 + Tailwind
✦ Foundation
Color System

Dos paletas que comparten la misma estructura semántica. Los tokens son idénticos — solo cambian los valores. El acento teal se ajusta para mantener contraste en ambos temas.

Background Layers — 4 niveles de profundidad
🌙 Dark
bg-base
#0E1117
bg-surface
#151922
bg-elevated
#1C2230
bg-overlay
#232B3E
☀️ Light
bg-base
#F5F6F8
bg-surface
#FFFFFF
bg-elevated
#F0F2F5
bg-overlay
#E8EBF0
Acento — El teal se ajusta por tema
Dark
#00C9A7
Light
#00AB8C

El tema oscuro usa un teal más brillante #00C9A7 para destacar sobre fondos profundos. El tema claro usa un teal más saturado #00AB8C para mantener contraste 4.5:1 sobre blanco. Ambos se perciben como el mismo color de marca.

Semantic Colors (adaptan contraste por tema)
success
—
warning
—
danger
—
info
—
✦ Foundation
Typography

Syne para títulos y KPIs — peso, carácter, legible en grande. DM Sans para todo el cuerpo — diseñado para lectura prolongada. DM Mono para todos los números — cifras tabulares que se alinean solas.

Display
Syne 800
$58,420.00
H1
Syne 700
Financial Overview
H2
Syne 600
Profit & Loss Statement
H3
DM Sans 600
Transaction History — November 2024
Body
DM Sans 400
Your business generated $18,410 in net profit this month — a 12% improvement. Revenue grew across all categories with Service Income showing the strongest momentum.
Small
DM Sans 400
Last updated 3 minutes ago · Auto-refresh enabled · UTC-6
Mono
DM Mono 500
INV-2024-0847 · $2,450.00 · 97.3%
Label
DM Sans 700
Net Income · This Month
✦ Foundation
Spacing & Radius
Scale (base 4px)
--space-1 4px
Icon gaps
--space-2 8px
Inline elements
--space-3 12px
Table cells
--space-4 16px
Card padding sm
--space-5 20px
Card padding
--space-6 24px
Section gap
--space-8 32px
Page sections
--space-12 48px
Major sections
Border Radius
6px
Buttons
8px
Inputs
12px
KPI Cards
14px
Panels
20px
Modals
✦ Components
Core Components
Buttons
Badges & Status
Completed Pending Flagged Processing AI Categorized Reconciled
↑ +12.4% ↓ -8.2% ⚠ Low Stock ✦ AI Insight 3 Pending INV-2024
Form Inputs
🔍
By description, amount, or reference
$
Reference already exists in system
✦ Components
KPI Cards

Los KPIs son el corazón del dashboard. La línea de color superior de 2px identifica la categoría de un vistazo.

💰
Total Revenue
$58,420
↑ 12.4% vs last month
📈
Net Income
$18,410
↑ 8.7% vs last month
📦
Pending Orders
24
↓ 3 from yesterday
⚠️
Low Stock Items
7
Needs attention
✦ Components
Data Tables
Date Description Account Category Status Amount
Nov 18 Google Workspace 5001 ✦ Software Reconciled −$180.00
Nov 17 Client Invoice #1047 4001 Revenue Reconciled +$8,500.00
Nov 16 Unknown Vendor #2 — ⚠ Pending AI Flagged −$2,340.00
Nov 15 Payroll — November 6001 ✦ Payroll Reconciled −$15,000.00
✦ Patterns
Dashboard Layout

Así se ve el dashboard en el tema activo. Cambia el toggle para ver ambos.

S
SmartBiz
Overview
◼ Dashboard
📋 Orders 5
👥 Customers
📦 Products
Finance
💳 Transactions
📊 P&L
⚖️ Balance
✦ AI Reports NEW
Dashboard
November 2024
✦ AI Active
W
✦
AI Insight
Sales 18% below last week. 3 products critically low. Recommend promotion on SKU-047.
Revenue
$58.4k
Net Income
$18.4k
Orders
247
Low Stock
7
Revenue — Last 30 days
Top Products
Premium Plan$12.4k
Pro Bundle$8.9k
Starter Kit$5.2k
Add-on Pack$3.1k
✦
✦ Patterns
Accounting Components
P&L Statement
Profit & Loss
November 2024
Revenue
Product Sales$45,200
Service Income$12,800
Total Revenue$58,000
COGS
Inventory Costs$18,400
Gross Profit$39,600 68.3%
Expenses
Payroll$15,000
Rent$3,200
Marketing$2,100
Software$890
Total Expenses$21,190
NET INCOME$18,410
AI Anomaly Panel
Anomalies 3
🔴
Unusually large — Marketing
340% above monthly average. Review before reconciling.
$8,400
⚠️
Possible duplicate
Same vendor, same amount on Nov 14 and Nov 15.
$340
ℹ️
Uncategorized transaction
"WIRE TRANSFER 9847" — AI confidence too low.
$2,340
✦ Patterns
AI Patterns

El símbolo ✦ identifica todo lo que es AI. Consistente en ambos temas. El cliente nunca se pregunta qué es humano y qué es inteligencia artificial.

AI Alert Banner
✦
AI Business Insight
Sales are 18% below last week's average. Three products are critically low on stock. Based on patterns, a targeted promotion on SKU-047 could recover ~$4,200 before month-end.
AI Chat Assistant
✦
SmartBiz AI
● Connected to your data
✦
Hello Wladimir! I have full access to your business data. Ask me anything — financials, inventory, customers, or orders.
W
Am I profitable this month?
✦
Yes — you're profitable. Net income is $18,410 on $58k revenue. That's a 31.7% net margin, strong for your size.

One flag: 2 invoices past 30 days totaling $3,200 in receivables — worth collecting before month-end.
✦ Dual Theme
Side by Side Comparison

Los mismos componentes, los mismos tokens semánticos, dos contextos de iluminación. El usuario cambia de tema con un click — la preferencia se guarda en localStorage.

🌙 Dark Mode — Cuartos con poca luz
$58.4k
Revenue
$18.4k
Net Income
247
Orders
✦
Sales 18% below last week. Recommend promotion on SKU-047 for $4,200 recovery.
☀️ Light Mode — Ambientes con mucha luz
$58.4k
Revenue
$18.4k
Net Income
247
Orders
✦
Sales 18% below last week. Recommend promotion on SKU-047 for $4,200 recovery.
✦ Implementation
CSS Tokens & Tailwind Config
Cómo implementar el toggle en Next.js
// hooks/useTheme.ts import { useState, useEffect } from 'react' export function useTheme() { const [theme, setTheme] = useState<'dark' | 'light'>('dark') useEffect(() => { const saved = localStorage.getItem('theme') as 'dark' | 'light' const preferred = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' const initial = saved || preferred setTheme(initial) document.documentElement.setAttribute('data-theme', initial) }, []) const toggle = () => { const next = theme === 'dark' ? 'light' : 'dark' setTheme(next) document.documentElement.setAttribute('data-theme', next) localStorage.setItem('theme', next) } return { theme, toggle } }
globals.css — Tokens completos
/* Agrega esto a globals.css */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Syne:wght@600;700;800&family=DM+Mono:wght@400;500&display=swap'); :root, [data-theme="dark"] { --bg-base: #0E1117; --bg-surface: #151922; --bg-elevated: #1C2230; --bg-overlay: #232B3E; --text-primary: #EDF0F7; --text-secondary: #8B95A8; --text-muted: #505A6E; --accent: #00C9A7; --success: #22D06A; --warning: #F5A623; --danger: #FF5C6A; --info: #4D9EFF; } [data-theme="light"] { --bg-base: #F5F6F8; --bg-surface: #FFFFFF; --bg-elevated: #F0F2F5; --bg-overlay: #E8EBF0; --text-primary: #111827; --text-secondary: #4B5563; --text-muted: #9CA3AF; --accent: #00AB8C; --success: #16A34A; --warning: #D97706; --danger: #DC2626; --info: #2563EB; }
Tailwind config
// tailwind.config.ts theme: { extend: { colors: { 'bg-base': 'var(--bg-base)', 'bg-surface': 'var(--bg-surface)', 'bg-elevated': 'var(--bg-elevated)', 'bg-overlay': 'var(--bg-overlay)', 'text-primary': 'var(--text-primary)', 'text-secondary': 'var(--text-secondary)', 'text-muted': 'var(--text-muted)', 'accent': 'var(--accent)', 'success': 'var(--success)', 'warning': 'var(--warning)', 'danger': 'var(--danger)', }, fontFamily: { 'display': ['Syne', 'sans-serif'], 'body': ['DM Sans', 'sans-serif'], 'mono': ['DM Mono', 'monospace'], } } }
SmartBiz Admin · Design System v2.0
Built by Wladimir · AptoCode / Liberi LLC · San Antonio, TX
✦ Dark + Light Syne + DM Sans + DM Mono WCAG AA