--- name: premium-ui description: Dark premium design system. Colores, tipografía, componentes, efectos hover. --- # Admin Design System A dark, premium design system inspired by Vercel, Linear, and GitHub's dark themes. --- ## Color Palette ### Backgrounds | Name | Hex | HSL | Usage | |------|-----|-----|-------| | Background | `#121212` | `hsl(0, 0%, 7%)` | Main app background | | Sidebar | `#0f0f0f` | `hsl(0, 0%, 6%)` | Sidebar background | | Card | `#171717` | `hsl(0, 0%, 9%)` | Card backgrounds | | Elevated | `rgba(255,255,255,0.02)` | - | Subtle elevation | | Hover | `rgba(255,255,255,0.04)` | - | Hover states | ### Borders | Name | Value | Usage | |------|-------|-------| | Default | `rgba(255,255,255,0.06)` | Card borders, dividers | | Subtle | `rgba(255,255,255,0.04)` | Table row dividers | | Hover | `rgba(255,255,255,0.08)` | Border on hover | | Strong | `rgba(255,255,255,0.15)` | Active\/focus borders | ### Text | Name | Value | Usage | |------|-------|-------| | Primary | `#ffffff` | Headings, important text | | Secondary | `rgba(255,255,255,0.80)` | Body text | | Muted | `rgba(255,255,255,0.50)` | Secondary info | | Subtle | `rgba(255,255,255,0.40)` | Labels, captions | | Faint | `rgba(255,255,255,0.30)` | Placeholders, timestamps | ### Accent Colors | Color | Background | Text | Border | Usage | |-------|------------|------|--------|-------| | Blue | `rgba(59,130,246,0.10-0.20)` | `#60a5fa` | `rgba(59,130,246,0.30)` | Info, links, primary actions | | Emerald | `rgba(16,185,129,0.10-0.20)` | `#34d399` | `rgba(16,185,129,0.30)` | Success, correct, online | | Purple | `rgba(139,92,246,0.10-0.20)` | `#a78bfa` | `rgba(139,92,246,0.30)` | Features, premium | | Amber | `rgba(245,158,11,0.10-0.20)` | `#fbbf24` | `rgba(245,158,11,0.30)` | Warnings, XP, stars | | Orange | `rgba(249,115,22,0.10-0.20)` | `#fb923c` | `rgba(249,115,22,0.30)` | Streaks, fire | | Red | `rgba(239,68,68,0.10-0.20)` | `#f87171` | `rgba(239,68,68,0.30)` | Errors, destructive | | Pink | `rgba(236,72,153,0.10-0.20)` | `#f472b6` | `rgba(236,72,153,0.30)` | Visual, special | | Cyan | `rgba(6,182,212,0.10-0.20)` | `#22d3ee` | `rgba(6,182,212,0.30)` | Info badges | | Yellow | `rgba(234,179,8,0.10-0.20)` | `#facc15` | `rgba(234,179,8,0.30)` | Gold, achievements | --- ## Typography ### Font ```css font-family: 'Geist Sans', system-ui, sans-serif; font-family: 'Geist Mono', monospace; \/* For code\/IDs *\/ ``` ### Sizes | Name | Size | Weight | Letter Spacing | Usage | |------|------|--------|----------------|-------| | Title | `text-2xl` (24px) | `font-bold` | `tracking-tight` | Page titles | | Heading | `text-sm` (14px) | `font-semibold` | - | Card headers | | Label | `text-[11px]` | `font-semibold` | `tracking-widest` | Uppercase labels | | Body | `text-sm` (14px) | `font-normal` | - | Body text | | Caption | `text-xs` (12px) | `font-normal` | - | Timestamps, hints | | Tiny | `text-[10px]` | `font-semibold` | `tracking-widest` | Table headers | ### Number Styling ```css .tabular-nums { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } ``` --- ## Components ### Sidebar ```jsx \/\/ Container

