Design System Preview
HOSOO — 1688年、西陣に始まる

A design token catalogue for hosoo.co.jp. Near-monochromatic palette, dual-serif type system, no CTA buttons. Based on computed style measurements.

01 / Colors

カラーパレット

Brand / Primary
Dark Charcoal
#2b2b2e
テキスト・UI要素・ダーク面の唯一の色
Muted Gray
#949799
セカンダリテキスト・著作権・言語切替
Neutral
Background
#ffffff
ページ全体の基本背景
Dark Surface
#2b2b2e
フッター背景・ハンバーガーメニュー
Pagination
Pagination Dots
#2b2b2e / #ffffff
アクティブ: 塗り / 非アクティブ: 枠のみ

モノクロマティック配色。ブランド専用のアクセントカラーは存在しない——色を足さないこと自体がブランドアイデンティティ。


02 / Typography

タイポグラフィ階層

細尾 — 西陣織の伝統と革新
32px / 700 / line-height: 1.4 / font: Mincho (Shippori Mincho)Logo / H1
絹糸が織りなす光と影の調和
16px / 400 / line-height: 1.0 / font: Mincho / アートディレクション的にタイトな行間Body (gallery)
Collection   About   Textile   Contact
14px / 500 / line-height: 1.1 / letter-spacing: 0.1em / font: Heldane Display (Cormorant Garamond) / liga: 0Nav Link
The art of Nishijin weaving, refined over three centuries, transforms silk threads into luminous textiles that bridge tradition and contemporary design.
16px / 400 / line-height: 1.5 / letter-spacing: 0.04em / font: Heldane Display (Cormorant Garamond) / liga: 0Slide Text
EN  /  JP
13px / 500 / letter-spacing: 0.08em / color: #949799 / font: Heldane Display (Cormorant Garamond)Language Selector
© 2026 HOSOO Co., Ltd. All rights reserved.
12px / 500 / line-height: 1.5 / letter-spacing: 0.04em / color: #949799Copyright

DUAL TYPE SYSTEM

和文は筑紫Aオールド明朝(preview では Shippori Mincho)、欧文は Heldane Display(preview では Cormorant Garamond)の二書体構成。両方とも高品位セリフ体で統一し、ゴシック体・サンセリフ体は一切使用しない。欧文には font-feature-settings: "liga" 0 を適用してリガチャを無効化。


記事の組版サンプル

Nishijin Heritage

西陣織の技術と革新——三百年の経糸に、現代の緯糸を通す

2026.05.09  /  Textile Arts  /  Reading time: 5 min
Nishijin textile close-up

西陣織は、京都・西陣の地で千年以上にわたって受け継がれてきた絹織物の技法です。経糸と緯糸の交差によって生まれる紋様は、職人の手と感性によってのみ実現される精緻な芸術です。細尾は、この伝統を守りながらも、テキスタイルとしての可能性を現代のデザインや建築の文脈で拡張することを使命としてきました。

織の構造——経糸と緯糸の対話

一反の織物には、数千本の経糸が張られます。その一本一本が、緯糸と交差するたびに異なる表情を見せ、全体としてひとつの紋様を成す。この工程は、プログラムの実行に似ていると同時に、即興演奏のような偶然性も内包しています。職人は、糸の張力、湿度、光の加減を読みながら、指先で微細な調整を行います。

素材と光の関係

絹糸は、光を反射するのではなく吸収し、ふたたび放つ性質を持っています。そのため、西陣織の表面は、時間帯や角度によって異なる色彩を見せます。この光との対話が、テキスタイルに「深み」を与え、平面でありながら空間的な印象を生み出します。

Read Full Article

04 / Buttons

インタラクション要素

HOSOOのサイトにはCTAボタンが存在しません。すべてのインタラクションはテキストリンクとページネーションドットで構成されています。

Text Links
View Collection
Primary / Large
16px / 500 / 0.1em
Read More
Primary / Medium
14px / 500 / 0.1em
Details
Primary / Small
12px / 500 / 0.1em
Privacy Policy
Secondary
14px / #949799
Pagination Dots
Active: bg #2b2b2e / Inactive: bg #fff, border 1px solid #2b2b2e / border-radius: 50%
Dark Background Variants
View Collection Privacy Policy
ダーク面でのテキストリンク・ドットの反転表現

05 / Cards

カードコンポーネント

Textile
Collection

HOSOO Textile — 元禄の記憶

江戸時代の意匠を現代の織機で再解釈したコレクション。金銀糸の代わりに光学繊維を織り込み、光の角度で紋様が変化する革新的なテキスタイル。

View Details
Architecture
Project

織物と建築の接点

テキスタイルを壁面パネルとして建築空間に導入するプロジェクト。素材の持つ柔らかさが、コンクリートとガラスの空間に温度と記憶を加えます。

View Details
Collaboration
Atelier

職人の手と、世界のデザイナー

国際的なデザイナーやメゾンとの協働を通じて、西陣織の技術と現代デザインの美学を融合させるコラボレーションの記録。

View Details

06 / Forms

フォーム要素

実サイトにフォームは確認されていません。ブランドのトーンに合わせた推奨仕様です。角丸なし、明朝体、枠線は #2b2b2e の細線。

Default — border: 1px solid #2b2b2e / radius: 0px / height: 48px
Focus — border: 2px solid #2b2b2e
Error — border: 1px solid #8b3a3a(抑制されたエラー色)

07 / Elevation

Depth & Elevation

Level 0: Flat
box-shadow: none
Level 1
0 1px 3px rgba(43,43,46,0.06)
Level 2
0 4px 16px rgba(43,43,46,0.08)

実測値はすべて box-shadow: none。影は一切使わないのが原則。織物の質感はフラットな画像で伝え、UIの層構造は余白と透明度で表現する。Level 1 / 2 は推奨値。


08 / Layout

スペーシングとレイアウト

Spacing Scale
XS
8px
S
16px
M
24px
L
40px
XL
80px
XXL
120px
Container Widths
Full Screen 100vw (images)
Content Max 800px
Article 640px
Breakpoints

Mobile: ≤ 767px Tablet: 768 – 1024px Desktop: > 1024px
タッチターゲット 44px × 44px 以上(WCAG基準)。ページネーションドットは視覚的に小さいが、タップ領域は確保する。

Design Philosophy

HOSOOのデザインは「引き算」の思想に基づいています。色を減らし、装飾を削ぎ、テキストを最小限にとどめることで、織物そのものの質感と、三百年の時間の厚みを際立たせます。UIは沈黙し、素材が語る——それがこのデザインシステムの根底にある哲学です。