平日13時までのご注文で翌日お届け（一部地域除く） / 税込3,999円以上で送料無料

北欧、暮らしの道具店

hokuohkurashi.com / Design System Preview

北欧、暮らしの道具店（hokuohkurashi.com）から抽出したデザイントークンのカタログ。游ゴシック Medium ベース、12px 極小ベースフォント、記事テキストへの YakuHanJPs 部分適用、#444444 単色テキスト、完全フラットで構成された「エディトリアルコマース」のデザインシステム。実サイトの computed style 実測値に基づく。

01 / Colors

カラーパレット

Neutral
Text Primary
#444444
全テキスト・検索タブ背景
White
#ffffff
ページ背景・ヘッダー
Background Light
#f7f7f7
ニュースティッカー・配送情報
Background Blue
#f2f7f9
読みものセクション・カテゴリ
Accent
Accent Yellow
#fff100
NEW バッジ（記事）
Accent Coral
#fb5c5c
New バッジ（ナビ）・pill 形状
02 / Typography

タイポグラフィ

人気商品ランキング
游ゴシック Medium / 20px / 700 / line-height: 1.6H1 SECTION
「暮らしを楽しむ」ための道具との出会い。日常に寄り添うものたちを集めました。
YakuHanJPs + 游ゴシック / 15px / 700 / line-height: 1.71H2 ARTICLE TITLE
新着の読みもの
游ゴシック Medium / 20px / 700 / line-height: 1.6H3 SECTION
朝の光が差し込むキッチンで、お気に入りのマグカップにコーヒーを注ぐ。北欧デザインの温もりが、何気ない日常のひとときを少しだけ特別なものに変えてくれます。私たちが届けたいのは、そんな小さな幸せの積み重ねです。
YakuHanJPs + 游ゴシック / 15px / 400 / line-height: 1.71BODY ARTICLE
2026年5月9日 / ニュースカテゴリ / お知らせ
YakuHanJPs + 游ゴシック / 13px / 400 / line-height: 1.6BODY SMALL
読みもの / お買いもの / カテゴリ / マイページ
游ゴシック Medium / 12px / 400 / line-height: 1.6CAPTION / NAV
お買いもの New
游ゴシック Medium / 11px / 400 / pill radius 100px / bg #fb5c5cNAV BADGE
商品検索 記事検索
游ゴシック Medium / 13px / 400 / active: bg #444 text #fffSEARCH TAB
フィットする暮らし、つくろう。vol.34「北欧で見つけた、暮らしのリズム」
YakuHanJPs + 游ゴシック / 15px / 400 / line-height: 1.6ARTICLE TITLE LIST
03 / Article

読みもの

NEW Photo

「朝の15分」が暮らしを変えた。フィンランドに学ぶ、ゆとりある朝時間のつくりかた

忙しい毎日だからこそ、朝のほんの少しの時間を丁寧に過ごすことが大切。北欧の人々が実践する朝習慣をヒントに、明日からできる工夫を集めました。

フィットする暮らし、つくろう / 2026.05.09
Photo

使い続けるほどに愛着がわく。スタッフ愛用のキッチン道具、集めました

毎日手に取るものだからこそ、使い心地の良さは大切。スタッフが何年も愛用しているキッチンまわりのアイテムをご紹介します。

スタッフのお気に入り / 2026.05.08
NEW Photo

「ちょうどいい」を見つける収納術。北欧インテリアに学ぶ片づけのコツ

すっきり暮らしたいけれど、生活感をゼロにしたいわけではない。ほどよく整った、温かみのある部屋づくりのアイデアをお届けします。

暮らしにひとさじ / 2026.05.07
04 / Products

お買いもの

Photo
ARABIA / ムーミン マグ 300ml
¥3,300
Photo
iittala / ティーマ プレート 21cm
¥2,750
Photo
KLIPPAN / ウールブランケット ミニ
¥8,800
Photo
Fog Linen Work / リネンキッチンクロス
¥1,100
Photo
Lisa Larson / マイキー 置物
¥4,180
05 / Badges & Interactions

バッジ / インタラクション

北欧、暮らしの道具店は CTA ボタンの露出が少ない。テキストリンクとカードタップが主なインタラクション手段。明示的なボタンの代わりにバッジが視覚的アクセントを担う。

NEW
YELLOW BADGE
bg #fff100 / text #444 / 11px
New
CORAL BADGE (PILL)
bg #fb5c5c / text #fff / radius 100px
もっと見る >
TEXT LINK
underline / 12px / #444
商品検索 記事検索
SEARCH TAB
active: bg #444 text #fff / 13px
カテゴリ一覧
BORDER LINK
border-bottom / 12px / #444
06 / Forms

フォーム

DEFAULT ---- border #e5e5e5
FOCUS ---- border #444444
ERROR ---- border #fb5c5c
07 / Elevation

奥行き / エレベーション

完全にフラットなデザイン。シャドウは一切使わず、背景色の切り替えのみで視覚的階層を構成する。palt やシャドウを使わない温もりのあるミニマリズム。

White Surface
#ffffff
ページ背景・ヘッダー・カード
Blue Surface
#f2f7f9
読みもの・カテゴリ
Light Surface
#f7f7f7
ニュース・配送情報
box-shadow: none / border-radius: 0 / font-feature-settings: normal / letter-spacing: normal
影なし、角丸なし、palt なし、字間なし。4つの「なし」がこのサイトのフラットデザインを定義する。
08 / Layout

レイアウト

Spacing Scale
4px
XS
8px
S
16px
M
24px
L
40px
XL
64px
XXL
Container & Grid
Container
max-width: ~1060px
padding: 16-20px
Product Grid
4-5 columns (desktop)
2 columns (mobile)
Article Grid
2-3 columns (desktop)
1 column (mobile)
Section Dividers
#ffffff
#f2f7f9
#f7f7f7
#ffffff
背景色の切り替えでセクションを分離。ボーダーは最小限。