POPEYE WEB

POPEYE Web (popeyemagazine.jp) から抽出したデザイントークンのカタログ。秀英角ゴシック金 + DM Sans、コバルトブルー (#343ec9)、font-weight 400 統一、非対称角丸の雑誌的レイアウト。computed style 実測値に基づく。

最新号を見る DESIGN.md を読む
01 / Colors

カラーパレット

PRIMARY (--primarycolor 1〜7)
Primary
#343ec9
POPEYE Blue / 文字・面
Primary 2
#3b47e7
Primary 3
#4350ff
Primary 4
#4b59ff
Primary 5
#5363ff
Primary 6
#5b6cff
Primary 7
#6275ff
ACCENTS
Logo Color
#ff9000
ロゴ・補色
Calendar Cyan
#3affff
カレンダー強調
Calendar BG
#002184
カレンダー背景
TODO Title BG
#add8e6
TODO Accent
#0055ff
TODO BG
#f7f7f7
02 / Typography — 実測値

タイポグラフィ階層

Article Title — 大見出し
43.2px / 400 / line-height: 1.0 / letter-spacing: 2.88px (≈0.0667em)h1 ls02
流れるテロップ — Marquee Headline
20.16px / 400 / line-height: 1.5 / letter-spacing: 1.44pxmarquee
醤油、砂糖、お酒でつくる豚きんぴら丼。 — Card Title
20.16px / 400 / line-height: 1.5 / letter-spacing: 0.36pxh3 medium
記事本文 — Article Body
17.28px / 400 / line-height: 1.5 (25.92px)article p
Body — POPEYE は font-weight を 400 一本で統一する組版思想。サイズ・色・配置で階層を作る、雑誌的なリズム。
14.4px / 400 / line-height: 1.5Body
フード — Tag Caption
12.5px / 400 / line-height: 1.5tag
03 / Cards — 非対称角丸

カードコンポーネント

フード

醤油、砂糖、お酒でつくる豚きんぴら丼。

2026.05.07 / Recipe
ファッション

春の外遊び、仲間と「PROJECT PUMA PLUS.」があれば。

2026.05.06 / Sponsored
カルチャー

〈DAMD〉が作り続けている "カスタムカー" と過ごす日々。

2026.05.05 / Column
CATEGORY TAGS
フード ファッション カルチャー トラベル ミュージック
04 / Town Talk — 曜日カラム

Town Talk

月
大前プジョルジョ健太【#4】ケニアのBADHOPと、中華を食らう
火
高橋達也【#3】MODESELEKTORに贈るヤオヤのつまみ
水
浅野順子【#4】私の影に男あり
木
燃え殻【#4】心が雨漏りする日には
金
ユザーン【#4】記憶の中のカレー
土
小林美香【#4】広告ハンターの観察記
日
熊谷充紘【#4】わたしに戻れる場所
05 / Buttons

ボタンバリエーション

最新号を見る
Outline / 白bg + 青text
SUBSCRIBE
Inverse / 青bg + 白text
TODOリストを見る！
Calendar / シアン
CALENDAR BLOCK
2026年5月8日
金曜日 / 02:13:15
本日の予定はこちら！
06 / Forms — Newsletter

フォーム要素

07 / Border Radius — 2 トークンのみ

非対称角丸の構成

24px (pill)
5px (small)
0 5 5 0
0 5 5 0(left)
5 5 0 0 (top)
0 24 0 0
0 0 24 (BR)
24 0 0 24 (left pill)