BrefyBrefyDesign System
EntrarHub
class="text-slate-100 antialiased min-h-screen" style="background-image: radial-gradient(circle at 50% 0%, #1e1b4b 0%, #030712 70%);">

🎨 Tokens

Colores, tipografía y espaciado del sistema.

Colores

{{ c.token }}
{{ c.value }}
uso: {{ c.usage }}

Tipografía

{{ t.label }}
{{ t.token }} · {{ t.size }} · {{ t.weight }}

🔘 Botones

Tres variantes con sus estados y código.

{{ btn.label }}

{{ btn.className }}

🃏 Cards

Variantes de contenedores con y sin hover.

{{ card.icon }}

{{ card.title }}

{{ card.desc }}

{{ card.title }}

📝 Formularios

Inputs, textareas, toggles y selects con estados.

Input de texto

Textarea

Toggle

{{ toggleDemo.on ? 'Activo' : 'Inactivo' }}

Select

🏷️ Badges

Etiquetas de estado y categoría con colores reales.

Estados

{{ b.label }}

Categorías

{{ b.icon }} {{ b.label }}

Planes / Tiers

{{ b.label }}

🧩 Layouts

Patrones de página reutilizables.

🎬

Título Impactante

Subtítulo que explica el valor de la propuesta en una línea clara y directa.

{{ mod.icon }}

{{ mod.title }}

{{ mod.desc }}

Explorar →
Más popular

{{ plan.name }}

{{ plan.price }} {{ plan.per }}

{{ plan.desc }}

  • {{ f }}