Style Guide
Design tokens, tipografía, sombras, gradientes, animaciones y componentes del blog. Cambia entre modo claro/oscuro para ver cómo se adaptan los tokens.
Color Palette
Design tokens
Semantic (adaptive light/dark)
bg / page
#ffffff
#0f1419
surface
#ffffff
#0b1120
fg (text)
#151b27
#f1f5f9
fg-muted
#64748b
#94a3b8
fg-subtle
#94a3b8
#64748b
accent
#5e3aee
#a78bfa
accent-soft
#a78bfa
#60a5fa
Section Accents (static)
section-violet
#a78bfa
section-blue
#60a5fa
section-emerald
#34d399
section-sky
#38bdf8
Raw tokens (backward compat)
primary
#151b27
secondary
#5e3aee
tertiary
#d0edf5
quaternary
#aeb2bb
grayLight
#f9f9fc
baseLight
#f1faff
ink-900
#020617
ink-800
#0b1120
ink-700
#0f172a
code-bg
#1a1f2e
code-header
#1e2533
Retro palette (Day of the Tentacle)
solo activos con html[data-retro]bg
#0a1228
bg-mid
#0d1a3a
panel
#1f3260
panel-light
#3a5fa8
panel-deep
#060a18
cream
#f5e6c8
cyan
#5fc3ff
cyan-bright
#9fdfff
yellow
#fcd44e
red
#a83232
magenta
#c54fa6
green
#4ca84a
link
#9fdfff
Typography
Outfit · JetBrains Mono
font-display — Outfit
Aa — Display Black 900
Aa — Display Bold 700
Aa — Display Semibold 600
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
font-mono — JetBrains Mono
const blog = "aitorevi.dev";
type Lang = 'es' | 'en';
import { t } from '@/i18n/utils';
MONO XS · uppercase · tracking-wide
Heading scale
Body text
text-lg — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin commodo.
text-base — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin commodo.
text-sm / fg-muted — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
text-xs / fg-subtle — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Prose — Blog Typography
@tailwindcss/typography · clase prose
Título H1 del post
Este es un párrafo de cuerpo con texto en negrita, texto en cursiva
y un enlace de ejemplo que sigue el estilo del blog.
El espaciado entre líneas y párrafos está controlado por @tailwindcss/typography.
Heading H2 de sección
Párrafo normal bajo un H2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Heading H3
- Primer elemento de lista sin orden
- Segundo elemento con
código inline - Tercer elemento con énfasis
- Lista ordenada — primer paso
- Segundo paso del proceso
- Resultado final
Una cita de ejemplo que aparece con el estilo visual de bloque de cita del blog, con borde lateral y tipografía en cursiva.
// Bloque de código
const greeting = (name: string) => `Hola, ${name}!`;
console.log(greeting('aitorevi'));Párrafo después del bloque de código. La separación y el contraste con el fondo de código deben ser claros tanto en modo claro como oscuro.
Párrafo tras un separador hr.
Shadows & Glow Effects
Driven by --color-accent
glow-dot
0 0 10px accent/50
shadow-glow-accent-dot
glow-bullet
0 0 6px accent/40
shadow-glow-accent-bullet
glow-line
0 0 4px accent/15
shadow-glow-accent-line
glow-card-sm
0 0 12px accent/8
shadow-glow-accent-card-sm
glow-card-md
0 0 30px accent/15
shadow-glow-accent-card-md
Background Gradients
backgroundImage utilities
bg-home-radial
Dark ellipse — content pages (dark)
bg-home-radial-light
Light ellipse — content pages (light)
bg-home-gradient-text
Blue→violet→blue — stat values (dark)
bg-home-gradient-text-light
Blue→violet→blue — stat values (light)
Layout Variants
<Layout variant="..." />
Cada página pasa un variant al
<Layout>. El layout lo proyecta como
data-bg en el <body>
y aplica el background correspondiente vía CSS global. Para cambiar el color de fondo solo se toca
un token (--color-bg-content en
tokens.css).
variant="default"
Background Tailwind del body sin reglas extra.
Usado en: Home, contacto
variant="dark-radial"
Gradiente radial elíptico (solo dark mode). Para lectura larga.
Usado en: CV, blog, katas, work, styleguide
variant="flat"
Color solido del token --color-bg-content (claro/oscuro segun modo).
Usado en: Case studies
<Layout
title="..."
lang="es"
description="..."
variant="flat" // 'default' | 'dark-radial' | 'flat'
>Animations
Keyframes
animate-home-rise
0.7s cubic-bezier(0.22,1,0.36,1) — fade+translateY entrada
animate-home-pulse
2.4s ease-in-out infinite — opacity 0.4↔1
Spacing Extensions
Custom Tailwind tokens
w-116
29rem — width utility
spacing-30 / mt-30
7.5rem — spacing utility
Components
Atoms & shared
Button — tones × variants
| tone \ variant | ghost (default) | gradient |
|---|---|---|
| blue | ||
| violet | ||
| brand |
Tag — variants
<Tag label="accent" variant="accent" />
<Tag label="muted" variant="muted" />
<Tag label="crosspost" variant="crosspost" />
Tag — accent
SectionHeader
Sección de ejemplo
subtítulo en mono pequeño
StatCard
DecisionCard
-
SSG con Astro
Genera HTML estático en build time. Sin JS por defecto — solo se hidrata lo que lo necesita explícitamente.
-
Tests que usan blog posts reales
Los tests de integración leen el contenido real. ver el post para el detalle completo.
ScoreBadge — Lighthouse
El anillo anima con IntersectionObserver cuando el componente entra en el viewport.
-
Performance
-
Accessibility
-
Best Practices
-
Example mid
Iconografía
src/icons/ · simple-icons via astro-icon
Custom icons — src/icons/
cassette
download
github
globe
keystatic
location
resend
satori
upstash
Simple Icons — simple-icons:*
astro
typescript
tailwindcss
react
playwright
vitest
vercel
githubactions
Tamaños habituales
h-4
h-5
h-6
h-8
h-10
Scrollbar
Custom webkit scrollbar
Track: --color-scrollbar-track · Thumb: --color-scrollbar-thumb · Hover: --color-scrollbar-thumb-hover
Retro Mode
html[data-retro] — Day of the Tentacle
El modo retro se activa añadiendo el atributo data-retro al elemento <html>.
Transforma toda la UI con la paleta SCUMM: pixel font, fondo navy con wallpaper tile y efectos CRT.
En el blog se activa haciendo clic 3 veces en la casete del stack técnico.
Los estilos se aplican a toda la página al instante.