Saltar al contenido
FavrikSistema de diseño

Sistema de diseño Favrik

Tokens y componentes propios para una herramienta de trabajo diario: compacta, legible al sol en un celular de gama media y cómoda en una pantalla ancha. Cada ejemplo se muestra en tema claro y oscuro.

Vista de ejemplos
Tema
Densidad

Color

Neutros cálidos de melamina y grafito, con un solo acento: naranja sierra (acciones principales, selección y foco). Los estados usan tonos propios para no competir con el acento. Nunca uses colores sueltos: siempre estos tokens.
Claro

Superficies

  • bg-bg · Fondo de la app--bg
  • bg-surface · Tarjetas, tablas--surface
  • bg-surface-2 · Encabezados, hover--surface-2
  • bg-surface-3 · Presionado, foco en menú--surface-3
  • bg-raised · Menús, modales, toasts--raised

Texto

  • text-fg · Texto principal--fg
  • text-fg-muted · Secundario--fg-muted
  • text-fg-subtle · Metadatos, placeholder--fg-subtle

Líneas

  • border-line · Divisores--line
  • border-line-strong · Botón secundario--line-strong
  • border-control · Borde de campos (3:1)--control

Acento · naranja sierra

  • bg-accent · Acción principal--accent
  • bg-accent-hover · Hover--accent-hover
  • bg-accent-subtle · Selección, resalte--accent-subtle
  • text-accent-text · Texto de acento--accent-text
  • outline-focus · Anillo de foco--focus

Estados

  • bg-info · Cotizado, información--info
  • bg-success · Aprobado, éxito--success
  • bg-warning · En producción, aviso--warning
  • bg-danger · Error, acción destructiva--danger
  • bg-neutral · Instalado, cerrado--neutral

Contraste medido en este tema (WCAG AA)

  • Texto / superficie…, no cumple≥ 4.5
  • Secundario / fondo…, no cumple≥ 4.5
  • Metadatos / superficie 2…, no cumple≥ 4.5
  • Botón principal…, no cumple≥ 4.5
  • Acento / resalte…, no cumple≥ 4.5
  • Badge en producción…, no cumple≥ 4.5
  • Borde de campo…, no cumple≥ 3
  • Anillo de foco…, no cumple≥ 3
Oscuro

Superficies

  • bg-bg · Fondo de la app--bg
  • bg-surface · Tarjetas, tablas--surface
  • bg-surface-2 · Encabezados, hover--surface-2
  • bg-surface-3 · Presionado, foco en menú--surface-3
  • bg-raised · Menús, modales, toasts--raised

Texto

  • text-fg · Texto principal--fg
  • text-fg-muted · Secundario--fg-muted
  • text-fg-subtle · Metadatos, placeholder--fg-subtle

Líneas

  • border-line · Divisores--line
  • border-line-strong · Botón secundario--line-strong
  • border-control · Borde de campos (3:1)--control

Acento · naranja sierra

  • bg-accent · Acción principal--accent
  • bg-accent-hover · Hover--accent-hover
  • bg-accent-subtle · Selección, resalte--accent-subtle
  • text-accent-text · Texto de acento--accent-text
  • outline-focus · Anillo de foco--focus

Estados

  • bg-info · Cotizado, información--info
  • bg-success · Aprobado, éxito--success
  • bg-warning · En producción, aviso--warning
  • bg-danger · Error, acción destructiva--danger
  • bg-neutral · Instalado, cerrado--neutral

Contraste medido en este tema (WCAG AA)

  • Texto / superficie…, no cumple≥ 4.5
  • Secundario / fondo…, no cumple≥ 4.5
  • Metadatos / superficie 2…, no cumple≥ 4.5
  • Botón principal…, no cumple≥ 4.5
  • Acento / resalte…, no cumple≥ 4.5
  • Badge en producción…, no cumple≥ 4.5
  • Borde de campo…, no cumple≥ 3
  • Anillo de foco…, no cumple≥ 3

Tipografía

