| name | kuenta-design |
| description | Design system y guía visual completa para el proyecto KUENTA (PWA de pagos P2P Chile). Usar SIEMPRE que se cree o modifique cualquier componente visual, pantalla, estilo, layout o elemento de interfaz en el proyecto KUENTA. Incluye tipografía (Syne + DM Sans), paleta de colores con tokens CSS, glassmorphism, wordmark, modos claro/oscuro, iconografía SVG, animaciones, componentes y checklist de implementación. También usar cuando se mencione: wordmark, splash screen, login, header, tab bar, cards, botones, inputs, avatares, colores, fuentes o cualquier elemento visual de KUENTA.
|
KUENTA Design System Skill
Instrucción de uso
Cuando trabajas en el proyecto KUENTA, lee el archivo DESIGN_SYSTEM.md antes de
escribir cualquier código de componente o pantalla:
cat DESIGN_SYSTEM.md
Si estás en un contexto donde el archivo no está disponible localmente,
está disponible en: /mnt/user-data/outputs/DESIGN_SYSTEM.md
Resumen rápido (leer DESIGN_SYSTEM.md para detalles completos)
Tipografía
- Wordmark únicamente:
Syne 800, letter-spacing 8-12px, gradient morado
- Todo lo demás:
DM Sans 300-700
- Importar ambas desde Google Fonts en
index.html
Componente Wordmark obligatorio
import { Wordmark } from '@/components/ui/Wordmark'
Reglas absolutas
- Cero emojis — solo íconos SVG o Lucide React
- Cero hardcoded hex — usar CSS vars (
var(--text), var(--surface), etc.)
- Cero ShadCN — design system propio
- Wordmark siempre con
<Wordmark />, nunca texto plano
- Dos temas —
[data-theme="dark"] y [data-theme="light"] en <html>
- Touch targets ≥ 44×44px siempre
Paleta core (ambos modos)
Morado primario: #4C44AA / #6860C8 / #8880DE
Verde success: var(--green) → #0A5C45 light / #3DC99A dark
Rojo error: var(--red) → #8B2020 light / #F07070 dark
Header gradient: siempre morado (no cambia con el tema)
Pantallas de auth — estructura
/splash → SplashPage : blobs + Wordmark lg + tagline + dots → 2.5s → /login
/login → LoginPage : header gradient + Wordmark md + phone input + social btns
/otp → OTPPage : 6 dígitos + resend
/setup → ProfileSetup : nombre + foto
Importar Google Fonts (index.html)
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap" rel="stylesheet">
tailwind.config.ts — extensiones requeridas
fontFamily: {
brand: ['Syne', 'sans-serif'],
ui: ['DM Sans', 'system-ui', '-apple-system', 'sans-serif'],
},
borderRadius: {
card: '20px', modal: '28px', input: '14px',
btn: '16px', tab: '28px', pill: '100px', icon: '14px',
},
Lee DESIGN_SYSTEM.md para:
- Tokens CSS completos de color (claro y oscuro)
- Código completo de
SplashPage.tsx y LoginPage.tsx
- Componente
Wordmark.tsx completo
- Componente
ThemeToggle.tsx con Zustand persist
AmbientBlobs.tsx- Escala tipográfica completa (9 niveles)
- Todos los keyframes de animación
- Checklist de implementación
- Reglas de iconografía y tamaños
Skill generado para el proyecto KUENTA — actualizar este archivo si cambia el design system.
