83.3K+Descargar
Software empresarial · Nuevo recurso

Sistema de diseño de Salesforce Lightning.

Una guía de Lightning para gestionar registros densos: espaciado, tipografía y colores semánticos reales; un espacio de trabajo editable para casos; validación de campos y un historial de actividad que refleja los cambios locales.

Descargar OpenDesign Descargar DESIGN.md
Guía de OpenDesign8 capítulos40 entradas de referenciaGuía de aplicación original
01

Vista previa de la interfaz del sistema de diseño de Salesforce Lightning

Cambia la prioridad o el estado, valida una nota de actualización, guarda una entrada de actividad local y descarta un borrador posterior sin modificar el registro guardado.

Edita un caso y revisa su actividad localAbrir ejemplo completo
Paquete nativo SLDS 2.264.1 CSS y recursos del paquete; HTML y JavaScript originales y accesibles. Sin API de Salesforce ni entorno de ejecución de Lightning. · Referencia de implementación
02

Referencia de diseño del sistema de diseño de Salesforce Lightning

CSS nativo publicado de @salesforce-ux/design-system 2.264.1 y exportación de tokens ui-force. Es una referencia fijada al plano clásico, no una afirmación de compatibilidad con el lenguaje de diseño SLDS 2 más reciente ni con un entorno de ejecución de Lightning Web Components. El repositorio histórico original está archivado.

Superficies de registros y texto semántico

Fuente
Nombre / ReglaValor / ConfiguraciónUso
COLOR_BACKGROUNDrgb(243, 243, 243)Referencia del paquete publicado. Conserva la función indicada para el texto, la superficie o la acción en lugar de aplicar un único color de marca en todas partes.
COLOR_BACKGROUND_ALTrgb(255, 255, 255)Referencia del paquete publicado. Conserva la función indicada para el texto, la superficie o la acción en lugar de aplicar un único color de marca en todas partes.
COLOR_TEXT_DEFAULTrgb(3, 45, 96)Referencia del paquete publicado. Conserva la función indicada para el texto, la superficie o la acción en lugar de aplicar un único color de marca en todas partes.
COLOR_TEXT_WEAKrgb(116, 116, 116)Referencia del paquete publicado. Conserva la función indicada para el texto, la superficie o la acción en lugar de aplicar un único color de marca en todas partes.
COLOR_BORDERrgb(201, 201, 201)Referencia del paquete publicado. Conserva la función indicada para el texto, la superficie o la acción en lugar de aplicar un único color de marca en todas partes.
COLOR_BORDER_ERRORrgb(234, 0, 30)Referencia del paquete publicado. Conserva la función indicada para el texto, la superficie o la acción en lugar de aplicar un único color de marca en todas partes.
COLOR_BORDER_SELECTIONrgb(1, 118, 211)Referencia del paquete publicado. Conserva la función indicada para el texto, la superficie o la acción en lugar de aplicar un único color de marca en todas partes.
COLOR_BACKGROUND_BUTTON_BRANDrgb(1, 118, 211)Referencia del paquete publicado. Conserva la función indicada para el texto, la superficie o la acción en lugar de aplicar un único color de marca en todas partes.
COLOR_BACKGROUND_BUTTON_BRAND_HOVERrgb(1, 68, 134)Referencia del paquete publicado. Conserva la función indicada para el texto, la superficie o la acción en lugar de aplicar un único color de marca en todas partes.
COLOR_BACKGROUND_BUTTON_BRAND_ACTIVErgb(3, 45, 96)Referencia del paquete publicado. Conserva la función indicada para el texto, la superficie o la acción en lugar de aplicar un único color de marca en todas partes.

Escala de espaciado clásica

