HotStuff · Nota de investigación
HotStuff: QC, highQC y la regla de tres cadenas
Cómo una propuesta se convierte en QC y cuándo una cadena certificada permite comprometer un bloque.
15 jul. 202610 min de lectura
TrautsLab · v1
Sistema de diseño
Un sistema editorial para leer papers y ejecutar laboratorios. Papel y tinta en lugar de gradientes; filetes en lugar de sombras; un solo acento azul cobalto. Lo usan trautslab.com y lab.trautslab.dev, y cada par de colores de texto cumple WCAG 2.2 AA.
En esta página
Fundamentos
Principios
I.
La lectura manda
Columna de 68 caracteres, serif para prosa larga, interlineado 1,7. Todo lo demás se subordina al texto.
II.
El color significa
Verde es evidencia, ocre es precaución, ladrillo es falla, cobalto es acción. Nunca color decorativo, nunca color solo.
III.
Estado honesto
Las cifras salen de los datos. Si algo está planificado, se dice; si está incompleto, se muestra cuánto.
IV.
Nada se sale
Ningún componente provoca scroll horizontal de la página. Lo ancho se desplaza dentro de su marco o cambia de forma en móvil.
Fundamentos
Color
Cada muestra enseña el valor claro (izquierda) y oscuro (derecha). Los valores se leen de design/tokens.css al compilar.
--tl-canvas
Fondo de página (papel)
#FBFAF7 · #141311
--tl-surface
Tarjetas, figuras, paneles
#FFFFFF · #1C1B18
--tl-sunken
Código, cabeceras de tabla
#F3F1EC · #24221F
--tl-rule
Filetes y divisores
#DEDAD2 · #3A3732
--tl-rule-strong
Bordes de controles
#BDB7AC · #59554D
--tl-ink
Texto principal
#1C1A17 · #ECE9E2
--tl-ink-muted
Texto secundario
#57524A · #BEB8AD
--tl-ink-subtle
Leyendas y metadatos
#706A60 · #A09A8F
--tl-accent
Enlaces y acción principal
#2A4B8D · #9DB2DA
--tl-accent-strong
Hover y estado presionado
#1F386C · #C5D2EA
--tl-accent-tint
Selección y resaltado
#E8EDF6 · #242C3D
--tl-evidence
Verificado, aprobado
#2E6B3F · #86C496
--tl-caution
Advertencia, trade-off
#8A5B00 · #E0B460
--tl-fault
Falla, estado inválido
#A12C2C · #E88B83
| Token | Claro | Oscuro | AA |
|---|---|---|---|
--tl-ink | 16.6:1 | 15.3:1 | Cumple |
--tl-ink-muted | 7.4:1 | 9.4:1 | Cumple |
--tl-ink-subtle | 5.1:1 | 6.6:1 | Cumple |
--tl-accent | 8.1:1 | 8.7:1 | Cumple |
--tl-evidence | 6.1:1 | 9.2:1 | Cumple |
--tl-caution | 5.6:1 | 9.6:1 | Cumple |
--tl-fault | 6.9:1 | 7.5:1 | Cumple |
Fundamentos
Tipografía
Source Serif 4 para títulos y prosa; IBM Plex Sans para interfaz; IBM Plex Mono para código y datos.
Título de página
Del paper al laboratorio
Título de sección
Quórums que se intersectan
Título de tarjeta
HotStuff: QC, highQC y tres cadenas
Prosa
Dos quórums de 2f + 1 dentro de 3f + 1 réplicas comparten al menos una réplica correcta.
Interfaz
Ver ruta · 15 de 77 publicados
Leyenda
Figura 2. Fuente: Yin et al., 2019
Código
quorumSize(n) = n − ⌊(n − 1)/3⌋
Fundamentos
Espacio y forma
Retícula de 4 px, radios pequeños según jerarquía y casi ninguna sombra. El área táctil mínima es de 44 px.
Radios
sm · 3 px
md · 6 px
lg · 10 px
Espaciado
- 4 px
- 8 px
- 12 px
- 16 px
- 24 px
- 32 px
Medidas
- Columna de lectura
- 68ch
- Figuras y código
- 72rem
- Área táctil
- 44 px
- Margen móvil
- 16 px
Componentes
Acciones
Un botón principal por sección. Button cambia algo en la página; ButtonLink navega. Los destinos externos llevan ↗.
Atajo de búsqueda: ⌘ K
Componentes
Estado y significado
Las etiquetas y avisos siempre escriben su significado; el color solo lo refuerza.
PlanificadoConstruyendoVerificadoEn revisiónInválido
Capítulos publicados15 de 77
- Artículos
- 22
- Laboratorios
- 3
- 1 planificado
Componentes
Contenido
Tarjetas con un solo enlace accesible, pasos ordenados y desplegables nativos.
Card
Superficie con borde fino y sin sombra. La jerarquía la da la tipografía.
01
Leer el paper
Supuestos e invariantes.02
Modelar
Estados y mensajes.03
Ejecutar
Simulación o benchmark.04
Romper
Fallas inyectadas y límites.
¿Por qué n ≥ 3f + 1?
Con menos réplicas, dos quórums podrían intersectarse solo en réplicas bizantinas y aceptar historias incompatibles.
Finaliza con una certificación; exige locks muy estrictos.
Recorta latencia y paga en el cambio de vista con evidencia agregada.
Regla uniforme que permite encadenar fases en HotStuff básico.
Componentes
Datos y figuras
Figuras numeradas con fuente. Las tablas tienen caption y se desplazan dentro de su marco; la página nunca.
| Regla | Fases en camino feliz | Cambio de vista | Ejemplos |
|---|---|---|---|
| One-chain | 1 | Locks y restricciones de propuesta | Diseños con supuestos fuertes |
| Two-chain | 2 | Evidencia agregada (AggQC) | Fast-HotStuff, Jolteon |
| Three-chain | 3 | Lineal, sin pruebas extra | HotStuff básico |
Componentes
Navegación
Rutas de navegación para saber dónde estás; la página actual es texto, no enlace.
Calidad
Las 10 heurísticas de Nielsen, aplicadas
Cada heurística tiene al menos una regla concreta en el sistema.
01Visibilidad del estado
Progress con números, “15 de 77 publicados”, lista de verificación con “3 de 5 revisados”, aria-current en el menú.
02Lenguaje del lector
Etiquetas en español, kickers en frase normal, términos técnicos solo cuando son el tema.
03Control y libertad
Escape cierra índice y búsqueda, “Reiniciar” en checklists, desplegables nativos reversibles.
04Consistencia
Un solo set de tokens para trautslab.com y lab.trautslab.dev; los mismos componentes en todas las plantillas.
05Prevención de errores
Enlaces externos marcados con ↗, confianza “limitada” nunca en verde, tablas que no rompen la página.
06Reconocer antes que recordar
Rutas de navegación, pasos siempre visibles en ConceptPath, índice del artículo en móvil.
07Flexibilidad y eficiencia
Atajo ⌘K para buscar, pestañas con flechas/Home/End, anclas por sección.
08Estética minimalista
Sin gradientes ni sombras decorativas; jerarquía con tipografía y filetes; un único acento.
09Recuperarse de errores
404 en lenguaje claro con tres salidas concretas; mensajes de copia que dicen si falló.
10Ayuda y documentación
Callout “Definición”, prerrequisitos antes de cada artículo y esta página como referencia pública.
Para quien construye
Cómo usarlo
En código
import { Button, Callout, Figure } from '@/components/ui';
<Callout kind="caution">Supone sincronía parcial.</Callout>Tokens: design/tokens.css. Clases de Tailwind: bg-canvas text-ink border-rule text-accent.
Evitar
- Gradientes, halos y sombras grandes.
- Rótulos en mayúsculas monoespaciadas con tracking amplio.
- Texto por debajo de 12 px o con contraste menor a 4,5:1.
- Truncar información sin otra forma de leerla.
- Scroll horizontal oculto o carruseles que esconden pasos.