System Design
Tokens de diseno y componentes base de Tetzu. Pagina temporal para desarrollo.
Colores
Paleta de colores del sistema.
bg
var(--color-bg)
bg-subtle
var(--color-bg-subtle)
surface-1
var(--color-surface-1)
surface-2
var(--color-surface-2)
border
var(--color-border)
text
var(--color-text)
text-subtle
var(--color-text-subtle)
text-muted
var(--color-text-muted)
accent
var(--color-accent)
primary
var(--color-primary)
Tipografia
Escala tipografica y patrones documentados. Estos son los estilos estandar del sistema.
HEADING XL
text-8xl font-extrabold tracking-tightHero Headlines
Uso: Hero principal, landing pages
HEADING LARGE
text-5xl font-bold tracking-tightSection Headlines
Uso: Titulos de pagina, secciones principales
HEADING MEDIUM
text-2xl font-boldSubsection Titles
Uso: Subtitulos, cards destacados
BODY LARGE
text-lg text-[var(--color-text-subtle)]Body large text for descriptions, subtitles, and important secondary content.
Uso: Subtitulos hero, descripciones destacadas
BODY TEXT
text-base text-[var(--color-text)]Standard body text for paragraphs, regular content, and general reading material.
Uso: Parrafos, contenido general
BODY SMALL
text-sm text-[var(--color-text-muted)]Small text for captions, metadata, and secondary information.
Uso: Captions, metadata, info secundaria
NAV LINKS
text-sm font-bold uppercase tracking-wideUso: Navegacion header (siempre uppercase)
BUTTON TEXT
text-sm font-semiboldUso: Todos los botones (CTA y secundarios)
Botones
Variantes y tamanos.
Variantes
Tamanos
Cards
Contenedores con elevacion.
Default Card
shadow-e1
Elevated Card
shadow-e2
Interactive Card
Hover me
Accordion
Contenido colapsable accesible.
Sombras
Niveles de elevacion neumorfica.
shadow-e0
shadow-e1
shadow-e2
shadow-e3
Border Radius
Escala de redondeo.