Vista para humanos: cada primitivo y cada plantilla de slide del design system sd, renderizados con texto lorem ipsum y alineados con la disciplina v2: sin Tailwind, dos niveles de marcador y ningún eyebrow (el titular lleva la slide). La spec para máquinas vive en sd.michelvalles.com. Ejemplos completos en usos.sd.michelvalles.com.
<Highlight>…</Highlight> · .hl-underlineLos dos niveles sustituyen a la negrita en serie. El relleno completo (.hl) marca EL concepto, uno por slide como máximo; el subrayado de rotulador (.hl-underline) enfatiza inline sin invertir el texto.
En párrafos, el énfasis inline usa el subrayado de rotulador a plena intensidad o la variante suave cuando el bloque ya carga peso visual.
<h2>… <em>énfasis</em> …</h2>Dentro de un titular serif el énfasis es cursiva + acento, nunca negrita: el display se queda siempre en peso 400 y la jerarquía sale del tamaño y del color.
<KpiFigure size="lg">×3.4</KpiFigure><LogoStrip />El chrome se re-tinta por superficie: los logos van en su color sobre papel y en blanco sobre feature, sin filtros de brillo.
<Reveal direction="up" delay={0.1}>...</Reveal>Animación de entrada al cruzar el viewport. Haz scroll abajo y vuelve para reactivar.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<StaggerList stagger={0.1}>...</StaggerList>Lorem ipsum dolor.
Consectetur adipiscing.
Sed do eiusmod tempor.
Ut labore et dolore.
Magna aliqua ut enim.
Ad minim veniam quis.
<MaskReveal lines={["line1", "line2"]} /><AnimatedText text="lorem ipsum" split="words" /><Counter to={1234} suffix="%" /><LetterCounter from="AA" to="NN" />Placeholder animado para una cifra pendiente: visible y honesto, nunca un número inventado.
<IndexRoll value={3} />El índice gigante del divisor de nivel: cuenta 00 → valor y solo el dígito que cambia sube como un ascensor.
Reconstruidas de forma nativa (sin librería de gráficas), animan al entrar en viewport y quedan estáticas. El acento codifica la tesis, no una categoría: la serie protagonista lo lleva y las competidoras bajan por la rampa de tinta. Color híbrido: rampas secuenciales para datos ordenados, tokens --cat-* para series. Spec en DATAVIZ.md. Recarga para volver a ver las animaciones.
<BarChart data={[{ label, value, display }]} />La barra de referencia (la más alta) toma el acento sólido; el resto un degradado. El valor aparece al asentarse.
<DonutChart value={64} centerValue={<Counter to={64} suffix="%" />} />Reparto parte/todo en dos fases: crece la cuña de tinta y luego el acento rellena el resto.
<PieChart data={[{ label, value }]} />Sectores SVG que se abren uno tras otro alrededor del círculo. innerRatio > 0 para donut.
<LineChart series={[{ label, data }]} />Cada línea se traza con pathLength; los puntos aparecen tras el trazo. Multi-serie con --cat-*.
<AreaChart series={[{ label, data }]} smooth />Área revelada por un wipe de abajo arriba; la línea se traza encima.
<ScatterPlot series={[{ label, data }]} />Puntos que aparecen escalonados sobre ejes con rejilla.
<BubbleChart data={[{ x, y, size, label }]} />Scatter con radio mapeado al tamaño; las burbujas se inflan escalonadas.
<Histogram bins={[{ label, value }]} />Barras contiguas (sin separación) que crecen desde la base.
<BoxPlot data={[{ label, min, q1, median, q3, max }]} />Bigotes que se trazan, caja que crece desde la mediana, mediana al final.
<Heatmap rows cols values />Celdas que aparecen en cascada diagonal; color por la rampa secuencial.
<Treemap data={[{ id, label, value }]} />Rectángulos (binary split determinista) que escalan desde su centro, escalonados por área.
<RadarChart axes series />Rejilla y radios se dibujan; cada serie traza su polígono (pathLength) y rellena.
<FunnelChart data={[{ label, value }]} />Etapas trapezoidales que se abren desde el centro, en cascada top→bottom.
<WaterfallChart data={[{ label, value, type }]} />Barras flotantes que suben/bajan desde el acumulado; conectores punteados. Subida = acento, bajada = ink (la pérdida es vacío de acento, nunca rojo).
Mismo motor de animación que las gráficas: nodos que aparecen y conectores que se trazan con pathLength. Layouts deterministas, sin dependencias. Recarga para volver a ver las animaciones.
<Flowchart nodes={[{ id, label, kind, col, row }]} edges />Nodos en rejilla (start/process/decision/end) que aparecen por fila; conectores con flecha.
<GanttChart tasks ticks today />Barras posicionadas en escala temporal que crecen desde su inicio; línea 'hoy'.
<Sankey columns nodes links />Flujos cuyo ancho codifica el valor; nodos por columna, enlaces que se trazan.
<ERDiagram entities relations />Tarjetas-entidad (título + campos) que aparecen; relaciones que se trazan con cardinalidad.
<SequenceDiagram actors messages />Lifelines que se dibujan; mensajes (flechas) trazados uno tras otro top→down.
<NetworkGraph nodes edges />Layout circular determinista; aristas que se trazan, nodos que aparecen.
<OrgChart root={tree} />Árbol tidy top-down; cajas que aparecen por nivel, conectores en codo que se trazan.
<DecisionTree root={tree} />Decisiones (contorno acento) y resultados (píldora); aristas con etiqueta sí/no.
<MindMap root={tree} />Nodo central con ramas radiales curvas; se revela hacia afuera por nivel.
<VennDiagram sets intersection />2–3 círculos que escalan; el blend multiplica para construir las intersecciones.
Cada plantilla se renderiza a pantalla completa porque están pensadas para deck editorial. Los eyebrows han desaparecido del sistema (el titular lleva la slide) y la paginación del chrome es opt-in: un deck paginado se gana el contador, un scroll largo lee mejor sin él. Haz scroll para verlas en secuencia.