lorem ipsum dolor sit amet consectetur(DADS)
lorem ipsum dolor, lorem ipsum dolor sit amet consecteturdigital-go-jp/design-system-example-components-html lorem ipsum(MIT lorem ipsum)lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum digital.go.jp lorem ipsum dolor sit amet consectetur adipiscing elit.
lorem ipsum dolor sit(11 lorem × 13 lorem)
DADS lorem11 lorem × 13 lorem = 143 loremlorem ipsum dolor sit amet consectetur. 50 lorem ipsum dolor, 1200 lorem ipsum. lorem blue / red / green lorem 3 lorem ipsum.
lorem 11 lorem: blue / light-blue / cyan / green / lime / yellow / orange / red / magenta / purple
lorem ipsum dolor:blue-1000 #00118f = lorem / focus,blue-900 #0017c1 = lorem default,yellow-300 #ffd43d = focus ring
lorem ipsum dolor(12 lorem Solid Gray)
420 lorem 536 lorem ipsum dolor sitlorem WCAG lorem ipsum dolor sit(AAA 4.5:1 / AA 3:1)lorem ipsum dolor sit amet.
lorem:solid-gray-800 #333 = body text、solid-gray-700 #4d4d4d = sub text、solid-gray-536 #767676 = placeholder（AA 4.5:1）、solid-gray-600 #666 = input border
lorem ipsum dolor sit
lorem ipsum dolor sit-1(lorem)lorem -2(lorem)lorem 2 loremlorem, icon lorem text lorem ipsum dolor.
Success
= green-600 #259d63
--color-semantic-success-2
= green-800 #197a4b
Error
= red-800 #ec0000
--color-semantic-error-2
= red-900 #ce0000
Warning Yellow
= yellow-700 #b78f00
--color-semantic-warning-yellow-2
= yellow-900 #927200
Warning Orange
= orange-600 #fb5b01
--color-semantic-warning-orange-2
= orange-800 #c74700
5 lorem ipsum Typography Utility
lorem ipsum:dads-u-{prefix}-{size}{weight}-{lineHeight}
lorem:dads-u-std-17N-170 = Standard / 17px / Normal / line-height 1.70
| Prefix | lorem ipsum | Sizes (px) | Line Height | Letter Spacing | lorem |
|---|---|---|---|---|---|
| dsp | Display | 64, 57, 48 | 1.40 | 0 | lorem ipsum |
| std | Standard | 45 | 1.40 | 0 | H1 |
| 36 | 1.40 | 0.01em | H1 lorem | ||
| 32, 28 | 1.50 | 0.01em | H2 / H3 | ||
| 26, 24, 22, 20 | 1.50 | 0.02em | lorem ipsum | ||
| 18 | 1.60 | 0.02em | sub-heading | ||
| 17, 16 | 1.70 | 0.02em | lorem base | ||
| dns | Dense | 17, 16, 14 | 1.20, 1.30 | 0 | lorem ipsum (table lorem) |
| oln | One Line | 17, 16, 14 | 1.00 | 0.02em | 1 lorem UI |
| mono | Monospace | 17, 16, 14 | 1.50 | 0 | lorem / lorem ( --font-family-mono) |
letter-spacing lorem 3 lorem(0 / 0.01em / 0.02em)lorem ipsum dolor sit amet. “lorem 0.02em”lorem ipsum, 45px lorem0, 36–28px lorem0.01em, 26px lorem0.02em lorem.
10 lorem ipsum Heading Scale
lorem 64
lorem 57
lorem 45 (H1 lorem ipsum dolor)
lorem 36
lorem 32 (H2)
lorem 28 (H3)
lorem 24 (H4)
lorem 20
lorem 18
lorem 16
Heading Variants（chip / rule）
data-chip = lorem ipsum dolor(width: 1em/3)
lorem ipsum dolor
data-rule="4" = lorem(width: 4px)
lorem ipsum dolor
Button (4 lorem × 3 lorem)
Solid Fill
Outline
Text
Focus Indicator (WCAG 2.2 lorem ipsum)
lorem ipsum dolor4px lorem outline + 2px yellow-300 loremlorem ipsum
box-shadow: 0 0 0 2px var(--color-primitive-yellow-300);
Input Text (3 lorem × lorem ipsum)
lorem ipsum dolor: solid-gray-700 lorem ipsum dolor sit amet
lorem ipsum dolor sit amet
Notification Banner (5 lorem)
blue-900 lorem border lorem ipsum dolor sit amet consectetur.
lorem ipsum dolor sit amet consectetur. lorem ipsum IDP-2026-04-30-001234 lorem.
lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur.
lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet.
solid-gray-536 lorem border lorem ipsum dolor sit amet consectetur.
8 lorem Elevation
DADS lorem8 lorem ipsum dolor sit ametlorem ipsum. lorem elevation lorem“lorem ipsum + lorem ipsum”lorem 2 lorem shadow lorem ipsum dolor.
lorem ipsum digital.go.jp lorem ipsum dolor sit amet consectetur, Drawer / Modal / Card lorem ipsum dolor sit amet consectetur adipiscing.
Link lorem 5 lorem State Machine
lorem ipsum dolor 5 lorem.visited lorem magenta, active lorem orange, focus lorem + lorem ipsum dolor. Hover loremlorem ipsum / lorem ipsum dolor sit(lorem ipsum dolor).
lorem ipsum: lorem ipsum dolor sit amet consectetur(lorem ipsum dolor sit amet consectetur). lorem ipsum dolor.
lorem ipsum: lorem Tail Icon lorem.
lorem ipsum 4 lorem ipsum(lorem ipsum dolor)
lorem ipsum dolor sit amet consecteturlorem ipsum dolor sit ametlorem ipsum dolor 4 lorem ipsum dolor sit.
FRONT ICON
lorem ipsum dolor sit amet consectetur. lorem ipsum.
LEAD ICON
lorem ipsum dolor. lorem ipsum dolor sit.
END ICON
lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur.
lorem ipsum dolor: lorem ipsum dolor sit amet consectetur(lorem ipsum dolor). lorem ipsum dolor 4.5:1 lorem. lorem ipsum dolor sit amet consectetur 44×44 CSS px lorem ipsum dolor sit. lorem ipsum doloralt=""(aria-label lorem).
lorem ipsum / lorem / lorem ipsum
Breakpoint lorem 768px 1 lorem
@media (min-width: 48rem) { /* ≥ 768px */ }
“lorem ipsum dolor sit 1 lorem ipsum dolor”lorem ipsum dolor. XS/SM/MD/LG/XL lorem ipsum dolor sit amet consectetur. lorem ipsum 12 lorem, lorem ipsum dolor sit amet 2 lorem(body 16px lorem 32px).
Spacing lorem 3–5 lorem Modular Scale
8px
(1×)
24px
(3×)
64px
(8×)
lorem ipsum dolor: 1× / 3× / 8× lorem 3 lorem.
lorem ipsum:3–5 loremlorem ipsum modular scale. lorem(16/32/48 lorem)lorem ipsum dolor sit amet, lorem ipsum.
Corner Shapes 5 lorem
None
0
Small
8px
Medium
16px (12 lorem)
Large
32px (16 lorem)
Full
50%
lorem(lorem ≫ lorem)lorem radius lorem: Medium 16→12px, Large 32→16px. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.
lorem ipsum dolor sit amet(37 lorem)
lorem ipsum dolordigital-go-jp/design-system-example-components-html lorem ipsum 37 lorem ipsum dolor sit. lorem UI lorem ipsum dolor sit amet consectetur adipiscing.
lorem ipsum dolor
rem lorem / border lorem px
font-size: calc(16 / 16 * 1rem);
padding: calc(8 / 16 * 1rem) calc(16 / 16 * 1rem);
border: 1px solid; ← px lorem border lorem ipsum
border-radius: calc(8 / 16 * 1rem);
lorem ipsum N px lorem ipsum dolor font-size lorem(lorem 16px)lorem ipsum dolor sit amet consectetur adipiscing.