Branding & Creative Direction

good design company

lorem ipsum, lorem ipsum dolor.

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing elit. computed style lorem(2026-06-29)lorem ipsum.

works lorem contact DESIGN.md lorem →
01 / Colors

Color Palette

lorem ipsum dolor sit amet consectetur. lorem / lorem ipsum dolor / lorem ipsum dolor 14 lorem ipsum dolor sit.

Core
White
#ffffff
lorem / lorem ipsum
BG Secondary
#f5f5f5
lorem ipsum dolor
Divider
#e5e5e5
lorem ipsum
Button Border
#d6d6d6
lorem ipsum
Grayscale
Gray 25
#fcfcfc
Gray 50
#f7f7f7
btn hover lorem
Gray 400
#a3a3a3
lorem ipsum dolor
Gray 500
#737373
lorem ipsum dolor
Gray 600
#525252
Gray 800
#292929
Text
Text Primary
#141414
lorem / lorem
Text Muted
#737373
lorem ipsum dolor
Text Subtle
#e5e5e5
lorem ipsum dolor
Link Underline
#d6d6d6
lorem ipsum
02 / Typography — lorem

Typography

lorem ipsum / lorem / lorem ipsum dolor＝century-old-style-std(Adobe Fonts), lorem ipsum Noto Sans JP. lorem ipsum dolor sitShippori Mincho / EB Garamond lorem.font-feature-settings: normal(palt lorem ipsum). lorem ipsum dolor, lorem ipsum letter-spacing 0.08em.

good design company
Display (en) — lorem / 400 / lh 1.3 / lorem ls 0.04emlorem
lorem ipsum dolor, lorem ipsum dolor
Heading (lorem L) — lorem / 400 / lh 1.5 / ls normal(lorem ipsum)
lorem ipsum dolor — works lorem ipsum
Heading (works lorem ipsum h3) — lorem 18.72px / 400 / lh 1.5
lorem ipsum dolor — good design company lorem, lorem ipsum dolor sit amet consectetur / lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.ABCabc 0123
Body — lorem 16px / 400 / lh 1.8 / lorem ls normal / lorem ls 0.08em
works　news　about　contact　recruit
Nav / Header — lorem 16px / 400 / lh 1.5 / ls 1.28px (0.08em)
2013 — HOTEL THE MITSUI
Caption (en body) — lorem 12.8px / 400 / lh 1.5 / ls 1.024px (0.08em)
lorem ipsum — Noto Sans JP(lorem ipsum dolor)
Bold — Noto Sans JP 15px / 700(--font-family-bold, lorem ipsum)
03 / Works — editorial lorem ipsum

Selected Works

works lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur. UI lorem ipsum dolor. lorem ipsum dolor sit(1.414:1).

IMAGE
lorem ipsum dolor
Branding / 2013–
IMAGE
lorem ipsum dolor
Branding / 2008–
IMAGE
HOTEL THE MITSUI
Creative Direction / 2020
IMAGE
lorem ipsum
Character / 2010
04 / Buttons — ghost

Buttons

lorem ipsum dolor sit amet consectetur adipiscing. lorem＋lorem ipsum dolor sit amet consectetur. lorem ipsum #f7f7f7 / lorem #a3a3a3 lorem ipsum dolor.

works lorem
Ghost(lorem / radius 4px)
contact
Ghost pill（radius 9999px）
lorem ipsum
Dark(#141414 lorem / lorem)
lorem ipsum →
Transparent(#a3a3a3 lorem)
05 / Forms

Forms

lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor #141414 ＋lorem ipsum dolor.

lorem ipsum — border: #d6d6d6, radius: 4px
lorem ipsum — border: #141414 + lorem ipsum dolor
lorem — border: #b23b32(lorem ipsum dolor sit amet consectetur)
06 / Elevation

Depth & Elevation

lorem ipsum dolor, lorem / lorem ipsum dolor / lorem ipsum dolor sit amet. lorem ipsum dolor.

Level 0: Flat
lorem, lorem ipsum dolor sit(lorem)
Level 1
0 1px 3px rgba(20,20,20,0.06)
Level 2
0 8px 24px rgba(20,20,20,0.10)
07 / Layout — Spacing Scale

Spacing

--spacing-* lorem ipsum dolor(1,2,3,5,8,13,21,34)lorem ipsum dolor sit. base=16px lorem ipsum. lorem ipsum 6.19vw.

xs 4
sm 8
md 16
lg 24
xl 40
2xl 64
3xl 104