lorem / lorem ipsum lorem ipsum dolor

Design System Preview
hacomono

lorem ipsum 1 lorem ipsum dolor sit amet consectetur. CSS lorem ipsum dolor#1a1a1a #767676 #eff1f4 …lorem ipsum dolor, lorem ipsum dolor 1 lorem ipsum dolor. loremfont-family lorem ipsum dolor sit 1 lorem, lorem ipsum 1 lorem. lorem ipsum dolor computed style loremtemplate.css lorem ipsum(2026-08-27 lorem).

#lorem ipsum dolor #lorem ipsum / lorem ipsum dolor sit amet #lorem ipsum
01 / Colors

lorem ipsum. lorem ipsum dolor sit amet

Brand — lorem 2 lorem CTA lorem ipsum dolor
hacomono Black
#1a1a1a
lorem. CSS lorem 90 lorem. lorem CTA lorem / lorem / lorem
Secondary Gray
#767676
lorem CTA lorem. 23 lorem. lorem CTA lorem ipsum dolor
Text Gray
#4f4f4f
lorem ipsum dolor. 4 lorem
Muted
#818181
lorem ipsum dolor. 6 lorem
Surface — lorem → lorem → lorem ipsum 3 lorem ipsum dolor
BG Top
#e9ebee
lorem ipsum dolor. 11 lorem
BG Sub
#f7f6f6
lorem ipsum dolor. lorem ipsum dolor. 21 lorem
Panel
#eff1f4
lorem / lorem ipsum. 30 lorem ipsum dolor
Card
#ffffff
lorem / lorem ipsum dolor sit amet. 100 lorem
Surface
#f2f2f2
lorem ipsum dolor sit. 8 lorem
Chip
#dadada
lorem ipsum dolor. 4 lorem
Shadow Face
#ebedef
lorem ipsum dolor sit. 3 lorem
Line
#d2d2d2
lorem. 39 lorem
⚠️ CSS lorem ipsum dolor sit amet
lorem ipsum dolor sitloremlorem
--color-base-primary#012677(lorem)lorem. HTML lorem012677 lorem ipsum 1 lorem
--color-base-secondary#FDD247(lorem)lorem
--color-base-footerBackground#011748(lorem)lorem. lorem ipsum dolor#eff1f4
--border-radius-button200px(lorem)lorem. lorem6px
--font-family-jaYakuHanJP, "Noto Sans JP", …lorem. lorem ipsum dolor 1 lorem

lorem ipsum dolorsdk.gig.goleadgrid.com lorem ipsum dolorLeadGrid(CMS)lorem ipsum dolor. HTML loremleadgrid lorem ipsum 143 lorem ipsum.lorem ipsum dolor sit, lorem ipsum dolor UI lorem ipsum dolor sit amet consectetur.

02 / Typography — lorem

lorem ipsum 1 lorem. lorem ipsum dolor 0.04em

lorem ipsum dolor sit amet
40px / 700 / line-height: 48px (1.2) / letter-spacing: 1.6px (0.04em)Display
lorem / lorem / lorem ipsum
lorem ipsum dolor sit amet consectetur
36px / 700 / line-height: 57.6px (1.6) / letter-spacing: normalh2 — 2 lorem ipsum dolor
lorem ipsum
36px / 700 / line-height: 41.4px (1.15) / letter-spacing: normalh2 — 1 lorem ipsum
lorem ipsum No.1
28px / 700 / line-height: 39.2px (1.4) / letter-spacing: 1.12px (0.04em)h2 — lorem ipsum dolor
lorem
32px / 700 / line-height: 36.8px (1.15) / letter-spacing: normalh1 — lorem ipsum dolor sit
lorem / lorem / lorem ipsum dolor sit
24px / 700 / line-height: 36px (1.5)h3 — lorem ipsum dolor
lorem ipsum dolor sit amet consectetur adipiscing
18px / 700 / line-height: 27px (1.5)h3
lorem ipsum, lorem ipsum dolor, lorem ipsum, lorem ipsum dolor sit, lorem ipsum dolor sit amet 1 lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing.
15px / 400 / line-height: 25.5px (1.7) / color: #1a1a1alorem(lorem ipsum)
lorem ipsum dolor sit amet / lorem ipsum dolor sit / lorem ipsum dolor sit amet consectetur. lorem ipsum dolor, lorem 1 lorem ipsum dolor sit amet consectetur.
14px / 400 / line-height: 22.4px (1.6)lorem(lorem)
lorem ipsum(1.15)lorem body lorem ipsum. lorem ipsum dolor sit amet consectetur adipiscing.
16px / 400 / line-height: 18.4px (1.15) ← body lorem ipsum. lorem ipsum dolor⚠️ lorem
TOP ＞ lorem ＞ lorem ipsum
12px / 400 / line-height: 18px (1.5) / color: #b0b0b0lorem ipsum
font-family(CSS lorem ipsum 1 lorem)
loremlorem
lorem ipsum"Yu Gothic", "lorem ipsum", YuGothic, "lorem ipsum dolor", sans-serif

