# Sistema de diseño Semrush Intergalactic

## Semrush Intergalactic Vista previa de la interfaz del sistema de diseño

Filtra los términos, limita la vista a los registros seguidos, cambia la métrica e inspecciona los valores seleccionados sin perder de vista la escala.

## Semrush Intergalactic Referencia de diseño del sistema de diseño

Controles nativos de Intergalactic de @semcore/ui 17.6.0 con @semcore/theme 2.3.1; comparación original de barras de HTML.

### Roles semánticos claros

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --intergalactic-bg-primary-neutral | oklch(1 0 0) | Valor semántico actual en el tema fijado, incluidas las expresiones OKLCH. |
| --intergalactic-bg-secondary-neutral | oklch(0.98 0.001 180) | Valor semántico actual en el tema fijado, incluidas las expresiones OKLCH. |
| --intergalactic-text-primary | oklch(0.1 0.03 137 / 0.899) | Valor semántico actual en el tema fijado, incluidas las expresiones OKLCH. |
| --intergalactic-text-secondary | oklch(0.088 0.026 147.7 / 0.583) | Valor semántico actual en el tema fijado, incluidas las expresiones OKLCH. |
| --intergalactic-border-primary | oklch(0.137 0.026 175.7 / 0.161) | Valor semántico actual en el tema fijado, incluidas las expresiones OKLCH. |
| --intergalactic-control-primary-info | oklch(0.23 0.01 140) | Valor semántico actual en el tema fijado, incluidas las expresiones OKLCH. |
| --intergalactic-control-primary-info-hover | oklch(0.32 0.007 140) | Valor semántico actual en el tema fijado, incluidas las expresiones OKLCH. |
| --intergalactic-control-primary-info-active | oklch(0 0 140) | Valor semántico actual en el tema fijado, incluidas las expresiones OKLCH. |
| --intergalactic-control-rounded | 6px | Valor semántico actual en el tema fijado, incluidas las expresiones OKLCH. |
### Tamaños de texto

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --intergalactic-fs-50 | 10px | Escala publicada de tamaños de texto; elige el rol correspondiente a la jerarquía de la información. |
| --intergalactic-fs-100 | 12px | Escala publicada de tamaños de texto; elige el rol correspondiente a la jerarquía de la información. |
| --intergalactic-fs-200 | 14px | Escala publicada de tamaños de texto; elige el rol correspondiente a la jerarquía de la información. |
| --intergalactic-fs-300 | 16px | Escala publicada de tamaños de texto; elige el rol correspondiente a la jerarquía de la información. |
| --intergalactic-fs-400 | 20px | Escala publicada de tamaños de texto; elige el rol correspondiente a la jerarquía de la información. |
| --intergalactic-fs-500 | 24px | Escala publicada de tamaños de texto; elige el rol correspondiente a la jerarquía de la información. |
| --intergalactic-fs-600 | 32px | Escala publicada de tamaños de texto; elige el rol correspondiente a la jerarquía de la información. |
| --intergalactic-fs-700 | 36px | Escala publicada de tamaños de texto; elige el rol correspondiente a la jerarquía de la información. |
| --intergalactic-fs-800 | 48px | Escala publicada de tamaños de texto; elige el rol correspondiente a la jerarquía de la información. |
### Espaciado

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --intergalactic-spacing-1x | 4px | Espaciado con nombre definido en la hoja de estilos del tema. |
| --intergalactic-spacing-2x | 8px | Espaciado con nombre definido en la hoja de estilos del tema. |
| --intergalactic-spacing-3x | 12px | Espaciado con nombre definido en la hoja de estilos del tema. |
| --intergalactic-spacing-4x | 16px | Espaciado con nombre definido en la hoja de estilos del tema. |
| --intergalactic-spacing-5x | 20px | Espaciado con nombre definido en la hoja de estilos del tema. |
| --intergalactic-spacing-6x | 24px | Espaciado con nombre definido en la hoja de estilos del tema. |
| --intergalactic-spacing-8x | 32px | Espaciado con nombre definido en la hoja de estilos del tema. |
| --intergalactic-spacing-10x | 40px | Espaciado con nombre definido en la hoja de estilos del tema. |
| --intergalactic-spacing-05x | 2px | Espaciado con nombre definido en la hoja de estilos del tema. |
### Esquinas

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --intergalactic-rounded-extra-small | 2px | Usa el radio de esquina adecuado para cada componente, en lugar de aplicar un radio grande universal. |
| --intergalactic-rounded-small | 4px | Usa el radio de esquina adecuado para cada componente, en lugar de aplicar un radio grande universal. |
| --intergalactic-rounded-medium | 6px | Usa el radio de esquina adecuado para cada componente, en lugar de aplicar un radio grande universal. |
| --intergalactic-rounded-large | 12px | Usa el radio de esquina adecuado para cada componente, en lugar de aplicar un radio grande universal. |
| --intergalactic-rounded-extra-large | 24px | Usa el radio de esquina adecuado para cada componente, en lugar de aplicar un radio grande universal. |
### Los seis primeros colores de gráfico

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --intergalactic-chart-palette-order-1 | oklch(0.58 0.168 278.2) | Color ordenado de la serie de datos. El ejemplo usa el primer rol para una sola serie. |
| --intergalactic-chart-palette-order-2 | oklch(0.82 0.15 170) | Color ordenado de la serie de datos. El ejemplo usa el primer rol para una sola serie. |
| --intergalactic-chart-palette-order-3 | oklch(0.74 0.17 303) | Color ordenado de la serie de datos. El ejemplo usa el primer rol para una sola serie. |
| --intergalactic-chart-palette-order-4 | oklch(0.82 0.18 80) | Color ordenado de la serie de datos. El ejemplo usa el primer rol para una sola serie. |
| --intergalactic-chart-palette-order-5 | oklch(0.74 0.19 22) | Color ordenado de la serie de datos. El ejemplo usa el primer rol para una sola serie. |
| --intergalactic-chart-palette-order-6 | oklch(0.82 0.088 272.1) | Color ordenado de la serie de datos. El ejemplo usa el primer rol para una sola serie. |
## Semrush Intergalactic Guía completa del sistema de diseño

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

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

