dads-foundations-core

Files (1)

• SKILL.md

SKILL.md (first lines)

# DADS Foundations Core

## Purpose and scope
This is the canonical skill for DADS Foundations only.
Scope is limited to: Color, Typography, Icons, Layout, Link text, Spacing, Corner shapes, Elevation.
Do not introduce components or patterns beyond Foundations unless explicitly provided.

## Metadata
- DADS base URL: https://design.digital.go.jp/dads/foundations/
- Last synced: 2026-04-09
- Potentially stale items: None detected on sync; re-check per-page update dates if accuracy is critical.

## Applicability by platform
- Web: Apply DADS explicit rules as written.
- Native apps: Apply the visual principles; treat web-specific items (ARIA, CSS px, underline rules) as analogs.
- Docs/Slides: Apply visual principles only; skip interactive states and target-size rules.

## Rule tiering by foundation
Guidance is separated into:
- DADS explicit rules: directly stated in DADS pages.
- Supplemental practical rules: best practices not explicitly stated by DADS.
- Local ops rules: project-specific rules to be filled in.

### Color
DADS explicit rules:
- Use key colors (primary, secondary, tertiary, background) to build the color scheme; key colors should share the same hue family to maintain consistency.
- Primary color must have at least 4.5:1 contrast against the main background color.
- Secondary and tertiary colors must have at least 3:1 contrast against the main background; if used for text, they must be at least 4.5:1.
- Common (neutral) colors are used for text, borders, and backgrounds; text must be at least 4.5:1 and non-text borders/dividers at least 3:1 against adjacent colors.
- Link colors use blue for default and purple for visited, each at least 4.5:1 against the background.
- Text and text-like elements must be at least 4.5:1 contrast regardless of size.
- Non-text UI components and graphical objects must be at least 3:1 contrast against adjacent colors.
- Do not rely on color alone to convey meaning; add another cue.
- Specify both foreground and background colors to ensure contrast.

Supplemental practical rules:
- Keep palette additions minimal; prefer existing DADS palette values.
- Use color plus shape or text for state (error/success) whenever possible.

Local ops rules (fill in):
- Project-specific palette extensions:
- Project-specific semantic color meanings:

### Typography
DADS explicit rules:
- Use `Noto Sans JP` as the sans-serif base and `Noto Sans Mono` for monospace.
- Use weight levels `N` (400/normal) and `B` (700/bold).
- Use DADS text styles and naming convention (for example, `Std-16N-170`).
- Standard text should be 16px or larger; 14px is allowed only when needed; smaller than 14px is not allowed.
- For body text, line height should be at least 1.5x the font size.
- Avoid long spans of italic text; italics are generally not used for Japanese text.
- Ensure line length stays readable; around 80 half-width characters or 40 full-width characters is a guideline, not an absolute rule.
- Provide sufficient paragraph spacing; at least 1.5x the line height is recommended.
- Allow users to change font size without breaking the layout; avoid fixed text images.

Supplemental practical rules:
- Maintain a clear hierarchy (display, heading, body, caption) using DADS styles only.
- Avoid ad-hoc font sizes outside the scale.

Local ops rules (fill in):
- Project-specific font fallbacks:
- Approved exceptions to the style scale:

### Icons
DADS explicit rules:
- When an icon appears with text, the accessible name should come from the text; do not add extra `aria-label` to the icon. For image icons, use empty alt (`alt=""`).
- If an icon-only control is used, provide an accessible label and ensure a 44x44 CSS px target size.
- Icon color should be at least 4.5:1 contrast against the background; 3:1 is acceptable only when it is guaranteed non-text.
- When a link includes both text and icon, include the icon inside the same link target.

Supplemental practical rules:
- Use icons only when they clarify meaning; avoid decorative-only icons.
- Keep icon style and stroke weights consistent across a screen.

Local ops rules (fill in):
- Project-approved icon sets:
- Icon size scale and padding rules:

### Layout
DADS explicit rules:
- Use a grid system consisting of margins, columns, and gutters.
- Column widths should be integer multiples of the body text size.
- Gutters should be at least 2x the body text size.
- DADS provides both 1-column and 12-column grid patterns.
- DADS assumes a single breakpoint by default: <768px for mobile/tablet and >=768px for desktop; add more only if needed.
- Use grid-based layout rules when placing columns.

DADS accessibility rules:
- Use a liquid layout; make either columns or gutters flexible.
- If horizontal scrolling appears, do not hide the scrollbar.
- Keep visual order aligned with reading and focus order.

Supplemental practical rules:
- Minimize layout shifts across breakpoints.

Local ops rules (fill in):
- Project breakpoints (if different from DADS default):
- Grid overrides:

### Link text
DADS explicit rules:
- Link text must be visually distinct from body text using color plus underline (or another non-color cue).
- Use distinct colors for default, hover, active, and visited states; ensure clear differences.
- For external or new-tab links, place an icon after the link text and include it within the clickable area; do not underline the icon.
- If a link opens a new tab or is a file download, provide appropriate alternative text for the icon and include file type/size in the link text.

DADS accessibility rules:
- Link purpose must be clear from the text alone; avoid vague labels.
- Ensure link target size is at least 24x24 CSS px, or provide equivalent spacing.
- If multiple links have identical visible text, use `aria-label` to differentiate.

Supplemental practical rules:
- Prefer action or destination-based link text.

Local ops rules (fill in):
- Approved link style tokens:
- Icon set for external/file links:

### Spacing

From xt0x/design-system, MIT.

More from xt0x/design-system