The Atelier design system

The Atelier design system is the visual language behind this site and the Nibiru brand. It’s drawn from the lotus mark in the brand logo and the warm cream the wordmark sits on. The system ships as portable design tokens — CSS, SCSS, JSON and Tailwind — so any Nibiru site, internal tool or partner project can adopt the look without reinventing it.

A lotus on cream paper, lit by morning light.

Five principles

1. One family. Every text element uses Bricolage Grotesque (variable font, Google Fonts). Different sizes use different optical-size axis values — display sizes are characterful, body sizes are calm. No serif, ever.
2. Cream, not white. The page is #f5f1e8 — warm vellum. Pure white is too cold. Pure black is too loud. We use a deep indigo-black #1f1b2e for text instead.
3. Two petals, one gold leaf. Brand violet #7c70ab and brand sky-blue #7db7dc come straight from the lotus. A single restrained gold accent #c9a96e is reserved for moments that earn it.
4. Editorial spacing. Generous whitespace, asymmetric layouts, lead paragraphs that breathe. Closer to a published monograph than a SaaS landing page.
5. Reduced motion. Things move slowly when they move at all. The hero lotus breathes once every 18 seconds. No jitter, no flicker, no pulse.

Get the 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

All tokens are namespaced (--nibiru-* / nibiru.* / nibiru-*).

Adopt it in 12 lines

<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>

That’s enough to be on-brand.

What’s documented here

• Palette — every colour with its role.
• Typography — Bricolage’s variable axes used in earnest.
• Components — buttons, cards, callouts, the Oracle launcher.
• Motion — breathe, fade, no flash.