Skip to main content

Modern DNI & Passport Appointment System

A complete redesign of Spain’s national identity document appointment booking system with improved user experience, accessibility, and modern design principles.

Get StartedView Pages
Cita Previa DNI
Iniciar Solicitud

Quick Start

Get the project running locally in minutes

1

Clone the repository

Clone the project from GitHub to your local machine.
git clone https://github.com/Sergitxin22/rediseno-cita-previa-dni.git
cd rediseno-cita-previa-dni
2

Open the project

The project uses vanilla HTML, CSS, and JavaScript. No build step required.
# Open index.html in your browser
open index.html
# Or use a local server
python -m http.server 8000
3

Explore the pages

Navigate through the multi-step appointment booking flow:
  • Home (index.html) - Landing page with appointment options
  • Iniciar Solicitud (iniciar-solicitud.html) - Authentication method selection
  • Seleccionar Cita (seleccionar-cita.html) - Complete appointment form
  • Resumen (resumen.html) - Appointment confirmation summary
4

Customize the design

Edit CSS custom properties in css/style.css to match your branding.
:root {
  --primary-blue: #003366;
  --header-yellow: #ffce00;
  --success-green: #059669;
}

Key Features

Everything you need for a modern appointment booking system

Multi-Step Flow

Complete appointment booking process with intuitive navigation through authentication, form filling, and confirmation.

Responsive Design

Mobile-first design that works seamlessly across all devices with adaptive navigation and touch-friendly controls.

Accessible Forms

WCAG-compliant form validation with clear error messages, proper labels, and keyboard navigation support.

Government Branding

Official Spanish government color scheme and styling guidelines for trustworthy, compliant interfaces.

Optimized Images

Modern image formats (AVIF, WebP) with fallbacks for maximum performance and compatibility.

Clean Code

Semantic HTML, modular CSS with custom properties, and minimal JavaScript for maintainability.

Explore Documentation

Deep dive into design, development, and deployment

Design System

Explore colors, typography, components, and layout guidelines.

Learn more

UI Components

Reusable components including header, footer, forms, and cards.

View components

Ready to get started?

Clone the repository and start customizing the design for your own appointment booking system.

Get Started

Build docs developers (and LLMs) love

Get started for freeTalk to us