## Semrush Intergalactic Diseño del espacio de trabajo analítico del sistema de diseño

### Define una pregunta concreta para la comparación

> El ejemplo compara seis palabras clave ficticias mediante una métrica seleccionada. Encima de los resultados hay un filtro, una opción para mostrar solo los elementos seguidos y botones para elegir la métrica. Un inspector independiente muestra ambas métricas para el término seleccionado, lo que permite comparar una vista de clasificación con los valores subyacentes.

### Distingue los datos de ejemplo de los datos medidos

Todos los números forman parte de un conjunto de datos fijo y se identifican como ilustrativos. La página no presenta el volumen de búsqueda ni la dificultad como mediciones actuales de Semrush. Las barras no se basan en consultas de red, una cuenta de analítica ni datos de clientes descargados.

## Semrush Intergalactic Generación de temas y tokens del sistema de diseño

### Usa deliberadamente el paquete de tema actual

El entorno de ejecución fija @semcore/ui 17.6.0 y @semcore/theme 2.3.1. Los componentes nativos necesitan la versión actual del paquete de temas, y la entrada importa su archivo light.css. La tabla conserva los valores OKLCH de esa hoja de estilos en lugar de sustituirlos por valores hexadecimales antiguos y no relacionados.

### Mantén separados los roles de los componentes y los gráficos

Los controles nativos obtienen su aspecto de los estilos de Intergalactic, mientras que la comparación de barras original usa el rol de la primera serie de la paleta del gráfico. La selección se indica mediante un fondo de fila discreto y un estado presionado. No se debe reutilizar indiscriminadamente el color de una serie para todas las acciones o errores.

## Sistema de diseño Semrush Intergalactic: tipografía para resultados densos

### Mantén juntos las etiquetas, las unidades y los valores

Cada fila de barras incluye el término y un valor numérico escrito. La nota pequeña del eje especifica si la escala corresponde a búsquedas de muestra o a una puntuación sobre 100. El inspector repite ambas unidades para evitar que una longitud de barra visualmente similar dé a entender que las métricas son intercambiables.

### Usa texto compacto sin ocultar el contexto

