Design System Preview
ほぼ日刊イトイ新聞

1101.com から抽出したデザイントークンのカタログ。多色のカード背景、pill 型 CTA、letter-spacing 0.05em の手紙のような組版。computed style 実測値に基づく。

お買いものへ 公式ページへ くわしくみる
01 / Colors

役割で使い分ける多色パレット

Brand Accents (固定 1 色ではない)
Hobonichi Yellow
#ebd833
バッジ・帯
Light Blue
#dbf2ff
最頻出 pill CTA
Light Blue Bright
#bbe5ff
発売日バッジ
Hobonichi Green
#5dae64
EC コンバージョン
Green Pale
#f3fff4
EC カード背景
Purple
#6d257e
特集色
Pink
#f3c0d9
季節企画
Orange
#ffaa00
注目バッジ
Orange Warm
#f88352
「くわしくみる」枠
Text
Text Primary
#3e3e3e
本文（純黒は使わない）
Text Muted
#767676
補助テキスト
Text Caption
#939393
投稿系 CTA
Link Blue
#005588
水色 pill 上のリンク色
Surface & Frame
Background
#ffffff
標準背景
Card Gray
#f6f6f6
汎用カード背景
Surface Mute
#d9d9d9
中間グレー CTA
Surface Dark
#3e3e3e
SNS シェア塗り
Frame Black
#000000
特集カードの太枠 8px
02 / Typography — 実測値

タイポグラフィ階層

Hobonichi H1 — 大型ヘッダー
Noto Sans + JP / 32px / 400 / line-height: 1.1大型ヘッダー
メモという不思議な表現形式。
Noto Sans + JP / 24px / 600 / line-height: 1.25連載タイトル
生活のたのしみ展2026
52のお店がやってきます！
Noto Sans + JP / 20px / 600 / line-height: 1.4カード見出し
いつか、もうちょっと考えてから書こう。そう思ってとりあえずメモしておく。そして、考えてから書こうとしているうちに、その日が一年たってしまうこともある。そういう「メモ」というのは、不思議な表現形式である。
Noto Sans + JP / 16px / 400 / line-height: 1.9 (30.4px) / letter-spacing: 0.05em本文
補足キャプション — Caption (14px)
Noto Sans + JP / 14px / 400 / line-height: 1.5 / color: Text Muted
乗組員ナイト、しゅう〜りょう〜明日もあるよ
Noto Sans + JP / 13px / 400 / line-height: 1.5最小キャプション
03 / Cards

役割色のカード

本日発売！

ほぼ日手帳 2027

毎日が、たのしくなる手帳。

公式ページへ

生活のたのしみ展

渋谷PARCO 8階にあるイベントスペースです。絵、写真、音楽など、生活に関わるイベントを開催します。

生活のたのしみ展へ

ほぼ日のお店

ほぼ日グッズを販売する「店舗」であり、展示やイベントを開催する場所でもあります。

公式ページへ

ほぼ日乗組員が見つけた

太い 8px solid #000 の枠が「ほぼ日らしい」装丁感を作る、特集カード専用のスタイル。

くわしくみる
04 / Buttons

pill CTA バリエーション

お買いものへ
Light Blue Pill (42px)
公式ページへ
Green Solid Pill (42px)
くわしくみる
Orange Outline (42px)
言いまつがいに投稿する
Mute Outline (56px)
Share Dark (36px)
ほぼ日にメールを送る
Mail Mute (36px)
今日のコドモ
Tab (12px)
05 / Article — 記事組版

letter-spacing 0.05em の手紙のような組版

メモという不思議な表現形式。

いつか、もうちょっと考えてから書こう。そう思ってとりあえずメモしておく。そして、考えてから書こうとしているうちに、その日が一年たってしまうこともある。

letter-spacing が作る空気

ほぼ日は palt ではなく letter-spacing 0.05em（0.8px）を全文に当てる。文字同士の距離をほんの少し広げて、Web マガジン的な「手紙のような落ち着き」を出している。日本語サイトとしては珍しい設計。ABCabc 123

06 / Forms

フォーム要素

デフォルト — border 1px solid #d9d9d9 / radius 8px
フォーカス — border #005588 + ring
07 / Layout

Spacing & Width

Spacing Scale

4px
8px
16px
24px
40px
64px

Content Widths

Page Container 1000px
Article Body 680px