El sistema de diseño Atelier

El Atelier es el sistema de diseño que subyace a este sitio y la marca Nibiru. Está inspirado en el emblema de loto del logotipo de la marca y en el cálido crema sobre el que se encuentra la palabra. El sistema se entrega como tokens de diseño portátiles — CSS, SCSS, JSON y Tailwind — para que cualquier sitio Nibiru, herramienta interna o proyecto de socio pueda adoptar el aspecto sin tener que reinventarlo.

Un loto sobre papel crema, iluminado por la luz matutina.

Cinco principios

1. Una familia. Cada elemento de texto utiliza Bricolage Grotesque (fuente variable, Google Fonts). Tamaños diferentes utilizan valores diferentes del eje óptico — los tamaños de pantalla son carismáticos, los tamaños corporales son calmos. Nunca serif.
2. Crema, no blanco. La página es #f5f1e8 — velluto cálido. El blanco puro es demasiado frío. El negro puro es demasiado fuerte. Usamos un negro índigo profundo #1f1b2e para el texto en su lugar.
3. Dos pétalos, una hoja de oro. El violeta de la marca #7c70ab y el azul celeste de la marca #7db7dc vienen directamente del loto. Un solo acento dorado restringido #c9a96e se reserva para momentos que lo merecen.
4. Espaciado editorial. Espacio en blanco generoso, diseños asimétricos, párrafos de introducción que respiran. Más cercano a un monografía publicada que a una página de aterrizaje SaaS.
5. Movimiento reducido. Las cosas se mueven lentamente cuando se mueven en absoluto. El loto héroe respira una vez cada 18 segundos. Sin temblor, sin destello, sin latido.

Obtén los tokens

# CSS custom properties
curl -O https://nibiru-framework.com/design-system/tokens.css

# SCSS variables and maps
curl -O https://nibiru-framework.com/design-system/tokens.scss

# Tailwind preset
curl -O https://nibiru-framework.com/design-system/tailwind.preset.js

Todos los tokens están espaciados de nombres (--nibiru-* / nibiru.* / nibiru-*).

Adóptalo en 12 líneas

<link rel="stylesheet" href="https://nibiru-framework.com/design-system/tokens.css">
<style>
  body  { background: var(--nibiru-paper); color: var(--nibiru-ink);
          font-family: var(--nibiru-font-text);
          font-variation-settings: var(--nibiru-fv-body);
          letter-spacing: var(--nibiru-tracking-body); }
  h1    { font-variation-settings: var(--nibiru-fv-display-hero);
          letter-spacing: var(--nibiru-tracking-display);
          font-size: var(--nibiru-text-hero); }
  .cta  { background: var(--nibiru-ink); color: var(--nibiru-paper);
          padding: 0.7rem 1.2rem;
          border-radius: var(--nibiru-radius-md); }
</style>

Eso es suficiente para estar en marca.

¿Qué se documenta aquí?

• Paleta — cada color con su rol.
• Tipografía — los ejes variables de Bricolage utilizados en serio.
• Componentes — botones, tarjetas, llamadas a la atención, el lanzador Oracle.
• Movimiento — respirar, desvanecerse, sin flash.