Design System Inspiration of Digital Agency Design System (DADS)

1. Visual Theme & Atmosphere

The Digital Agency Design System (デジタル庁デザインシステム, DADS) is the official design system of Japan's Digital Agency (デジタル庁), published openly at design.digital.go.jp/dads/ under CC BY 4.0. Its job is the opposite of a consumer brand's: not to delight or differentiate, but to make government services legible, accessible, and trustworthy for every citizen — including those on low-end devices, with low vision, or with low digital fluency. The result is a system of deliberate, almost austere clarity. The canvas is pure white (#ffffff); body text sits in a calm near-black (#333333) — softened off pure black for long-form readability — and the entire identity hangs on a single confident government blue (#0017c1).

That blue does two jobs. As a solid fill (#0017c1, the search-submit button) it is "the action," and as a darker text-weight variant (#00118f) it carries every link, every card heading, and every interactive label on white. This two-step blue — a saturated fill for surfaces, a deeper navy-blue for text-on-white — is the system's core contrast strategy, chosen so that link text clears WCAG contrast against white while filled buttons stay vivid. There is no second accent hue competing for attention; semantic colour is reserved strictly for meaning (error red #ec0000, success green #197a4b).

The typographic voice is unmistakably Japanese-civic: the stack leads with Noto Sans JP ("Noto Sans", "Noto Sans JP", system-ui, sans-serif), the open-source CJK workhorse chosen precisely because it renders consistently across every government device and platform without licensing friction. Body runs at a generous 17px with a roomy 1.7 line-height — wide leading is a CJK-legibility decision, giving dense kanji and kana room to breathe. Headlines step up to Bold (weight 700) at 20px (page title) and 32px (section) but never shout; weight, not size, carries hierarchy. Depth is essentially absent — box-shadow: none across the hero, nav, cards, and buttons. Separation comes from thin #949494 hairlines, flat grey surfaces (#f2f2f2, #e6e6e6), and an 8px/16px radius scale that reads as friendly-but-serious. This is design as public infrastructure: quiet, accessible, and built to be copied by every ministry.

Key Characteristics:

• Single government blue: solid fill #0017c1 for actions, deeper #00118f for text-on-white links/headings
• Noto Sans JP as the mandated open-source CJK typeface — consistent cross-device government rendering
• Near-black #333333 body text instead of pure black — softer for long-form civic reading
• Generous CJK line-height (1.7 on 17px body) for kanji/kana legibility
• Flat, shadow-free system — box-shadow: none; separation via #949494 hairlines and grey surfaces
• Restrained radius scale (8px inputs/buttons, 16px cards) — approachable but institutional
• Semantic colour reserved for meaning only — error red #ec0000, success green #197a4b
• Accessibility-first: high contrast, large 48–56px touch targets, CC BY 4.0 openness

2. Color Palette & Roles

Primary

• Government Blue (#0017c1): Primary action colour. Solid fill on the search-submit button (rgb(0, 23, 193)), and the 1px border + text colour of outline buttons. The system's single "action" hue.
• Link Blue (#00118f): Deeper navy-blue (rgb(0, 17, 143)) used for all text-on-white links, card headings (H3), and inline link buttons. The text-weight companion to the fill blue, tuned for contrast against white.
• Pure White (#ffffff): Page background, card surfaces, text on the blue fill.

Text Hierarchy

• Ink (#333333): Default body and heading text (rgb(51, 51, 51)) — near-black, the dominant foreground colour across the page.
• Ink Strong (#1a1a1a): Input field text (rgb(26, 26, 26)) — a slightly deeper near-black for entered values.
• Pure Black (#000000): Occasional maximum-contrast text accent.
• Muted (#666666): Secondary text and the homepage search-input border (rgb(102, 102, 102)).
• Muted Alt (#767676): Tertiary / placeholder-level grey (rgb(118, 118, 118)), the minimum AA-passing grey on white.

Surface & Borders

• Hairline (#949494): Card and container border (rgb(148, 148, 148)) — the primary separation device in this shadow-free system.
• Surface Grey (#f2f2f2): Flat tinted surface (rgb(242, 242, 242)) for content blocks and code samples.
• Surface Alt (#e6e6e6): A darker grey surface (rgb(230, 230, 230)) for alternating / nested blocks.
• Tint Blue (#e8f1fe): Soft blue tint (rgb(232, 241, 254)) for informational chips and hover backgrounds.
• Tint Blue Selected (#d9e6ff): Stronger blue tint (rgb(217, 230, 255)) for selected/active states.

Semantic

• Error Red (#ec0000): Error text and destructive indicators (rgb(236, 0, 0)).
• Success Green (#197a4b): Success and confirmation indicators (rgb(25, 122, 75)).

3. Typography Rules

Font Family

• Primary: Noto Sans JP, declared as the stack "Noto Sans", "Noto Sans JP", -apple-system, system-ui, sans-serif. The open-source CJK typeface is mandated so every government surface renders identically without font-licensing barriers.

Hierarchy

Principles

• Weight carries hierarchy, not just size: Headings are Bold (700) while body stays Regular (400); the jump from 16px body to 20px heading is modest, so weight does the heavy lifting.
• Generous CJK leading: The 17px body runs at 1.70 line-height (28.9px) — wide leading gives kanji and kana density room to remain legible.
• One typeface, every surface: Noto Sans JP is the sole family. No display/body split, no decorative type — consistency across ministries and devices is the goal.
• Civic restraint: No italics, no condensed weights, no letter-spacing tricks. The type reads as neutral, official, and accessible.

4. Component Stylings

Buttons

Filled (Primary)

• Background: #0017c1
• Text: #ffffff
• Radius: 8px
• Padding: 8px 16px
• Height: 48px
• Font: 16px Noto Sans JP weight 700
• Hover: #00118f background
• Use: Primary action — search submit ("検索"), key CTAs

Outline (Secondary)

• Background: #ffffff
• Text: #0017c1
• Border: 1px solid #0017c1
• Radius: 8px
• Padding: 12px 16px
• Height: 56px
• Font: 16px Noto Sans JP weight 700
• Hover: #e8f1fe background tint
• Use: Secondary actions — section anchor links ("ヘッダーコンテナ: 概要")

Text Link

• Text: #00118f
• Font: 17px Noto Sans JP weight 400
• Use: Inline link button (e.g. "v2.0.0以降のFigmaファイル")

Inputs & Forms

Text Input / Search Box

• Background: #ffffff
• Text: #1a1a1a
• Border: 1px solid #666666
• Radius: 8px
• Padding: 0 16px (48px left pad when icon present)
• Height: 48px
• Font: 16px Noto Sans JP weight 400
• Focus: blue #0017c1 border
• Use: Search box and standard text fields

Cards & Containers

Navigation Card

• Background: #ffffff
• Text: #333333
• Border: 1px solid #949494
• Radius: 16px
• Padding: 24px
• Use: Content navigation cards (はじめに / ガイダンス / 基本デザイン) — heading in Link Blue #00118f, no shadow

Badges & Chips

Informational Chip

• Background: #e8f1fe
• Text: #00118f
• Radius: 8px
• Font: 16px Noto Sans JP weight 400
• Use: Selected / informational chip tint

Error Indicator

• Text: #ec0000
• Font: 16px Noto Sans JP weight 400
• Use: Field-level error message colour

Navigation

• Background: #ffffff
• Text: #333333
• Font: 16px Noto Sans JP weight 400
• Padding: 10px 16px
• Active: Link Blue #00118f text + 2px bottom border #0017c1
• Use: Top horizontal header nav (はじめに / ガイダンス / 基本デザイン / コンポーネント / リソース / お知らせ)

---

Verified: 2026-06-17 (omd:add-reference CREATE — Tier 1 live inspect) Tier 1 sources: https://design.digital.go.jp/ (DADS homepage, live computed style); https://design.digital.go.jp/dads/components/button/ (button component page, live computed style — filled/outline buttons + semantic colour scan) Tier 2 sources: getdesign.md/digital-agency-jp — not listed (government DS, outside coverage); styles.refero.design — not listed Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: 8px
• Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px
• Notable: Card padding lands at 24px (measured); nav items use 10px/16px padding for comfortable 44px+ touch targets

Grid & Container

• Centered content column with a fixed header containing the title, nav, and search box
• The homepage groups system entry points as a grid of bordered navigation cards (16px radius, #949494 hairline)
• Sections separate by flat grey surfaces (#f2f2f2, #e6e6e6) and hairlines rather than elevation
• Component docs use a left rail + content layout typical of documentation systems

Whitespace Philosophy

• Clarity over density: Government content prioritises scannability — generous vertical rhythm and 1.7 body leading keep dense Japanese text readable.
• Flat segmentation: blocks separate by background tint and #949494 hairlines, never by shadow.
• Touch-first sizing: interactive targets sit at 44–56px tall for accessibility on touch devices.

Border Radius Scale

• Small (8px): buttons, inputs, chips — the workhorse
• Medium (16px): cards and content containers
• Full (9999px): pills where used

6. Depth & Elevation

Shadow Philosophy: DADS is a near-shadowless system. Live inspection found box-shadow: none across the hero, header, navigation cards, and buttons. Depth and grouping are communicated entirely through flat tinted surfaces (#f2f2f2, #e6e6e6) and thin #949494 hairlines. This is a deliberate accessibility-and-performance choice: flat surfaces render predictably across the full range of government-citizen devices, avoid the visual noise of stacked shadows, and keep focus on content and high-contrast colour. When emphasis is needed, the system reaches for the blue (#0017c1 fill / #00118f text) or the blue tints (#e8f1fe, #d9e6ff), never elevation.

7. Do's and Don'ts

Do

• Use solid government blue (#0017c1) for filled primary actions and outline-button borders/text
• Use the deeper Link Blue (#00118f) for all text-on-white links and card headings
• Use Noto Sans JP across every surface — it's the mandated open-source CJK typeface
• Use near-black #333333 for body text instead of pure black
• Give body text generous line-height (1.7 on 17px) for CJK legibility
• Separate content with #949494 hairlines and #f2f2f2/#e6e6e6 grey surfaces, not shadows
• Keep radius restrained — 8px on buttons/inputs/chips, 16px on cards
• Reserve red (#ec0000) and green (#197a4b) strictly for error/success meaning
• Keep touch targets large (44–56px) for accessibility

Don't

• Add a second accent hue — blue is the only brand colour; colour beyond it must carry meaning
• Use drop shadows for elevation — DADS is a flat, shadow-free system
• Use pure black (#000000) for body text — reserve near-black #333333
• Use the fill blue (#0017c1) for small text on white where contrast is tight — use Link Blue #00118f
• Substitute a non-CJK or licensed font — Noto Sans JP is mandated for cross-device consistency
• Use sharp 0px corners or oversized radii — stay in the 8–16px range
• Crowd Japanese text with tight line-height — keep CJK leading generous
• Use red or green decoratively — they are semantic-only

8. Responsive Behavior

Breakpoints

Touch Targets

• Buttons at 48–56px height with 8–16px padding — comfortably tappable
• Search input at 48px height with a clear 48px icon affordance
• Nav items with 10px/16px padding land at 44px tall — meeting accessibility minimums

Collapsing Strategy

• Header nav: horizontal links → hamburger menu button on mobile
• Navigation card grid: multi-column → 2-up → stacked single column
• Section headings (32px) reduce on mobile while weight 700 is maintained
• Grey/white alternating sections maintain full-width treatment

Image Behavior

• Figma/component preview images and diagrams carry no shadow at any size, consistent with the flat system
• Cards maintain 16px radius across breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Primary action (filled): Government Blue (#0017c1)
• Link / heading text: Link Blue (#00118f)
• Background: Pure White (#ffffff)
• Body text: Ink (#333333)
• Input text: Ink Strong (#1a1a1a)
• Muted text / border: Muted (#666666), Muted Alt (#767676)
• Hairline: #949494
• Surfaces: Surface Grey (#f2f2f2), Surface Alt (#e6e6e6)
• Blue tints: #e8f1fe, #d9e6ff
• Error: Red (#ec0000), Success: Green (#197a4b)

Example Component Prompts

• "Create a government service header on white. Title at 20px Noto Sans JP weight 700, color #333333. Horizontal nav links at 16px weight 400, #333333, active item gets #00118f text + 2px bottom border #0017c1. Search box: white bg, 1px solid #666666 border, 8px radius, 48px tall, with a filled blue submit button (#0017c1 bg, white text, 8px radius, 16px weight 700)."
• "Design a navigation card: white background, 1px solid #949494 border, 16px radius, 24px padding, no shadow. Heading at 20px Noto Sans JP weight 700 in #00118f. Body at 17px weight 400, line-height 1.7, #333333."
• "Build an outline button: white bg, 1px solid #0017c1 border, #0017c1 text, 8px radius, 16px Noto Sans JP weight 700, 56px tall. Hover fills #e8f1fe."
• "Create a form field with error: input at white bg, 1px solid #666666, 8px radius, 48px tall; on error show #ec0000 message text below at 16px Noto Sans JP."

Iteration Guide

1. Blue is the only brand colour — #0017c1 for fills/borders, #00118f for text links and headings
2. Noto Sans JP everywhere; weight 700 for headings/buttons, 400 for body
3. No shadows — separate with #949494 hairlines and #f2f2f2/#e6e6e6 surfaces
4. Body text is #333333 (never pure black); give it 1.7 line-height for CJK
5. Radius stays 8px (buttons/inputs/chips) to 16px (cards)
6. Red #ec0000 and green #197a4b are semantic-only — never decorative
7. Keep touch targets 44–56px for accessibility

---

10. Voice & Tone

DADS's voice is plain, neutral, and accessible — the register of a public institution that must be understood by every citizen regardless of digital fluency. Copy is functional Japanese: section labels are direct nouns ("はじめに" / Introduction, "ガイダンス" / Guidance, "基本デザイン" / Basic Design, "コンポーネント" / Components), and instructions favour clarity over personality. There is no marketing tone, no superlatives, no exclamation — the system documents itself with the calm precision of a public manual.

Voice samples (verbatim from live site):

• "デジタル庁デザインシステムβ版" — site title, states beta status openly. (verified live 2026-06-17, document.title)
• "デジタル庁デザインシステムの構成" ("Composition of the Digital Agency Design System") — section H2, neutral explanatory framing. (verified live 2026-06-17)
• "本ウェブサイトのコンテンツ" ("Contents of this website") — section H2, plain descriptive label. (verified live 2026-06-17)

Forbidden register: marketing superlatives, emotional appeals, exclamation-heavy hype, undefined jargon, anything that reads as promotional rather than informational. Government content is for everyone — clarity beats cleverness.

11. Brand Narrative

The Digital Agency Design System (デジタル庁デザインシステム, DADS) is published by Japan's Digital Agency (デジタル庁), the government body established on September 1, 2021 to lead the digital transformation of Japan's public sector and to standardise the quality of government digital services. DADS exists to solve a structural problem: across hundreds of ministries, agencies, and local governments, public websites and services had been built inconsistently — varying in accessibility, usability, and trust. A shared, open design system lets every government team build services that are consistent, accessible, and recognisably part of the same trustworthy whole.

DADS is published openly at design.digital.go.jp/dads/ under a CC BY 4.0 licence, with design language, accessibility and usability guidelines, Figma libraries, and ready-to-use HTML and React component snippets. The "β版" (beta) labelling — visible in the live header as "v2.14.0" — is itself a statement of posture: the system is iterated in public, versioned transparently, and treated as evolving infrastructure rather than a finished brand artifact.

What DADS refuses, visible in its design: the visual flourish and persuasion of consumer branding (no second accent colour, no shadows, no decorative type) and the inconsistency of ad-hoc government sites. What it embraces: a single high-contrast government blue, the mandated open-source Noto Sans JP for universal CJK rendering, generous accessible spacing, and an openness (CC BY 4.0, public versioning) that mirrors its civic mission — design as shared public infrastructure.

12. Principles

1. Accessibility is the baseline, not a feature. High contrast, large touch targets, and a mandated legible CJK typeface are non-negotiable. UI implication: meet WCAG contrast (Link Blue #00118f for text on white), keep targets 44px+, never rely on colour alone to convey meaning.
2. One blue, meaning-only colour. A single brand blue carries identity; every other colour must mean something. UI implication: use #0017c1/#00118f for brand and action; reserve red #ec0000 and green #197a4b strictly for error/success.
3. Consistency across every ministry. The system's value is that a citizen recognises the same patterns everywhere. UI implication: reuse the documented components and tokens verbatim; do not invent local variants.
4. Flat clarity over decoration. Trust comes from legibility, not visual flourish. UI implication: no shadows; separate with hairlines and grey surfaces; keep type and layout calm.
5. Open and iterated in public. CC BY 4.0, public versioning, and a β posture make the system improvable by everyone. UI implication: design for reuse and forking; document rationale and accessibility notes alongside every component.

13. Personas

Personas below are fictional archetypes informed by publicly observable DADS user segments (government service teams, ministry developers, and the citizens they serve), not individual people.

佐藤 健, 38, 東京. A front-end developer on a ministry digital-services team. Pulls DADS HTML/React snippets and Figma libraries to build a public-benefit application form. Values that the components ship with accessibility built in, so he doesn't have to re-derive contrast ratios and focus states for every project.

田中 美咲, 45, 大阪. A service designer at a local government office modernising a citizen-facing portal. Uses the DADS guidelines to justify design decisions to non-design stakeholders — the documented rationale and the CC BY 4.0 openness make it easy to adopt without procurement friction.

鈴木 一郎, 67, 地方都市. A citizen using a government service on an older Android phone with larger text settings. Never sees DADS by name, but benefits directly: high-contrast blue links he can read, large tappable buttons, and a calm uncluttered layout that doesn't overwhelm him.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is minimal, functional, and quiet — consistent with an accessibility-first government system. Disclosures and accordions expand at motion-standard / ease-enter; hover and focus respond at motion-fast. No bounce, no spring, no decorative animation — public infrastructure signals steadiness and predictability. Under prefers-reduced-motion: reduce, all transitions collapse to instant and the interface remains fully functional. Motion must never be the sole carrier of meaning.