brandName_
// design system

Una estética.
Todos tus proyectos.

Fondo oscuro, un acento morado racionado, mono para lo técnico, esquinas rectas y hairlines. Cambia de tema con el botón de arriba para ver el modo claro.

// how it works

Section headline goes here

Supporting one- or two-line description that explains the section.

FIG 0.1

Feature title

Short description of the feature or capability.

FIG 0.2

Feature title

Short description of the feature or capability.

FIG 0.3

Feature title

Short description of the feature or capability.

// metrics
99.9%
uptime
1,240ms
p95 latency
128k
requests / min
// api

Terminal block

bash 
$ curl -X POST "https://api.example.com/v1/endpoint"
$ # comentario de ejemplo
// tags
beta new live
// comparison
alternative
2,400
on brandName
399

Your closing statement goes here

// actions

Botones con firma

ButtonLink
// motion directions

Tres niveles de señal

Exploración visual: conserva el efecto actual arriba y compara aquí una jerarquía posible antes de cambiar los componentes canónicos.

primary · signal rise

Relleno vertical desde la base: una señal clara para la acción principal.

secondary · progress line

Acción secundaria con progreso inferior, sin relleno completo.

ghost · scanline

Acción contextual con una línea de lectura discreta.

// icons · lucide

Librería única: Lucide, strokeWidth 1.5. Nada de stock ni emojis.

search terminal database shield activity settings arrow-right check
// data

Data table

model status latency requests
model-alpha online 142 12,480
model-beta degraded 318 4,210
model-gamma offline — 0
// forms

Controles de formulario

Nunca lo compartiremos.

Clave no válida.

// states

Empty · loading · error

Nothing here yet

Empty state description goes here.

error

Algo salió mal

Error state description goes here.

// app shell

Sidebar + topbar

overview
// dashboard

Área de contenido. El item activo lleva borde izquierdo acento.

// illustrations

SVG de trazo fino

ConcentricNode
NodeNetwork
LatencyCurve
DotGrid
// glyph presets

Señal por dominio

·

psychology

ConcentricNode

01 —

investments

LatencyCurve

>_

systems

NodeNetwork

<>

intelligence

NodeNetwork

—

editorial

DotGrid

Reveal

Entrada sutil por opacidad y desplazamiento; respeta reduced motion.

// tokens

Reference

background
surface-raised
primary / brand
Aa
brand-text

Roboto 500 · título — the quick brown fox

Roboto 300 · body — the quick brown fox jumps over the lazy dog

Roboto Mono 400 · mono — const value = 42;

// interactions

Accordion · copy · form status

¿Funciona sin JavaScript?

Sí. El componente canónico usa details y summary, así que conserva teclado y semántica nativos.

¿Puedo abrir varias respuestas?

Sí. Cada disclosure es independiente por defecto.

https://api.example.com/v1

enviando Validando cambios.

completado Cambios guardados.

error No se pudo guardar.