NOAH

Style Guide

Esta página muestra el sistema de diseño consumiendo tokens (CSS variables) vía Tailwind. Para cambiar el tema/mode se controla desde el atributo del HTML: data-theme y data-mode.

Colores

Background

bg-bg

Surface

bg-surface

Text

bg-text

Muted

bg-muted

Border

bg-border

Accent

bg-accent

Input BG

bg-input-bg

Focus Ring

bg-focus-ring

Nota: en UI real, text y border se usan como color de texto y borde; aquí se renderizan como swatches.

Tipografía

Display (Michroma)

NOAH — The quick brown fox

Sans (Metropolis)

Texto de párrafo con la fuente principal. Lorem ipsum dolor sit amet.

Radius / Shadow / Spacing

Radius

rounded-md / rounded-lg

Shadow

shadow-sm / shadow-md

Spacing (tokens)

Estas filas usan gap-2 y gap-4 (mapeadas a tokens en Tailwind).

Componentes

Buttons

Input

Select

Textarea

Prueba tabulando para ver el focus ring consistente.