アトリエ設計システム

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

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

五つの原則

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

トークンを取得する

# 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行で採用する

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

これだけでもブランドに合致しています。

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

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