異彩を、放て。
HERALBONY
Art for Social Good

HERALBONY（heralbony.com）から抽出したデザイントークンのカタログ。Noto Sans JP 統一、ネイビーブランドカラー #21428b、pill CTA（radius 450px+）、高い letter-spacing（0.2-0.3em）のギャラリー的フラットデザイン。知的障害のあるアーティストの作品をプロダクトとして展開するソーシャルブランドのデザインシステム。

コレクションを見る ブランドストーリー →
01 / Colors

Color Palette

Primary
Navy
#21428b
CTA背景・アーティスト名・アクセント
Dark
#1c1b1b
ボタンデフォルト背景
Semantic
Sold Out
#c9c9c9
売り切れバッジ背景
NEW Badge
#333333
NEWラベル背景
Neutral
Text Primary
#333333
見出し・商品タイトル
Text Secondary
#444444
本文テキスト
Text Tertiary
#6a6a6a
補助テキスト
Border
#b1b0ad
標準ボーダー
Surface
White
#ffffff
ページ標準背景
Warm Beige
#fbf9f4
ブランドストーリー・ニュースレター
News BG
#fbfcf9
お知らせセクション背景
Header
#fcfcfc
グローバルヘッダー
Surface Light
#efefef
薄い面色
Accent
Featured Artist
#dbbcd2
月間フィーチャーアーティスト背景
Tab Active
#52514f
タブ切替アクティブ背景
02 / Typography (computed style)

Typography

異彩を、放て。
Noto Sans JP / 30px / 500 / line-height: 1.7 / letter-spacing: 0.3emDISPLAY
お知らせ
Noto Sans JP / 30px / 500 / line-height: 1.4 / letter-spacing: 0.2emHEADING 1
アートハンカチ「無題」 佐々木早苗
Noto Sans JP / 20px / 400 / line-height: 1.38 / letter-spacing: normalHEADING 2
HERALBONY POP UP STORE開催のお知らせ
Noto Sans JP / 18px / 400 / line-height: 1.65 / letter-spacing: 0.03emHEADING 3
ファッション
Noto Sans JP / 16px / 700 / line-height: 1.65 / letter-spacing: 0.1emHEADING 4
HERALBONYは、知的障害のある作家が描くアート作品をファッションアイテムやインテリアプロダクトとして展開しています。一人ひとりの「異彩」を社会に届け、障害のイメージを変えていくことを目指しています。
Noto Sans JP / 15px / 400 / line-height: 1.65 / letter-spacing: normalBODY
アートには、見る人の心を揺さぶる力がある。私たちは、その力を信じています。
Noto Sans JP / 20px / 400 / line-height: 2.2 / letter-spacing: 0.1emBODY MANIFESTO
佐々木 早苗
Noto Sans JP / 16px / 500 / line-height: 1.6 / letter-spacing: 0.03em / color: #21428bARTIST NAME
FEATURED ARTIST OF THE MONTH
Noto Sans JP / 13px / 500 / line-height: 1.53 / letter-spacing: 0.05emCAPTION
VIEW ALL ARTISTS
Noto Sans JP / 13px / 700 / line-height: 1.65 / letter-spacing: 0.03emSMALL
異彩を、放て。
知的障害のある作家たちが生み出すアートには、既成概念を超えた圧倒的なエネルギーが宿る。その異彩を、ファッションやプロダクトを通じて日常へ届ける。
ブランドストーリーを見る
FEATURED ARTIST OF THE MONTH
佐々木 早苗
力強い色彩と独創的な構図で知られるアーティスト。繰り返される幾何学的なパターンとビビッドな色使いが特徴の作品群は、国内外で高い評価を受けている。
03 / Art Products

Collection

ART SCARF
NEW
佐々木 早苗

アートスカーフ「無題」

¥16,500 (tax incl.)
ART HANDKERCHIEF
八重樫 季良

アートハンカチ「おりがみ日記」

¥3,300 (tax incl.)
ART PANEL
小林 覚

アートパネル「夢の花」

¥44,000 (tax incl.)
NECKTIE
SOLD OUT
高橋 南

アートネクタイ「星と海」

¥11,000 (tax incl.)
04 / Buttons

Buttons

コレクションを見る
PRIMARY NAVY PILL
bg #21428b / radius 450px / 14px / 400
ブランドストーリー →
SECONDARY OUTLINE PILL
border #333 / radius 900px / 16px / 500
カートに入れる
DARK PILL
bg #1c1b1b / radius 450px
🔍
SEARCH SUBMIT
bg #000 / radius 450px
Page Switcher Tabs
すべて ファッション アート インテリア
PAGE SWITCHER TAB
active bg #52514f / radius 34px / 14px
05 / Cards

Cards

2026.05.01
HERALBONY POP UP STORE 東京ミッドタウンにて開催
知的障害のあるアーティストの作品を間近でご覧いただける、期間限定ポップアップストアを開催いたします。
ARTWORK
八重樫 季良
繊細な色使いと緻密なパターンが特徴のアーティスト。
ファッション
スカーフ、ネクタイ、ハンカチなど、日常に異彩を添えるファッションアイテム。
商品を見る →
06 / Forms

Forms

DEFAULT - border #b1b0ad / radius 0
FOCUS - border #21428b (navy)
ERROR - border #c0392b
登録する
07 / Elevation

Elevation

HERALBONY はシャドウを使わないフラットデザイン。背景色の切り替え（#ffffff / #fbf9f4 / #fbfcf9 / #dbbcd2）で視覚的な段差を表現する。

Level 0 - White
shadow: none / #ffffff
Level 0 - Warm
shadow: none / #fbf9f4
Level 0 - News
shadow: none / #fbfcf9
Level 0 - Featured
shadow: none / #dbbcd2
08 / Layout

Layout

8px
16px
24px
40px
64px
100px
Grid
Product grid: 4 columns (desktop) / max-width: ~1200px / padding: 20-35px
News card grid: 3 columns (desktop)
Border Radius
450px (pill)
900px (pill lg)
34px (tab)
0px (input)