Design System Preview
HOSOO — 1688 lorem, lorem ipsum dolor

A design token catalogue for hosoo.co.jp. Near-monochromatic palette, dual-serif type system, no CTA buttons. Based on computed style measurements.
Read DESIGN.md Visit hosoo.co.jp
01 / Colors

lorem ipsum dolor

Brand / Primary
Dark Charcoal
#2b2b2e
lorem ipsum / UI lorem / lorem ipsum dolor sit
Muted Gray
#949799
lorem ipsum dolor sit / lorem / lorem ipsum
Neutral
Background
#ffffff
lorem ipsum dolor sit
Dark Surface
#2b2b2e
lorem ipsum dolor / lorem ipsum dolor sit
Pagination
Pagination Dots
#2b2b2e / #ffffff
lorem ipsum: lorem / lorem ipsum dolor: lorem

lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur adipiscing——lorem ipsum dolor sit amet consectetur adipiscing.

02 / Typography

lorem ipsum dolor sit

lorem — lorem ipsum dolor sit
32px / 700 / line-height: 1.4 / font: Mincho (Shippori Mincho)Logo / H1
lorem ipsum dolor sit amet consectetur
16px / 400 / line-height: 1.0 / font: Mincho / lorem ipsum dolor sit amet consecteturBody (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

lorem ipsum A lorem ipsum dolor(preview lorem Shippori Mincho), lorem Heldane Display(preview lorem Cormorant Garamond)lorem ipsum dolor. lorem ipsum dolor sit amet consectetur, lorem ipsum / lorem ipsum dolor sit amet consectetur. lorem ipsumfont-feature-settings: "liga" 0 lorem ipsum dolor sit amet consectetur.

03 / Article

lorem ipsum dolor sit

Nishijin Heritage

lorem ipsum dolor sit——lorem ipsum dolor, lorem ipsum dolor

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

lorem ipsum, lorem / lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing elit. lorem, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore.

lorem ipsum——lorem ipsum dolor

lorem ipsum dolor, lorem ipsum dolor sit amet. lorem ipsum dolor, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem, lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor

lorem, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor, lorem ipsum dolor“lorem”lorem, lorem ipsum dolor sit amet consectetur adipiscing.

Read Full Article
04 / Buttons

lorem ipsum dolor sit

HOSOO lorem ipsum dolor CTA lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt.

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
lorem ipsum dolor sit amet consectetur / lorem ipsum dolor
05 / Cards

lorem ipsum dolor sit

Textile
Collection

HOSOO Textile — lorem ipsum

lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing.

View Details
Architecture
Project

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing.

View Details
Collaboration
Atelier

lorem ipsum, lorem ipsum dolor

lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.

View Details
06 / Forms

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum, lorem, lorem#2b2b2e lorem.

Default — border: 1px solid #2b2b2e / radius: 0px / height: 48px
Focus — border: 2px solid #2b2b2e
Error — border: 1px solid #8b3a3a(lorem ipsum dolor sit)
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)

lorem ipsum dolorbox-shadow: none. lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur, UI lorem ipsum dolor sit amet consectetur. Level 1 / 2 lorem ipsum.

08 / Layout

lorem ipsum dolor sit amet

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
lorem ipsum dolor 44px × 44px lorem(WCAG lorem). lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit.

Design Philosophy

HOSOO lorem ipsum dolor“lorem”lorem ipsum dolor sit amet. lorem ipsum, lorem ipsum, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur. UI lorem ipsum, lorem ipsum——lorem ipsum dolor sit amet consectetur adipiscing.