Crea interfaces japonesas accesibles para servicios públicos con los roles tipográficos de DADS, tokens semánticos y la anatomía nativa de componentes de HTML. Prueba una consulta de recibo funcional con errores de formato, un resultado sin coincidencias y un registro de estado que se puede revisar.
Estilos nativos de entrada y botón de DADS HTML, con fecha del 3 de octubre de 2026 y design-tokens 2.0.1; diseño original y lógica de consulta local. · Referencia de implementación
02
Referencia de diseño de sistema de diseño Digital Agency
Documentación de DADS beta v2.18.0; estilos nativos de ejemplo de HTML inspeccionados el 3 de octubre de 2026; design-tokens 2.0.1. La documentación, el repositorio de ejemplos y el paquete de tokens tienen historiales de versiones independientes. Las decisiones de diseño que aparecen a continuación se distinguen explícitamente de los valores oficiales de los componentes.
Recursos y alcance de sistema de diseño Digital Agency
Elige la ruta de origen de HTML
El índice oficial de recursos ofrece ejemplos de HTML/CSS/JavaScript, ejemplos de React/Tailwind, un complemento de Tailwind y datos de diseño de Figma. Este ejemplo elige la ruta sencilla de HTML: la entrada y el botón CSS se copian sin modificaciones, mientras que la consulta de estado y la validación del lado del cliente que los rodean son código de la aplicación. No se inventa ningún paquete universal de componentes de DADS.
La vista previa es una consulta ficticia e independiente de trámites municipales. No reproduce la cabecera de una institución gubernamental, no consulta una base de datos pública ni afirma ofrecer un servicio oficial. El formato de recibo y los registros de estado son datos de ejemplo.
Carga design-tokens antes de los dos estilos de componentes.
Mantén las clases y los atributos de datos documentados en los controles nativos HTML.
Añade validación específica del servicio, contenido de estado y gestión del foco en el código de la aplicación.
Tipografía y lenguaje de sistema de diseño Digital Agency
Leer el nombre del estilo de texto
Std-17N-170 describe texto regular de 17px con una altura de línea de 1.7 sin unidad. La vista previa aplica ese ritmo de lectura al texto y selecciona negrita de 32px con una altura de línea de 1.5 para el encabezado. Noto Sans JP es la opción sans documentada, con fuentes alternativas del sistema disponibles cuando no se carga la fuente web. Este ejemplo local usa deliberadamente esas alternativas.
El texto japonés y el inglés no ocupan el mismo ancho. Mantén las etiquetas visibles encima de los controles, permite que el encabezado pase a varias líneas y no calcules el tamaño de un botón según un recuento de caracteres supuesto. Una traducción puede necesitar más espacio vertical sin que cambie la función del componente.
Color semántico y foco de sistema de diseño Digital Agency
Usa los alias que realmente utiliza CSS
El botón de ejemplo define su color predeterminado mediante --color-key-900. La hoja de estilos de tokens distribuida resuelve ese alias como blue-900, #0017c1. Las reglas de hover y active seleccionan key-1000 y key-1200, en lugar de aplicar una opacidad arbitraria. El borde de error del campo usa --color-semantic-error-1.
El contorno negro y la sombra amarilla siguen siendo visibles cuando un control recibe el foco del teclado. Coloca el control lejos de contenedores que recorten el contenido; una tarjeta con overflow-hidden puede cortar el anillo aunque el componente CSS esté bien implementado. El texto de error y aria-invalid complementan el borde rojo.
Espaciado y flujo adaptable de sistema de diseño Digital Agency
Elige un ritmo visual sencillo para la aplicación
Las pautas de espaciado de DADS ofrecen ejemplos, pero no prescriben una secuencia obligatoria para todas las interfaces. Esta composición usa 8px dentro de elementos relacionados, 24px entre secciones del formulario y 64px como margen generoso de página en escritorio. El ancho máximo del contenido, de 52rem, es una decisión de la aplicación, no un token de DADS.
En pantallas estrechas, las definiciones del resultado se apilan y los controles ocupan el espacio disponible. Este ejemplo usa una media query de 768px. No se presenta como un punto de quiebre universal de DADS; el ajuste responde al salto de línea del contenido y al tamaño mínimo del botón.
Estructura y errores del campo de sistema de diseño Digital Agency
Mantén separadas la etiqueta, la ayuda y el error
El contenedor nativo .dads-input-text define los estilos de texto predeterminados. El elemento secundario .dads-input-text__input controla el tamaño, el borde, el relleno, el radio y los estados de foco. La etiqueta correspondiente está vinculada explícitamente mediante for/id. La ayuda sigue visible tras un error para que el usuario no pierda el formato esperado.
El ejemplo acepta exactamente seis dígitos ASCII. Una entrada con formato incorrecto establece aria-invalid=true, muestra el mensaje de error vinculado y devuelve el foco al campo. Un valor sintácticamente válido distinto de 123456 muestra un mensaje independiente de que no hay coincidencias; no se describe como un error de formato. Ambos comportamientos son reglas de esta demostración local.
Mantén el tipo del campo como texto: una referencia es un identificador, no una cantidad.
Usa inputmode=numeric como sugerencia para el teclado, sin los controles de incremento y decremento de los campos numéricos.
Conserva el valor introducido mientras explicas cómo corregirlo.
Jerarquía y estados de los botones de sistema de diseño Digital Agency
Una acción principal para esta consulta
El botón grande relleno activa la consulta y el botón de estilo de texto borra el ejemplo. Los valores nativos de data-type son solid-fill, outline y text; data-size selecciona lg, md, sm o xs. Estos son atributos de ejemplo de HTML, no propiedades de React.
El botón grande tiene un ancho mínimo de 136px y una altura de 56px. Puede ampliarse si la etiqueta necesita más espacio. Las variantes pequeña y extrapequeña usan un área de pulsación ampliada en el CSS proporcionado; no coloques otros objetivos de interacción dentro de esa área. La demostración usa variantes más grandes para evitar este conflicto.
Un resultado de estado útil de sistema de diseño Digital Agency
Haz que el estado local se pueda inspeccionar
Al introducir 123456, se muestra un recibo ficticio con una lista de definiciones para la referencia, la fecha de envío y la siguiente acción. Tras la consulta, el encabezado recibe el foco para que el usuario del teclado llegue directamente al nuevo resultado. El estado sin coincidencias también recibe el foco e incluye una opción para volver a intentarlo.
La lista de tres etapas es contenido original de la aplicación. Distingue entre recibido, en revisión y decisión mediante texto, además de formas y colores. Una implementación real debe obtener esos valores del servicio y gestionar registros no autorizados, no disponibles o caducados. La vista previa no realiza ninguna solicitud externa ni da a entender que haya encontrado un registro real de un ciudadano.
Integra el ejemplo de sistema de diseño Digital Agency
Separa tokens, estilos y comportamiento
El paquete de tokens ofrece dist/tokens.css. Los ejemplos de HTML pertenecen a un repositorio de código fuente con scripts de Storybook; clonar ese repositorio proporciona un entorno de inspección. Copia los estilos necesarios del componente junto con su licencia y anota la revisión de origen antes de adaptarlos para producción.
En esta página, el paquete de tokens está fijado en 2.0.1 y los estilos de HTML corresponden a una instantánea del código fuente con fecha. La demostración independiente carga archivos locales, por lo que su renderizado verificado no depende de un CDN activo. El comando de configuración de Storybook se proporciona como vía oficial de acceso al repositorio; no se instaló una nueva versión de las dependencias para esta vista previa.
Ejemplos de componentes del sistema de diseño sistema de diseño Digital Agency
Un campo de referencia con etiqueta
Clases nativas de campos de DADS con una ayuda persistente y un error asociado.
HTML
<div class="dads-input-text">
<label for="reference">Reference number (required)</label>
<p id="reference-hint">Use the 6 digits on your example receipt.</p>
<input class="dads-input-text__input" data-size="lg"
id="reference" inputmode="numeric" autocomplete="off"
aria-describedby="reference-hint reference-error" aria-invalid="true">
<span class="dads-input-text__error-text" id="reference-error">
Enter 6 digits, for example 123456.
</span>
</div>
El documento completo incluye su estructura, controles e inicialización. Extrae el archivo de ejemplo enlazado para obtener los recursos del proveedor con sus rutas relativas exactas y luego sírvelo mediante HTTP.
HTML
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>DADS procedure receipt example</title><link rel="stylesheet" href="vendor/dads-2026-10-03/tokens.css"><link rel="stylesheet" href="vendor/dads-2026-10-03/input-text.css"><link rel="stylesheet" href="vendor/dads-2026-10-03/button.css"><style>
*{box-sizing:border-box}body{margin:0;color:var(--color-neutral-solid-gray-900);font:400 17px/1.7 var(--font-family-sans);background:#fff}.lookup{max-width:52rem;padding:64px 24px;margin:auto}.eyebrow{font-size:14px;letter-spacing:.08em;border-bottom:1px solid #b3b3b3;padding-bottom:16px}h1{font-size:32px;line-height:1.5;margin:24px 0}h2{font-size:24px;line-height:1.5}p{margin:8px 0 24px}.field{margin:32px 0}label{font-weight:700;display:block}.dads-input-text__input{width:22rem}#reference-hint{margin:8px 0}.actions{display:flex;gap:24px;flex-wrap:wrap;align-items:center;margin:24px 0}.result{border-top:4px solid var(--color-key-900);background:#f5f5f5;padding:24px;margin-top:32px}.result:focus{outline:3px solid #111;outline-offset:4px}dl{display:grid;grid-template-columns:10rem 1fr;gap:16px}dt{font-weight:700}dd{margin:0;overflow-wrap:anywhere}ol{padding-left:24px}li{padding:8px}li.current{font-weight:700;color:var(--color-key-900)}small{display:block;font-size:14px;margin-top:32px;color:#555}[hidden]{display:none!important}@media(max-width:767px){.lookup{padding:24px}h1{font-size:28px}.actions{align-items:stretch;flex-direction:column}.actions button{width:100%}dl{grid-template-columns:1fr;gap:4px}dd{margin-bottom:16px}}
</style><main class="lookup"><div class="eyebrow">SERVICE PATTERN · DADS HTML</div><h1>Check a procedure receipt</h1><p>Use the reference from your receipt to view the next step. This is a fictional local example.</p><form id="lookup-form" novalidate><div class="dads-input-text field"><label for="reference">Reference number (required)</label><p id="reference-hint">Enter 6 digits. Try <strong>123456</strong> for the example record.</p><input id="reference" class="dads-input-text__input" data-size="lg" inputmode="numeric" autocomplete="off" aria-describedby="reference-hint reference-error"><span id="reference-error" class="dads-input-text__error-text" hidden>Enter 6 digits, for example 123456.</span></div><div class="actions"><button class="dads-button" data-type="solid-fill" data-size="lg" type="submit">Show example status</button><button class="dads-button" data-type="text" data-size="md" type="reset">Clear reference</button></div></form><section class="result" id="missing" tabindex="-1" hidden><h2>No matching example</h2><p>This reference has the correct format, but is not in the local example data. Try 123456.</p></section><section class="result" id="found" tabindex="-1" hidden><h2>Receipt 123456</h2><dl><dt>Procedure</dt><dd>Community room request</dd><dt>Submitted</dt><dd>1 October 2026 — fictional date</dd><dt>Next action</dt><dd>Wait for the example review. No documents are currently requested.</dd></dl><ol aria-label="Procedure progress"><li>Received</li><li class="current" aria-current="step">Checking the request — current step</li><li>Decision — not started</li></ol></section><small>Independent OpenDesign demonstration. Native DADS component CSS; system font fallback. No information is sent or stored.</small></main><script>
const f=document.querySelector('form'),i=document.querySelector('input'),e=document.querySelector('#reference-error'),found=document.querySelector('#found'),missing=document.querySelector('#missing');f.addEventListener('submit',ev=>{ev.preventDefault();found.hidden=missing.hidden=true;const valid=/^[0-9]{6}$/.test(i.value.trim());e.hidden=valid;i.setAttribute('aria-invalid',String(!valid));if(!valid){i.focus();return}const target=i.value.trim()==='123456'?found:missing;target.hidden=false;target.focus()});f.addEventListener('reset',()=>{found.hidden=missing.hidden=e.hidden=true;i.removeAttribute('aria-invalid');i.focus()});
</script></html>
Descarga el ejemplo completo desde Fuentes. El README contiene el comando exacto para ejecutarlo en local.
Mantén las rutas de los recursos del proveedor relativas a este documento; el archivo incluye todos los recursos que utiliza esta vista previa.
04
Configuración de agente de sistema de diseño Digital Agency
Punto de partida para la implementación
Flujo de trabajo oficial del repositorio de ejemplos y ruta de importación de tokens verificada. Esta vista previa ejecuta CSS copiados localmente; no necesita React ni un backend. El ZIP del ejemplo funcional completo, incluido en Sources, también contiene las dependencias exactas de la vista previa y el documento completo. Descomprímelo, ejecuta python3 -m http.server 8080 en ese directorio y abre http://localhost:8080/japan-dads.html. No abras ejemplos basados en módulos mediante file://.
bash
# Official HTML samples are a source repository, not a published component SDK.
git clone https://github.com/digital-go-jp/design-system-example-components-html.git
cd design-system-example-components-html
npm install
npm run storybook
# For the standalone composition, copy these component styles into your app:
# src/components/input-text/input-text.css
# src/components/button/button.css
# Install the independently versioned token package:
npm install @digital-go-jp/[email protected]
# In a CSS-aware bundler entry:
# import '@digital-go-jp/design-tokens/dist/tokens.css';
# import './input-text.css';
# import './button.css';
Una instrucción para tu proyecto
Instrucción para el agente
Implementa una consulta ficticia de recibos de servicios públicos con los estilos de entrada de texto y botón de DADS HTML, además de tokens de diseño 2.0.1. Conserva la etiqueta visible, la indicación de formato, aria-describedby y el estado no válido. Usa el ritmo de texto Std-17N-170 y una acción principal grande. Muestra por separado los estados de formato incorrecto, sin coincidencias y con resultado. Conserva el texto introducido, enfoca los nuevos encabezados de estado, evita datos personales reales y distintivos de identidad gubernamental. Trata el ancho de contenido de 52rem y el espaciado de 8/24/64px como decisiones de la aplicación.
05
Sistema de diseño Digital Agency Fuentes y alcance
Composición educativa independiente basada en el ejemplo oficial CSS y los tokens. Sin respaldo gubernamental, consulta en tiempo real ni identidad de organismos copiada. La tipografía recurre a una sans serif del sistema disponible localmente. La maquetación de la aplicación y los datos de los registros no son especificaciones oficiales de DADS.
