V2.1 Component Showcase — Cofoundy Docs

publiccofoundyv1·by Cofoundy·May 13, 2026referencedesign-system

Live demo de lo que DocsAI le da a un autor (humano o agente) cuando escribe un doc.
Componentes branded del design system Cofoundy, embebidos en MDX, renderizados como
HTML estático en Cloudflare Workers. Cada componente abajo es invocable con un tag
— el agente emite datos, el substrate se encarga del resto.

Caso real construido con esta vocabulary: el runbook F1609.

MetadataCard

Chip row for header metadata — replaces the old **Para:** / **Tiempo:** plain-text block.

Tiempo:15 min
Costo:S/0
Validez:Año fiscal
Dificultad:Bajo

AuthorNote

Signed personal intro at the top of a deliverable. Web-grade variant.

ScopeList

Branded checklist — replaces plain bullet lists for "qué incluye" sections.

Emites RHE por más de S/.1,500
Proyección anual < S/.48,125
Tienes RUC personal + Clave SOL personal
Tienes formulario activo en SUNAT ya
Vas a emitir el primer recibo este mes

Callouts (existing primitive)

Note: El límite de S/.48,125 es el de 2026 (UIT × 8.75). Revisa cada enero.
Tip: Si no recuerdas la fecha del primer recibo, usa la del primero que tengas en SUNAT.
Warning: Si proyectas por encima del límite, te lo van a denegar — no insistas.
Danger: Nunca reuses la Clave SOL del empleador para tu RUC personal.

KPIBoard

Grid of KPI cards — for monthly client reports.

MRR
S/.18.4K
▲ +18%target: S/.20K
Active Clients
12
▲ +3
NPS
72
→ 0
Churn
0%
▼ -2pp

StatCards (from @cofoundy/ui)

Individual KPI card — already exists in the analytics primitives.

Docs publicadas
0
▲ 12%
Tiempo promedio
0m 00s
▼ 8%
Cobertura
0%
▲ 3%

InfoBox / InfoBoxRow

Inline stat row — uppercase label + mono value. Comparable to MetadataCard but bigger.

Sin F1609
S/.4,600
Con F1609
S/.5,000
Diferencia
+S/.400 / mes

ComparisonMatrix

Side-by-side comparison with highlighted winning column.

Sin F1609Con F1609 vigente
Te depositanS/.4,600S/.5,000
SUNAT retieneS/.400 (8%)S/.0
Cash en bolsillo hoyS/.4,600S/.5,000
Crédito en DJ anualS/.400—

BuildProgress

Vertical numbered timeline — for sequential workflows.

  1. ✓
    Entrar al formulario
    SUNAT SOL → Mi RUC → Solicito Suspensión de Retenciones de 4ta Cat.
  2. ✓
    Identificarte
    RUC personal (10 + DNI) + DNI + fecha nacimiento.
  3. 3
    Fecha de inicio en 4ta
    La del primer recibo emitido. Si nunca emitiste, la de hoy.
  4. 4
    Montos 4ta + 5ta
    Proyección de aquí a fin de año. No infles.
  5. 5
    Descargar constancia
    PDF queda en SOL bajo Consultas → Constancias.

ActivityFeed (from @cofoundy/ui)

Timeline of events — for project status / changelog docs.

Andréshipped V2.1 component vocabulary
2026-05-13 10:30
Cofoundypublished F1609 runbook v1
2026-05-12 14:20
Andréopened PRD V2.1
2026-05-10 09:00
Andréreviewed "Effectiveness of HTML" by trq212
2026-05-08 18:00

Charts — Bar / Donut / Funnel / Horizontal / Stacked / Heatmap

Ene
Feb
Mar
Abr
May
44 docs
Visitas0
-55%abandono
Lectura completa0(45%)
-76%abandono
CTA click0(11%)
-71%abandono
Conversión0(3%)
Contabilidad
0
Legal
0
Marketing
0
Operaciones
0
AI-published0 (73%)
Human-published0 (27%)
8
10
12
14
16
18
20
Lun
Mar
Mié
Jue
Vie
Sáb
Dom
 

ProgressBar (from @cofoundy/ui)

Sprint completion0 / 100
Quarterly OKR0 / 100

Leaderboard (from @cofoundy/ui)

views
1
F1609 runbookcontabilidad · runbook
0
2
Brand guidepositioning · reference
0
3
Pricing policysales · policy
0
4
Onboarding kitoperaciones · playbook
0

NextStepCallout

Próximo paso
Si después de leer esto sigues con dudas, agenda 15 min con Andre. Te lo resuelvo en vivo.
Agendar 25 min →

PersonaCard

María García

María García

Cobranzas Lead · Acme Fintech
“Necesito ver el estado real de cada cobranza sin abrir cuatro pestañas.”
Demographics
  • 35-44 años
  • Lima, Perú
  • 8 años en cobranzas
  • Maneja equipo de 6
Pain Points
  • Sin trazabilidad por cliente
  • Reportes manuales semanales
  • Pierde 2h/día en cambios de sistema
Goals
  • Subir recovery rate 5pp
  • Bajar tiempo por call <5 min
  • Dashboard único para todo el equipo

DesignSystemPanel

Colors

Primary
#46A0D0
Primary Dark
#2984AD
Secondary
#1B577E
Deep
#23435F
Success
#059669
Warning
#D97706
Error
#BE123C
BG
#020B1B

Typography

Brand · Space Grotesk · 600
DocsAI V2.1
Body · Inter · 400
The brown fox jumps over the lazy dog
Mono · JetBrains Mono · 500
<MetadataCard items={…} />

Spacing

xs
4px
sm
8px
md
16px
lg
32px
xl
64px

Radius

sm · 6px
md · 10px
lg · 14px
pill · 999px

MoodBoard

Code on screen
Editor aesthetic
Analytics dashboard
Dashboard density
City night
Brand atmosphere

TestimonialCard

DocsAI cambió cómo entregamos deliverables. Antes mandaba PDFs por correo. Ahora todo es un link, branded, vivo.
Cliente piloto
Cliente piloto
Operations Lead · Acme