El campo de entrada nativo usa el tamaño grande para ofrecer un área cómoda de filtrado. Las etiquetas de los resultados son compactas, mientras que el título del espacio de trabajo y los encabezados de sección son más grandes. En una pantalla estrecha, la palabra clave pasa encima de la barra y el valor en lugar de truncarse hasta quedar ilegible.

## Sistema de diseño Semrush Intergalactic: escala y ordenación de gráficos

### Mantén una escala estable al filtrar

El gráfico de volumen siempre usa un máximo de 8,100 y el gráfico de dificultad, uno de 100. El filtrado no amplía la barra restante más larga hasta ocupar todo el ancho. Esta decisión de diseño conserva el sentido de la comparación cuando el usuario reduce el conjunto.

### Ordena según la métrica activa

La misma métrica seleccionada determina el orden descendente, el ancho de las barras, las etiquetas numéricas y el título de la sección. El volumen y la dificultad nunca se suman ni se promedian. Antes de sustituir estos datos de ejemplo transparentes por datos medidos, un producto real debe definir la procedencia de las métricas y los intervalos temporales.

## Sistema de diseño Semrush Intergalactic: campo de entrada y casilla nativos

### Usa la estructura compuesta del campo de entrada

Input proporciona el componente contenedor e Input.Value, el control editable propiamente dicho. Su función de devolución de llamada onChange recibe primero el valor de tipo cadena, a diferencia de un evento de cambio DOM estándar. La etiqueta visible apunta al id de Value.

### Mantén independientes los filtros booleanos y de texto

La función onChange de Checkbox, el componente nativo, recibe el valor booleano checked. El filtrado de texto y el estado de solo palabras clave seguidas se combinan al obtener las filas, por lo que cualquiera de los dos puede generar legítimamente un resultado vacío. Restablecer los filtros recupera el estado de ambos controles y conserva el contexto seleccionado en el inspector.

## Sistema de diseño Semrush Intergalactic: detalle seleccionado y estado vacío

### Mantén la selección vinculada a la identidad

El término seleccionado se almacena independientemente del orden del arreglo. Al hacer clic en una barra, se actualizan ese término y su estado presionado, mientras que el inspector busca el registro completo en los datos de ejemplo. Ordenar por otra métrica no puede hacer que el inspector apunte en silencio a una fila con un índice distinto.

### Explica si la selección se conserva fuera del filtro

Si el término seleccionado deja de estar visible, el inspector sigue disponible y muestra una explicación por escrito. Esto resulta útil al comparar un elemento antes y después de filtrarlo. La región de resultados vacíos ofrece una acción explícita para restablecer los filtros en lugar de mostrar un panel de gráfico en blanco.

## Sistema de diseño Semrush Intergalactic para la comparación accesible de datos

### Haz que el gráfico se entienda sin depender del color

Las barras son elementos span decorativos dentro de botones reales. El término y el valor conforman el texto accesible, y aria-pressed identifica la selección. Los datos siguen siendo comprensibles sin ver la longitud de las barras ni el tono de la serie. El foco del teclado se distingue visualmente del estilo de la fila seleccionada.

1. Elige Difficulty e inspecciona las barras reordenadas y la unidad de puntuación.

2. Filtra con un término que no coincida y usa Restablecer filtros.

3. Selecciona un término, exclúyelo con el filtro y lee la explicación de que se conserva la selección.

### Prueba cómo recuperar los filtros

El campo de entrada nativo y la casilla exponen sus controles reales. Los cambios de métrica usan botones con estado presionado, y la acción de restablecimiento original borra ambos filtros. El diseño mantiene visibles el título de los resultados y la nota de unidades para que los estados vacíos y los que contienen resultados conserven el mismo contexto.

## Sistema de diseño Semrush Intergalactic: importaciones de componentes y configuración del tema

### Importa los puntos de entrada de cada componente

La raíz de @semcore/ui lanza intencionalmente un error en lugar de exportar todos los componentes. Este código importa button, input y checkbox desde sus puntos de entrada específicos e importa @semcore/theme/light.css. La entrada completa incluye los datos de ejemplo y toda la lógica de derivación.

- Importaciones específicas de @semcore/ui/button, input y checkbox.

- @semcore/theme/light.css fijado a una versión concreta.

- Lógica de los datos de ejemplo y de las barras con escala fija original incluida en el JSX completo.

