UX-X — Sample Category
カードタイトルの例
説明文はここに入る。2〜3行程度で、案件の概要を簡潔に。
- 役割
- 役割の例
- アウトプット
- 作ったものの例
- 結果
- 結果の例
Reference / Not in main nav
StyleGuide for Tommy
自分用の備忘録。色・フォント・コンポーネントの一覧。デザインを変えたら、ここも一緒に直す。
Colors — Base
--bg#f3f2f0
--surface#ffffff
--ink#1c1a18
--ink-muted#5b5650
--line#d8d4ce
Colors — UX / HCD テーマ(暖色)
--ux-accent#c8401f
--ux-accent-deep#8f2c14
--ux-accent-soft#f3e2da
Colors — Business × AI テーマ(寒色)
--biz-accent#1f5c52
--biz-accent-deep#123a33
--biz-accent-soft#dde9e5
Colors — History / Notes テーマ(オリーブ)
--accent#4a4630
--accent-deep#2e2b1c
--accent-soft#ece8d8
History/Notesは、UX(暖色)ともBusiness×AI(寒色)ともあえて違う軸(オリーブ=記録・資料庫のイメージ)にしている。
Typography
H1 (見出し用)Rampart One 見出し
H1 letter-spacing通常 +0.01em / UXページのみ -0.01em(1行に収めるための微調整)
H2 (セクション見出し)Archivo Bold セクション見出し
BodyArchivo Regular 本文テキスト。読みやすさ優先。
EyebrowEYEBROW LABEL
Rampart Oneは遊び心を出したい見出し(Top・各ページhero h1)専用。本文・カード見出しはArchivoで統一。
Buttons
Tags
タグ例
複数タグ
を並べる
Case Card
Image Slot(未用意の画像プレースホルダー)
Image Slot サンプル
実画像を用意したら、この枠を丸ごと<img>タグに差し替える。レイアウトが崩れないよう、比率(4:5 / 16:10)は保つ。
矢羽根タブ(History専用)
clip-pathで矢印形状を作っている。history.html参照。
Firework Link(シークレットリンク演出)
Topページ下部の「StyleGuide for Tommy」リンクにホバーすると、小さな花火のように散る。下でカーソルを合わせて確認できる。
ここにカーソルを合わせてみる