Fuente
Nombre / ReglaValor / ConfiguraciónUso
SPACING_X_SMALL0.5remExportación clásica SPACING_*. No es el conjunto VAR_SPACING_* compacto independiente.
SPACING_XXX_SMALL0.125remExportación clásica SPACING_*. No es el conjunto VAR_SPACING_* compacto independiente.
SPACING_XX_SMALL0.25remExportación clásica SPACING_*. No es el conjunto VAR_SPACING_* compacto independiente.
SPACING_SMALL0.75remExportación clásica SPACING_*. No es el conjunto VAR_SPACING_* compacto independiente.
SPACING_MEDIUM1remExportación clásica SPACING_*. No es el conjunto VAR_SPACING_* compacto independiente.
SPACING_NONE0Exportación clásica SPACING_*. No es el conjunto VAR_SPACING_* compacto independiente.
SPACING_X_LARGE2remExportación clásica SPACING_*. No es el conjunto VAR_SPACING_* compacto independiente.
SPACING_XX_LARGE3remExportación clásica SPACING_*. No es el conjunto VAR_SPACING_* compacto independiente.
SPACING_LARGE1.5remExportación clásica SPACING_*. No es el conjunto VAR_SPACING_* compacto independiente.

Escala tipográfica

Fuente
Nombre / ReglaValor / ConfiguraciónUso
FONT_SIZE_10.625remElige el tamaño del texto según su función y conserva la legibilidad de las notas del caso y las etiquetas de los campos.
FONT_SIZE_20.75remElige el tamaño del texto según su función y conserva la legibilidad de las notas del caso y las etiquetas de los campos.
FONT_SIZE_30.8125remElige el tamaño del texto según su función y conserva la legibilidad de las notas del caso y las etiquetas de los campos.
FONT_SIZE_40.875remElige el tamaño del texto según su función y conserva la legibilidad de las notas del caso y las etiquetas de los campos.
FONT_SIZE_51remElige el tamaño del texto según su función y conserva la legibilidad de las notas del caso y las etiquetas de los campos.
FONT_SIZE_61.125remElige el tamaño del texto según su función y conserva la legibilidad de las notas del caso y las etiquetas de los campos.
FONT_SIZE_71.25remElige el tamaño del texto según su función y conserva la legibilidad de las notas del caso y las etiquetas de los campos.
FONT_SIZE_81.5remElige el tamaño del texto según su función y conserva la legibilidad de las notas del caso y las etiquetas de los campos.
FONT_SIZE_91.75remElige el tamaño del texto según su función y conserva la legibilidad de las notas del caso y las etiquetas de los campos.
FONT_SIZE_102remElige el tamaño del texto según su función y conserva la legibilidad de las notas del caso y las etiquetas de los campos.
FONT_SIZE_112.625remElige el tamaño del texto según su función y conserva la legibilidad de las notas del caso y las etiquetas de los campos.

Radio de esquina

Fuente
Nombre / ReglaValor / ConfiguraciónUso
BORDER_RADIUS_SMALL0.125remReferencia de radios publicada. Un indicador de estado circular no es lo mismo que un control de formulario rectangular.
BORDER_RADIUS_MEDIUM0.25remReferencia de radios publicada. Un indicador de estado circular no es lo mismo que un control de formulario rectangular.
BORDER_RADIUS_LARGE0.5remReferencia de radios publicada. Un indicador de estado circular no es lo mismo que un control de formulario rectangular.
BORDER_RADIUS_CIRCLE50%Referencia de radios publicada. Un indicador de estado circular no es lo mismo que un control de formulario rectangular.

Estructura de referencia nativa de CSS

Fuente
Nombre / ReglaValor / ConfiguraciónUso
slds-page-headerRecord contextMantén la identidad y el resumen del caso por encima del formulario de edición.
slds-cardGrouped content regionLos detalles y la actividad del caso ocupan regiones semánticas separadas.
slds-form-elementLabel + control + helpAgrupa cada valor editable en un campo coherente.
slds-has-errorInvalid field modifierConfigúralo junto con aria-invalid y un mensaje de error específico.
slds-button_brandPrimary actionGuarda la actualización local; la clase aplica estilos, no persiste los datos.
slds-button_neutralSecondary actionDescarta el borrador y restaura los últimos valores locales guardados.
03

Guía completa del sistema de diseño de Salesforce Lightning

Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.

DESIGN-salesforce-lightning.md

Orientación completa, un punto de partida para la implementación y enlaces al código fuente.

Descargar la guía

Diseño y contexto de registros del sistema de diseño de Salesforce Lightning

