00 · Reglas del sistema

Principios que gobiernan toda la Foundation: semántica HTML separada del estilo visual, Malibu como único color de acción y Canary como reflector único por vista.

Reglas del sistema: (1) HTML semántico ≠ estilo visual — un H2 puede vestir laus-ui_h1 o laus-ui_display sin cambiar su etiqueta; un solo H1 por página. (2) Malibu es el único color de acción; Canary es un reflector único por vista, siempre con texto navy. (3) Esta página es el catálogo de la LAUS Website Foundation: borrador, sin publicar. (4) Las clases legacy (Felix/Relume/laus-* numeradas) se migran y retiran en LAU-135; nunca se editan desde aquí.

Composición base + combos: cada elemento lleva UNA clase base (laus-ui_btn, laus-ui_card, laus-ui_section…) más combos is-* que solo modifican (is-action, is-dark, is-sm, is-compact, is-link…). Los combos viven bajo su base — no se mezclan combos de bases distintas en un mismo elemento. Las clases legacy (Felix/Relume/laus-* numeradas) aparecen únicamente en specimens marcados como referencia legacy.

01 · Colores y tokens semánticos

Usa siempre los tokens laus/color/* y laus/scheme/* — nunca hex crudos. Los tokens referencian las primitivas de marca (Navy, Malibu, Canary, Mine Shaft).

Tokens: laus/color/{bg-page, surface, surface-dark, text-primary, text-body, text-secondary, text-muted, text-on-dark, border-default, border-focus, action, action-hover, accent, info, danger, success, warning}

02 · Esquemas de sección

Seis esquemas semánticos para fondos de sección. Cuándo usar cada uno: light = secciones estándar sobre blanco · soft = alternancia gris-azulada de página (#F4F5FA) · soft-blue = banda informativa azul pálida (#F0F5FE, reemplazo semántico del color-scheme-4 actual) · dark = secciones hero/cierre en navy · blue = banda CTA · accent = reflector Canary, máximo uno por vista.

Clases: laus-ui_scheme-light · laus-ui_scheme-soft · laus-ui_scheme-soft-blue · laus-ui_scheme-dark · laus-ui_scheme-blue · laus-ui_scheme-accent

Contrastes computados (WCAG): blanco/navy 16.9 AAA · navy/Canary 15.3 AAA · blanco/#1F5CD6 5.88 AA texto normal · Canary/#1F5CD6 5.33 AA · navy/Malibu 6.51 AA · blanco/Malibu 2.65 FALLA (por eso el botón Malibu lleva texto navy: is-action).

Colores por esquema (heredados del scheme, sin variantes arbitrarias de título): LIGHT/SOFT/SOFT-BLUE — títulos navy (text-primary), cuerpo Mine Shaft (text-base), secundario #767676 (text-muted), links #1F5CD6, acción principal navy (is-primary) o Malibu con texto navy (is-action). DARK/BLUE — títulos y cuerpo blancos (text-on-dark), acción is-primary o is-accent (Canary/navy); PROHIBIDO Malibu como texto pequeño y muted gris oscuro. ACCENT — todo texto navy obligatorio; botón is-primary (navy); PROHIBIDO texto blanco sobre Canary. Prohibiciones globales: blanco sobre Malibu · Canary/Malibu como texto sobre blanco · hex crudos en lugar de tokens.

03 · Tipografía

Inter en toda la web. H1 canónico 900; laus-ui_display 900 para héroes de marketing con combo is-light 600 como variante objetivo. El specimen 500 se conserva solo como comparación del estado legacy — no es una variante de la Foundation. La etiqueta HTML define la semántica; la clase define el tamaño visual.

Clases: laus-ui_h1..h6 · laus-ui_display (+is-light) · laus-ui_body · laus-ui_text-{lg,base,sm,xs} · laus-ui_text-{medium,semibold,muted,center} · laus-ui_eyebrow · laus-ui_caption · laus-ui_nowrap · laus-ui_text-on-dark

04 · Rich text (cuerpo de blog)

Envuelve todo cuerpo CMS con laus-ui_rich-text dentro de laus-ui_container-s (prosa 768px). Los estilos de h2/h3, listas, citas y figuras descendientes se completan con selectores anidados en el Designer durante la migración del blog.

Clases: laus-ui_rich-text · laus-ui_container-s

05 · Botones

Una clase base + combos. Primary Malibu es el CTA estándar; accent Canary solo sobre fondos oscuros; is-full para submits de formulario a ancho completo (patrón de /solicitar-prueba).

Clases: laus-ui_btn + is-{primary, secondary, outline, accent, dark} × is-{sm, lg} · is-full · laus-ui_btn-group

06 · Formularios y estados

Controles con foco Malibu, error rojo y éxito verde. Altura mínima táctil 48px. En la migración, los inputs vivos (radio 18px, label 16/400) se estandarizan al canónico: radio 8px y label 12/700 mayúsculas.

Clases: laus-ui_field · laus-ui_label · laus-ui_input · laus-ui_select · laus-ui_textarea · laus-ui_checkbox · laus-ui_radio · laus-ui_help-text · laus-ui_error · laus-ui_success

07 · Tabs

Pestañas con subrayado Malibu en el estado activo. En producción se aplican al elemento nativo w-tabs y el estado activo real usa w--current con las mismas propiedades que is-active.

Clases: laus-ui_tabs · laus-ui_tab-link (+is-active / w--current) · laus-ui_tab-pane

08 · Badges, chips y paginación

laus-ui_badge cubre tags de módulo Y chips de filtro del blog (decisión: no existe clase chip separada — reutilización antes que duplicación). El chip activo del filtro usa is-dark vía w--current.

Clases: laus-ui_badge (+is-dark) · laus-ui_pagination

Paginación: laus-ui_pagination aplica igual a w-pagination-next y w-pagination-previous (Webflow emite «Previous» solo cuando hay página anterior — verificar en la migración del blog con ambos controles renderizados).

09 · Tarjetas

Fondo blanco, radio 12px, sombra navy. Variante oscura para fondos claros de alto contraste; is-link cuando toda la tarjeta es un enlace (hover eleva 2px).

Clases: laus-ui_card (+is-dark, +is-link)

10 · Iconos

Lucide con stroke 1.5–2px. Heredan el color del texto (currentColor); acento en Malibu. Sin emoji en UI de producto.

Clases: laus-ui_icon-16 (inline) · laus-ui_icon-20 (UI) · laus-ui_icon-24 (feature)

11 · Estructura, containers y grids

Anchos: container-large 1280px (existente) · container-m 1024px · container-s 768px (prosa). Secciones: 80/64/48/40px por breakpoint; is-compact 40/32/24. Grids colapsan: grid-2 a 1 col ≤767; grid-3 a 2 col ≤991 y 1 col ≤767. La curva responsive es SIEMPRE descendente — corrige la curva invertida del hero legacy (tablet más grande que desktop).

Clases: laus-ui_section (+is-compact) · laus-ui_container-m · laus-ui_container-s · laus-ui_grid-2 · laus-ui_grid-3 · laus-ui_img-cover · laus-ui_hide-mobile · laus-ui_hide-desktop · reutilizadas: laus-container-large, padding-global

12 · Efectos, radios y foco

Radios 4/8/12/16/9999. Sombras tintadas en navy dentro de las recetas — nunca negro puro, nunca como utilidad suelta. Motion 150–250ms ease sin spring. Foco visible Malibu en todo control interactivo.

Tokens: laus/radius/{xs,sm,md,lg,pill} · clase laus-ui_focus-ring · estados focus-visible integrados en input/select/textarea

13 · Navbar (LAU-129)

Navbar / Base (LAUS) — componente aditivo en draft. Tema navy (spec); el navbar vivo actual es barra blanca sticky. El colapso móvil y la apertura del drawer se configuran en Designer (interacciones no expuestas por MCP).

Clases: laus-ui_navbar · navbar-inner · navbar-brand · navbar-logo · navbar-links · navbar-link · navbar-toggle · navbar-drawer · navbar-drawer-link