{\/* Logo section *\/}

<\/div>

App Name<\/span> Admin Console<\/span> <\/div> <\/div> {\/* Navigation *\/}

{\/* Section label *\/}

Menu <\/p> {\/* Nav item *\/} {\/* Hover background *\/}

{\/* Icon container *\/}

<\/div> Dashboard<\/span> <\/Link> {\/* Active nav item *\/} {\/* Active background *\/}

{\/* Icon container - active *\/}

<\/div> Users<\/span> {\/* Active indicator dot *\/}

<\/Link> <\/nav> {\/* Footer - Sign out *\/}

Nombre <\/th>	Estado <\/th>	Acciones <\/th> <\/tr> <\/thead> {\/* Body *\/}
...<\/td>	...<\/td>	...<\/td> <\/tr> <\/tbody> <\/table> <\/div> ``` ### Header Styling ```css th { padding: 16px 20px; \/* px-5 py-4 \/ font-size: 10px; \/ text-[10px] \/ font-weight: 600; \/ font-semibold \/ text-transform: uppercase; letter-spacing: 0.1em; \/ tracking-widest \/ color: rgba(255,255,255,0.4); \/ text-white\/40 \/ } ``` ### Row Hover Effect ```css tr { transition: all 200ms ease; } tr:hover { background: rgba(255,255,255,0.02); \/ hover:bg-white\/[0.02] *\/ } ``` ### Filas Clickeables Para hacer toda la fila clickeable (ej: ir al detalle): ```jsx
<\/td> {\/* Contenido normal de las celdas *\/}	...<\/td>	...<\/td> {\/* Indicador de "clickeable" - aparece en hover *\/}	<\/td> <\/tr> ``` ### Tipos de Contenido en Celdas #### Avatar + Nombre ```jsx	{\/* Avatar con gradiente *\/} J <\/div> Juan Pérez<\/p> juan@email.com<\/p> <\/div> <\/div> <\/td> ``` #### Badge de Estado ```jsx	Activo <\/span> <\/td> ``` #### Número\/Valor ```jsx	1,234 <\/span> <\/td> ``` #### Fecha\/Timestamp ```jsx	Hace 2 horas <\/span> <\/td> ``` ### Resumen de Estilos \| Elemento \| Clases \| \|----------\|--------\| \| Container \| `data-card` \| \| Header border \| `border-b border-white\/[0.06]` \| \| Header text \| `text-[10px] font-semibold uppercase tracking-widest text-white\/40` \| \| Row dividers \| `divide-y divide-white\/[0.04]` \| \| Row hover \| `hover:bg-white\/[0.02] transition-all duration-200` \| \| Cell padding \| `px-5 py-4` \| \| Cell text \| `text-sm text-white\/80` \| \| Align left \| `text-left` (default) \| \| Align center \| `text-center` \| \| Align right \| `text-right` \| --- ## Spacing \| Name \| Value \| Usage \| \|------\|-------\|-------\| \| Card padding \| `p-5` or `p-6` \| Inside cards \| \| Section gap \| `space-y-6` or `space-y-8` \| Between sections \| \| Grid gap \| `gap-5` or `gap-6` \| Grid layouts \| \| Table cell \| `px-5 py-4` \| Table cells \| --- ## Border Radius \| Name \| Value \| Usage \| \|------\|-------\|-------\| \| Small \| `rounded-lg` (8px) \| Badges, small elements \| \| Medium \| `rounded-xl` (12px) \| Inputs, buttons, icons \| \| Large \| `rounded-2xl` (16px) \| Cards, modals \| --- ## Shadows ```css \/* Card hover \/ box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5), 0 0 30px -10px rgba(255, 255, 255, 0.1); \/ Avatar\/Logo \/ box-shadow: 0 10px 25px -5px rgba(255, 255, 255, 0.1); \/ Colored glow \/ box-shadow: 0 0 30px -5px rgba(16, 185, 129, 0.3); \/ emerald \/ ``` --- ## Animations ### Pulse (Live indicator) ```jsx <\/span> ``` ### Hover Scale ```css .group-hover:scale-110 { transition: transform 300ms; } ``` ### Transitions ```css transition-all duration-200 \/ Fast - hovers, focus \/ transition-all duration-300 \/ Medium - transforms, complex \/ ``` --- ## Background Effects ### Subtle gradient overlay ```css body { background-color: #121212; background-image: radial-gradient(circle at 25% 25%, rgba(120, 119, 198, 0.03) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(74, 144, 226, 0.03) 0%, transparent 50%); } ``` ### Grid pattern ```css background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); background-size: 3rem 3rem; ``` --- ## Tailwind Classes Quick Reference ### Background - `bg-[#121212]` - Main background - `bg-white\/[0.02]` - Subtle elevation - `bg-white\/[0.05]` - Icon containers - `bg-emerald-500\/10` - Colored backgrounds ### Text - `text-white` - Primary - `text-white\/80` - Secondary - `text-white\/50` - Muted - `text-white\/40` - Subtle - `text-white\/30` - Faint - `text-emerald-400` - Colored ### Border - `border-white\/[0.04]` - Very subtle - `border-white\/[0.06]` - Default - `border-white\/[0.08]` - Visible - `border-emerald-500\/30` - Colored ### Typography - `text-[10px] font-semibold uppercase tracking-widest` - Table headers - `text-[11px] font-semibold uppercase tracking-widest` - Labels - `text-2xl font-bold tracking-tight` - Page titles - `tabular-nums` - Numbers --- ## Usage Example ```jsx \/\/ Complete stat card Total Users <\/p> 1,234 <\/p> <\/div> <\/div> <\/div> <\/div> ``` --- ## Key Principles 1. Subtlety* - Use low opacity values (0.02-0.10 for backgrounds, 0.04-0.08 for borders) 2. Hierarchy - Clear visual hierarchy with text opacity levels 3. Color accents - Colored elements use gradient backgrounds with matching text\/border 4. Smooth transitions - 200-300ms transitions on all interactive elements 5. Consistent spacing - Use Tailwind spacing scale consistently 6. Glass effect - Subtle backdrop blur and transparency 7. Hover feedback - Scale, glow, or color change on hover