Mantén la identidad del registro por encima de las tareas locales

El encabezado de la página muestra el número del caso, el asunto, la cuenta y el responsable. Estos valores identifican el objeto antes de que el usuario modifique un campo. La insignia de estado resume el registro local guardado, por lo que cambia al guardar y no sigue el valor de una selección sin confirmar.

De esta guía de OpenDesign

Separa los detalles de la actividad

La región más amplia combina el contexto del cliente y el formulario de edición. La región secundaria contiene un historial ordenado. Esta separación permite comparar el trabajo solicitado con los cambios ya registrados sin tener que ir a otra pantalla. En el diseño para móviles, estas regiones se apilan manteniendo el mismo orden semántico.

Colores semánticos y estados del sistema de diseño de Salesforce Lightning

Interpreta los nombres de los tokens como funciones

La exportación de ui-force distingue entre el texto predeterminado, el texto de menor énfasis, los bordes de selección y los fondos de botones de marca. El ejemplo mantiene oscuro el texto principal, discreta la información secundaria y azul la acción principal. El rojo se reserva para el campo no válido y su mensaje de recuperación; no se aplica a todos los valores sin guardar.

Comunica el estado de más formas que solo con el color

La prioridad y el estado aparecen como palabras en el resumen y en la nueva entrada de actividad. El estado de error combina el modificador nativo slds-has-error con aria-invalid y un mensaje asociado al área de texto. La confirmación local se muestra por escrito en una región de estado; un acento verde por sí solo no indicaría al usuario qué se ha guardado.

Escala tipográfica y densidad de registros del sistema de diseño de Salesforce Lightning

Crea jerarquía sin usar encabezados desmesurados

La escala tipográfica numerada publicada empieza en 0.625rem y llega hasta 2.625rem. Un espacio de trabajo de casos no necesita el tamaño de visualización más grande en todas las áreas. El título de encabezado de página nativo identifica el registro, los encabezados de las tarjetas distinguen las secciones y el texto normal del cuerpo presenta la solicitud y la nota del cliente.

Mantén intactos los asuntos largos de los registros

El diseño personalizado permite que el título de la página ocupe varias líneas, en lugar de truncar el asunto en un ancho reducido. Los metadatos también pueden distribuirse en varias líneas. No reduzcas todo el texto para compensar un nombre de cuenta largo; prueba asuntos y nombres de responsables de longitudes realistas antes de decidir dónde el truncamiento cuenta con una alternativa accesible que muestre el texto completo.

Sistema de diseño Salesforce Lightning: espaciado y estructura del blueprint

No combines las exportaciones de espaciado clásico y variable

Esta guía enumera SPACING_* de ui-force. La exportación var-spacing independiente contiene valores compactos diferentes; VAR_SPACING_MEDIUM no corresponde a la misma referencia que SPACING_MEDIUM. Mezclar valores basándose únicamente en la similitud de sus nombres puede hacer que un formulario se vea irregular. Elige el sistema de densidad que quieras usar y conserva su origen.

Usa el contenedor de campo de forma coherente

Sistema de diseño Salesforce Lightning: borradores y comportamiento de los registros guardados

Mantén el registro guardado separado de los controles

El script conserva la última prioridad y el último estado guardados en un objeto de registro. Editar las listas de selección solo modifica el borrador. Al guardar, copia los valores en ese objeto, actualiza el resumen y añade una entrada de actividad. Así, Descartar borrador sigue teniendo sentido incluso después de varios cambios guardados correctamente.

No inventes confirmaciones del backend

El ejemplo no incluye búsqueda por ID de registro, un modelo de permisos, API ni una base de datos. El botón y el mensaje de confirmación indican explícitamente que la operación es local. Una integración de producción con Salesforce necesitaría las API de datos adecuadas y respuestas del servidor antes de actualizar de forma definitiva el estado de un registro. Las clases CSS no pueden ofrecer esas garantías.

Sistema de diseño Salesforce Lightning: validación de campos y actividad

Haz que la nota explique el cambio