### No presentes las barras personalizadas como un gráfico D3 nativo

Los controles son componentes nativos de Intergalactic; la comparación de barras es una implementación accesible original HTML y CSS. Si una tarea de producción requiere información sobre herramientas, ejes, interacción de selección por arrastre o grandes conjuntos de datos, elige e integra explícitamente el componente de gráficos adecuado en lugar de atribuir esas capacidades a este pequeño ejemplo.

## Semrush Intergalactic Ejemplos de componentes del sistema de diseño

### main.jsx — ejemplo completo y funcional

Compara un conjunto ficticio de palabras clave. El código siguiente es la entrada React completa e incluye todo el estado y la validación.

```
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import Button from "@semcore/ui/button";
import Input from "@semcore/ui/input";
import Checkbox from "@semcore/ui/checkbox";
import "@semcore/theme/light.css";
import "./intergalactic.css";
const data = [
  { term: "design tokens", volume: 8100, difficulty: 42, tracked: true },
  { term: "component library", volume: 6600, difficulty: 58, tracked: false },
  { term: "accessible forms", volume: 2900, difficulty: 31, tracked: true },
  {
    term: "responsive typography",
    volume: 1900,
    difficulty: 24,
    tracked: false,
  },
  { term: "semantic colors", volume: 1300, difficulty: 18, tracked: false },
  { term: "design system audit", volume: 720, difficulty: 36, tracked: true },
];
function App() {
  const [q, setQ] = useState(""),
    [tracked, setTracked] = useState(false),
    [metric, setMetric] = useState("volume"),
    [selected, setSelected] = useState("design tokens");
  const rows = data
    .filter((d) => d.term.includes(q.toLowerCase()) && (!tracked || d.tracked))
    .sort((a, b) => b[metric] - a[metric]);
  const max = metric === "volume" ? 8100 : 100;
  const item = data.find((d) => d.term === selected);
  return (
    <main className="research">
      <header>
        <p>RESEARCH WORKSPACE / FICTIONAL DATA</p>
        <h1>Compare a keyword set</h1>
        <span>
          Six authored sample records · figures are illustrative, not Semrush
          measurements
        </span>
      </header>
      <div className="research-toolbar">
        <div className="research-search">
          <label htmlFor="term-search">Filter keywords</label>
          <Input size="l">
            <Input.Value
              id="term-search"
              placeholder="Find a sample term"
              value={q}
              onChange={setQ}
            />
          </Input>
        </div>
        <Checkbox
          label="Tracked only"
          checked={tracked}
          onChange={setTracked}
        />
        <div
          className="metric-options"
          role="group"
          aria-label="Comparison metric"
        >
          <Button
            use={metric === "volume" ? "primary" : "secondary"}
            aria-pressed={metric === "volume"}
            onClick={() => setMetric("volume")}
          >
            Volume
          </Button>
          <Button
            use={metric === "difficulty" ? "primary" : "secondary"}
            aria-pressed={metric === "difficulty"}
            onClick={() => setMetric("difficulty")}
          >
            Difficulty
          </Button>
        </div>
      </div>
      <div className="research-grid">
        <section className="chart-panel">
          <div className="chart-heading">
            <h2>
              {metric === "volume"
                ? "Illustrative monthly volume"
                : "Illustrative difficulty score"}
            </h2>
            <span>{rows.length} terms</span>
          </div>
          <p className="axis-note">
            {metric === "volume"
              ? "Fixed scale: 0–8,100 sample searches"
              : "Fixed scale: 0–100 sample score"}
          </p>
          {rows.length ? (
            <div className="bars">
              {rows.map((r) => (
                <button
                  className={
                    "bar-row " + (r.term === selected ? "selected" : "")
                  }
                  key={r.term}
                  onClick={() => setSelected(r.term)}
                  aria-pressed={r.term === selected}
                >
                  <span className="bar-name">{r.term}</span>
                  <span className="bar-track" aria-hidden="true">
                    <i style={{ width: (r[metric] / max) * 100 + "%" }} />
                  </span>
                  <strong>{r[metric].toLocaleString("en-US")}</strong>
                </button>
              ))}
            </div>
          ) : (
            <div className="no-results">
              <h3>No matching terms</h3>
              <p>
                Clear the text and tracked filter to restore the full
                comparison.
              </p>
              <Button
                onClick={() => {
                  setQ("");
                  setTracked(false);
                }}
              >
                Reset filters
              </Button>
            </div>
          )}
          <p className="chart-note">
            Values are written beside every bar. Click a term to inspect both
            metrics.
          </p>
        </section>
        <aside>
          <h2>{item.term}</h2>
          <dl>
            <dt>Sample volume</dt>
            <dd>{item.volume.toLocaleString("en-US")}</dd>
            <dt>Sample difficulty</dt>
            <dd>{item.difficulty} / 100</dd>
            <dt>Tracking</dt>
            <dd>{item.tracked ? "Tracked" : "Not tracked"}</dd>
          </dl>
          <div className="inspector-note">
            <h3>Comparison context</h3>
            <p>
              The bar scale stays fixed when filters change. Difficulty and
              volume have separate units and are not added together.
            </p>
          </div>
          {!rows.some((r) => r.term === selected) && (
            <p className="retained">
              Selected term is outside the current filter; details are retained.
            </p>
          )}
        </aside>
      </div>
      <footer>
        Native Intergalactic Input, Checkbox and Button from @semcore/ui 17.6.0.
        Original accessible HTML bar comparison; no analytics service request.
      </footer>
    </main>
  );
}
createRoot(document.getElementById("root")).render(<App />);
```