Archivo (variable, cargada con next/font). Los títulos usan un ancho ligeramente expandido (font-stretch-semi-expanded), como un rótulo de taller. Las cifras usan tabular-nums para que los montos se alineen.
Claro
  • text-4xl48 / 52 px · PortadaCloset de 3 cuerpos · S/ 5,756.04
  • text-3xl36 / 42 px · Portada (móvil)Closet de 3 cuerpos · S/ 5,756.04
  • text-2xl28 / 34 px · Título de páginaCloset de 3 cuerpos · S/ 5,756.04
  • text-xl22 / 28 px · Título de página (móvil), cifrasCloset de 3 cuerpos · S/ 5,756.04
  • text-lg18 / 24 px · Título de secciónCloset de 3 cuerpos · S/ 5,756.04
  • text-md16 / 24 px · Título de tarjeta, lectura, campos táctilesCloset de 3 cuerpos · S/ 5,756.04
  • text-base14 / 20 px · Texto de interfaz (por defecto)Closet de 3 cuerpos · S/ 5,756.04
  • text-sm13 / 18 px · Secundario, tablas, etiquetasCloset de 3 cuerpos · S/ 5,756.04
  • text-xs12 / 16 px · Metadatos, contadoresCloset de 3 cuerpos · S/ 5,756.04

Pesos

Regular 400

Medio 500

Semi 600

Negrita 700

Cifras tabulares

S/ 1,646.10

S/ 11,836.58

S/ 888.00

Monoespaciada (sistema)

PRY-0158

2440 × 1830 mm

Oscuro
  • text-4xl48 / 52 px · PortadaCloset de 3 cuerpos · S/ 5,756.04
  • text-3xl36 / 42 px · Portada (móvil)Closet de 3 cuerpos · S/ 5,756.04
  • text-2xl28 / 34 px · Título de páginaCloset de 3 cuerpos · S/ 5,756.04
  • text-xl22 / 28 px · Título de página (móvil), cifrasCloset de 3 cuerpos · S/ 5,756.04
  • text-lg18 / 24 px · Título de secciónCloset de 3 cuerpos · S/ 5,756.04
  • text-md16 / 24 px · Título de tarjeta, lectura, campos táctilesCloset de 3 cuerpos · S/ 5,756.04
  • text-base14 / 20 px · Texto de interfaz (por defecto)Closet de 3 cuerpos · S/ 5,756.04
  • text-sm13 / 18 px · Secundario, tablas, etiquetasCloset de 3 cuerpos · S/ 5,756.04
  • text-xs12 / 16 px · Metadatos, contadoresCloset de 3 cuerpos · S/ 5,756.04

Pesos

Regular 400

Medio 500

Semi 600

Negrita 700

Cifras tabulares

S/ 1,646.10

S/ 11,836.58

S/ 888.00

Monoespaciada (sistema)

PRY-0158

2440 × 1830 mm

Espaciado, radios y sombras

Cuadrícula de 4 px (p-1 = 4 px). Radios pequeños, como un tablero recién cortado. Sombras discretas: en oscuro pesan más los bordes y las superficies elevadas.
Claro

Espacios

  • 14 px
  • 28 px
  • 312 px
  • 416 px
  • 520 px
  • 624 px
  • 832 px
  • 1040 px
  • 1248 px
  • 1664 px

Con nombre: px-page (margen lateral + notch), p-card, px-cell-x, py-cell-y, h-topbar, h-bottomnav.

Radios

xs
sm
md
lg
xl
full

Sombras

shadow-xs
shadow-sm
shadow-md
shadow-lg
Oscuro

Espacios

  • 14 px
  • 28 px
  • 312 px
  • 416 px
  • 520 px
  • 624 px
  • 832 px
  • 1040 px
  • 1248 px
  • 1664 px

Con nombre: px-page (margen lateral + notch), p-card, px-cell-x, py-cell-y, h-topbar, h-bottomnav.

Radios

xs
sm
md
lg
xl
full

Sombras

shadow-xs
shadow-sm
shadow-md
shadow-lg

Densidad

Alturas de control con nombre: h-control-xs/sm/md/lg. «Cómoda» es la predeterminada; «Compacta» muestra más información por pantalla. En pantallas táctiles todos los controles miden al menos 44 px, sin importar la densidad.