La regla definida exige diez caracteres, sin contar los espacios al principio y al final, y limita el área de texto a 300 caracteres. Si la nota está vacía o es demasiado corta, se impiden todos los cambios del registro, se muestra el error del campo y el foco pasa a la nota. Al editar, se borra el error obsoleto; al pulsar Guardar, se vuelve a validar el valor actual.

  1. Envía el formulario sin una nota y comprueba que los valores guardados del resumen no cambien.
  2. Escribe una nota útil, guarda e inspecciona la entrada de actividad más reciente.
  3. Vuelve a cambiar los campos, descarta el borrador y confirma que se restauren los últimos valores guardados.

Añade una entrada de cambio fácil de leer

Una actualización local correcta crea un título de actividad a partir del estado y la prioridad guardados, seguido de la nota exacta como contenido de texto. La entrada se inserta al principio para que el cambio más reciente aparezca primero. La nota nunca se interpreta como HTML, y la actividad inicial estática permanece debajo de las entradas locales del usuario.

Sistema de diseño Salesforce Lightning: formularios accesibles y recuperación

Usa etiquetas reales y descripciones explícitas

Las listas de selección y el área de texto tienen etiquetas visibles vinculadas mediante for e id. La nota hace referencia al texto de ayuda y al mensaje de error, y el título del indicador de campo obligatorio es legible. Las acciones principales y para descartar son botones con los tipos submit y button adecuados, lo que evita que se envíe el formulario por accidente al descartar un borrador.

Vuelve a un lugar predecible al descartar

Descartar restaura la prioridad y el estado guardados, borra la nota y el error del campo, y pone el foco en el control de prioridad. No elimina el historial de actividad ni restablece el registro a su estado inicial. Esta distinción importa cuando un usuario guarda una vez, prueba otro cambio y luego cancela ese segundo borrador.

Sistema de diseño Salesforce Lightning: integración con CSS y alcance de la versión

Instala el paquete de estilos publicado

El código fuente completo importa la distribución fijada de CSS y una pequeña hoja de estilos de la aplicación. Vite resuelve las URL de fuentes e imágenes del paquete. Después, HTML y JavaScript proporcionan el comportamiento del registro; se trata de una implementación basada en blueprints de CSS, no de un contenedor para lightning-record-edit-form.

  • El paquete nativo CSS proporciona la apariencia de los campos, botones y tarjetas.
  • El HTML original proporciona la estructura y las etiquetas del registro.
  • El JavaScript original gestiona el estado del borrador, la validación y la actividad local.

Considera el código fuente archivado como una referencia versionada

Sistema de diseño Salesforce Lightning: ejemplos de componentes

index.html — espacio de trabajo de casos completo

El resumen del registro, el formulario y la actividad inicial en HTML semántico.

