DESIGN SYSTEM
ゆたかなAI
全トークンとコンポーネントのリファレンスカタログ。global.css に定義されたデザイントークンを一覧表示します。
Font Compare
日本語フォント候補の比較。同じテキストで見比べてください。
1. Noto Sans JP 現在
AIで引き出す、じぶんの暮らしのおもしろさ。
写真、スクショ、読書メモ、子供の絵。ふだんの記録の中に、まだ気づいていないおもしろさが眠っています。旅行から帰って1ヶ月。スマホのカメラロールに1,000枚の写真がある。
2. M PLUS 1 おすすめ
AIで引き出す、じぶんの暮らしのおもしろさ。
写真、スクショ、読書メモ、子供の絵。ふだんの記録の中に、まだ気づいていないおもしろさが眠っています。旅行から帰って1ヶ月。スマホのカメラロールに1,000枚の写真がある。
3. M PLUS Rounded 1c
AIで引き出す、じぶんの暮らしのおもしろさ。
写真、スクショ、読書メモ、子供の絵。ふだんの記録の中に、まだ気づいていないおもしろさが眠っています。旅行から帰って1ヶ月。スマホのカメラロールに1,000枚の写真がある。
4. Zen Maru Gothic おすすめ
AIで引き出す、じぶんの暮らしのおもしろさ。
写真、スクショ、読書メモ、子供の絵。ふだんの記録の中に、まだ気づいていないおもしろさが眠っています。旅行から帰って1ヶ月。スマホのカメラロールに1,000枚の写真がある。
5. Klee One
AIで引き出す、じぶんの暮らしのおもしろさ。
写真、スクショ、読書メモ、子供の絵。ふだんの記録の中に、まだ気づいていないおもしろさが眠っています。旅行から帰って1ヶ月。スマホのカメラロールに1,000枚の写真がある。
6. Murecho
AIで引き出す、じぶんの暮らしのおもしろさ。
写真、スクショ、読書メモ、子供の絵。ふだんの記録の中に、まだ気づいていないおもしろさが眠っています。旅行から帰って1ヶ月。スマホのカメラロールに1,000枚の写真がある。
7. BIZ UDPGothic
AIで引き出す、じぶんの暮らしのおもしろさ。
写真、スクショ、読書メモ、子供の絵。ふだんの記録の中に、まだ気づいていないおもしろさが眠っています。旅行から帰って1ヶ月。スマホのカメラロールに1,000枚の写真がある。
8. Kosugi Maru おすすめ
AIで引き出す、じぶんの暮らしのおもしろさ。
写真、スクショ、読書メモ、子供の絵。ふだんの記録の中に、まだ気づいていないおもしろさが眠っています。旅行から帰って1ヶ月。スマホのカメラロールに1,000枚の写真がある。
9. Kiwi Maru おすすめ
AIで引き出す、じぶんの暮らしのおもしろさ。
写真、スクショ、読書メモ、子供の絵。ふだんの記録の中に、まだ気づいていないおもしろさが眠っています。旅行から帰って1ヶ月。スマホのカメラロールに1,000枚の写真がある。
10. Zen Kaku Gothic New
AIで引き出す、じぶんの暮らしのおもしろさ。
写真、スクショ、読書メモ、子供の絵。ふだんの記録の中に、まだ気づいていないおもしろさが眠っています。旅行から帰って1ヶ月。スマホのカメラロールに1,000枚の写真がある。
11. RocknRoll One
AIで引き出す、じぶんの暮らしのおもしろさ。
写真、スクショ、読書メモ、子供の絵。ふだんの記録の中に、まだ気づいていないおもしろさが眠っています。旅行から帰って1ヶ月。スマホのカメラロールに1,000枚の写真がある。
Colors
Ink Scale
テキストと背景に使う無彩色スケール。100 が最も暗く、5 が最も明るい。
#0f172a #1e293b #334155 #475569 #64748b #94a3b8 #94a3b8 #cbd5e1 #e2e8f0 #f1f5f9 #f8fafc Accent Colors
ブランドの主役となるグリーン系アクセントカラー。
#16a34a #86efac #f0fdf4 #15803d #059669 Surface Colors
背景やカード面に使うニュートラルなサーフェスカラー。
#ffffff #fafafa #f8f9fc #f8fafc #f0fdf4 #fefce8 Line Colors
#0f172a #e2e8f0 Gradient Stops
グラデーションに使うストップカラー。
#16a34a #65a30d #84cc16 #22c55e Pop Colors
装飾やハイライトに使うポップカラー。
#fde047 #f472b6 #a78bfa #38bdf8 Typography
Font Families
--font-sans / --font-heading
Noto Sans JP あいうえお ABCDEfghij 0123456789
--font-label
Space Grotesk ABCDEfghij 0123456789
--font-script
Caveat ABCDEfghij 0123456789
Font Size Scale
Responsive Text
.text-hero Hero Text
.text-page-title Page Title
.text-section-title Section Title
.text-display 120
Font Weights
Line Heights
.leading-tight (1.3) AIで暮らしを効率的にではなく豊かにする。毎日の生活にAIを取り入れて、新しい発見を楽しむメディアです。
.leading-normal (1.5) AIで暮らしを効率的にではなく豊かにする。毎日の生活にAIを取り入れて、新しい発見を楽しむメディアです。
.leading-relaxed (1.8) AIで暮らしを効率的にではなく豊かにする。毎日の生活にAIを取り入れて、新しい発見を楽しむメディアです。
.leading-loose (2.0) AIで暮らしを効率的にではなく豊かにする。毎日の生活にAIを取り入れて、新しい発見を楽しむメディアです。
Spacing
4px ベースのスペーシングスケール (space-1 = 4px)。
Border Radius
sm 8px md 12px lg 20px xl 28px 2xl 36px full 3em blob organic Shadows
shadow-sm shadow-md shadow-lg shadow-xl shadow-glow shadow-card-hover Components
Buttons
サイズ (sm / md / lg) x バリアント (default / dark / accent / ghost / gradient) の組み合わせ。
Size: sm
Size: md (default)
Size: lg
Cards
.card
AIで暮らしを豊かにする方法
サンプルの説明テキストです。
.card-flat
フラットカードの例
ボーダーのみ、影なし。
.service-card
サービスカード
アイコン中央配置の情報カード。機能紹介などに使います。
Tags & Chips
Tags
Chips
Newsletter Form
FAQ (details/summary)
ゆたかなAIとは何ですか？
記事は無料で読めますか？
Decorations
.blob-1 .blob-green
.blob-2 .blob-yellow
.blob-3 .blob-pink
.float-deco .float-deco-purple
.deco-circle .deco-circle-accent
.deco-dots
.deco-squiggle
Semantic Layout Classes
.section-header (centered)
LABEL
Section Title
セクションの説明文。中央揃えで max-width 480px に制約されます。
.section-header-row (split)
CATEGORY