---
title: "El sistema de diseño Atelier"
description: "Un lenguaje visual neobotánico para el marco Nibiru — un loto en papel cremoso, iluminado por la luz matutina."
---

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
```bash
# 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
```html
<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](/es/diseno/paleta/) — cada color con su rol.
- [Tipografía](/es/diseno/tipografia/) — los ejes variables de Bricolage utilizados en serio.
- [Componentes](/es/diseno/componentes/) — botones, tarjetas, llamadas a la atención, el lanzador Oracle.
- [Movimiento](/es/diseno/movimiento/) — respirar, desvanecerse, sin flash.
