Presentación de componentes

Esta es la referencia visual completa del sistema de diseño de fiskaly. Aquí se documentan con ejemplos en vivo todos los tokens de color, los estilos tipográficos y los componentes disponibles para los autores de contenido.

---

Paleta de colores

El sistema de colores de fiskaly se basa en escalas semánticas. Cada color a continuación está disponible como clase de utilidad Tailwind (p. ej., bg-brand-500, text-gray-900).

Marca (Teal / Turquesa)

El color de marca principal, usado en CTAs, enlaces, estados activos y el punto de fiskaly.

50#f0fdfa

100#ccfbf1

200#b2f8ea

300#99f6e4

400#5eead4

500#2dd4bf

600#20c6b2

700#14b8a6

800#129c89

900#11806d

950#042f2e

Gris (Neutro)

Usado para texto, bordes y fondos. Ajustado para contraste WCAG AA.

50#fcfcfc

100#f6f6f7

200#eff1f3

300#d7dbe1

400#9ca3af

500#6b7280

600#545b6f

700#374151

800#232a30

900#0f181b

950#030712

Acento (Azul)

Color informativo secundario, usado para alertas de información y resaltados de acento.

50#eff6ff

300#5caeed

500#1264a3

700#1d4ed8

900#053357

Colores semánticos

Atajos semánticos para interfaces basadas en estado.

Éxito#2dd4bf

Advertencia#fddd00

Peligro#ff5050

Información#1264a3

Primarios con nombre (Libro de marca)

Estos colores con nombre se corresponden directamente con los valores de escala anteriores.

Turquesa#2dd4bf (brand-500)

Bunker#0f181b (gray-900)

Athens Gray#eff1f3 (gray-200)

Comet#545b6f (gray-600)

---

Tipografía

Familia tipográfica: DM Sans (cuerpo y títulos), DM Mono (código). Los títulos usan peso semibold a bold con tracking ajustado.

Jerarquía de títulos

Título 1 — DM Sans Bold (2.25rem)

Título 2 — DM Sans Semibold (1.5rem)

Título 3 — DM Sans Semibold (1.25rem)

Título 4 — DM Sans Medium (1.125rem)

Título 5 — DM Sans Medium (1rem)

Texto del cuerpo

El texto del cuerpo normal usa DM Sans a un tamaño de lectura cómodo. El texto en negrita y el texto en cursiva funcionan como se espera. También puedes combinar negrita cursiva. Aquí está el código en línea para parámetros API y tachado para elementos obsoletos.

Bloque de código

Ejemplo de respuesta API

{
  "access_token": "eyJhbGciOiJSUzI1NiIs...",
  "token_type": "Bearer",
  "expires_in": 900
}

---

Tarjetas

El componente base Card admite tres variantes visuales y un indicador opcional hover para estados interactivos.

Por defecto

Fondo limpio, sin borde ni sombra.

Con borde

Borde sutil para separación visual.

Elevada

Sombra para profundidad y prominencia.

Con borde + Hover

Pasa el cursor sobre esta tarjeta para ver la sombra interactiva y la transición de borde con color de marca.

Tarjetas con resplandor

Tarjetas con un borde de resplandor degradado animado al pasar el cursor. Tres variantes de color disponibles.

Resplandor de marca

Borde degradado turquesa al pasar el cursor.

Resplandor de acento

Borde degradado azul al pasar el cursor.

Resplandor cobre

Borde degradado cálido al pasar el cursor.

---

Tarjetas de características y de enlaza

Tarjetas de características

Las tarjetas de características presentan capacidades con un icono, título y descripción. Usan GlowCard internamente para el efecto hover premium.

🚀

Inicio rápido

Comienza a funcionar en minutos con nuestra sencilla guía de configuración.

📘

Referencia de API

Documentación completa de la API con ejemplos para cada endpoint.

🔒

Seguridad

Seguridad y cumplimiento de nivel empresarial en todos los mercados.

Tarjetas de enlaza

Tarjetas de navegación que apuntan a otra página. La flecha se anima al pasar el cursor.

Introducción

Aprende sobre la solución TSS en la nube de fiskaly para el cumplimiento fiscal.

Inicio rápido

Guía paso a paso para nuevos clientes que realizan tu primera llamada API.

---

Tarjetas de producto y de país

Tarjetas de producto

Muestra los productos fiskaly con un icono, insignia opcional y un CTA “Más información”. Basadas en GlowCard.

🖊️

Certificado

SIGN DE

Firma digital para las regulaciones fiscales alemanas. Certificado BSI.

Learn more

📊

DSFinV-K

Interfaz fiscal digital para exportaciones de datos de cajas registradoras.

Learn more

Tarjetas de país

Muestra la disponibilidad en el mercado con bandera, insignia de estado (live | beta | coming-soon) y descripción.

🇩🇪

Alemania flagLive

Alemania(DE)

Conforme con KassenSichV

🇦🇹

Austria flagBeta

Austria(AT)

Conforme con RKSV

🇫🇷

Francia flagSoon

Francia(FR)

Conforme con NF525

---

Alertas y avisos

Componente de alerta

