---
title: "アトリエ設計システム"
description: "ニビルフレームワーク用の新植物学的ビジュアル言語 — ホワイトペーパーに咲いた蓮、朝日で照らされた。"
---

**Atelier**デザインシステムは、このサイトとNibiruブランドのビジュアル言語です。システムは、ブランドロゴのハナモトマークとワードマークが置かれる暖かいクリーム色を基にしています。システムは、CSS、SCSS、JSON、Tailwindなどのポータブルなデザイントークンとして提供されるため、Nibiruサイトや内部ツール、パートナープロジェクトは再発明することなくこのロックを採用できます。

> ホト乱がクリーム色の紙に覆われ、朝日によって照らされています。

## 五つの原則

1. **家族一人。** すべてのテキスト要素は **Bricolage Grotesque**（可変フォント、Google Fonts）を使用しています。異なるサイズでは異なる光学軸値が使用されます — ディスプレイサイズはキャラクタフルで、ボディサイズは落ち着いています。セリフはありません。
2. **クリーム色ではなく白。** ページの背景色は `#f5f1e8` — 温暖なベールムです。純粋な白色はあまり寒すぎます。純粋な黒はあまり騒ぐので、テキストには深いインディゴブラック `#1f1b2e` を使用しています。
3. **二つの花びらと一つの金の葉。** ブランドバイオレット `#7c70ab` とブランドスカイブルー `#7db7dc` は、蓮の花から直接来ています。単一の制限された金色アクセント `#c9a96e` は、それが値する瞬間のために予約されています。
4. **エディトリアルスペース。** 大きな余白、非対称レイアウト、息を呑むリード段落。出版物の単行本に近いものではなく、SaaSランディングページよりも近いです。
5. **減った動き。** 何かが動くときもゆっくりと動きます。ヒーローの蓮は18秒ごとに一度息を呑むだけです。ジッターやちらつき、パルスはありません。

## トークンを取得する
```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
```
すべてのトークンは名前空間化されています（`--nibiru-*` / `nibiru.*` / `nibiru-*`）。

## 12行で採用する
```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>
```
これだけでもブランドに合致しています。

## ここに記載されている内容

- [パレット](/ja/design/palette/) — 各色の役割。
- [タイポグラフィー](/ja/design/typography/) — Bricolage の可変軸が真剣に使用されています。
- [コンポーネント](/ja/design/components/) — ボタン、カード、コールアウト、Oracle ランチャー。
- [モーション](/ja/design/motion/) — 呼吸、フェード、フラッシュなし。