Referencia de código

- Crea un proyecto Vite React, conserva <div id="root"></div> y cárgalo como src/main.jsx.

### intergalactic.css — composición adaptable original

Diseño de la aplicación con capas alrededor de los componentes nativos.

```
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font:
    14px/1.5 Arial,
    sans-serif;
  color: var(--intergalactic-text-primary);
  background: #fff;
}
.research {
  padding: 28px;
}
.research header {
  border-bottom: 1px solid #e0e1e9;
  padding-bottom: 24px;
}
.research header p {
  font-size: 12px;
  color: #6c6e79;
  margin: 0 0 10px;
  letter-spacing: 0.07em;
}
.research h1 {
  font-size: 28px;
  margin: 0 0 8px;
}
.research header span {
  color: #6c6e79;
}
.research-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  padding: 24px 0;
}
.research-search {
  min-width: 220px;
  flex: 1;
}
.research-search label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}
.metric-options {
  display: flex;
  gap: 8px;
}
.research-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(250px, 0.8fr);
  gap: 24px;
}
.chart-panel,
.research aside {
  border: 1px solid #c4c7cf;
  border-radius: 8px;
  padding: 24px;
  min-width: 0;
}
.chart-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.research h2 {
  font-size: 18px;
  margin: 0;
}
.chart-heading > span,
.axis-note,
.chart-note {
  font-size: 12px;
  color: #6c6e79;
}
.axis-note {
  margin: 8px 0 24px;
}
.bar-row {
  display: grid;
  grid-template-columns: 165px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  background: white;
  text-align: left;
  padding: 12px 8px;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.bar-row.selected {
  background: #f0e8ff;
}
.bar-name {
  font-size: 13px;
}
.bar-track {
  height: 18px;
  background: #f4f5f9;
  border-radius: 3px;
  overflow: hidden;
}
.bar-track i {
  display: block;
  height: 100%;
  background: var(--intergalactic-chart-palette-order-1);
  border-radius: 3px;
}
.bar-row strong {
  text-align: right;
  font-size: 12px;
}
.bar-row:focus-visible {
  outline: 2px solid #008ff8;
  outline-offset: 2px;
}
.chart-note {
  margin-top: 24px;
}
.research dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  margin: 24px 0;
}
.research dt {
  color: #6c6e79;
}
.research dd {
  margin: 0;
  font-weight: 600;
}
.inspector-note {
  padding: 16px;
  background: #f4f5f9;
  border-radius: 6px;
}
.inspector-note h3 {
  font-size: 14px;
  margin: 0 0 8px;
}
.inspector-note p {
  font-size: 12px;
  margin: 0;
}
.retained {
  font-size: 12px;
  margin: 16px 0 0;
}
.no-results {
  text-align: center;
  padding: 32px 16px;
}
.no-results h3 {
  font-size: 18px;
}
.research footer {
  font-size: 12px;
  color: #6c6e79;
  margin-top: 24px;
}
@media (max-width: 950px) {
  .research-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 550px) {
  .research {
    padding: 16px;
  }
  .chart-panel,
  .research aside {
    padding: 16px;
  }
  .research-toolbar {
    gap: 16px;
  }
  .research-search {
    flex-basis: 100%;
  }
  .bar-row {
    grid-template-columns: minmax(0, 1fr) 50px;
    gap: 8px;
  }
  .bar-name {
    grid-column: 1/-1;
  }
  .bar-track {
    grid-column: 1;
  }
  .metric-options {
    flex-wrap: wrap;
  }
}
```