HTML
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Local case workspace</title>
<body>
<main class="slds-example">
  <header class="slds-page-header">
    <p class="slds-text-title_caps">Service workspace · fictional record</p>
    <div class="record-title">
      <div>
        <h1 class="slds-page-header__title">
          Case 004218 · Delivery address update
        </h1>
        <p class="slds-text-body_small">
          Northstar Studio · Opened today · Owner: Maya Chen
        </p>
      </div>
      <span id="status-badge" class="slds-badge">New</span>
    </div>
  </header>
  <div class="record-grid">
    <section class="slds-card">
      <div class="slds-card__header">
        <h2 class="slds-card__header-title">Case details</h2>
      </div>
      <div class="slds-card__body slds-card__body_inner">
        <div class="summary">
          <div>
            <span class="slds-text-title">Contact</span>
            <p>Alex Morgan</p>
          </div>
          <div>
            <span class="slds-text-title">Channel</span>
            <p>Email</p>
          </div>
          <div>
            <span class="slds-text-title">Priority</span>
            <p id="read-priority">Medium</p>
          </div>
          <div>
            <span class="slds-text-title">Status</span>
            <p id="read-status">New</p>
          </div>
        </div>
        <div class="slds-box slds-theme_shade slds-m-top_medium">
          <h3 class="slds-text-heading_small">Customer request</h3>
          <p class="slds-m-top_small">
            Please update the delivery location for order NS-1842 before it
            leaves the warehouse. The contact is available to confirm the new
            address.
          </p>
        </div>
        <form id="case-form" class="slds-m-top_large" novalidate>
          <h3 class="slds-text-heading_small slds-m-bottom_medium">
            Update the local case
          </h3>
          <div class="field-grid">
            <div class="slds-form-element">
              <label class="slds-form-element__label" for="priority"
                >Priority</label
              >
              <div class="slds-form-element__control">
                <div class="slds-select_container">
                  <select class="slds-select" id="priority">
                    <option>Low</option>
                    <option selected>Medium</option>
                    <option>High</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="slds-form-element">
              <label class="slds-form-element__label" for="case-status"
                >Status</label
              >
              <div class="slds-form-element__control">
                <div class="slds-select_container">
                  <select class="slds-select" id="case-status">
                    <option>New</option>
                    <option>Working</option>
                    <option>Escalated</option>
                    <option>Closed</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div id="note-field" class="slds-form-element slds-m-top_medium">
            <label class="slds-form-element__label" for="case-note"
              ><abbr class="slds-required" title="required">*</abbr> Update
              note</label
            >
            <div class="slds-form-element__control">
              <textarea
                class="slds-textarea"
                id="case-note"
                rows="3"
                maxlength="300"
                aria-describedby="note-help note-error"
              ></textarea>
            </div>
            <p id="note-help" class="slds-form-element__help">
              Explain the change in 10–300 characters. Nothing is sent to
              Salesforce.
            </p>
            <p id="note-error" class="slds-form-element__help" hidden>
              Enter an update note of at least 10 characters.
            </p>
          </div>
          <div class="form-actions">
            <button
              type="button"
              id="cancel"
              class="slds-button slds-button_neutral"
            >
              Discard draft</button
            ><button type="submit" class="slds-button slds-button_brand">
              Save local update
            </button>
          </div>
          <p id="save-result" class="slds-m-top_small" role="status"></p>
        </form>
      </div>
    </section>
    <aside class="slds-card">
      <div class="slds-card__header">
        <h2 class="slds-card__header-title">Case activity</h2>
      </div>
      <div class="slds-card__body slds-card__body_inner">
        <p class="slds-text-body_small slds-m-bottom_medium">
          Newest updates first
        </p>
        <ol id="activity" class="activity">
          <li>
            <span class="activity-dot"></span>
            <div>
              <h3 class="slds-text-heading_small">Case opened</h3>
              <p>Customer requested a delivery address change.</p>
              <small>Initial example activity</small>
            </div>
          </li>
        </ol>
      </div>
    </aside>
  </div>
  <footer>
    Native SLDS 2.264.1 CSS with original HTML and JavaScript. Local
    demonstration; no Salesforce record or message is created.
  </footer>
</main>

<script type="module" src="/src/main.js"></script>
</body></html>

Referencia de código

  • Guárdalo en la raíz del proyecto Vite.

main.js — borrador, validación y actividad

El comportamiento completo de la aplicación y la importación nativa de CSS.

js
import "@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css";
import "./slds.css";
let record = { priority: "Medium", status: "New" };
const form = document.querySelector("#case-form"),
  priority = document.querySelector("#priority"),
  status = document.querySelector("#case-status"),
  note = document.querySelector("#case-note"),
  field = document.querySelector("#note-field"),
  error = document.querySelector("#note-error"),
  result = document.querySelector("#save-result");
