Design System

Componentes SCSS

Portfolio de todos los componentes disponibles. Cambia el tema editando _variables.scss y los cambios se propagan a toda la aplicación.

Tipografía

Rails 8 — Production Ready
Heading Display
Heading 1 — Título de sección
Heading 2 — Subtítulo
Heading 3 — Bloque

Texto body — La convención sobre configuración (Convention over Configuration) es el principio central de Rails.

Texto small / secundario — color muted.

Texto xs / metadata — color dim.


TEXTO LABEL (MONO) text-mono / inline code text-accent text-success text-warning text-error text-muted text-dim

Botones

Variantes

Tamaños

Disabled

Con iconos

Badges

Variantes semánticas

Accent Success Warning Error Info Neutral

Pill / redondeado

Rails 8 v3.2.1 Beta

Con indicador de estado

Online Idle Offline

Tamaño large

Production Ready Open Source

Cards

Variantes

Default Card

Estilo base con hover de traslación y borde accent.

🔒

Accent Card

Gradiente sutil de acento en el fondo. Ideal para destacar.

🎨

Flat Card

Sin traslación en hover. Borde accent al pasar el cursor.

🌐

Glass Card

Efecto glassmorphism con backdrop-filter blur.

Formularios

✓ Email válido
Contraseña demasiado corta.
Máximo 500 caracteres.

Alerts

Despliegue completado

La versión 2.4.1 se ha desplegado correctamente en producción.

⚠️

Migración pendiente

Hay 3 migraciones sin ejecutar. Ejecuta rails db:migrate.

🚨

Error de conexión

No se puede conectar con la base de datos. Verifica las credenciales.

ℹ️

Nueva versión disponible

Rails 8.1 ya está disponible. Revisa el CHANGELOG antes de actualizar.

💎

Rails red alert

Variante con el color accent de la aplicación.

Feature Card

El mismo componente .feature-card que usa la home. Alias de .card.

🔒

Reutilizable

Todos los componentes usan las variables de _variables.scss.

🎨

Cambia el Tema

Modifica $color-accent en _variables.scss y todo cambia.

📦

Sin dependencias

SCSS puro. Sin Bootstrap, sin Tailwind. Todo hecho a medida.