Cómoda · 32 / 36 / 44 px

Cocina en L con islaS/ 1,229.32
Rack de TV flotanteS/ 1,229.32
Vanitorio de bañoS/ 1,229.32

Compacta · 28 / 32 / 40 px

Cocina en L con islaS/ 1,229.32
Rack de TV flotanteS/ 1,229.32
Vanitorio de bañoS/ 1,229.32

Botón

Una sola acción principal por vista. Variantes: principal, secundario, fantasma y peligro. Tamaños sm, md y lg; solo ícono con nombre accesible obligatorio.
Claro

Variantes

Tamaños

Estados e íconos

Enlace como botón
Oscuro

Variantes

Tamaños

Estados e íconos

Enlace como botón

Campo de texto

Etiqueta siempre visible, ayuda y error enlazados con aria-describedby. En pantallas táctiles el texto sube a 16 px para que Safari iOS no haga zoom.
Claro

Como aparecerá en la cotización.

Usa solo números, por ejemplo 4850.50.

Oscuro

Como aparecerá en la cotización.

Usa solo números, por ejemplo 4850.50.

Select

Nativo con estilo propio: en el celular abre el selector del sistema, que es más rápido y accesible.
Claro

Elige quién lleva el proyecto.

Por ahora solo soles.

Oscuro

Elige quién lleva el proyecto.

Por ahora solo soles.

Checkbox

Para elegir varias opciones o confirmar algo. Toda la fila es el área táctil. Admite estado mixto.
Claro
Oscuro

Switch

Activa o desactiva algo con efecto inmediato (sin botón Guardar). Es un checkbox nativo con role «switch».
Claro
Oscuro

Control segmentado

Opciones excluyentes y siempre visibles (radios nativos): flechas para moverse, una sola parada de tabulación.
Claro
Vista
Tema
Oscuro
Vista
Tema

Badge de estado

La muestra cuadrada evoca un chip de material. El color nunca es la única señal: siempre lleva texto.
Claro

Estados del proyecto

CotizadoAprobadoEn producciónInstalado

Tonos

NeutralAcentoInformaciónÉxitoAvisoVencidoPequeño
Oscuro

Estados del proyecto

CotizadoAprobadoEn producciónInstalado

Tonos

NeutralAcentoInformaciónÉxitoAvisoVencidoPequeño

Tarjeta

Agrupa información relacionada. Encabezado con título, descripción y acciones; pie opcional.
Claro

Lista de corte

Melamina Blanco Nieve 18 mm

Planchas
11
Piezas
96
Canto
140 m
Oscuro

Lista de corte

Melamina Blanco Nieve 18 mm

Planchas
11
Piezas
96
Canto
140 m

Tabla compacta

Encabezados ordenables (aria-sort) y filas navegables. Por debajo de 768 px se convierte sola en una lista; aquí se muestran las dos vistas.
Claro

Escritorio

Móvil

Oscuro

Escritorio

Móvil

Pestañas

Flechas ← → para moverse, Inicio y Fin para ir a los extremos. En móvil la fila se desplaza si no cabe.
Claro

Vista frontal, especificaciones y el modelo 3D del mueble.

Oscuro

Vista frontal, especificaciones y el modelo 3D del mueble.

Toast

Avisos breves que se anuncian a lectores de pantalla. Se pausan al pasar el mouse o enfocar. En móvil aparecen arriba para no tapar la barra inferior. Se muestran en el tema activo de la app.

Estado vacío

Dice qué irá aquí y cuál es el siguiente paso. El borde punteado evoca una línea de corte en un plano.
Claro

Aún no tienes proyectos

Registra tu primer cliente y empieza a diseñar y cotizar.

Sin resultados

Prueba con otra búsqueda.

Oscuro

Aún no tienes proyectos

Registra tu primer cliente y empieza a diseñar y cotizar.

Sin resultados

Prueba con otra búsqueda.

Esqueleto de carga

Imita la forma del contenido para que la página no salte. Anuncia «Cargando…» a lectores de pantalla y no pulsa si el sistema pide reducir el movimiento.
Claro
Cargando ejemplo…
Oscuro
Cargando ejemplo…