AI lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit lorem ipsum MOSH

lorem ipsum / lorem / lorem / lorem ipsum / lorem ipsum — lorem ipsum dolor sit amet consectetur, MOSH lorem ipsum.

lorem ipsum dolor lorem ipsum dolor
01 — Colors

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor(gray-900)lorem CTA, Tailwind v4 lorem ipsum dolor sit amet consectetur.

Brand

Brand 400
#fa6f78
Brand Deep
#f2414c

CTA / Buttons

Primary Button
#111827 (gray-900)
Hover
#374151 (gray-700)
Secondary
#ffffff
Secondary Hover
#f3f4f6 (gray-100)

Semantic

Link
#2559eb
Info
#0369a1
Success
#15803d
Warning
#ae4f0f
Danger
#d92500

Gray Scale

gray-900
#111827
gray-700
#374151
gray-600
#4b5563
gray-400
#9ca3af
gray-300
#d1d5db
gray-200 / Border
#e5e7eb
gray-100
#f3f4f6
Surface (4% α)
rgba(17,24,39,0.04)
02 — Typography

lorem ipsum dolor sit

lorem ipsum dolorIBM Plex Sans JP, UI lorem ipsumsystem-ui, lorem ipsumdegular(lorem ipsum dolorOutfit lorem).

Hero H1(lorem)60 / 1.375 / 400 / brand-deep
lorem ipsum dolor sit
About H1 / H248 / 1.0 / 400 / brand
lorem ipsum dolor sit amet
Origin H236 / 1.111 / 700 / brand
lorem ipsum dolor
Section H332 / 1.375 / 400 / brand-deep
AI lorem ipsum dolor sit amet consectetur
Subhead H424 / 1.375 / 400 / brand-deep
lorem ipsum dolor
Lead16 / 2.0 / 500 / brand / 0.1em
lorem ipsum / lorem / lorem / lorem ipsum / lorem ipsum lorem ipsum dolor sit amet consectetur, MOSH lorem ipsum
Body16 / 1.5 / 400 / #09090b
SNS lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur.
Caption14 / 1.43 / 700 / #09090b
lorem ipsum dolor
Small12 / 1.625 / 500 / gray-900
lorem: lorem lorem lorem note“lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing”lorem
Display Number72 / 1.0 / 100 (thin) / brand
90,000
Stat Number + Unit48 / 1.0 / 200 + 20 / 1.4 / 200
400 lorem
03 — Stats Showcase

lorem ipsum

lorem ipsum dolor sit amet consectetur(degular)lorem hairline / extralight. lorem ipsum dolor.

90,000lorem
lorem ipsum dolor sit
400lorem
lorem ipsum
25lorem ipsum
lorem ipsum dolor
04 — Buttons

lorem

lorem ipsum(gray-900). lorem ipsum dolor/lorem ipsum dolor, CTA lorem ipsum dolor.

Primary / Secondary / Ghost

lorem ipsum dolor lorem ipsum dolor sit lorem ipsum Disabled

Brand Pill / Badge

lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor

Outlined Display CTA

lorem ipsum dolor sit amet

Surface Chips

05 — Cards

lorem ipsum dolor sit

Tailwind v4 lorem. lorem ipsum dolor sit 1px, lorem 8px lorem ipsum dolor.

lorem ipsum dolor / lorem
lorem ipsum dolor sit
lorem ipsum dolor sit amet / lorem ipsum dolor sit
lorem / lorem ipsum
lorem ipsum dolor sit
lorem 6 lorem, lorem ipsum dolor sit amet consectetur
lorem ipsum
lorem ipsum dolor sit amet consectetur
lorem 2 lorem / 60 lorem / lorem ipsum dolor
06 — Forms

lorem ipsum

lorem ipsum dolor border lorem#111827(gray-900)lorem＋lorem ipsum.

Default / Focus

lorem ipsum dolor sit amet consectetur

Error

8 lorem ipsum dolor sit amet consectetur
07 — About Block

lorem ipsum dolor sit

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

lorem ipsum dolor sit amet

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

lorem ipsum dolor sit amet
08 — Elevation & Radius

lorem ipsum

lorem ipsum dolor sit, lorem ipsum dolor sit(surface)lorem 1px lorem ipsum dolor sit.

Surface Stack

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

Radius Scale

6px — rounded-md(lorem / lorem UI)
8px — rounded-lg(lorem / lorem CTA)
20px — rounded-[1.25rem](lorem)