Referencia de código

- Guárdalo junto a main.jsx. Estas reglas de composición personalizadas se distinguen de la referencia de tokens de la biblioteca.

## Semrush Intergalactic Configuración del agente de IA para el sistema de diseño

### Punto de partida para la implementación

El ejemplo nativo fijado se empaquetó y se comprobó localmente en el navegador. El ejemplo utiliza únicamente el estado local de la aplicación.

```
npm create vite@latest intergalactic-compare -- --template react
cd intergalactic-compare
npm install
npm install react@18.3.1 react-dom@18.3.1 @semcore/ui@17.6.0 @semcore/theme@2.3.1 @semcore/icon@17.3.0 @semcore/illustration
# Replace src/main.jsx and add src/intergalactic.css.
npm run dev
```

### Una instrucción para tu proyecto

```
Crea una comparación analítica compacta con controles nativos de Intergalactic, importaciones específicas y los tokens actuales del tema. Mantén coherentes las unidades, las escalas fijas, la ordenación y la identidad seleccionada. Proporciona valores textuales y una opción de recuperación para el estado vacío. Identifica con precisión las métricas de ejemplo y el código de gráfico original; no afirmes que son datos medidos de Semrush.
```

## Semrush Intergalactic Fuentes y alcance del sistema de diseño

OpenDesign Guía de aplicación. Los seis registros de palabras clave y todas las métricas son ficticios. Los controles nativos de Intergalactic rodean un gráfico HTML original; no es un informe de Semrush ni una implementación de gráficos D3 nativa.

- Campo de entrada de Intergalactic Composición del campo de entrada nativo y orientación sobre su tamaño.

- Tokens de Intergalactic Roles semánticos de los tokens de diseño.

- Exportación del tema fijada a una versión concreta Valores reales utilizados por el espécimen local.

- Fuente oficial Entradas de componentes, API públicas y bibliotecas de gráficos.

## Recursos relacionados con el sistema de diseño Semrush Intergalactic

### ServiceNow Horizon

Explora las referencias exactas de espaciado, radio y tipografía de Horizon Workspace mediante un flujo local completo de revisión de solicitudes, con conservación de borradores, validación, filtros de estado y opciones de recuperación.

### ServiceTitan Anvil

Concreta Anvil2 con su modelo de tokens de tres niveles, valores de roles verificados para los modos claro y oscuro, y una interacción completa de asignación de servicios con estados sincronizados de técnico, hora y revisión.

### Siemens iX

Inspecciona eventos industriales con un vocabulario de severidad explícito, roles de color adaptados al tema y iX Event List API. Esta guía crea un cuaderno local de equipos sin confundir un registro revisado con una alarma de máquina resuelta.


- [Referencia de implementación](https://developer.semrush.com/intergalactic/components/input/input)
- [Fuente](https://cdn.jsdelivr.net/npm/@semcore/theme@2.3.1/lib/light.css)
- [Referencia de código](https://developer.semrush.com/intergalactic/components/input/input)
- [Campo de entrada de Intergalactic Composición del campo de entrada nativo y orientación sobre su tamaño.](https://developer.semrush.com/intergalactic/components/input/input)
- [Tokens de Intergalactic Roles semánticos de los tokens de diseño.](https://developer.semrush.com/intergalactic/style/design-tokens/design-tokens)
- [Exportación del tema fijada a una versión concreta Valores reales utilizados por el espécimen local.](https://cdn.jsdelivr.net/npm/@semcore/theme@2.3.1/lib/light.css)
- [Fuente oficial Entradas de componentes, API públicas y bibliotecas de gráficos.](https://github.com/semrush/intergalactic)