El sistema de diseño de esta web

Acento, radio, tamaño de letra y espacio, en vivo. Los cambios solo afectan a la vista previa y te dan el CSS que habría que tocar en la web. Si el acento no llega al contraste mínimo, el laboratorio lo avisa.

:root {}

1. text-fine

   Etiquetas, metadatos, pie y navegación

   clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem)

   Tu tienda Shopify, rápida y fácil de cambiar.

2. text-body

   Texto corrido

   clamp(0.94rem, 0.9rem + 0.2vw, 1.06rem)

   lh 1.6

   Tu tienda Shopify, rápida y fácil de cambiar.

3. text-subhead

   Títulos de tarjeta

   clamp(1.15rem, 1.07rem + 0.4vw, 1.4rem)

   lh 1.25 · peso 600 · tracking -0.015em

   Tu tienda Shopify, rápida y fácil de cambiar.

4. text-display

   Títulos de sección

   clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem)

   lh 1.1 · peso 600 · tracking -0.015em

   Tu tienda Shopify, rápida y fácil de cambiar.

5. text-hero

   Titular de portada

   clamp(2.2rem, 1.5rem + 3.2vw, 4.1rem)

   lh 1.02 · peso 600 · tracking -0.025em

   Tu tienda Shopify, rápida y fácil de cambiar.

6. text-small

   Texto de tarjetas y botones (relativo)

   0.94em

   lh 1.5

   Tu tienda Shopify, rápida y fácil de cambiar.

7. text-lead

   Entradilla de portada (relativo)

   1.08em

   Tu tienda Shopify, rápida y fácil de cambiar.

Los tamaños son fluidos entre 320 y 1240 px con clamp(): no hay saltos por breakpoint. Las versalitas usan tres tracking: tracking-caps-tight (0.08em), tracking-caps (0.14em), tracking-caps-wide (0.18em).

Cada ficha muestra el componente real, sus propiedades y cómo se usa. Pasa el ratón, tabula y cambia el tema arriba a la derecha: todos responden igual que en la portada.

Botones

src/styles/classes.ts

buttonPlanbuttonPrimarybuttonSecondarybuttonHalo

Recetas de clases, no componentes: así sirven igual para un <a> que para un <button>. buttonPlan es solo para la acción principal de la portada (uno por página). buttonHalo, para acciones repetidas dentro de tarjetas. Etiquetas con verbo y lo que pasa después: «Reservar 20 min», no «Saber más».

astro

---
import { buttonPlan, buttonPrimary, buttonSecondary, buttonHalo } from '../styles/classes';
---
<a class={buttonPlan} href={cta.href}>Reservar 20 min</a>
<a class={buttonSecondary} href="#casos">Ver casos</a>

Pastillas

src/components/Home.astro

Shopify y Shopify PlusIbi, Alicante · RemotoDisponible para proyectos nuevos

Datos breves junto al titular. La de disponibilidad tiene tres estados (abierta, limitada, ocupada) que se cambian desde el CMS; solo la abierta lleva movimiento.

astro

<span class={chip}>
  <ShopifyBag class="h-3.5 w-auto" />
  Shopify y Shopify Plus
</span>

Section

src/components/Section.astro

06Componentes

Esta página está maquetada con él

El número, la cota azul y la etiqueta imitan la referencia de un plano. Todas las secciones de esta página usan el componente real.

Propiedades de Section

Propiedad	Tipo	Uso
id	string	Ancla y base del id del titular
index	number	Número de la cota; se recalcula si se oculta una sección
label	string	Etiqueta en versalitas
title	string	Titular h2
tinted	boolean	Fondo tintado a sangre para alternar bloques
slot aside	slot	Si existe, el contenido pasa a dos columnas (2fr / 3fr)

astro

<Section id="servicios" index={1} label="Servicios" title="…" tinted>
  …
  <form slot="aside">…</form>  <!-- con aside, dos columnas -->
</Section>

Tarjetas

src/styles/classes.ts · card

Refuerzo para agencias

Para agencias que necesitan a alguien senior unas semanas.

Para

Agencias

Entrega

Código revisado y documentado

Pedir presupuesto

01

Paso del proceso

Variante con filo azul y número grande, para secuencias.

Borde de 1 px y fondo --card, sin sombras ni esquinas redondeadas: las tarjetas son láminas. Los datos van al final con mt-auto para que las tarjetas de una fila alineen su pie.

Propiedades de Tarjetas

