ntea.log

Design System

Style Guide

このページは、ntea-blog のデザインシステムを実物でレンダリングした見本です。 配色・タイポグラフィ・コンポーネントの規約は DESIGN.md に、 すべての値は assets/css/style.css の :root で定義したデザイントークンに集約されています。

カラートークン

すべて :root 定義のデザイントークン。右上のテーマ切替でライト/ダーク両方の見え方を確認できる。

  • --bgページ背景
  • --bg-elevated持ち上げた面
  • --bg-cardカード地
  • --text本文テキスト
  • --text-muted補助テキスト
  • --border罫線・枠線
  • --accentリンク・強調
  • --accent-hoverホバー
  • --accent-soft淡いアクセント面
  • --gradient装飾バー・番号

タイポグラフィ

見出しはセリフ (--font-serif)、本文・UI はサンセリフ (--font-sans)。この対比が世界観の核。

書体の対比

見出しはセリフ — Serif Heading

本文・UI はサンセリフ。落ち着いた読み物中心のエディトリアル。The quick brown fox.

コードは等幅 — let tokens = design_system();

タイプスケール

2.3remヒーロー
2.1rem記事タイトル
1.5remリスト記事 / h2
1.25remブロック見出し / h3
1.15remカードタイトル
1.02rem記事本文
0.9remナビ・補助本文
--fs-metaメタ情報全般 (0.8rem)

角丸・影

中間値を作らず、定義済みの段階から選ぶ。

角丸

  • --radius14px — カード・コード
  • --radius-sm8px — サムネ・ページネーション
  • --radius-xs5px — インラインコード
  • 999px完全な丸 — ピル・タグ

影

--shadow
--shadow-hover

コンポーネント

実際のクラスをそのまま使った見本。マークアップは各テンプレートと共通。

ヒーロー

落ち着いた読み物

日々の学習アウトプットを公開する技術ブログ。

ブロック見出し

人気の記事

カテゴリ・タグ・件数バッジ

Programming

人気記事リスト (採番バッジ)

  1. S3 + CloudFront でブログをデプロイする
  2. デザイントークンで統一感を保つ

コールアウトカード (おすすめ/関連)

おすすめ記事

ページネーション

記事本文の要素

.article-body 内のタイポグラフィ。見出しはセリフ、引用は accent-soft、コードは影付き。

見出し h2

本文の段落。行間は 1.9 で、最も読みやすく調整している。リンクは 本文中だけ下線 が付く。

見出し h3

  • 箇条書きの項目
  • もう一つの項目
引用ブロック。accent-soft の淡い地に左罫線で、本文から控えめに浮かせる。
fn main() {
    let system = DesignSystem::from_tokens();
    println!("{}", system);
}

段落中の inline code はインラインコードのトークン (--radius-xs) を使う。