EN

cat DESIGN_SYSTEM.md

Un sistema, dos voces

El sitio tiene dos modos: humano, limpio y pensado para reclutadores, y terminal, para desarrolladores. Ambos usan los mismos tokens y componentes; solo cambian los valores de los tokens y algunos detalles de forma. Cambia el modo o el tema en el header y esta página se actualiza.

Principios

Claridad primero

El modo humano es el de entrada: sin animaciones ni jerga, con lo importante arriba. La experiencia terminal es un extra opcional.

Solo tokens

Ningún color se escribe a mano: todo usa bg-*, text-* o border-* con los tokens de abajo, así claro/oscuro y humano/terminal funcionan solos.

Una acción principal

Cada bloque tiene como máximo un botón primario. Lo demás es secundario o un enlace.

Color

Tokens semánticos definidos en app/globals.css para cuatro paletas: humano claro, humano oscuro, terminal claro y terminal oscuro. Los valores que ves son los de la paleta activa.

  • bg

    Fondo de la página

  • bg-soft

    Fondos suaves: tags, código, pistas

  • panel

    Superficie de tarjetas

  • line

    Bordes y divisores

  • fg

    Texto principal

  • muted

    Texto secundario

  • dim

    Texto terciario, solo decorativo

  • accent

    Acción principal y énfasis

  • accent-2

    Avisos y resaltados

  • accent-3

    Enlaces y datos secundarios

  • chart-1

    Serie principal de gráficos

  • chart-2

    Serie secundaria de gráficos

Tipografía

Inter en modo humano y JetBrains Mono en modo terminal (y siempre para código). La escala es la de Tailwind.

  • Display · 5xl semiboldCarlos Huamani
  • Título · 2xl semiboldPerfil profesional
  • Sección · base semiboldStack principal
  • Cuerpo · smConstruyo interfaces rápidas y accesibles.
  • Detalle · xs mutedNivel de dominio, escala 0–100
  • Mono · smcarlos@huamani:~$ whoami

Componentes

Viven en components/ds y se importan desde @/components/ds.

Botón

buttonClass({ variant, size }) · sirve para Link, a y button

Tag

variant: stack (tecnologías) · pill (habilidades, filtros)

Next.jsTypeScriptTailwindLiderazgo técnicoMentoría

KpiTile hero

12+

Solo uno por vista

KpiTile

6

Indicador secundario

Con texto

Front End Lead

Valores cortos

Sin detalle

2

Card

Contenedor base: título, subtítulo y contenido

Borde line, fondo panel, radio xl y sombra suave que desaparece al imprimir.

BarList

Barras de una sola serie, escala 0–100

  • React97
  • Design Systems88
  • GraphQL76

Patrones por modo

Vista distinta por página
<ModeView terminal={…} human={…} />: ambas vistas van en el HTML estático y el CSS muestra la del modo activo, sin parpadeo.
Solo un texto distinto
<Say terminal="git clone ↗" human="Repositorio ↗" /> · ejemplo en vivo: git clone ↗
Solo un estilo distinto
Variante de Tailwind human:, p. ej. rounded human:rounded-lg.
Animaciones
Solo en modo terminal: revisa motionEnabled() antes de animar. También respetan “reducir movimiento”.