Esta es la parte que más me da curiosidad a largo plazo.
Tokens
Color
Tipografía
Componentes
Espaciado
Accesibilidad
Una arquitectura de tokens de tres capas. Los primitivos nunca tocan la UI: fluyen hacia tokens semánticos, conscientes del tema, que son lo único que consumen los componentes. Cambia un primitivo y todo el sistema se re-tematiza.
01 · Primitivos
Valores crudos, sin contexto. Nunca se referencian directamente en los componentes.
primitive-black/100primitive-black/80primitive-black/7primitive-white/100
↓
02 · Semánticos
Basados en significado y conscientes del tema (light / dark). La única capa que lee la UI.
color/text-mainbackground-mainbackground-softdark/* mode
↓
03 · Componente
Tokens contextuales para una parte, compuestos a partir de escalas semánticas + de spacing.
button-bgcard-surfacespacing/8
Marca
Cream#f7f4ed · page surface
Charcoal#1c1c1c · text / dark
Off-white#fcfbf8 · text on dark
Acentos funcionales
Accent#f59e0a · highlights, focus
Mint#dbf2e3 · success surface
High#f25c5c · priority / alert
Low#63c957 · priority / done
Neutros · opacidad de #1c1c1c
Light cream#eceae4 · dividers
Cada gris es el
mismo tono de tinta
a distintas opacidades, coherente por construcción, no un hex arbitrario. Nunca blanco puro.
Aa
Geist
, la tipografía detrás del producto y el sitio de famigli.app: una grotesca limpia y de bajo contraste, de Vercel. Muy legible, precisa, más ingeniería que decoración. Fallback:
Geist Fallback, ui-sans-serif, system-ui, sans-serif.
Sistema de pesos
Solo tres pesos, 400 / 500 / 600. La jerarquía viene del
tamaño + letter-spacing
, no del peso.
400
body / UI ·
480
display especial ·
600
títulos.
Escala
Display · 64 / 600 / -2.5%Tu hogar, en orden.
Section · 36 / 600 / -2.5%Del ticket al balance
Title · 22 / 600 / -1%Compartido, justo, sin esfuerzo
Body · 18 / 400 / 1.5Ritmo de lectura cómodo con tracking normal.
Caption · 14 / 400 / 1.4Metadata y letra chica
El letter-spacing negativo escala con el tamaño:
-1.5
en 60 →
-1.2
en 48 →
-0.9
en 36 →
normal
en 16. Los títulos se comprimen; el body queda abierto.
Botones
PrimaryGhostCreamPill+
Primary lleva la característica
inset shadow
multicapa (línea blanca arriba + anillo oscuro), hundido en la superficie, no flotando. Ghost = secundario, Cream = terciario, Pill / Icon = toggles y acciones rápidas.
Input y pills
Agrega una tarea del hogar…
SupermercadoDivisión de alquiler+ Agregar
Card y stat
Card
Superficie cream, 1px #eceae4, 12px de radio, sin sombra.
60K+
Patrón de números grandes
Componentes compuestos
BentoHeroBentoFeatureCardBentoPhotoCardValuePropCardTestimonialCardAnnouncementPillFloatingChipCTABandIpadMockupPhoneMockup
Diez bloques reutilizables compuestos a partir de los primitivos de arriba. Una gramática bento, cinco voces de persona, cero layouts de una sola vez.
Escala de spacing · base 8px · tokens rem
spacing/1tight chips, icon gaps4px · 0.25rem
spacing/2inline gaps8px · 0.5rem
spacing/3title → body12px · 0.75rem
spacing/4element gaps16px · 1rem
spacing/6sub-groups24px · 1.5rem
spacing/8card padding32px · 2rem
spacing/12block separation48px · 3rem
spacing/16grid gaps64px · 4rem
spacing/24section padding96px · 6rem
spacing/32major sections128px · 8rem
spacing/52hero / editorial208px · 13rem
Radio
4 · micro6 · botones24 · paneles12 · tarjetas16 · contenedores9999 · pill
Elevación · bordes sobre sombras
Plano
Con borde
Inset
Focus
Ring
Las secciones respiran en
spacing/24–/32
; las cards usan padding de
spacing/8
; los gaps de texto en
spacing/3–/4
. La profundidad se mantiene sutil: los bordes contienen, el inset del botón oscuro es una sola sombra táctil, y un único lift (0 24px 60px -24px rgba(28,28,28,.25)) hace flotar las hero y photo cards.
La accesibilidad está construida dentro de los tokens, no agregada al final. El sistema apunta a
WCAG 2.1 AA
tanto en light como en dark.
Contraste · AA
Text meets ≥4.5:1 (≥3:1 for large). The primary button went from 3.5:1 to 4.8:1 when the palette moved purple → green.
Foco visible
Una sombra de foco suave de 12px más un anillo de teclado azul de 2px. outline:0 nunca se usa sin un reemplazo.
Áreas táctiles
≥44×44px. Los botones usan padding de 8/16px; las pills usan radio completo para áreas de toque grandes y tolerantes.
Movimiento reducido
Los reveals al scrollear, los conteos de métricas y el gráfico de cadencia respetan prefers-reduced-motion.
Semántica
Jerarquía real de h1–h4, alt text descriptivo, campos con label; ARIA solo donde la semántica nativa no alcanza.
Temas
Light y dark están ambos validados por contraste, los tokens semánticos se invierten, los ratios se mantienen.
Chequeo de contraste · ratios WCAG reales
Aa
Charcoal / Cream15.5:1AAA
Aa
Off-white / Charcoal16.5:1AAA
Aa
Charcoal / Green7.68:1AAA
Aa
Body 82% / Cream9.0:1AAA
Aa
Ring blue / Charcoal4.63:1AA
Calculado con la fórmula de luminancia relativa de WCAG. Objetivo AA (≥4.5:1 en body, ≥3:1 en texto grande), la mayoría de los pares superan AAA (≥7:1).
.jpeg)
