Sistema de Marca

Identidad visual y guías de estilo de REFORZA

Modo de Visualización

Claro / Oscuro
Selecciona el modo de visualización que prefieras.
Origin

Paleta de Colores

Variables de Color
Colores semánticos definidos en CSS.
background
var(--background)
foreground
var(--foreground)
card
var(--card)
card-foreground
var(--card-foreground)
popover
var(--popover)
popover-foreground
var(--popover-foreground)
primary
var(--primary)
primary-foreground
var(--primary-foreground)
secondary
var(--secondary)
secondary-foreground
var(--secondary-foreground)
muted
var(--muted)
muted-foreground
var(--muted-foreground)
accent
var(--accent)
accent-foreground
var(--accent-foreground)
destructive
var(--destructive)
destructive-foreground
var(--destructive-foreground)
border
var(--border)
input
var(--input)
ring
var(--ring)

Tipografía

Fuentes y Tamaños
Escala tipográfica y pesos.

Heading 1

Extra bold, tight tracking

Heading 2

Semibold, tight tracking

Heading 3

Semibold, tight tracking

Heading 4

Semibold, tight tracking

The quick brown fox jumps over the lazy dog. This is a standard paragraph with standard leading. The typography should adapt to the theme's font settings seamlessly.

Body text (p)

"Design is not just what it looks like and feels like. Design is how it works."

Blockquote

@/components/ui

Inline code

Componentes

Elementos UI
Muestra de componentes básicos.
Buttons
Different button variants
Inputs & Form Controls
Interactive elements
Interactive Card
This card demonstrates shadows and borders.

Themes affect border radius, shadows, and colors used in cards like this one.

Badges & Calendar
DefaultSecondaryOutlineDestructive
March 2026