Overview The DNI Cita Previa design system uses CSS custom properties (CSS variables) to maintain a consistent color palette across the application. All colors are defined in the :root selector in style.css.
Color Palette These colors are specific to the application’s header and footer components.
Header Yellow
Footer Background
--header-yellow: #ffce00;
Variable Hex Value Usage --header-yellow#ffce00Header background color --footer-background-blue#1f2937Footer background color
Primary Colors Core brand colors used for primary actions and branding elements.
Primary Blue
Primary Blue Dark
Background Gray
White
Variable Hex Value Usage --primary-blue#003366Primary buttons, headings, brand elements --primary-blue-dark#002244Hover states for primary buttons --background-gray#f5f5f5Body background color --white#ffffffCard backgrounds, text on dark backgrounds
Text Colors Color variations for text content throughout the application.
--text-gray-light: #6a6f7b ; --text-gray: #374151 ; --text-gray-dark: #1f2937 ;
Variable Hex Value Usage --text-gray-light#6a6f7bDescriptive text, secondary information --text-gray#374151Form labels, standard text --text-gray-dark#1f2937High-emphasis text
Border & Background Colors Colors used for borders, dividers, and subtle background variations.
--border-light: #e5e7eb; --border-lighter: #f3f4f6; --bg-blue-light: #eff6ff; --bg-blue-lighter: #dbeafe; --border-blue: #bfdbfe;
Variable Hex Value Usage --border-light#e5e7ebInput borders, section dividers --border-lighter#f3f4f6Table row borders, subtle dividers --bg-blue-light#eff6ffInfo box backgrounds --bg-blue-lighter#dbeafeGradient backgrounds for success states --border-blue#bfdbfeBorders on blue background elements
State Colors Colors that indicate status or state changes.
--success-green: #059669 ; --success-green-dark: #047857 ;
Variable Hex Value Usage --success-green#059669Success icons, confirmation buttons --success-green-dark#047857Hover state for success buttons
Neutral Colors Neutral shades for backgrounds and subtle UI elements.
--neutral-light: #f3f4f6; --neutral-dark: #d1d5db;
Variable Hex Value Usage --neutral-light#f3f4f6Secondary button backgrounds --neutral-dark#d1d5dbHover states for neutral elements
Usage Example Colors are applied using CSS custom properties:
.primary-button { background-color : var ( --primary-blue ); color : var ( --white ); } .primary-button:hover { background-color : var ( --primary-blue-dark ); } body { background-color : var ( --background-gray ); }
Additional Color Values Some components use hardcoded color values for specific use cases:
Hex Value Usage Location #ef4444Invalid input border seleccionar-cita.css:82#9ca3afInput placeholder text seleccionar-cita.css:86rgba(0, 51, 102, 0.1)Focus ring shadow seleccionar-cita.css:78rgba(0, 0, 0, 0.1)Box shadow seleccionar-cita.css:6, resumen.css:6
Whenever possible, use the CSS custom properties defined in :root rather than hardcoded color values to maintain consistency across the application.