Propiedad	Tipo	Uso
AudienceIcon name	'handshake' | 'store' | 'accessibility'	Icono de 34 px de cada servicio

astro

<li class={`${card} flex flex-col`}>
  <AudienceIcon name="handshake" />
  <h3 class="font-display text-subhead">…</h3>
</li>

Campos de formulario

src/components/Home.astro

CorreoQué necesitas y para cuándo

Etiqueta siempre visible encima del campo (nunca solo placeholder), autocomplete correcto y borde azul al enfocar. El formulario real lleva un campo trampa y un token firmado contra el spam, sin captcha.

astro

<label class="grid gap-2">
  <span class="text-fine">Correo</span>
  <input class={field} type="email" name="email" autocomplete="email" required />
</label>

Controles de cabecera

src/components/LangSwitch.astro · ThemeSwitch.astro

controlItem activoEl selector de tema está en la cabecera: pruébalo con el teclado.

El selector de tema muestra el icono activo antes de que cargue el JavaScript (lo decide el CSS con data-theme) para que no parpadee. Su script va inline con hash en la CSP porque tiene que ejecutarse antes de pintar.

Propiedades de Controles de cabecera

Propiedad	Tipo	Uso
lang	'es' | 'en'	Idioma de las etiquetas y del estado actual

Enlaces y vista previa

src/components/Linked.astro · LinkPreview.astro

Enlace de texto: subrayado en azul a media tinta.

Trabajé en la tienda de Sprinter y en la de Brava.

Linked enlaza solo los nombres de tiendas y estudios que aparecen en un texto plano del CMS. Con ratón, al pasar por encima sale una miniatura de la web (LinkPreview); en táctil no, porque el primer toque ya abre el enlace.

astro

<Linked text="Trabajé en la tienda de Sprinter y de Brava." />

Marca y logos de clientes

src/components/Logo.astro · StoreLogo.astro

FC Barcelona

El isotipo son tres secciones del editor de temas de Shopify con «Añadir sección» en la del medio. StoreLogo calcula el ancho de cada logo por área, no por alto, y los invierte en oscuro salvo los que tienen color propio.

Propiedades de Marca y logos de clientes

Propiedad	Tipo	Uso
store	Store	Datos de la tienda (src/data/stores.ts o CMS)
area	number	Área aproximada en px²: todos los logos pesan lo mismo a la vista
maxHeight	number	Tope de alto para los logos compactos
eager	boolean	Carga inmediata si se ve al abrir la página

astro

<Logo class="size-10" />  <!-- tinta en currentColor, azul en --accent -->
<StoreLogo store={store} area={2400} maxHeight={30} eager />

FeaturedStores

src/components/FeaturedStores.astro

Marcas con las que he trabajado

• FC Barcelona
• Sprinter
• Bimani
• Brava
• Apparell
• Pipa y Limón

Propiedades de FeaturedStores

Propiedad	Tipo	Uso
title	string	Etiqueta sobre la rejilla

Iconos

@lucide/astro · AudienceIcon.astro

Lucide con trazo fino (1,5–1,75) y Phosphor Light para los servicios. Siempre en currentColor y con aria-hidden: el texto de al lado ya dice lo que significan.

Pie: el cajetín

src/components/Footer.astro

El pie reproduce el cajetín de un plano: escala 1:1, autor, contacto y la fecha de revisión, que es la del último despliegue. El marco y el boceto del logo se dibujan al llegar. Está al final de esta página.

Contraste

Todos los pares de texto pasan AA en los dos temas; la tabla de color se calcula al compilar con los valores reales.

Foco visible

Contorno de 2 px en el azul de acento con :focus-visible, separado 3 px del elemento. Nunca se quita sin sustituirlo.

Teclado

Enlace «Saltar al contenido» al principio. El menú de tema sigue el patrón menu con menuitemradio: flechas, Inicio, Fin y Escape.

Áreas táctiles

Mínimo de 24 px (WCAG 2.2, 2.5.8). La skill ui-qa lo mide en cinco anchos de pantalla con toques reales.

Movimiento

Todo respeta prefers-reduced-motion; el contenido nunca depende de que termine una animación.

Semántica

Cada sección tiene su encabezado enlazado con aria-labelledby; los iconos decorativos llevan aria-hidden y los logos, su nombre en texto oculto.

Sin JavaScript

La página se lee entera sin JS. Lo que lo necesita (la barra del CTA en móvil, la vista previa de enlaces) no aparece si falta.