Who We Are

lorem ipsum dolor, lorem ipsum dolor.

lorem ipsum dolor sit amet consectetur adipiscing elit sed. lorem ipsum dolor sit computed style lorem(2026-05-09 lorem)lorem ipsum, lorem, lorem ipsum dolor, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.

See More →
01 / Colors

Color Palette

lorem ipsum dolor sit amet consectetur
Brand
Brand Red
#ff1a1a
CTA border / text links / badges (NOT as background)
Neon Yellow
#e7ff33
Category badge bg
Light Pink
#ff8080
Category badge bg
Neutral — Blue-Tinted Dark Scale
Dark Navy
#1a1a23
Text / footer bg (B>R=G)
Dark Gray
#222222
Secondary text
Medium Gray
#99999d
Caption / date
Light Border
#e5e5e6
Dividers / card border
Warm Beige
#f4eee8
Section bg (R>G>B)
Light Surface
#f5f5f5
Card bg / section
Near White
#fafafa
Subtle bg
White
#ffffff
Page bg / card surface
Semantic
Danger
#dc2626
Error / delete
Success
#16a34a
Completion
Warning
#d97706
Caution
Footer / Dark Section
Dark Navy BG
#1a1a23
Footer / dark section bg
Aa
Text on Dark
#ffffff
White text on dark navy
Link
Link on Dark
#ff1a1a
Brand Red links on dark bg
02 / Typography

Type Hierarchy

Inter (EN) + Zen Kaku Gothic New (JP) / font-feature-settings: "pwid"
Who We Are
Inter 80px / 700 / lh 1.05 / ls -0.04emHero EN
What We Believe
Inter 42px / 700 / lh 1.15 / ls -0.03emSection Head EN
lorem ipsum dolor sit
Zen Kaku Gothic New 42px / 500 / lh 1.4Section Head JP
Creative Solutions
Inter 32px / 500 / lh 1.2 / ls -0.04emSubsection EN
lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur.
Zen Kaku Gothic New 22px / 500 / lh 1.6 / ls 0.03emLead Text
lorem, lorem ipsum dolor sit amet consectetur
Zen Kaku Gothic New 19px / 500 / lh 1.4Article Title
lorem ipsum dolor. lorem ipsum dolor line-height lorem 1.15 lorem ipsum dolor. lorem ipsum dolor sit amet consectetur adipiscing.
Zen Kaku Gothic New 16px / 400 / lh 1.15Body
lorem ipsum dolor. lorem ipsum dolor line-height lorem 1.5 lorem 1.8 lorem, lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing.
Zen Kaku Gothic New 15px / 400 / lh 1.7Body (Wide)
lorem ipsum dolor / lorem ipsum dolor
Zen Kaku Gothic New 14px / 700 / lh 1.4Small Bold
Navigation · About Us · Services · News
Inter 14px / 400 / lh 1.4Nav EN
2026.05.09 — lorem ipsum dolor / lorem ipsum
Zen Kaku Gothic New 13px / 400 / lh 1.5 / color #99999dCaption
03 / Article

Editorial Sample

lorem ipsum dolor sit amet consectetur adipiscing
The Power of Sei-katsu-sha Insight
lorem ipsum dolor sit, lorem ipsum dolor
2026.05.09 — Case Study · Brand Strategy
lorem ipsum dolor“lorem”lorem ipsum dolor. lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing.

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

Methodology

lorem ipsum dolor

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

Insight: lorem ipsum dolor sit amet consectetur“lorem ipsum dolor”lorem ipsum dolor sit amet consectetur, “lorem ipsum dolor sit amet consectetur”lorem ipsum dolor sit amet.

Outcome

lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt, lorem 3 lorem ipsum dolor 120%lorem ipsum dolor.

04 / Buttons

Button Variations

Outline CTA / Text Link / Nav Link / Category Badge
See More →
Outline CTA (lg) — 4px radius / #ff1a1a border
See More
Outline CTA — 4px radius / #ff1a1a border
The H Magazine →
Text Link — #ff1a1a / no border
About Us
Nav Link — 8px radius / transparent
Category Badges
Service Report News
badge-yellow #e7ff33 / badge-pink #ff8080 / badge-outline #ff1a1a border — all 4px radius
Hover State (Outline CTA)
Default
Default state
Hover
Hover state (bg inverts to #ff1a1a)
05 / Cards

Card Components

White surface / 8px radius / flat design
Case Study 01
Service

lorem ipsum dolor sit amet consectetur adipiscing

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

2026.04.15
Report
Report

2026 lorem lorem ipsum dolor sit amet

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

2026.03.01
News
News

lorem, lorem ipsum dolor sit amet consectetur adipiscing

AI lorem ipsum dolor sit amet consectetur adipiscing / lorem ipsum.

2026.05.01 Read More →
06 / Forms

Form Elements

Default / Focus / Error — 4px radius / focus: #1a1a23 border
Default — border #e5e5e6 / radius 4px
Focus — border #1a1a23 / shadow 3px
Please enter a valid phone number.
Error — border #dc2626 / shadow 3px
07 / Elevation

Depth & Elevation

Mostly flat. Depth via surface colors (#1a1a23, #f4eee8, #f5f5f5)
Level 0: Flat
none (default)
Elevation 1
0 2px 8px rgba(26,26,35,0.06)
Elevation 2
0 4px 16px rgba(26,26,35,0.08)
Elevation 3
0 8px 32px rgba(26,26,35,0.12)
Surface Contrast (primary depth mechanism)
Dark Navy
#1a1a23
Warm Beige
#f4eee8
Light Surface
#f5f5f5
08 / Layout

Spacing & Radius

8px grid / container max-width 1200px
Spacing Scale (8px base)
XS
4px
S
8px
M
16px
L
24px
XL
48px
XXL
80px
Border Radius Scale
Small
4px
Medium
8px
Large
16px