Documentación viva

Sistema de diseño

Cada componente acá es el componente real del sitio, renderizado en vivo. La lista se detecta automáticamente desde el código.

Inventario de componentes

12 componentes detectados automáticamente

ButtonCalloutContentLayoutExperienceItemFooterImagePlaceholderMetaCardNavPageHeaderProjectCardTableOfContentsTag

Color — primitivos

Neutral

50
100
200
300
400
500
600
700
800
900

Primary

50
100
200
300
400
500
600
700
800
900

Color — semánticos

--bg-neutral-primary
--bg-neutral-secondary
--bg-neutral-tertiary
--bg-accent
--bg-success
--bg-warning
--bg-error

Texto

--text-primary

--text-secondary

--text-accent

--text-disabled

Tipografía

DisplayDiseño con sentido
Heading 1Diseño con sentido
Heading 2Diseño con sentido
Heading 3Diseño con sentido
Body LargeDiseño con sentido
BodyDiseño con sentido
SmallDiseño con sentido
LabelDiseño con sentido
CaptionDiseño con sentido

Átomos

Tag

NeutralPrimary

Button

Callout

El diseño no es cómo se ve, es cómo funciona.

ImagePlaceholder

imagen de ejemplo

Moléculas

ProjectCard

MetaCard

Empresa

Racional

Tipo

FintechMobile

Año

2026

ExperienceItem

Empresa

Product Designer

2025 — presente
FintechMobile

Cómo trabajé

Descripción de cómo fue el trabajo en el equipo.

Qué se logró

Lo que se logró durante el período.

Qué aprendí

El aprendizaje principal destacado. Y el resto del aprendizaje en texto normal.

Diagramas

Los esquemas se escriben como bloques mermaid en el markdown de un proyecto y se renderizan con los tokens del sistema: borde y líneas en acento, relleno y texto neutros. Figuras: círculo (inicio/fin), rectángulo (paso), rombo (decisión).

flowchart TD
    A((Inicio)) --> B[Paso del proceso]
    B --> C{¿Decisión?}
    C -- No --> B
    C -- Sí --> D((Fin))

En contexto

Nav, Footer, TableOfContents, ContentLayout y PageHeader se documentan en uso real: la Nav y el Footer están visibles ahora; la TOC, el layout de 3 columnas y el encabezado estructuran esta misma página.