System Design

Tokens de diseno y componentes base de Tetzu. Pagina temporal para desarrollo.

Colores

Paleta de colores del sistema.

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-tight

Hero Headlines

Uso: Hero principal, landing pages

HEADING LARGE

text-5xl font-bold tracking-tight

Section Headlines

Uso: Titulos de pagina, secciones principales

HEADING MEDIUM

text-2xl font-bold

Subsection 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-wide

SERVICIOSCASOSCONTACTO

Uso: Navegacion header (siempre uppercase)

BUTTON TEXT

text-sm font-semibold

Hablar por WhatsApp

Uso: 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.

Respuesta de ejemplo para la pregunta 1.

Respuesta de ejemplo para la pregunta 2.

Respuesta de ejemplo para la pregunta 3.

Sombras

Niveles de elevacion neumorfica.

shadow-e0

shadow-e1

shadow-e2

shadow-e3

Border Radius

Escala de redondeo.

pill