Foundations · tokens · v0.1

Sistema visual editorial cálido

Variables trazables a Figma y componentes compartidos para construir la interfaz sin duplicar estilos.

Volver al inicio
Style frames

El sistema aplicado, no solo listado

Marcos de referencia para revisar jerarquía, densidad, contraste y respuesta antes de construir una pantalla completa.

STYLE FRAME · LIGHTRESPONSIVE · 1440 / 390
LOCAL
Área unificada

Una biblioteca viva

Lee, organiza y conecta documentos sin perder su procedencia.

Abrir Pliegue
DOCUMENTOS128Drive + local
LECTURA38 %Disponible offline
STYLE FRAME · DARKRESPONSIVE · 1440 / 390
LOCAL
Área unificada

Una biblioteca viva

Lee, organiza y conecta documentos sin perder su procedencia.

Abrir Pliegue
DOCUMENTOS128Drive + local
LECTURA38 %Disponible offline
Color

Primitivos de marca

paper/50--pliegue-paper-50#fbf6ec
paper/100--pliegue-paper-100#f0e5d2
paper/200--pliegue-paper-200#d8c9b2
ink/900--pliegue-ink-900#25231f
ink/950--pliegue-ink-950#171614
ink/800--pliegue-ink-800#211f1c
forest/500--pliegue-forest-500#365b48
forest/300--pliegue-forest-300#7fa58d
ochre/500--pliegue-ochre-500#c99232
terracotta/500--pliegue-terracotta-500#b9674f
plum/500--pliegue-plum-500#76566f
white/1000--pliegue-white-1000#ffffff
danger/500--pliegue-danger-500#a9473e
Temas

Contrato semántico

SEMÁNTICOS · LIGHTMISMO CONTRATO
color/bg/canvas
color/bg/surface
color/bg/subtle
color/text/primary
color/text/secondary
color/action/primary
color/text/on-action
color/accent/warm
color/border/default
color/icon/default
color/status/danger
color/bg/field
color/border/control
color/border/strong
color/focus/ring
SEMÁNTICOS · DARKMISMO CONTRATO
color/bg/canvas
color/bg/surface
color/bg/subtle
color/text/primary
color/text/secondary
color/action/primary
color/text/on-action
color/accent/warm
color/border/default
color/icon/default
color/status/danger
color/bg/field
color/border/control
color/border/strong
color/focus/ring
Tipografía

Lectura e interfaz

Display/Brand · Cormorant Garamond · 40px

Pliegue

Reading/Body · Source Serif 4 · 18px

Las fuentes permanecen intactas mientras lees, anotas y conectas ideas.

UI/Body · Inter · 15px

Organiza Drive y archivos locales en un mismo espacio.

Data/Meta · IBM Plex Mono · 11px

PDF · 471 PÁGINAS

Layout

Espaciado

spacing/2xs · 4px · --pliegue-spacing-2xs
spacing/xs · 8px · --pliegue-spacing-xs
spacing/sm · 12px · --pliegue-spacing-sm
spacing/md · 16px · --pliegue-spacing-md
spacing/lg · 24px · --pliegue-spacing-lg
spacing/xl · 32px · --pliegue-spacing-xl
Profundidad

Elevación

elevation/paperTarjetas apoyadas en el lienzo
elevation/raisedControles que se pueden pulsar
elevation/overlayMenús, hojas y listas desplegables
elevation/focusElemento destacado sobre el resto
Componentes

Estados reutilizables

Button

Píldora en tres alturas: 36, 44 y 52 px (el pequeño sube a 40 con el dedo). El primario tiene relieve y se hunde al pulsarlo; «danger» avisa sin fondo sólido.

Input + Select

Borde a 3:1 sobre blanco y papel, foco en ocre con halo, error por aria-invalid o :user-invalid y letra de 16 px para que iOS no amplíe la página. En Chrome, la lista del select se dibuja con los tokens.

Las pantallas deben mantener la etiqueta visible.

Debe empezar por http o https.

Switch

Checkbox nativo con role="switch": conserva teclado, formulario y el estado que anuncia el lector de pantalla. Toda la fila es pulsable.

Card + Tag

El marco editorial base para métricas, documentos y estados de sistema.

PDF · LocalLa sociedad del cansancio38 % leído · Disponible offline
IA · EvidenciaRespuesta verificable3 fuentes citadas
Patrones de producto

El lector como frame editorial

La misma jerarquía visual cubre contenido disponible, permisos renovables y fallbacks sin ocultar la procedencia local.

MUESTRA DE CATÁLOGO · LECTOR LOCALREFERENCIA → ÍNDICE → APERTURA
DOCX · Archivo vinculado

Informe de hallazgos

Handle seguro + índice derivado · Original en su carpeta

Ver lector
WORD · EXTRACCIÓN LOCAL3 SECCIONES

Una observación conserva su estructura

El lector recupera títulos, párrafos y listas sin subir el archivo ni perder su procedencia.

Referencia local · Sin copiaPROGRESO LOCAL · 38 %
Sobre este archivo
Formato
Word
Origen
Handle autorizado
Índice
32.000 caracteres
Patrones de producto

El catálogo IA como capa, no como original

La clasificación añade filtros y contexto sin ocultar el estado de extracción, el proveedor ni la ubicación segura del documento.

MUESTRA DE CATÁLOGO · CAPA IAÍNDICE LOCAL → EXTRACTO → METADATOS
Catálogo inteligente · BYOK

Una ficha que se puede filtrar

El archivo original permanece en su carpeta; la clasificación es un derivado local.

Configurar IA
Filtros derivados
OPENAI · GPT-5.6-LUNA · 93 % CONFIANZA
Ensayo2004LiteraturaEspañol

Contar es escuchar

Ursula K. Le Guin

Ensayos sobre narración, lectura y el oficio de escribir, catalogados desde un extracto local trazable.

Temas
Escritura · lectura · narración
Original
Libros/Ensayos/contar-es-escuchar.epub