El componente base Alert con cuatro variantes semánticas: info, success, warning, error.

Información

Esta es una alerta de información usando el esquema de color azul acento.

Éxito

Esta es una alerta de éxito usando el esquema de color turquesa de la marca.

Advertencia

Esta es una alerta de advertencia usando el esquema de color amarillo de fiskaly.

Error

Esta es una alerta de error usando el esquema de color rojo de fiskaly.

Avisos de conveniencia

Alias semánticos que se asignan a variantes de Alert con iconos predeterminados: Note (info), Tip (success), Caution (warning), Danger (error).

📘Nota

Un aviso de nota para información complementaria general. Admite markdown y código en línea.

💡Consejo profesional

Un aviso de consejo para buenas prácticas y sugerencias útiles.

⚠️Precaución

Un aviso de precaución para cosas que vigilar y que podrían causar problemas menores.

🚨Peligro

Un aviso de peligro para advertencias críticas — pérdida de datos, riesgos de seguridad o cambios que rompen la compatibilidad.

---

Insignias

Etiquetas en línea pequeñas para categorización e indicación de estado. Seis variantes disponibles.

Por defectoMarcaÉxitoAdvertenciaErrorContorno

---

Botones

Los botones vienen en cuatro variantes (primary, secondary, ghost, danger) y tres tamaños (sm, md, lg). Cuando se proporciona href se renderizan como etiquetas de anclaje.

Variantes

PrimarioSecundarioFantasmaPeligro

Tamaños

Pequeño

Mediano

Grande

Como enlaza

Enlaza primario

Enlaza secundario

---

Pestañas

Paneles de pestañas interactivos para presentar vistas de contenido alternativas. Usa la propiedad items con los campos label y content.

cURLJavaScriptPython

curl -X POST https://kassensichv-middleware.fiskaly.com/api/v2/auth \
  -H "Content-Type: application/json" \
  -d '{"api_key": "test_key", "api_secret": "test_secret"}'

const res = await fetch('https://kassensichv-middleware.fiskaly.com/api/v2/auth', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ api_key: 'test_key', api_secret: 'test_secret' })
});
const { access_token } = await res.json();

import requests

response = requests.post(
    'https://kassensichv-middleware.fiskaly.com/api/v2/auth',
    json={'api_key': 'test_key', 'api_secret': 'test_secret'}
)
access_token = response.json()['access_token']

---

Pasos

Pasos numerados con una línea de degradado de conexión para procedimientos secuenciales.

1. Crea tu organización

   Regístrate en el fiskaly HUB y crea tu organización. Empiezas en el entorno de prueba por defecto.

2. Genera credenciales API

   Ve a Configuración > Claves API y genera tu primer par de claves. Guarda ambos valores de forma segura.

3. Inicializa tu TSS

   Crea un Sistema de Seguridad Técnica usando la API. Esto aprovisiona tu unidad de firma basada en la nube.

4. Comienza a firmar transacciones

   Empieza a firmar recibos con tu TSS configurado. Cada transacción devuelve una firma criptográfica.

---

Tarjetas de estadísticas

Contadores de estadísticas animados con animación de conteo al hacer scroll. Propiedades: value (cadena), label y suffix opcional.

99.9%

SLA de disponibilidad

500M+

Transacciones

50K+

TSS activos

3

Países

---

Encabezados de sección y decorativos

Encabezado de sección

Encabezados de sección consistentes con pastilla badge opcional, subtitle y align (left o center).

NUEVO

Ejemplo de encabezado de sección

Este componente proporciona encabezados de sección consistentes con insignias y subtítulos opcionales.

DISEÑO

Encabezado de sección centrado

La variante centrada funciona bien para páginas de aterrizaje y secciones splash.

Texto degradado

Texto con un efecto de brillo degradado animado usando los colores de la marca fiskaly. Admite la propiedad as: span, h1, h2, h3, p.

Efecto de texto degradado

Punto fiskaly

El punto de marca animado con efecto ping. El elemento característico del logo de fiskaly.

PequeñoMedianoGrande

---

Elementos nativos de Starlight

Estos elementos markdown estándar reciben el estilo del CSS del tema fiskaly.

Tabla

Característica	Estado	Versión
Firma de transacciones	Disponible	v2.0
Exportación DSFinV-K	Disponible	v1.5
Validación de recibos	Beta	v2.1

Cita

“fiskaly ofrece la solución TSS en la nube más sencilla para el cumplimiento fiscal alemán.”

— Equipo de ingeniería de fiskaly

Lista desordenada

• Primer elemento con detalles de apoyo
• Segundo elemento que explica un concepto
• Tercer elemento con una lista anidada:
  • Elemento anidado A
  • Elemento anidado B

Lista ordenada

1. Primer paso en un proceso
2. Segundo paso que se basa en el primero
3. Tercer paso para completar el flujo

Regla horizontal

Contenido por encima de la regla.

---

Contenido por debajo de la regla.

Código en línea y enlaces

Usa código en línea para parámetros API como api_key y access_token. Los enlaces funcionan como se espera: fiskaly HUB (externo) y volver al inicio (ancla).