※ template.css(390KB)lorem ipsumfont-family lorem 4 lorem, lorem 2 loremmonospace, 1 loreminherit。lorem ipsum dolor sit 1 lorem。
※ 4 lorem ipsum dolor sitWindows lorem macOS lorem ipsum dolorlorem. 1 lorem ipsum dolor sit amet consectetur.
※ yakuhanjp.css lorem CDN lorem ipsum dolor sit amet,lorem ipsum dolorYakuHanJP lorem ipsum dolor sit amet consectetur adipiscing。
※ lorem ipsum dolor sit amet consectetur adipiscingZen Kaku Gothic New(Google Fonts)lorem ipsum dolor sit.
※ font-feature-settings lorem ipsumnormal。palt lorem ipsum。
※ letter-spacing: 0.04em lorem CSS lorem 17 lorem.lorem ipsum dolor, loremnormal。

03 / Case Study — lorem ipsum dolor

lorem ipsum

lorem ipsum dolor sit amet, lorem ipsum dolor 15 lorem

lorem ipsum dolor sit amet 8 lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit 1 lorem ipsum 3 lorem ipsum dolor.

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

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

  • lorem ipsum dolor sit amet: 20 lorem → 5 lorem
  • lorem ipsum dolor sit: 1 lorem ipsum 3 lorem
  • lorem ipsum dolor sit amet: lorem ipsum 40 lorem ipsum

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

lorem ipsum
04 / Buttons

lorem ipsum, lorem ipsum dolor sit amet consectetur

lorem / lorem ipsum
Primary
#1a1a1a / #fff / radius 6px
padding 14px 12px 14px 24px
14px / 700
lorem ipsum dolor
Secondary
#767676 / #fff / radius 6px
padding / lorem ipsum Primary lorem
lorem ipsum
Outline
#fff / 1px solid #1a1a1a
radius 6px / 14px / 700
hacomono lorem
Outline (wide)
padding 14px 32px
lorem ipsum dolor
Load more
radius 4px(lorem 6px lorem)
padding 16px 13px 16px 32px
Chips & Badges — radius 2px / 5px. lorem ipsum dolor
#lorem ipsum dolor #lorem ipsum dolor sit #lorem ipsum lorem ipsum dolor

chip: #dadada / #4f4f4f / radius 2px / padding 3px 11px 4px(lorem ipsum)/ 12px / 700　｜　badge:#767676 / #fff / radius 5px / padding 6px / 13px・700

Large CTA — lorem ipsum dolor 2 lorem
lorem / lorem ipsum dolor
hacomono lorem ipsum dolor sit amet consectetur adipiscing lorem ipsum dolor
hacomono lorem ipsum dolor sit amet
05 / Cards

lorem ipsum radius 8px, lorem ipsum 6px

WEB lorem ipsum dolor sit amet

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

2026.08.20 ／ lorem ipsum

lorem ipsum dolor sit amet

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

2026.08.12 ／ lorem ipsum

lorem ipsum dolor sit amet consectetur

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

2026.07.30 ／ lorem ipsum
Nav Cards — #eff1f4 lorem / radius 6px / padding 36px 24px 24px 36px(lorem ipsum)
lorem lorem ipsum lorem ipsum lorem ipsum dolor
06 / Forms

Default / Focus / Error

Default — 1px solid #d2d2d2 / radius 6px
Focus — border #1a1a1a ＋ outline #d2d2d2
lorem ipsum dolor sit amet consectetur adipiscing

※ hacomono loremlorem ipsum dolor sit amet(CSS lorem ipsum dolor sit). lorem ipsum#4f4f4f lorem ipsum dolor sit amet consectetur.

07 / Elevation

lorem ipsum dolor sit. lorem ipsum dolor sit

Level 0
none
lorem ipsum dolor
Level 1
20px 20px 0 0 #f7f6f6
lorem 0. CSS 2 lorem
Level 1'
1.25rem 1.25rem 0 0 #eff1f4
lorem(rem lorem). 2 lorem
Level 2
0 4px 24px rgba(0,0,0,.25)
CSS lorem ipsum dolor sit. 2 lorem

lorem ipsum dolor sit amet consectetur. hacomono lorem ipsum“lorem ipsum dolor”lorem.

08 / Layout

radius / spacing / breakpoint

Radius Scale(rem lorem / CSS lorem)
lorempxloremlorem
0.5rem8px55 loremlorem / lorem
0.375rem6px20 loremlorem / lorem
1.25rem20px19 loremlorem ipsum dolor
0.25rem4px17 loremlorem ipsum dolor
50%—16 loremlorem ipsum dolor
0.3125rem5px6 loremlorem
0.5rem 0.5rem 0 08px lorem ipsum6 loremlorem ipsum dolor sit

lorem(9999px / 200px)lorem 1 lorem ipsum.

Spacing(gap lorem ipsum)
TokenValuelorem
XS0.375rem（6px）15 lorem
S0.5rem（8px）23 lorem
M0.75rem（12px）32 lorem ipsum
L1.25rem（20px）21 lorem
XL1.5rem（24px）17 lorem
XXL2rem（32px）14 lorem
Container & Breakpoints
loremloremlorem
Container75rem（1200px）7 lorem. lorem ipsum dolor50rem(800px, 6 lorem), lorem90rem(1440px, 2 lorem)
Mobilemax-width: 767px739 lorem. lorem ipsum 1 lorem
Desktopmin-width: 768px10 lorem