function clearError() {
  field.classList.remove("slds-has-error");
  error.hidden = true;
  note.removeAttribute("aria-invalid");
  result.textContent = "";
}
form.addEventListener("input", clearError);
form.addEventListener("submit", (e) => {
  e.preventDefault();
  const text = note.value.trim();
  if (text.length < 10) {
    field.classList.add("slds-has-error");
    error.hidden = false;
    note.setAttribute("aria-invalid", "true");
    note.focus();
    return;
  }
  record = { priority: priority.value, status: status.value };
  document.querySelector("#read-priority").textContent = record.priority;
  document.querySelector("#read-status").textContent = record.status;
  document.querySelector("#status-badge").textContent = record.status;
  const li = document.createElement("li"),
    dot = document.createElement("span"),
    body = document.createElement("div"),
    h = document.createElement("h3"),
    p = document.createElement("p"),
    small = document.createElement("small");
  dot.className = "activity-dot";
  h.className = "slds-text-heading_small";
  h.textContent = record.status + " · " + record.priority + " priority";
  p.textContent = text;
  small.textContent = "Local update · this session";
  body.append(h, p, small);
  li.append(dot, body);
  document.querySelector("#activity").prepend(li);
  note.value = "";
  clearError();
  result.textContent = "Local case updated. No server request was made.";
});
document.querySelector("#cancel").addEventListener("click", () => {
  priority.value = record.priority;
  status.value = record.status;
  note.value = "";
  clearError();
  priority.focus();
});

Referencia de código

  • Guárdalo como src/main.js. Todas las actualizaciones son locales.

slds.css — composición adaptable

Solo la cuadrícula del registro original, la decoración del historial y el diseño para móviles.

css
[hidden] { display: none !important; }
body {
  margin: 0;
}
.slds-example {
  background: #f3f3f3;
  padding: 24px;
  min-height: 680px;
}
.record-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-top: 12px;
}
.record-title h1 {
  white-space: normal;
}
.record-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.record-grid > .slds-card {
  margin: 0;
  min-width: 0;
}
.summary,
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.summary p {
  font-weight: 600;
  margin-top: 4px;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.activity {
  list-style: none;
  padding: 0;
  margin: 0;
}
.activity li {
  display: flex;
  gap: 12px;
  padding-bottom: 24px;
  position: relative;
}
.activity li:not(:last-child):before {
  content: "";
  position: absolute;
  left: 5px;
  top: 12px;
  bottom: 0;
  border-left: 1px solid #c9c9c9;
}
.activity-dot {
  flex: none;
  width: 11px;
  height: 11px;
  background: #0176d3;
  border-radius: 50%;
  margin-top: 5px;
}
.activity p {
  margin: 8px 0;
}
.activity small {
  color: #747474;
}
.slds-example footer {
  font-size: 12px;
  color: #747474;
  margin-top: 20px;
}
.slds-form-element.slds-has-error #note-help {
  color: #444;
}
@media (max-width: 760px) {
  .slds-example {
    padding: 12px;
  }
  .record-grid {
    grid-template-columns: 1fr;
  }
  .record-title {
    gap: 12px;
  }
  .field-grid {
    grid-template-columns: 1fr;
  }
  .form-actions {
    justify-content: flex-start;
  }
}

Referencia de código

  • Guárdalo como src/slds.css; los estilos del paquete se mantienen separados.
04

Sistema de diseño Salesforce Lightning: configuración del agente de IA

Punto de partida para la implementación

Ejemplo nativo de CSS con versión fijada; no es una implementación en una organización de Salesforce. Conserva los avisos sobre los paquetes y recursos al redistribuir los recursos incluidos.

sh
npm create vite@latest slds-case -- --template vanilla
cd slds-case
npm install
npm install @salesforce-ux/[email protected]
# Replace index.html; add src/main.js and src/slds.css from the complete examples.
npm run dev

Una instrucción para tu proyecto

Instrucción para el agente
Crea un espacio de trabajo de casos enfocado usando los blueprints de SLDS CSS con versión fijada. Mantén separados la identidad del registro, el contexto del cliente, el estado guardado y el borrador en edición. Usa la estructura exacta de los campos, referencias reales a los tokens y el código fuente completo que se incluye aquí. Valida la nota antes de cambiar el resumen, conserva la actividad local al descartar el borrador y no des a entender que hay una conexión con un backend de Salesforce.
05

Sistema de diseño Salesforce Lightning: fuentes y alcance

Guía de OpenDesign para el paquete SLDS CSS fijado. La vista previa usa CSS nativo con HTML y JavaScript originales, datos de casos ficticios y estado local. No carga Lightning Web Components ni se conecta a Salesforce. El repositorio original está archivado; para el trabajo en producción, consulta las directrices actuales de la plataforma Salesforce.