157 lines
7.9 KiB
Markdown
157 lines
7.9 KiB
Markdown
# Estilo visual
|
||
|
||
Identidad obligatoria para todos los manuales PDF generados por esta skill. Cualquier desviación rompe la consistencia de la marca FactorPesca.
|
||
|
||
## Paleta de colores
|
||
|
||
| Token | Hex | Uso principal |
|
||
|---|---|---|
|
||
| `--color-primary` | `#0B2545` | Portada, H1, H2, banda superior, línea fina decorativa |
|
||
| `--color-primary-600` | `#13315C` | H3, texto sobre fondos claros cuando se necesita profundidad |
|
||
| `--color-primary-100` | `#E6ECF2` | Fondo de callouts suaves, filas alternadas sutiles |
|
||
| `--color-accent` | `#F4A300` | Círculos numeradores de pasos, marcadores de anotación, subtítulo de portada, foco |
|
||
| `--color-accent-600` | `#D88C00` | Estados activos y hover del accent |
|
||
| `--text-primary` | `#1A1A1A` | Cuerpo del documento |
|
||
| `--text-secondary` | `#404040` | Subtítulos, descripciones cortas |
|
||
| `--text-muted` | `#6B7280` | Metadatos, captions, fechas |
|
||
| `--surface` | `#FFFFFF` | Fondo de página |
|
||
| `--surface-alt` | `#F3F4F6` | Filas alternadas de tablas, zonas de respiro |
|
||
| `--border` | `#E5E7EB` | Bordes de tablas, marcos de capturas |
|
||
| `--success` | `#047857` | Callouts `tip` y resultados exitosos |
|
||
| `--warning` | `#B45309` | Callouts `warning` y advertencias |
|
||
| `--danger` | `#B91C1C` | Callouts `danger` y operaciones destructivas |
|
||
| `--info` | `#1D4ED8` | Callouts `info` y aclaraciones |
|
||
|
||
Reglas de uso:
|
||
|
||
- El blanco de página es la única superficie de fondo permitida para el contenido.
|
||
- El `--color-accent` se reserva para numeración, foco y elementos interactivos. **No** se usa como fondo de grandes áreas.
|
||
- Los callouts siempre combinan barra lateral de 4pt coloreada + fondo `--color-primary-100` (versión suave) o blanco con borde coloreado (versión estricta).
|
||
- Contraste mínimo: 4.5:1 para texto sobre fondo (cumple WCAG AA).
|
||
|
||
## Tipografía
|
||
|
||
Familias (cargar desde Google Fonts dentro de `manual.css`):
|
||
|
||
- **Inter** 300 / 400 / 600 / 700 — títulos, cuerpo, UI.
|
||
- **JetBrains Mono** 400 / 500 — código, rutas, comandos, datos identificadores.
|
||
|
||
Escala en puntos (optimizada para página Letter 8.5×11"):
|
||
|
||
| Estilo | Familia | Peso | Tamaño | Interlineado | Uso |
|
||
|---|---|---|---|---|---|
|
||
| Display (portada) | Inter | 700 | 36pt | 1.15 | Título de la portada |
|
||
| H1 (capítulo) | Inter | 700 | 28pt | 1.20 | Inicio de cada capítulo |
|
||
| H2 | Inter | 700 | 20pt | 1.25 | Secciones dentro de un capítulo |
|
||
| H3 | Inter | 600 | 15pt | 1.30 | Sub-secciones |
|
||
| H4 | Inter | 600 | 12pt | 1.30 | Etiquetas, mini-encabezados |
|
||
| Body | Inter | 400 | 11pt | 1.55 | Párrafos del manual |
|
||
| Body énfasis | Inter | 600 | 11pt | 1.55 | Texto destacado en línea |
|
||
| Caption | Inter | 400 | 9pt | 1.40 | Subtítulos de figuras, pies de tabla |
|
||
| Eyebrow | Inter | 600 | 9pt tracking 0.12em uppercase | 1.40 | Etiquetas small caps, banda superior |
|
||
| Code | JetBrains Mono | 400 | 9.5pt | 1.50 | Bloques `pre code` y teclas |
|
||
| Code énfasis | JetBrains Mono | 500 | 9.5pt | 1.50 | Palabras reservadas inline `code` |
|
||
|
||
Reglas de uso:
|
||
|
||
- Los números de paso se renderizan en Inter 700 13pt blanco sobre `--color-accent`.
|
||
- Los nombres de botones o campos se escriben exactamente como aparecen en la UI, entre comillas tipográficas « », o en `code` si son identificadores técnicos.
|
||
- No usar cursiva. Las cursivas solo se reservan para nombres científicos o títulos de obras externas.
|
||
- No usar subrayado excepto en enlaces web (que en el PDF se muestran como `--color-info` sin subrayado en la versión final).
|
||
|
||
## Componentes
|
||
|
||
Todos los componentes se aplican con clases CSS. El HTML sólo necesita marcar la estructura semántica y la clase adecuada.
|
||
|
||
### Callout
|
||
|
||
```html
|
||
<aside class="callout callout-warning">
|
||
<div class="callout-title">Advertencia</div>
|
||
<p>Esta acción cierra la temporada y no se puede deshacer.</p>
|
||
</aside>
|
||
```
|
||
|
||
Modificadores: `callout-info`, `callout-warning`, `callout-danger`, `callout-tip`, `callout-note`.
|
||
|
||
Anatomía: barra lateral 4pt coloreada + caja con fondo `--color-primary-100` + icono 18pt a la izquierda (Unicode o SVG inline) + título 12pt bold + cuerpo 11pt.
|
||
|
||
### Bloque de paso (`.step-block`)
|
||
|
||
```html
|
||
<article class="step-block" data-step>
|
||
<div class="step-number" aria-hidden="true">1</div>
|
||
<div class="step-content">
|
||
<h3 class="step-title">Iniciar sesión en la plataforma</h3>
|
||
<p>Abra el navegador y vaya a <code>https://app.factorpesca.com</code>.</p>
|
||
<figure class="screenshot-frame">
|
||
<img src="artifacts/01-login.png" alt="Pantalla de inicio de sesión" />
|
||
<ol class="annotations" data-annotations='[{"x":62,"y":58,"n":1},{"x":50,"y":74,"n":2}]'></ol>
|
||
</figure>
|
||
<aside class="callout callout-info callout-result">
|
||
<div class="callout-title">Resultado esperado</div>
|
||
<p>Verá el panel principal con su nombre en la esquina superior derecha.</p>
|
||
</aside>
|
||
</div>
|
||
</article>
|
||
```
|
||
|
||
El círculo del paso usa `--color-accent`. El JS inyecta el número automáticamente si se omite, pero se recomienda fijarlo en el HTML.
|
||
|
||
### Captura con anotaciones (`.screenshot-frame`)
|
||
|
||
- Imagen con `box-shadow: 0 2pt 8pt rgba(0,0,0,0.08)` y borde 1pt `--color-border`.
|
||
- Caption automática con prefijo "Figura N." y descripción leída de `figcaption` o `alt`.
|
||
- Anotaciones: círculos blancos 22pt con borde 2pt `--color-primary` y número `--color-primary` 11pt bold. Se posicionan con `top` / `left` en porcentajes sobre la imagen.
|
||
- En impresión, las anotaciones conservan tamaño y color (requiere `-webkit-print-color-adjust: exact`).
|
||
|
||
### Bloque de código (`.code-block`)
|
||
|
||
```html
|
||
<pre class="code-block"><code>npx skills add lackeyjb/playwright-skill --skill playwright-skill --yes</code></pre>
|
||
```
|
||
|
||
Fondo `#1E1E2E`, texto `#F8F8F2`, padding 14pt, radio 4pt, JetBrains Mono 9.5pt, números de línea automáticos.
|
||
|
||
### Tabla de datos (`.data-table`)
|
||
|
||
Header con fondo `--color-primary` y texto blanco Inter 600 10pt. Filas alternadas blanco / `--color-surface-alt`. Borde inferior 0.5pt `--color-border`. Padding 8pt vertical, 10pt horizontal.
|
||
|
||
### Badge
|
||
|
||
```html
|
||
<span class="badge badge-version">NUEVO</span>
|
||
```
|
||
|
||
Fondo `--color-accent`, texto blanco, padding 2pt 8pt, radio 12pt, Inter 700 8pt uppercase.
|
||
|
||
## Iconografía
|
||
|
||
- Iconos en línea con Unicode cuando sea viable: ⚠ info, ⚠ warning, ⛔ danger, ✅ tip, ⓘ note.
|
||
- Iconos decorativos en SVG inline con `currentColor` para heredar el color del contexto.
|
||
- Los iconos no son funcionales: cada callout lleva además texto explícito.
|
||
|
||
## Tono editorial
|
||
|
||
- Voz: segunda persona del singular o plural según el caso ("Abra el menú", "Vayan al panel").
|
||
- Tiempo verbal: presente indicativo para acciones ("Haga clic"), futuro para consecuencias ("Aparecerá un mensaje").
|
||
- Direccionalidad: "arriba a la derecha", "en la columna central", nunca "donde indica la flecha".
|
||
- Términos: usar los nombres exactos de la UI; si se traduce, mantener coherencia durante todo el manual.
|
||
- Evitar: "simplemente", "fácilmente", "obviamente", "basta con", jerga innecesaria.
|
||
- Preferir: verbos directos, frases cortas, una idea por oración.
|
||
- Párrafos: máximo 4 líneas en pantalla. Si excede, dividir en pasos o lista.
|
||
- Listas: usar listas numeradas para procedimientos secuenciales, con viñetas para enumeraciones sin orden.
|
||
|
||
## Reglas de impresión
|
||
|
||
- Tamaño Letter 8.5×11" obligatorio.
|
||
- Margen 22mm en los cuatro lados. La portada se imprime sin márgenes (full bleed).
|
||
- Cabecera: nombre del capítulo actual (eyebrow) en `Inter 600 9pt`, color `--color-primary-600`, línea inferior 0.5pt `--color-border`.
|
||
- Pie: "FactorPesca · Manual de usuario" a la izquierda, "Página X de Y" a la derecha.
|
||
- Salto de página:
|
||
- Cada `h1` de capítulo empieza en página nueva.
|
||
- `h2`, `h3`, `h4` no quedan huérfanos al final de página.
|
||
- `.step-block`, `.callout`, `.screenshot-frame`, `.code-block`, `figure`, `table` no se parten.
|
||
- Color: `-webkit-print-color-adjust: exact;` y `print-color-adjust: exact;` en todos los elementos coloreados.
|
||
- Imágenes: máximo 700px de ancho real (escala 2x retina queda a 1400px).
|