El sistema de diseño de este sitio

Color

Dos escalas, brand (azul) e ink (neutra), más paper para la página clara y signal para los estados en vivo. Los valores están en OKLCH; el hex es el color sRGB que pinta el navegador.

Debajo de cada color: su contraste como texto sobre la página clara (paper) y sobre la página oscura (ink-950).

Contraste

Los pares de texto y fondo que usan los componentes, en ambos temas. Los fondos con transparencia se mezclan con la superficie que tienen debajo, como hace el navegador.

55 de 55 pares cumplen AA, y 34 de los pares de texto también llegan a AAA.

Los ratios usan el valor sRGB de cada color. En pantallas de gama amplia, los rose, emerald y amber por defecto de Tailwind pueden verse un poco más saturados.

Tipografía

Bricolage Grotesque para los encabezados e Inter para el texto, ambas fuentes variables con el subconjunto latino. Las fuentes de respaldo usan ajustes de métricas, así que el cambio a la fuente web no mueve el diseño.

Familias

• Frontends rápidos y accesibles

  Encabezados

  --font-display: 'Bricolage Grotesque Variable', 'Bricolage Fallback', ui-sans-serif, system-ui, sans-serif

• Frontends rápidos y accesibles

  Texto e interfaz

  --font-sans: 'Inter Variable', 'Inter Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif

• Frontends rápidos y accesibles

  Etiquetas, código y consola

  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace

Tamaños de titular

Los tamaños de titular son fluidos: crecen con el viewport entre el mínimo y el máximo del clamp().

• Aa

  Token

  text-display-xl

  Tamaño

  clamp(3rem, 8vw, 6.5rem)

  Interlineado

  0.95

  Espaciado entre letras

  -0.035em

• Aa

  Token

  text-display-lg

  Tamaño

  clamp(2rem, 4vw, 3.25rem)

  Interlineado

  1.02

  Espaciado entre letras

  -0.03em

• Aa

  Token

  text-display-md

  Tamaño

  clamp(1.5rem, 2.6vw, 2.125rem)

  Interlineado

  1.1

  Espaciado entre letras

  -0.02em

Tamaños de texto

• text-xs · 0.75rem (12 px) Frontends rápidos y accesibles
• text-sm · 0.875rem (14 px) Frontends rápidos y accesibles
• text-base · 1rem (16 px) Frontends rápidos y accesibles
• text-lg · 1.125rem (18 px) Frontends rápidos y accesibles
• text-xl · 1.25rem (20 px) Frontends rápidos y accesibles
• text-2xl · 1.5rem (24 px) Frontends rápidos y accesibles

Espacio, radios y elevación

La escala de espaciado de Tailwind sobre una unidad de 0.25rem (4 px), un solo ancho de contenido y unos pocos radios y sombras, cada uno con una función.

Espaciado

• 1 · 0.25rem
• 2 · 0.5rem
• 3 · 0.75rem
• 4 · 1rem
• 5 · 1.25rem
• 6 · 1.5rem
• 8 · 2rem
• 10 · 2.5rem
• 12 · 3rem
• 16 · 4rem
• 20 · 5rem
• 28 · 7rem

Las secciones tienen 5rem de relleno vertical en teléfonos y 7rem desde 640 px.

Ancho del contenido: --container-page: 76rem

Radios

• Chips

  rounded-md · 0.375rem

• Campos de formulario

  rounded-xl · 0.75rem

• Tarjetas

  rounded-2xl · 1rem

• Paneles

  rounded-3xl · 1.5rem

• Botones

  rounded-full

Sombras

• Tarjetas y botones en reposo

  shadow-soft: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 16px -4px rgb(0 0 0 / 0.06)

• Tarjetas al pasar el cursor y la consola

  shadow-lift: 0 1px 1px rgb(14 15 20 / 0.04), 0 12px 32px -12px rgb(14 15 20 / 0.18)

• Énfasis de marca

  shadow-glow: 0 0 0 1px rgb(59 99 255 / 0.18), 0 20px 60px -20px rgb(59 99 255 / 0.45)

Movimiento

Transiciones cortas con una sola curva de aceleración. Si el visitante pide reducir el movimiento, se desactivan las animaciones, el desplazamiento suave y las transiciones de vista.

Curva

--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1)

Animaciones

• --animate-fade-up: fadeUp 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both
• --animate-caret: caret 1s steps(1) infinite
• --animate-pulse-dot: pulseDot 2s ease-in-out infinite

Componentes

Las clases compartidas de global.css, renderizadas en vivo. Pulsa Tab para ver el anillo de foco en cada control.

<button type="button" class="btn-primary">Principal</button>
<button type="button" class="btn-brand">Marca</button>
<button type="button" class="btn-ghost">Fantasma</button>
<button type="button" class="btn-ghost btn-sm">Pequeño</button>

<span class="chip-core">Principal</span>
<span class="chip">Chip</span>
<span class="chip chip-familiar">Conocido</span>
<span class="chip chip-brand">Chip de marca</span>
<span class="chip-live">Estado en vivo</span>

<div class="w-full"><label class="field-label" for="ds-email">Correo</label>
  <input id="ds-email" class="field" type="email" placeholder="nombre@empresa.com" autocomplete="off"></div>
<div class="error-summary w-full">Revisa 1 campo antes de enviar: Empresa.</div>
<div class="w-full"><label class="field-label" for="ds-company">Empresa</label>
  <input id="ds-company" class="field" type="text" aria-invalid="true" aria-describedby="ds-company-error" autocomplete="off">
  <p id="ds-company-error" class="field-error">Escribe el nombre de la empresa.</p></div>

<div class="card p-5"><p class="font-semibold text-ink-950 dark:text-white">Tarjeta</p>
  <p class="mt-1 text-sm">Radio grande, borde fino y una sombra suave.</p></div>
<div class="panel p-5"><p class="font-semibold text-ink-950 dark:text-white">Panel</p>
  <p class="mt-1 text-sm">Radio más grande y sin sombra.</p></div>

<a class="link-underline" href="#links">Enlace de marca</a>
<a class="link-quiet" href="#links">Enlace discreto</a>

// Oscar Arenas
{ "years": 17, "stack": "React · Next.js" }

<div class="console w-full" aria-hidden="true">
  <div class="console-bar"><span class="console-dot"></span><span class="console-dot"></span><span class="console-dot"></span><span>resume.json</span></div>
  <pre class="px-4 py-3 overflow-x-auto"><span class="c">// Oscar Arenas</span>
{ <span class="k">"years"</span>: <span class="n">17</span>, <span class="k">"stack"</span>: <span class="s">"React · Next.js"</span> }</pre>
</div>